{% extends "base.html" %}

{% block title %}设置中心 - AgomTradePro{% endblock %}

{% block content %}
{% if request.user.is_staff or request.user.is_superuser %}
    {% include "components/classic_tui_migration_banner.html" with screen_key="api-library.data-center" %}
{% else %}
    {% include "components/classic_tui_migration_banner.html" with screen_key="account.self-service" %}
{% endif %}
<div style="max-width: 1320px; margin: 0 auto; padding: 24px;">
    <div style="display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom: 20px;">
        <div>
            <h1 style="margin-bottom: 10px;">{{ page_title }}</h1>
            <p style="color: #64748b; margin: 0;">{{ page_subtitle }}</p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a href="/api/docs/" class="btn btn-secondary" style="text-decoration:none;">API 文档</a>
            <a href="{% url 'docs' %}" class="btn btn-secondary" style="text-decoration:none;">文档中心</a>
        </div>
    </div>

    {% if featured_items %}
    <section style="margin-bottom: 24px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; gap:12px; flex-wrap:wrap;">
            <h2 style="margin:0; font-size: 20px;">常用入口</h2>
            <span style="font-size:13px; color:#64748b;">统一入口，不再分散找页面</span>
        </div>
        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;">
            {% for item in featured_items %}
            <a href="{{ item.frontend_url }}" style="text-decoration:none; color:inherit;">
                <article style="height:100%; background:linear-gradient(135deg, #ffffff, #f8fafc); border:1px solid #dbe7f5; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px;">
                    <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:12px;">
                        <strong style="font-size:17px;">{{ item.name }}</strong>
                        <span style="
                            padding:4px 10px;
                            border-radius:999px;
                            font-size:12px;
                            font-weight:600;
                            {% if item.status == 'configured' %}background:#dcfce7;color:#166534;{% elif item.status == 'attention' %}background:#fef3c7;color:#92400e;{% elif item.status == 'missing' %}background:#fee2e2;color:#991b1b;{% else %}background:#e2e8f0;color:#334155;{% endif %}
                        ">
                            {{ item.status }}
                        </span>
                    </div>
                    <div style="font-size:13px; color:#64748b; line-height:1.6;">{{ item.description }}</div>
                    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;">
                        {% for key, value in item.summary.items %}
                        <span style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:4px 8px; font-size:12px;">
                            {{ key }}: {{ value }}
                        </span>
                        {% endfor %}
                    </div>
                </article>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <div style="margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(15,23,42,0.03)); border: 1px solid rgba(37,99,235,0.14); color:#334155;">
        <strong>入口规则已收口：</strong>这里统一承接账户、风控、AI、数据源和训练配置；
        “财经数据源配置”负责录入凭据与连接信息，
        “数据中台运行状态”负责健康检查和联调验证。
    </div>

    <div style="display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:12px; margin-bottom: 24px;">
        <input id="config-search" type="text" placeholder="搜索配置名或模块..." style="padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px;">
        <select id="config-section-filter" style="padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px;">
            <option value="">全部分类</option>
            {% for section in sections %}
            <option value="{{ section.key }}">{{ section.title }}</option>
            {% endfor %}
        </select>
        <select id="config-status-filter" style="padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px;">
            <option value="">全部状态</option>
            <option value="configured">已配置</option>
            <option value="attention">需关注</option>
            <option value="missing">缺失</option>
            <option value="api_only">仅 API/MCP</option>
        </select>
    </div>

    {% for section in sections %}
    <section class="config-center-section" data-section-key="{{ section.key }}" style="margin-bottom: 28px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; gap:12px; flex-wrap:wrap;">
            <h2 style="margin:0; font-size: 20px;">{{ section.title }}</h2>
            <span style="font-size:13px; color:#64748b;">{{ section.items|length }} 项</span>
        </div>
        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px;">
            {% for item in section.items %}
            <article
                class="config-card"
                data-section="{{ section.key }}"
                data-status="{{ item.status }}"
                data-search="{{ item.name|lower }} {{ item.module|lower }} {{ item.description|lower }}"
                style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px;"
            >
                <div style="display:flex; justify-content:space-between; gap:12px; align-items:flex-start;">
                    <div>
                        <div style="font-size: 18px; font-weight: 700;">{{ item.name }}</div>
                        <div style="font-size: 13px; color:#64748b; margin-top:4px;">{{ item.description }}</div>
                    </div>
                    <span style="
                        padding:4px 10px;
                        border-radius:999px;
                        font-size:12px;
                        font-weight:600;
                        {% if item.status == 'configured' %}background:#dcfce7;color:#166534;{% elif item.status == 'attention' %}background:#fef3c7;color:#92400e;{% elif item.status == 'missing' %}background:#fee2e2;color:#991b1b;{% else %}background:#e2e8f0;color:#334155;{% endif %}
                    ">
                        {{ item.status }}
                    </span>
                </div>

                <div style="display:flex; gap:8px; flex-wrap:wrap;">
                    <span style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:3px 8px; font-size:12px;">模块 {{ item.module }}</span>
                    <span style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:3px 8px; font-size:12px;">权限 {{ item.permission }}</span>
                    {% if item.frontend_url %}<span style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:999px; padding:3px 8px; font-size:12px;">Frontend</span>{% endif %}
                    {% if item.api_url %}<span style="background:#eef2ff; border:1px solid #c7d2fe; border-radius:999px; padding:3px 8px; font-size:12px;">API</span>{% endif %}
                    {% if item.mcp_tools %}<span style="background:#f5f3ff; border:1px solid #ddd6fe; border-radius:999px; padding:3px 8px; font-size:12px;">MCP</span>{% endif %}
                </div>

                <div style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;">
                    {% for key, value in item.summary.items %}
                    <div style="padding:10px 12px; background:#f8fafc; border-radius:10px;">
                        <div style="font-size:12px; color:#64748b;">{{ key }}</div>
                        <div style="font-size:13px; font-weight:600; word-break:break-word;">{{ value }}</div>
                    </div>
                    {% endfor %}
                </div>

                {% if item.mcp_tools %}
                <div>
                    <div style="font-size:12px; color:#64748b; margin-bottom:6px;">MCP 工具</div>
                    <div style="display:flex; gap:6px; flex-wrap:wrap;">
                        {% for tool in item.mcp_tools %}
                        <code style="background:#0f172a; color:#e2e8f0; padding:4px 8px; border-radius:8px; font-size:11px;">{{ tool }}</code>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;">
                    {% if item.frontend_url %}
                    <a href="{{ item.frontend_url }}" class="btn btn-primary" style="text-decoration:none;">查看{% if item.supports_edit %}/编辑{% endif %}</a>
                    {% endif %}
                    {% if item.api_url %}
                    <a href="{{ item.api_url }}" class="btn btn-secondary" style="text-decoration:none;">API</a>
                    {% endif %}
                    <span style="font-size:12px; color:#64748b; align-self:center;">{{ item.docs_ref }}</span>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endfor %}
