{% extends "base.html" %}
{% block title %}审核队列 - findyou{% endblock %}
{% block nav_reviews %}bg-gray-700{% endblock %}

{% block content %}
<div x-data="reviewWorkspace()" x-init="fetchReviews()" class="space-y-6">
    <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-gray-800">审核队列</h2>
        <div class="flex gap-4">
            <div class="bg-white rounded-lg shadow px-4 py-2">
                <span class="text-sm text-gray-500">待审核</span>
                <span x-text="reviews.length" class="ml-2 text-lg font-bold text-gray-800"></span>
            </div>
            <div class="bg-white rounded-lg shadow px-4 py-2">
                <span class="text-sm text-gray-500">今日已处理</span>
                <span x-text="processedToday" class="ml-2 text-lg font-bold text-gray-800"></span>
            </div>
        </div>
    </div>

    <div class="flex gap-2">
        <button @click="filter = 'pending'; fetchReviews()"
                :class="filter === 'pending' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                class="px-4 py-2 rounded-lg text-sm shadow transition">待审核</button>
        <button @click="filter = 'approved'; fetchReviews()"
                :class="filter === 'approved' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                class="px-4 py-2 rounded-lg text-sm shadow transition">已批准</button>
        <button @click="filter = 'rejected'; fetchReviews()"
                :class="filter === 'rejected' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                class="px-4 py-2 rounded-lg text-sm shadow transition">已拒绝</button>
    </div>

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

    <template x-for="review in reviews" :key="review.id">
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between items-start">
                <div>
                    <h3 x-text="review.candidate_id || '未知候选人'" class="text-lg font-bold text-gray-800"></h3>
                    <p x-text="'岗位: ' + (review.position_id || '-')" class="text-sm text-gray-500 mt-1"></p>
                    <p x-text="'类型: ' + review.review_type" class="text-sm text-gray-500"></p>
                </div>
                <span x-text="review.match_score != null ? review.match_score + '分' : '-'"
                      class="px-3 py-1 rounded-full text-sm font-medium"
                      :class="review.match_score >= 85 ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'">
                </span>
            </div>

            <div x-show="review.expanded" x-transition class="mt-4 space-y-3">
                <div>
                    <p class="text-sm font-medium text-gray-700">候选人摘要</p>
                    <p x-text="review.candidate_summary || '无摘要'" class="text-sm text-gray-600 mt-1"></p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-700">生成邮件</p>
                    <textarea x-model="review.edited_message"
                              class="w-full mt-1 p-2 border border-gray-300 rounded font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                              rows="6"></textarea>
                </div>
                <div x-show="review.risk_warning" class="p-3 bg-red-50 rounded border border-red-200">
                    <p class="text-sm font-medium text-red-700">⚠ 风险提示</p>
                    <p x-text="review.risk_warning" class="text-sm text-red-600 mt-1"></p>
                </div>
            </div>

            <div class="flex gap-2 mt-4">
                <button @click="review.expanded = !review.expanded"
                        class="px-3 py-1 text-sm text-blue-600 hover:underline">
                    <span x-text="review.expanded ? '收起' : '展开'"></span>
                </button>
                <template x-if="filter === 'pending'">
                    <div class="flex gap-2">
                        <button @click="approve(review.id)"
                                class="px-4 py-1 bg-green-500 text-white rounded text-sm hover:bg-green-600 transition">
                            批准
                        </button>
                        <button @click="reject(review.id)"
                                class="px-4 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition">
                            拒绝
                        </button>
                        <button @click="edit(review.id)"
                                class="px-4 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition">
                            编辑后批准
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <div x-show="reviews.length === 0 && !loading" class="text-center text-gray-500 py-12">
        <p class="text-lg">暂无审核项</p>
    </div>
</div>
{% endblock %}