{{ define "main" }}
<div class="main-container">
    <aside class="left-sidebar">{{ partial "sidebar-left.html" . }}</aside>
    <main class="main-content">
        <article class="article-content">
            <h1>{{ .Title }}</h1>
            <div id="ssq-app">
                <section class="ssq-section">
                    <h2>📊 最新开奖</h2>
                    <div id="ssq-latest" class="ssq-card">加载中...</div>
                </section>
                <section class="ssq-section">
                    <h2>🔍 兑奖查询</h2>
                    <div class="ssq-card">
                        <p>输入你的投注号码（6红+1蓝，空格分隔）：</p>
                        <input type="text" id="check-input" placeholder="01 02 03 04 05 06 07" class="ssq-input">
                        <button onclick="checkWin()" class="btn btn-primary">核对中奖</button>
                        <div id="check-result" style="margin-top:12px;"></div>
                    </div>
                </section>
                <section class="ssq-section">
                    <h2>📖 历史开奖</h2>
                    <div id="ssq-history" class="ssq-card">加载中...</div>
                </section>
            </div>
            <style>
                .ssq-section { margin-bottom: 24px; }
                .ssq-card { background: #f8f9fa; padding: 16px 20px; border-radius: 8px; border: 1px solid #eee; }
                .ssq-ball { display: inline-block; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: bold; text-align: center; line-height: 32px; margin: 2px; font-size: 14px; }
                .ssq-ball.red { background: #E62E4D; }
                .ssq-ball.blue { background: #2563EB; }
                .ssq-input { width: 300px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; margin-right: 8px; }
                .ssq-history-item { display: flex; flex-wrap: wrap; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; gap: 12px; }
                .ssq-history-item:last-child { border-bottom: none; }
                .btn-primary { background: #8E44AD; color: #fff; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; }
                .btn-primary:hover { opacity: 0.9; }
            </style>
            <script>
                async function loadSSQData() {
                    try {
                        const latestResp = await fetch('/ssq_data/latest.json');
                        if (latestResp.ok) {
                            const data = await latestResp.json();
                            renderLatest(data);
                        }
                        const historyResp = await fetch('/ssq_data/history.json');
                        if (historyResp.ok) {
                            const data = await historyResp.json();
                            renderHistory(data);
                        }
                    } catch(e) {
                        console.error('加载双色球数据失败:', e);
                        document.getElementById('ssq-latest').innerHTML = '<p>数据加载失败，请稍后重试</p>';
                    }
                }
                function renderLatest(data) {
                    const container = document.getElementById('ssq-latest');
                    if (!data || !data.red) {
                        container.innerHTML = '<p>暂无最新开奖数据</p>';
                        return;
                    }
                    const redHtml = data.red.map(r => `<span class="ssq-ball red">${String(r).padStart(2,'0')}</span>`).join('');
                    const blueHtml = `<span class="ssq-ball blue">${String(data.blue).padStart(2,'0')}</span>`;
                    container.innerHTML = `
                        <p><strong>期号：</strong>${data.issue}</p>
                        <p><strong>日期：</strong>${data.date}</p>
                        <p><strong>开奖号码：</strong>${redHtml} ${blueHtml}</p>
                    `;
                }
                function renderHistory(data) {
                    const container = document.getElementById('ssq-history');
                    if (!data || data.length === 0) {
                        container.innerHTML = '<p>暂无历史数据</p>';
                        return;
                    }
                    let html = '';
                    data.slice(0, 10).forEach(item => {
                        const redHtml = item.red.map(r => `<span class="ssq-ball red">${String(r).padStart(2,'0')}</span>`).join('');
                        const blueHtml = `<span class="ssq-ball blue">${String(item.blue).padStart(2,'0')}</span>`;
                        html += `
                            <div class="ssq-history-item">
                                <span style="min-width:120px;color:#666;">${item.date}</span>
                                <span style="min-width:80px;color:#666;">${item.issue}</span>
                                <span>${redHtml} ${blueHtml}</span>
                            </div>
                        `;
                    });
                    container.innerHTML = html;
                }
                function checkWin() {
                    const input = document.getElementById('check-input');
                    const result = document.getElementById('check-result');
                    const val = input.value.trim();
                    if (!val) {
                        result.innerHTML = '<p style="color:#E62E4D;">请输入投注号码</p>';
                        return;
                    }
                    const nums = val.split(/\s+/);
                    if (nums.length !== 7) {
                        result.innerHTML = '<p style="color:#E62E4D;">请输入6红+1蓝共7个号码</p>';
                        return;
                    }
                    fetch('/ssq_data/latest.json')
                        .then(r => r.json())
                        .then(data => {
                            if (!data || !data.red) {
                                result.innerHTML = '<p>暂无开奖数据</p>';
                                return;
                            }
                            const betRed = nums.slice(0,6).map(Number);
                            const betBlue = Number(nums[6]);
                            const openRed = data.red.map(Number);
                            const openBlue = Number(data.blue);
                            const hitRed = betRed.filter(x => openRed.includes(x)).length;
                            const hitBlue = betBlue === openBlue ? 1 : 0;
                            let level = '未中奖';
                            if (hitRed === 6 && hitBlue === 1) level = '🏆 一等奖';
                            else if (hitRed === 6) level = '🥈 二等奖';
                            else if (hitRed === 5 && hitBlue === 1) level = '🥉 三等奖';
                            else if (hitRed === 5 || (hitRed === 4 && hitBlue === 1)) level = '四等奖';
                            else if (hitRed === 4 || (hitRed === 3 && hitBlue === 1)) level = '五等奖';
                            else if ((hitRed === 2 && hitBlue === 1) || (hitRed === 1 && hitBlue === 1) || hitBlue === 1) level = '六等奖';
                            result.innerHTML = `
                                <p>红球命中：${hitRed}个 | 蓝球命中：${hitBlue ? 1 : 0}个</p>
                                <p><strong>中奖等级：${level}</strong></p>
                            `;
                        })
                        .catch(() => {
                            result.innerHTML = '<p style="color:#E62E4D;">加载开奖数据失败</p>';
                        });
                }
                document.addEventListener('DOMContentLoaded', loadSSQData);
            </script>
        </article>
    </main>
    <aside class="right-sidebar">{{ partial "sidebar-right.html" . }}</aside>
</div>
{{ end }}