{% extends "base.html" %}
{% block title %}系统配置 - findyou{% endblock %}
{% block nav_config %}bg-gray-700{% endblock %}

{% block content %}
<div x-data="configManager()" x-init="fetchConfig()" class="space-y-6">
    <h2 class="text-2xl font-bold text-gray-800">系统配置</h2>

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

    <div x-show="!loading" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <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-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">模式</span>
                    <span x-text="data.runtime?.mode" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">时区</span>
                    <span x-text="data.runtime?.timezone" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">数据库路径</span>
                    <span x-text="data.database?.path" class="text-sm font-medium"></span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">LLM 配置</h3>
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Provider</span>
                    <span x-text="data.llm?.provider" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">模型</span>
                    <span x-text="data.llm?.model" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">API Base URL</span>
                    <span x-text="data.llm?.base_url || '-'" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">API Key</span>
                    <span x-text="data.llm?.api_key_set ? '已设置' : '未设置'"
                          :class="data.llm?.api_key_set ? 'text-green-600' : 'text-red-600'"
                          class="text-sm font-medium"></span>
                </div>
            </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-2">
                <template x-for="(enabled, name) in data.discovery || {}" :key="name">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-500" x-text="name"></span>
                        <span class="px-2 py-0.5 text-xs rounded-full"
                              :class="enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'"
                              x-text="enabled ? '启用' : '禁用'"></span>
                    </div>
                </template>
            </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-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">最小间隔 (小时)</span>
                    <span x-text="data.outreach?.min_interval_hours" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Follow-up</span>
                    <span x-text="data.outreach?.followup_enabled ? '启用' : '禁用'" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">Follow-up 间隔</span>
                    <span x-text="(data.outreach?.followup_intervals || []).join(', ')" class="text-sm font-medium"></span>
                </div>
            </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-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">拒绝阈值</span>
                    <span x-text="data.scoring?.reject_below" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">人工审核阈值</span>
                    <span x-text="data.scoring?.human_review_below" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">自动发送阈值</span>
                    <span x-text="data.scoring?.auto_send_from" class="text-sm font-medium"></span>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">FAQ 配置</h3>
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">启用</span>
                    <span x-text="data.faq?.enabled ? '是' : '否'" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">匹配阈值</span>
                    <span x-text="data.faq?.match_threshold" class="text-sm font-medium"></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500">FAQ 条目数</span>
                    <span x-text="data.faq?.items_count" class="text-sm font-medium"></span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}