</div>

<script>
(() => {
    const searchInput = document.getElementById('config-search');
    const sectionFilter = document.getElementById('config-section-filter');
    const statusFilter = document.getElementById('config-status-filter');
    const cards = Array.from(document.querySelectorAll('.config-card'));
    const sections = Array.from(document.querySelectorAll('.config-center-section'));

    function applyFilters() {
        const keyword = (searchInput.value || '').trim().toLowerCase();
        const sectionValue = sectionFilter.value;
        const statusValue = statusFilter.value;

        cards.forEach((card) => {
            const section = card.dataset.section || '';
            const status = card.dataset.status || '';
            const haystack = card.dataset.search || '';
            const visible =
                (!keyword || haystack.includes(keyword)) &&
                (!sectionValue || section === sectionValue) &&
                (!statusValue || status === statusValue);
            card.style.display = visible ? '' : 'none';
        });

        sections.forEach((section) => {
            const visibleCards = section.querySelectorAll('.config-card:not([style*="display: none"])');
            section.style.display = visibleCards.length > 0 ? '' : 'none';
        });
    }

    [searchInput, sectionFilter, statusFilter].forEach((el) => {
        if (el) el.addEventListener('input', applyFilters);
        if (el && el.tagName === 'SELECT') el.addEventListener('change', applyFilters);
    });
})();
</script>
{% endblock %}