{% extends "base.html" %}

{% block title %}OJHunt Lite{% endblock %}

{% block extra_head %}
    <style>
        * { box-sizing: border-box; }

        .header { text-align: center; margin-bottom: 2rem; }
        .header .logo { height: 80px; margin-bottom: 0.5rem; }
        .header h1 { margin: 0; font-size: 1.75rem; }
        .header .org-title { color: #666; margin: 0.25rem 0 0.5rem 0; }
        .header .subtitle { color: #888; margin: 0; font-size: 0.95rem; }

        .query-builder { background: #f5f5f5; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; }
        .query-builder-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
        .query-builder-row select, .query-builder-row input { padding: 0.5rem; font-size: 1rem; }
        .query-builder-row select { min-width: 150px; }
        .query-builder-row input { flex: 1; min-width: 150px; }

        button { padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; }
        button.primary { background: #0066cc; color: white; border: none; border-radius: 4px; }
        button.primary:hover { background: #0055aa; }
        button.secondary { background: #e0e0e0; border: none; border-radius: 4px; }
        button.secondary:hover { background: #d0d0d0; }
        button.danger { background: #cc4444; color: white; border: none; border-radius: 4px; }
        button.query-btn { background: #0066cc; color: white; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
        button.cancel-btn { background: #cc4444; color: white; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
        button.retry-btn { background: #ff9800; color: white; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
        button.remove-btn { background: #e0e0e0; border: none; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.875rem; }

        .actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

        .results-section { margin-top: 1.5rem; flex: 1; }
        .results-section h3 { margin-bottom: 0.5rem; }

        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #f5f5f5; font-weight: 600; }
        .status { color: #22863a; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
        .status.error { color: #cb2431; }
        .status.pending { color: #666; }
        .status.loading { color: #f5a623; }
        .status[title] { cursor: help; }
        .result-row.success { background: #f0fff4; }
        .result-row.error { background: #ffeef0; }
        .result-row.loading { background: #fffde7; }
        .result-row.pending { background: #fafafa; }

        .solved-count { cursor: pointer; text-decoration: underline; color: #0066cc; }
        .solved-count:hover { color: #0055aa; }

        .report { background: #e8f5e9; padding: 1rem; border-radius: 8px; margin-top: 1rem; }
        .report strong { font-size: 1.1rem; }
        .report-note { font-size: 0.8rem; color: #555; }

        .loading-spinner { color: #666; }

        dialog { padding: 1.5rem; border-radius: 8px; border: 1px solid #ccc; max-width: 600px; max-height: 80vh; }
        dialog::backdrop { background: rgba(0,0,0,0.3); }
        dialog h3 { margin-top: 0; margin-bottom: 1rem; }
        dialog .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
        dialog .problems-list { max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 0.875rem; line-height: 1.5; word-break: break-all; }

        .empty-state { color: #666; font-style: italic; padding: 1rem; text-align: center; }

        .report-restore { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.6rem 0.75rem; background: #f0f4ff; border-radius: 6px; border: 1px solid #d0d8f0; font-size: 0.875rem; }
        .report-restore .prev-label { color: #555; }
        .report-restore .prev-date { font-weight: 600; color: #0066cc; }
        .report-restore .help { font-size: 0.8rem; color: #666; display: block; margin-top: 0.2rem; }
        .report-restore label { cursor: pointer; }
        .report-restore button { font-size: 0.8rem; padding: 0.25rem 0.75rem; }
        .report-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }

        .footer { margin-top: auto; padding-top: 2rem; border-top: 1px solid #eee; text-align: center; color: #666; font-size: 0.875rem; line-height: 1.6; }
        .footer a { color: #0066cc; text-decoration: none; }
        .footer a:hover { text-decoration: underline; }

        /* ── Mobile ── */
        @media (max-width: 600px) {
            /* Query builder: stack select + input vertically */
            .query-builder-row { flex-direction: column; align-items: stretch; }
            .query-builder-row select,
            .query-builder-row input { width: 100%; min-width: 0; }

            /* Results table: card layout */
            table, thead, tbody, th, td, tr { display: block; }
            thead tr { display: none; }
            .result-row {
                border: 1px solid #ddd;
                border-radius: 6px;
                margin-bottom: 0.75rem;
                padding: 0.25rem 0;
                background: #fff;
            }
            .result-row.success { background: #f0fff4; }
            .result-row.error   { background: #ffeef0; }
            .result-row.loading { background: #fffde7; }
            .result-row.pending { background: #fafafa; }
            .result-row td {
                border-bottom: none;
                padding: 0.3rem 0.75rem;
                display: flex;
                align-items: flex-start;
                gap: 0.5rem;
            }
            .result-row td::before {
                font-weight: 600;
                color: #555;
                font-size: 0.8rem;
                min-width: 90px;
                flex-shrink: 0;
            }
            .result-row td:nth-child(1)::before { content: "Crawler"; }
            .result-row td:nth-child(2)::before { content: "Username"; }
            .result-row td:nth-child(3)::before { content: "Solved"; }
            .result-row td:nth-child(4)::before { content: "Submissions"; }
            .result-row td:nth-child(5)::before { content: "Status"; }
            .result-row td:nth-child(6)::before { content: "Actions"; }
            /* Empty state row */
            tr:not(.result-row) td { padding: 0.5rem 0.75rem; }

            /* Status: allow wrapping */
            .status { max-width: none; white-space: normal; }

            /* Dialog: fit viewport */
            dialog { max-width: calc(100vw - 2rem); width: 100%; }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="header">
        <img src="/static/logo.png" alt="OJHunt Logo" class="logo">
        <p class="org-title">ACM-ICPC 协会</p>
        <h1>OJHunt Lite</h1>
        <p class="subtitle">Query Online Judge statistics across multiple platforms</p>
    </div>

    <div x-data="ojhunt()" x-init="init()">

        <!-- Previous report restore banner -->
        <div class="report-restore">
            <span class="prev-label" x-show="cachedPdfDate">
                Previous report: <span class="prev-date" x-text="cachedPdfDate"></span>
            </span>
            <span class="prev-label" x-show="!cachedPdfDate">
                No report loaded
                <span class="help">Upload a previous report to restore your crawler list and track progress over time.</span>
            </span>
            <label>
                <input type="file" accept=".pdf" x-ref="pdfUploadInput"
                       @change="uploadReport($event.target.files[0]); $event.target.value=''"
                       style="display:none">
                <button type="button" class="secondary"
                        @click="$refs.pdfUploadInput.click()"
                        x-text="cachedPdfDate ? 'Load different report' : 'Load report'"></button>
            </label>
            <button type="button" class="danger"
                    x-show="cachedPdfDate"
                    @click="clearCachedPdf()">Delete report</button>
        </div>

        <div class="query-builder">
            <div class="query-builder-row">
                <select x-model="selectedCrawler">
                    <option value="">Select crawler...</option>
                    <template x-for="[name, info] in Object.entries(crawlers)" :key="name">
                        <option :value="name" x-text="info.title"></option>
                    </template>
                    <option value="*">All Crawlers</option>
                </select>
                <input type="text" placeholder="Username" x-model="username" @keydown.enter="addQuery()" />
                <button type="button" class="primary" @click="addQuery()" title="Enter">Add</button>
            </div>
            <div class="actions">
                <button type="button" class="primary" @click="queryAll()" title="Ctrl(⌘)+Enter">Query All</button>
                <button type="button" class="secondary" @click="clearAll()">Clear All</button>
            </div>
        </div>

        <div class="results-section">
            <h3>Queries</h3>
            <table>
                <thead>
                    <tr>
                        <th>Crawler</th>
                        <th>Username</th>
                        <th>Solved</th>
                        <th>Submissions</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr x-show="queries.length === 0">
                        <td colspan="6" class="empty-state">Add crawlers above to start querying.</td>
                    </tr>
                    <template x-for="q in queries" :key="q.id">
                        <tr :id="'row-' + q.id" :class="'result-row ' + q.status">
                            <td x-text="crawlers[q.crawler]?.title || q.crawler"></td>
                            <td x-text="q.username"></td>
                            <td>
                                <span x-show="q.status === 'pending'">-</span>
                                <span x-show="q.status === 'loading'" class="loading-spinner">Loading...</span>
                                <a href="#" x-show="q.status === 'success'" class="solved-count" @click.prevent="showDialog(q)" x-text="q.solved"></a>
                                <span x-show="q.status === 'error'">N/A</span>
                            </td>
                            <td>
                                <span x-show="q.status === 'pending'">-</span>
                                <span x-show="q.status === 'loading'" class="loading-spinner"></span>
                                <span x-show="q.status === 'success'" x-text="q.submissions"></span>
                                <span x-show="q.status === 'error'">N/A</span>
                            </td>
                            <td>
                                <span x-show="q.status === 'pending'" class="status pending">Pending</span>
                                <span x-show="q.status === 'loading'" class="status loading">Loading...</span>
                                <span x-show="q.status === 'success'" class="status" :title="'OK (' + q.duration.toFixed(2) + 's)'" x-text="'OK (' + q.duration.toFixed(2) + 's)'"></span>
                                <span x-show="q.status === 'error'" class="status error" :title="'ERROR: ' + q.error" x-text="'ERROR: ' + q.error"></span>
                            </td>
                            <td>
                                <span x-show="q.status === 'pending'">
                                    <button type="button" class="query-btn" @click="queryOne(q.id)">Query</button>
                                    <button type="button" class="remove-btn" @click="removeQuery(q.id)">Remove</button>
                                </span>
                                <span x-show="q.status === 'loading'">
                                    <button type="button" class="cancel-btn" @click="stopQuery(q.id)">Stop</button>
                                </span>
                                <span x-show="q.status === 'success' || q.status === 'error'">
                                    <button type="button" class="retry-btn" @click="retryQuery(q.id)">Retry</button>
                                    <button type="button" class="remove-btn" @click="removeQuery(q.id)">Remove</button>
                                </span>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <div class="report" x-show="report.totalSolved !== null">
            <strong>Total: <span x-text="report.totalSolved"></span> solved / <span x-text="report.totalSubmissions"></span> submissions</strong>
            <div class="report-actions">
                <button type="button" class="primary" @click="downloadReport()">Download Report</button>
                <span class="report-note">
                    Saves your crawler list and progress history<span x-show="cachedPdfDate"> — history from <span x-text="cachedPdfDate"></span> will be included</span>.
                    Store this PDF on your own device — browser storage can be cleared at any time.
                </span>
            </div>
        </div>

        <template x-for="q in queries" :key="q.id">
            <dialog :id="'dialog-' + q.id" x-show="q.status === 'success'">
                <h3>
                    <span x-text="crawlers[q.crawler]?.title || q.crawler"></span>
                    (<span x-text="q.username"></span>):
                    <span x-text="q.solvedList?.length || 0"></span> problems
                </h3>
                <div class="problems-list" x-text="q.solvedList?.sort().join(', ') || ''"></div>
                <div class="dialog-actions">
                    <button type="button" class="primary" @click="closeDialog(q.id)">Close</button>
                </div>
            </dialog>
        </template>
    </div>

    <div id="legacy-banner" class="report-restore">
        <span>Were you a user of the old acm-statistics site (old OJHunt)?</span>
        <a href="/pdf/legacy">Download your progress history →</a>
        <button type="button" class="secondary" onclick="dismissLegacyBanner()">×</button>
    </div>
    <script>
        (function () {
            if (localStorage.getItem('legacy-banner-dismissed') === '1') {
                document.getElementById('legacy-banner').style.display = 'none';
            }
        })();
        function dismissLegacyBanner() {
            localStorage.setItem('legacy-banner-dismissed', '1');
            document.getElementById('legacy-banner').style.display = 'none';
        }
    </script>

    <footer class="footer">
        <p>
            Inspired by <a href="https://kidozh.com" target="_blank" rel="noopener noreferrer">Jiduo Zhang</a>'s
            西北工业大学ACM查询系统 (npuacm.info).
            OJHunt Lite is a from-scratch rewrite of the author's
            <a href="https://github.com/Liu233w/acm-statistics" target="_blank" rel="noopener noreferrer">OJHunt (acm-statistics)</a>,
            with a lightweight Python implementation and no server-side data storage.
        </p>
        <p>
            Are you an AI agent? <a href="/llms.txt">Read the guide for LLM →</a>
        </p>
    </footer>

    <script>window.__CRAWLERS__ = {{ crawlers | tojson }};</script>
    <script src="/static/app.js?v={{ static_version }}"></script>
    <script defer src="/static/alpinejs-3.14.1.min.js"></script>
{% endblock %}