{% extends "base.html" %}
{% block title %}仪表盘 - findyou{% endblock %}
{% block nav_dashboard %}bg-gray-700{% endblock %}

{% block content %}
<div x-data="dashboard()" x-init="fetchOverview()" class="space-y-6">
    <h2 class="text-2xl font-bold text-gray-800">仪表盘</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">活跃岗位</p>
                    <p x-text="data.positions?.active ?? 0" class="text-3xl font-bold text-gray-800"></p>
                    <p class="text-xs text-gray-400" x-text="'共 ' + (data.positions?.total ?? 0) + ' 个'"></p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <span class="text-blue-600 text-xl">📋</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">活跃候选人</p>
                    <p x-text="data.candidates?.active ?? 0" class="text-3xl font-bold text-gray-800"></p>
                    <p class="text-xs text-gray-400" x-text="'共 ' + (data.candidates?.total ?? 0) + ' 人'"></p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <span class="text-green-600 text-xl">👥</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">已触达</p>
                    <p x-text="data.outreach?.contacted ?? 0" class="text-3xl font-bold text-gray-800"></p>
                    <p class="text-xs text-gray-400" x-text="'回复率 ' + (data.outreach?.reply_rate ?? 0) + '%'"></p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <span class="text-purple-600 text-xl">📧</span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">待审核</p>
                    <p x-text="data.reviews?.pending ?? 0" class="text-3xl font-bold text-gray-800"></p>
                    <p class="text-xs text-gray-400">需人工处理</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <span class="text-yellow-600 text-xl">⏳</span>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Agent 状态</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="text-center">
                <p class="text-sm text-gray-500">运行状态</p>
                <p class="text-lg font-medium mt-1">
                    <span x-show="data.agent?.running" class="text-green-600">运行中</span>
                    <span x-show="!data.agent?.running" class="text-red-600">已停止</span>
                </p>
            </div>
            <div class="text-center">
                <p class="text-sm text-gray-500">循环次数</p>
                <p x-text="data.agent?.loop_count ?? 0" class="text-lg font-medium mt-1 text-gray-800"></p>
            </div>
            <div class="text-center">
                <p class="text-sm text-gray-500">紧急停止</p>
                <p class="text-lg font-medium mt-1">
                    <span x-show="data.agent?.emergency_stop" class="text-red-600">已激活</span>
                    <span x-show="!data.agent?.emergency_stop" class="text-green-600">正常</span>
                </p>
            </div>
        </div>
        <div class="flex gap-2 mt-4">
            <button x-show="!data.agent?.running" @click="startAgent()"
                    class="px-4 py-2 bg-green-500 text-white rounded text-sm hover:bg-green-600 transition">
                启动 Agent
            </button>
            <button x-show="data.agent?.running" @click="stopAgent()"
                    class="px-4 py-2 bg-orange-500 text-white rounded text-sm hover:bg-orange-600 transition">
                停止 Agent
            </button>
            <button x-show="!data.agent?.emergency_stop" @click="emergencyStop()"
                    class="px-4 py-2 bg-red-500 text-white rounded text-sm hover:bg-red-600 transition">
                紧急停止
            </button>
            <button x-show="data.agent?.emergency_stop" @click="resumeAgent()"
                    class="px-4 py-2 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition">
                恢复运行
            </button>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">候选人状态分布</h3>
        <div class="space-y-3">
            <div class="flex items-center gap-4">
                <span class="text-sm text-gray-600 w-24">活跃</span>
                <div class="flex-1 bg-gray-200 rounded-full h-4">
                    <div class="bg-green-500 h-4 rounded-full transition-all duration-500"
                         :style="'width: ' + pct(data.candidates?.active, data.candidates?.total) + '%'"></div>
                </div>
                <span x-text="data.candidates?.active ?? 0" class="text-sm font-medium w-8 text-right"></span>
            </div>
            <div class="flex items-center gap-4">
                <span class="text-sm text-gray-600 w-24">已互动</span>
                <div class="flex-1 bg-gray-200 rounded-full h-4">
                    <div class="bg-blue-500 h-4 rounded-full transition-all duration-500"
                         :style="'width: ' + pct(data.candidates?.engaged, data.candidates?.total) + '%'"></div>
                </div>
                <span x-text="data.candidates?.engaged ?? 0" class="text-sm font-medium w-8 text-right"></span>
            </div>
        </div>
    </div>
</div>
{% endblock %}