{% extends "layout/default.html" %}

{% block main_content %}
<style>
    .config-page {
        min-height: 100%;
        background: #f5f7fb;
        padding: 18px;
    }

    .config-shell {
        max-width: 1040px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #d8dde8;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(18, 38, 63, 0.05);
    }

    .config-header {
        padding: 16px 18px;
        border-bottom: 1px solid #e5e9f1;
    }

    .config-header h3 {
        margin: 0;
        color: #263238;
        font-size: 18px;
        font-weight: 600;
    }

    .config-body {
        padding: 18px;
    }

    .config-field {
        margin-bottom: 18px;
    }

    .config-field label,
    .schedule-label,
    .module-label {
        display: block;
        margin-bottom: 7px;
        color: #334155;
        font-weight: 600;
    }

    .config-field textarea {
        width: 100%;
        min-height: 118px;
        resize: vertical;
        border: 1px solid #cdd6e3;
        border-radius: 4px;
        padding: 8px 10px;
        font-family: Consolas, Monaco, monospace;
        font-size: 12px;
        line-height: 1.5;
        color: #1f2933;
        background: #fff;
    }

    .config-hint {
        margin-top: 6px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.5;
    }

    .config-section-title {
        margin: 24px 0 12px;
        padding-top: 18px;
        border-top: 1px solid #e5e9f1;
        color: #263238;
        font-size: 16px;
        font-weight: 600;
    }

    .schedule-grid {
        display: grid;
        grid-template-columns: 160px 90px minmax(260px, 1fr);
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }

    .schedule-grid input[type="text"] {
        width: 100%;
        height: 32px;
        border: 1px solid #cdd6e3;
        border-radius: 4px;
        padding: 4px 8px;
        font-family: Consolas, Monaco, monospace;
        font-size: 12px;
    }

    .schedule-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #52616f;
        font-weight: 400;
    }

    .module-grid {
        display: grid;
        gap: 8px;
        margin-top: 10px;
    }

    .module-row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) 120px 130px;
        gap: 10px;
        align-items: center;
        padding: 9px 10px;
        border: 1px solid #e4e8f0;
        border-radius: 4px;
        background: #fbfdff;
    }

    .module-label {
        margin-bottom: 0;
    }

    .module-meta {
        color: #64748b;
        font-size: 12px;
    }

    .status-summary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: 10px 0;
    }

    .status-tile {
        border: 1px solid #e4e8f0;
        border-radius: 4px;
        padding: 10px;
        background: #fbfdff;
    }

    .status-tile strong {
        display: block;
        color: #1f2933;
        font-size: 18px;
        line-height: 1.2;
    }

    .status-tile span {
        color: #64748b;
        font-size: 12px;
    }

    .status-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
        font-size: 13px;
    }

    .status-table th,
    .status-table td {
        border: 1px solid #e4e8f0;
        padding: 7px 8px;
        text-align: left;
        white-space: nowrap;
    }

    .status-table th {
        background: #edf3fb;
        color: #1c3f66;
        font-weight: 700;
    }

    .status-pill {
        display: inline-block;
        min-width: 44px;
        padding: 2px 8px;
        border-radius: 10px;
        text-align: center;
        background: #eef2f7;
        color: #475569;
    }

    .status-pill.ok {
        background: #e8f5e9;
        color: #1b7f3a;
    }

    .status-pill.warn {
        background: #fff7e6;
        color: #a15c00;
    }

    .status-pill.disabled {
        background: #f1f5f9;
        color: #64748b;
    }

    .crontab-view {
        width: 100%;
        min-height: 92px;
        margin-top: 8px;
        padding: 8px 10px;
        border: 1px solid #d8dde8;
        border-radius: 4px;
        background: #f8fafc;
        color: #334155;
        font-family: Consolas, Monaco, monospace;
        font-size: 12px;
        white-space: pre-wrap;
        overflow: auto;
    }

    .config-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 14px;
    }

    #configStatus {
        color: #52616f;
        font-size: 13px;
    }

    @media (max-width: 760px) {
        .schedule-grid {
            grid-template-columns: 1fr;
        }

        .module-row,
        .status-summary {
            grid-template-columns: 1fr;
        }

        .status-table {
            display: block;
            overflow-x: auto;
        }
    }
</style>

