{% extends "base.html" %}
{% block title %}候选人 - findyou{% endblock %}
{% block nav_candidates %}bg-gray-700{% endblock %}

{% block content %}
<div x-data="candidateManager()" x-init="fetchCandidates()" class="space-y-6">
    <h2 class="text-2xl font-bold text-gray-800">候选人管理</h2>

    <div class="flex gap-4">
        <input x-model="search" @input.debounce.300ms="fetchCandidates()"
               class="flex-1 p-2 border rounded-lg text-sm" placeholder="搜索姓名/邮箱/GitHub...">
        <select x-model="statusFilter" @change="fetchCandidates()"
                class="p-2 border rounded-lg text-sm">
            <option value="">全部状态</option>
            <option value="ACTIVE">活跃</option>
            <option value="ENGAGED">已互动</option>
            <option value="NOT_INTERESTED">不感兴趣</option>
            <option value="PAUSED">已暂停</option>
            <option value="DO_NOT_CONTACT">停止触达</option>
        </select>
    </div>

    <div x-show="loading" class="text-center text-gray-500 py-12">加载中...</div>

    <div x-show="candidates.length > 0" class="bg-white rounded-lg shadow overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50 border-b">
                <tr>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">姓名</th>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">邮箱</th>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">GitHub</th>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">公司</th>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">状态</th>
                    <th class="text-left p-3 text-sm font-medium text-gray-700">操作</th>
                </tr>
            </thead>
            <tbody>
                <template x-for="c in candidates" :key="c.id">
                    <tr class="border-b hover:bg-gray-50 transition">
                        <td class="p-3 text-sm">
                            <a :href="'/candidates/' + c.id" x-text="c.name || c.id" class="text-blue-600 hover:underline"></a>
                        </td>
                        <td class="p-3 text-sm text-gray-600" x-text="c.email || '-'"></td>
                        <td class="p-3 text-sm text-gray-600" x-text="c.github_username || '-'"></td>
                        <td class="p-3 text-sm text-gray-600" x-text="c.company || '-'"></td>
                        <td class="p-3">
                            <span class="px-2 py-0.5 text-xs rounded-full font-medium"
                                  :class="{
                                      'bg-green-100 text-green-800': c.global_status === 'ACTIVE',
                                      'bg-blue-100 text-blue-800': c.global_status === 'ENGAGED',
                                      'bg-gray-100 text-gray-800': c.global_status === 'PAUSED',
                                      'bg-red-100 text-red-800': c.global_status === 'DO_NOT_CONTACT',
                                      'bg-yellow-100 text-yellow-800': c.global_status === 'NOT_INTERESTED'
                                  }"
                                  x-text="c.global_status"></span>
                        </td>
                        <td class="p-3">
                            <div class="flex gap-1">
                                <button x-show="c.global_status === 'ACTIVE'" @click="pauseCandidate(c.id)"
                                        class="text-xs text-yellow-600 hover:underline">暂停</button>
                                <button x-show="c.global_status === 'PAUSED'" @click="resumeCandidate(c.id)"
                                        class="text-xs text-green-600 hover:underline">恢复</button>
                                <button x-show="c.global_status !== 'DO_NOT_CONTACT'" @click="stopCandidate(c.id)"
                                        class="text-xs text-red-600 hover:underline">停止</button>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <div x-show="candidates.length === 0 && !loading" class="text-center text-gray-500 py-12">
        <p class="text-lg">暂无候选人</p>
    </div>
</div>
{% endblock %}