@extends('admin.layouts.main-layout')

@section('content')
<div class="content-header recruiter-header">
    <div class="container-fluid d-flex flex-wrap align-items-center justify-content-between">
        <div>
            <h1 class="m-0">AI Recruiter</h1>
            <p class="text-muted mb-0">Search your legal talent database conversationally.</p>
        </div>
        <div class="d-flex align-items-center mt-2 mt-md-0">
            <select id="conversationSelect" class="form-control form-control-sm mr-2" aria-label="Previous conversations">
                <option value="">New search</option>
                @foreach ($conversations as $conversation)
                    <option value="{{ $conversation->id }}">{{ $conversation->title ?: 'Untitled search' }}</option>
                @endforeach
            </select>
            <button id="newConversation" class="btn btn-outline-primary btn-sm text-nowrap">
                <i class="fas fa-plus mr-1"></i>New
            </button>
        </div>
    </div>
</div>

<section class="content recruiter-page">
    <div class="container-fluid">
        <div class="recruiter-shell">
            <div class="card recruiter-chat-card">
                <div class="card-header border-0">
                    <div class="d-flex align-items-center">
                        <span class="recruiter-avatar"><i class="fas fa-balance-scale"></i></span>
                        <div>
                            <h3 class="card-title d-block float-none">LexLegio Recruiter</h3>
                            <small class="text-muted">Elasticsearch legal talent search</small>
                        </div>
                    </div>
                </div>
                <div class="card-body recruiter-chat" id="chatMessages" aria-live="polite">
                    <div class="recruiter-welcome">
                        <span class="recruiter-avatar recruiter-avatar-lg"><i class="fas fa-user-tie"></i></span>
                        <h4>Who are you looking for?</h4>
                        <p>Describe the title, practice, location, firm, school, or experience you need. I’ll search the Elasticsearch candidate index and help refine the result.</p>
                        <button class="suggestion-chip starter-prompt" data-prompt="Find private equity partners in California with at least 15 years of experience.">
                            Private equity partners in California
                        </button>
                    </div>
                </div>
                <div class="recruiter-status d-none" id="agentStatus">
                    <span class="spinner-border spinner-border-sm mr-2"></span>
                    <span>Understanding your request…</span>
                </div>
                <div class="card-footer recruiter-composer">
                    <form id="recruiterForm">
                        <textarea id="recruiterInput" class="form-control" rows="2" maxlength="4000" placeholder="Ask the AI recruiter…" required></textarea>
                        <button class="btn btn-primary" id="sendButton" type="submit">
                            <i class="fas fa-paper-plane"></i><span class="ml-2">Send</span>
                        </button>
                    </form>
                    <small class="text-muted">Results come only from the Elasticsearch candidate index. AI can search but cannot modify records.</small>
                </div>
            </div>

            <div class="recruiter-results-column">
                <div class="card active-filters-card d-none" id="activeFiltersCard">
                    <div class="card-body py-3">
                        <div class="filter-heading">Active filters</div>
                        <div id="activeFilters" class="filter-chip-list"></div>
                    </div>
                </div>

                <div id="suggestionsPanel" class="card d-none">
                    <div class="card-body py-3">
                        <div class="filter-heading">You could try</div>
                        <div id="suggestedRefinements" class="suggestion-list"></div>
                    </div>
                </div>

                <div class="results-layout">
                    <aside class="card facets-card d-none" id="facetsCard">
                        <div class="card-header"><h3 class="card-title">Refine results</h3></div>
                        <div class="card-body" id="facets"></div>
                    </aside>

                    <div class="card results-card">
                        <div class="card-header border-0 d-flex align-items-center justify-content-between">
                            <div>
                                <h3 class="card-title">Candidate results</h3>
                                <div class="result-count text-muted" id="resultCount">Start a search to see matching candidates.</div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table recruiter-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Title</th>
                                            <th>Firm</th>
                                            <th>Location</th>
                                            <th>Practice</th>
                                            <th>Experience</th>
                                        </tr>
                                    </thead>
                                    <tbody id="candidateRows">
                                        <tr><td colspan="6" class="empty-results">No search results yet.</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer d-none" id="pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('headerCssCode')
<link rel="stylesheet" href="{{ asset('css/admin/recruiter.css') }}">
@endsection

@section('footerJsCode')
<script>
window.recruiterConfig = {{ Illuminate\Support\Js::from([
    'streamUrl' => route('recruiter.messages.stream'),
    'sendUrl' => route('recruiter.messages.send'),
    'conversationUrl' => url('/recruiter/conversations'),
    'csrfToken' => csrf_token(),
]) }};
</script>
<script src="{{ asset('js/admin/recruiter.js') }}"></script>
@endsection