<div class="config-page">
    <div class="config-shell">
        <div class="config-header">
            <h3>系统配置</h3>
        </div>
        <div class="config-body">
            <div class="config-field">
                <label for="proxyInput">代理配置</label>
                <textarea id="proxyInput" spellcheck="false" placeholder="http://127.0.0.1:7890&#10;http://user:pass@proxy.example.com:8080"></textarea>
                <div class="config-hint">每行一个代理地址，留空表示直连。保存后新的抓取请求会读取最新代理。</div>
            </div>

            <div class="config-field">
                <label for="cookieInput">东方财富 Cookie</label>
                <textarea id="cookieInput" spellcheck="false" placeholder="qgqp_b_id=...; st_si=..."></textarea>
                <div class="config-hint">粘贴浏览器中东方财富站点的 Cookie，留空时系统会尝试自动预热会话 Cookie。</div>
            </div>

            <div class="config-section-title">定时任务</div>
            <div class="config-hint">Cron 表达式使用 5 段格式：分钟 小时 日期 月份 星期。保存后会立即更新容器内 crontab。</div>
            <div class="schedule-grid">
                <div class="schedule-label">交易时段实时行情</div>
                <label class="schedule-toggle"><input type="checkbox" id="realtimeEnabled"> 启用</label>
                <input type="text" id="realtimeCron" spellcheck="false" placeholder="*/30 9,10,11,13,14,15 * * 1-5">
            </div>
            <div class="schedule-grid">
                <div class="schedule-label">收盘后全量计算</div>
                <label class="schedule-toggle"><input type="checkbox" id="dailyEnabled"> 启用</label>
                <input type="text" id="dailyCron" spellcheck="false" placeholder="30 17 * * 1-5">
            </div>
            <div class="schedule-grid">
                <div class="schedule-label">月度/周期补充任务</div>
                <label class="schedule-toggle"><input type="checkbox" id="monthlyEnabled"> 启用</label>
                <input type="text" id="monthlyCron" spellcheck="false" placeholder="30 10 * * 3,6">
            </div>

            <div class="config-section-title">数据模块</div>
            <div class="config-hint">关闭后，每日全量任务会跳过对应模块；已落库数据不会被删除。</div>
            <div id="dataModuleRows" class="module-grid">
                <div class="module-row">正在读取...</div>
            </div>

            <div class="config-section-title">数据聚合状态</div>
            <div id="dataStatusSummary" class="status-summary"></div>
            <table class="status-table">
                <thead>
                    <tr>
                        <th>模块</th>
                        <th>开关</th>
                        <th>最新日期</th>
                        <th>总行数</th>
                        <th>子表</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="dataStatusRows">
                    <tr><td colspan="6">正在读取...</td></tr>
                </tbody>
            </table>

            <div class="config-section-title">当前 Crontab</div>
            <div id="crontabView" class="crontab-view">正在读取...</div>

            <div class="config-actions">
                <button type="button" id="saveConfig" class="btn btn-primary btn-sm">
                    <i class="fa fa-save"></i>
                    保存配置
                </button>
                <button type="button" id="reloadConfig" class="btn btn-default btn-sm">
                    <i class="fa fa-refresh"></i>
                    重新读取
                </button>
                <span id="configStatus"></span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function setConfigStatus(text, isError) {
        $('#configStatus').text(text || '').css('color', isError ? '#d93025' : '#52616f');
    }

    function escapeHtml(value) {
        return $('<div>').text(value).html();
    }

    function renderDataModules(modules) {
        if (!modules.length) {
            $('#dataModuleRows').html('<div class="module-row">暂无数据模块配置</div>');
            return;
        }
        const html = modules.map(function (module) {
            const key = escapeHtml(module.key || '');
            return '<div class="module-row">' +
                '<div class="module-label">' + escapeHtml(module.label || module.key || '') + '</div>' +
                '<label class="schedule-toggle"><input type="checkbox" class="data-module-toggle" data-key="' + key + '"' + (module.enabled ? ' checked' : '') + '> 启用</label>' +
                '<div class="module-meta">' + escapeHtml(String(module.table_count || 0)) + ' 张表</div>' +
                '</div>';
        }).join('');
        $('#dataModuleRows').html(html);
    }

    function collectDataModules() {
        const modules = {};
        $('.data-module-toggle').each(function () {
            modules[$(this).data('key')] = $(this).is(':checked');
        });
        return modules;
    }

    function renderStatusSummary(rows) {
        const total = rows.length;
        const enabled = rows.filter(function (row) { return row.enabled; }).length;
        const ready = rows.filter(function (row) { return row.enabled && row.status === '有数据'; }).length;
        const partial = rows.filter(function (row) { return row.enabled && row.status === '部分有数据'; }).length;
        $('#dataStatusSummary').html(
            '<div class="status-tile"><strong>' + total + '</strong><span>数据模块</span></div>' +
            '<div class="status-tile"><strong>' + enabled + '</strong><span>已启用</span></div>' +
            '<div class="status-tile"><strong>' + ready + '</strong><span>数据完整</span></div>' +
            '<div class="status-tile"><strong>' + partial + '</strong><span>部分有数据</span></div>'
        );
    }

    function statusPillClass(row) {
        if (!row.enabled) {
            return 'disabled';
        }
        if (row.status === '有数据') {
            return 'ok';
        }
        if (row.status === '部分有数据') {
            return 'warn';
        }
        return '';
    }

    function renderDataStatus(rows) {
        if (!rows.length) {
            $('#dataStatusRows').html('<tr><td colspan="6">暂无状态数据</td></tr>');
            renderStatusSummary([]);
            return;
        }
        renderStatusSummary(rows);
        const html = rows.map(function (row) {
            return '<tr>' +
                '<td>' + escapeHtml(row.label || row.table || '') + '</td>' +
                '<td>' + (row.enabled ? '启用' : '关闭') + '</td>' +
                '<td>' + escapeHtml(row.latest_date || '-') + '</td>' +
                '<td>' + escapeHtml(String(row.count || 0)) + '</td>' +
                '<td>' + escapeHtml(String(row.ready_count || 0)) + ' / ' + escapeHtml(String(row.table_count || 0)) + '</td>' +
                '<td><span class="status-pill ' + statusPillClass(row) + '">' + escapeHtml(row.status || '-') + '</span></td>' +
                '</tr>';
        }).join('');
        $('#dataStatusRows').html(html);
    }

    function loadConfig() {
        setConfigStatus('正在读取配置...', false);
        $.getJSON('/instock/config/get')
            .done(function (data) {
                const schedule = data.schedule || {};
                $('#proxyInput').val(data.proxy || '');
                $('#cookieInput').val(data.eastmoney_cookie || '');
                $('#realtimeEnabled').prop('checked', !!schedule.realtime_enabled);
                $('#realtimeCron').val(schedule.realtime_cron || '*/30 9,10,11,13,14,15 * * 1-5');
                $('#dailyEnabled').prop('checked', !!schedule.daily_enabled);
                $('#dailyCron').val(schedule.daily_cron || '30 17 * * 1-5');
                $('#monthlyEnabled').prop('checked', !!schedule.monthly_enabled);
                $('#monthlyCron').val(schedule.monthly_cron || '30 10 * * 3,6');
                renderDataModules(data.data_modules || []);
                renderDataStatus(data.data_status || []);
                $('#crontabView').text(data.crontab || '未读取到 crontab');
                setConfigStatus('配置已读取', false);
            })
            .fail(function () {
                setConfigStatus('配置读取失败', true);
            });
    }

    function saveConfig() {
        setConfigStatus('正在保存...', false);
        $.ajax({
            url: '/instock/config/save',
            method: 'POST',
            dataType: 'json',
            data: {
                proxy: $('#proxyInput').val(),
                eastmoney_cookie: $('#cookieInput').val(),
                realtime_enabled: $('#realtimeEnabled').is(':checked'),
                realtime_cron: $('#realtimeCron').val(),
                daily_enabled: $('#dailyEnabled').is(':checked'),
                daily_cron: $('#dailyCron').val(),
                monthly_enabled: $('#monthlyEnabled').is(':checked'),
                monthly_cron: $('#monthlyCron').val(),
                data_modules: JSON.stringify(collectDataModules())
            }
        }).done(function (data) {
            const proxyText = data.proxy_count ? '代理 ' + data.proxy_count + ' 条' : '未配置代理';
            const cookieText = data.eastmoney_cookie_saved ? 'Cookie 已保存' : 'Cookie 为空';
            const scheduleText = data.schedule_applied ? '定时任务已生效' : '定时任务保存但未应用';
            setConfigStatus('保存成功，' + proxyText + '，' + cookieText + '，' + scheduleText, false);
            loadConfig();
        }).fail(function (xhr) {
            let message = '保存失败，请查看应用日志';
            if (xhr.responseJSON && xhr.responseJSON.error) {
                message = xhr.responseJSON.error;
            }
            setConfigStatus(message, true);
        });
    }

    $(document).ready(function () {
        loadConfig();
        $('#saveConfig').on('click', saveConfig);
        $('#reloadConfig').on('click', loadConfig);
    });
</script>
{% end %}