<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SC2 Replay Analyzer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/app.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        display: ['Rajdhani', 'sans-serif'],
                        mono: ['Roboto Mono', 'monospace'],
                    },
                    colors: {
                        sc2: {
                            bg: '#0f141e',
                            card: '#141923',
                            accent: '#ff9d5c',
                            win: '#00ff88',
                            loss: '#ff4444',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="min-h-screen">
    <!-- Top glow accent line -->
    <div class="top-glow"></div>

    <!-- Header -->
    <header class="px-6 py-3 flex items-center justify-between border-b border-white/[0.08]">
        <div class="flex items-center gap-3">
            <h1 class="font-display font-bold text-xl tracking-wider uppercase text-white">
                SC2 Replay Analyzer
            </h1>
            <span id="playerName" class="font-display text-sm text-white/40 tracking-wide"></span>
        </div>
        <div class="flex items-center gap-3">
            <button id="scanBtn" onclick="App.triggerScan()" class="btn-primary text-sm">
                Scan
            </button>
            <button onclick="App.toggleSettings()" class="btn-primary text-sm" title="Settings">
                &#9881;
            </button>
        </div>
    </header>

    <!-- Main content -->
    <main class="px-6 py-4 max-w-screen-2xl mx-auto space-y-4">

        <!-- Stats cards row -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="stat-card p-3">
                <div class="text-xs font-display font-semibold tracking-wider text-white/40 uppercase">Games</div>
                <div class="stat-value text-2xl font-bold text-white" id="statGames">-</div>
            </div>
            <div class="stat-card p-3">
                <div class="text-xs font-display font-semibold tracking-wider text-white/40 uppercase">Winrate</div>
                <div class="stat-value text-2xl font-bold" id="statWinrate">-</div>
            </div>
            <div class="stat-card p-3">
                <div class="text-xs font-display font-semibold tracking-wider text-white/40 uppercase">Avg W@8m</div>
                <div class="stat-value text-2xl font-bold text-white" id="statWorkers">-</div>
            </div>
            <div class="stat-card p-3">
                <div class="text-xs font-display font-semibold tracking-wider text-white/40 uppercase">Avg APM</div>
                <div class="stat-value text-2xl font-bold text-white" id="statApm">-</div>
            </div>
        </div>

        <!-- Filter bar -->
        <div class="filter-bar flex flex-wrap items-center gap-2 p-3 bg-[var(--bg-card)] rounded-lg border border-white/[0.08]">
            <select id="filterRegion" onchange="App.applyFilters()" class="w-28">
                <option value="">All Regions</option>
            </select>
            <select id="filterRace" onchange="App.applyFilters()" class="w-24">
                <option value="">All Races</option>
                <option value="Terran">Terran</option>
                <option value="Zerg">Zerg</option>
                <option value="Protoss">Protoss</option>
            </select>
            <select id="filterMatchup" onchange="App.applyFilters()" class="w-24">
                <option value="">Matchup</option>
            </select>
            <select id="filterResult" onchange="App.applyFilters()" class="w-24">
                <option value="">Result</option>
                <option value="Win">Win</option>
                <option value="Loss">Loss</option>
            </select>
            <input id="filterMap" type="text" placeholder="Map..." class="w-28" onchange="App.applyFilters()">
            <select id="filterDays" onchange="App.applyFilters()" class="w-28">
                <option value="">All Time</option>
                <option value="1">Today</option>
                <option value="3">Last 3 Days</option>
                <option value="7">Last 7 Days</option>
                <option value="14">Last 14 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="90">Last 90 Days</option>
            </select>
            <select id="filterLimit" onchange="App.applyFilters()" class="w-28">
                <option value="25">Last 25</option>
                <option value="50" selected>Last 50</option>
                <option value="100">Last 100</option>
                <option value="200">Last 200</option>
                <option value="">All</option>
            </select>
            <button onclick="App.clearFilters()" class="btn-primary text-xs px-2 py-1">Clear</button>
            <div id="filterStatus" class="ml-auto text-xs font-display text-white/40 tracking-wide"></div>
        </div>

        <!-- Replay table -->
        <div class="bg-[var(--bg-card)] rounded-lg border border-white/[0.08] overflow-hidden">
            <div class="overflow-x-auto">
                <table class="replay-table" id="replayTable">
                    <thead>
                        <tr id="tableHead"></tr>
                    </thead>
                    <tbody id="tableBody"></tbody>
                </table>
            </div>
            <div id="tableSummary" class="summary-row"></div>
        </div>

        <!-- MMR Chart -->
        <div class="chart-container">
            <div class="flex items-center justify-between mb-2">
                <h2 class="font-display font-bold text-sm tracking-wider uppercase text-white/60">MMR History</h2>
            </div>
            <div style="height: 250px;">
                <canvas id="mmrChart"></canvas>
            </div>
        </div>

        <!-- Tags section -->
        <div class="bg-[var(--bg-card)] rounded-lg border border-white/[0.08] p-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="font-display font-bold text-sm tracking-wider uppercase text-white/60">Tags</h2>
                <button onclick="App.showAddTag()" class="btn-primary text-xs">+ Add Tag</button>
            </div>
            <div id="tagsList" class="space-y-2"></div>
            <div id="addTagForm" class="hidden mt-3 p-3 bg-white/[0.03] rounded-lg border border-white/[0.08] space-y-2">
                <div class="flex gap-2">
                    <input id="tagLabel" type="text" placeholder="Tag label..." class="flex-1 bg-[var(--bg-secondary)] border border-white/[0.08] text-white rounded px-2 py-1 text-sm font-display">
                    <input id="tagDate" type="date" class="bg-[var(--bg-secondary)] border border-white/[0.08] text-white rounded px-2 py-1 text-sm font-mono">
                </div>
                <div class="flex gap-2">
                    <button onclick="App.createTag('ongoing')" class="btn-primary text-xs">Start Ongoing</button>
                    <button onclick="App.createTag('single')" class="btn-primary text-xs">Single Date</button>
                    <button onclick="App.hideAddTag()" class="text-xs text-white/40 hover:text-white/60 px-2">Cancel</button>
                </div>
            </div>
        </div>

        <!-- Analysis Feed (recent analyses preview) -->
        <div class="bg-[var(--bg-card)] rounded-lg border border-white/[0.08] p-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="font-display font-bold text-sm tracking-wider uppercase text-white/60">Recent Analyses</h2>
                <a href="/analysis" class="text-xs text-[var(--accent-terran)] hover:underline font-display">View All &rarr;</a>
            </div>
            <div id="analysisFeed" class="space-y-2"></div>
        </div>

        <!-- Stream Widgets -->
        <div class="bg-[var(--bg-card)] rounded-lg border border-white/[0.08] p-4">
            <h2 class="font-display font-bold text-sm tracking-wider uppercase text-white/60 mb-3">Stream Widgets (OBS Browser Source)</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <a href="/overlays/mmr-graph" target="_blank" class="flex items-center gap-3 p-2 rounded hover:bg-white/[0.05] transition-colors">
                    <span class="text-[var(--accent-terran)] font-mono text-xs w-6">01</span>
                    <div>
                        <div class="font-display font-semibold text-sm text-white/80">MMR Graph</div>
                        <div class="text-xs text-white/30">/overlays/mmr-graph</div>
                    </div>
                </a>
                <a href="/overlays/stream-widget" target="_blank" class="flex items-center gap-3 p-2 rounded hover:bg-white/[0.05] transition-colors">
                    <span class="text-[var(--accent-terran)] font-mono text-xs w-6">02</span>
                    <div>
                        <div class="font-display font-semibold text-sm text-white/80">Game List + Chart</div>
                        <div class="text-xs text-white/30">/overlays/stream-widget?games=5</div>
                    </div>
                </a>
                <a href="/overlays/analysis-live" target="_blank" class="flex items-center gap-3 p-2 rounded hover:bg-white/[0.05] transition-colors">
                    <span class="text-[var(--accent-terran)] font-mono text-xs w-6">03</span>
                    <div>
                        <div class="font-display font-semibold text-sm text-white/80">Live Analysis</div>
                        <div class="text-xs text-white/30">/overlays/analysis-live</div>
                    </div>
                </a>
                <a href="/overlays/analysis-widget" target="_blank" class="flex items-center gap-3 p-2 rounded hover:bg-white/[0.05] transition-colors">
                    <span class="text-[var(--accent-terran)] font-mono text-xs w-6">04</span>
                    <div>
                        <div class="font-display font-semibold text-sm text-white/80">Analysis History</div>
                        <div class="text-xs text-white/30">/overlays/analysis-widget?count=3</div>
                    </div>
                </a>
            </div>
        </div>

    </main>

    <!-- Footer -->
    <footer class="px-6 py-3 text-center border-t border-white/[0.05]">
        <span class="font-display text-xs text-white/20 tracking-wider">Developed by YAWI</span>
    </footer>

    <!-- Settings Modal -->
    <div id="settingsModal" class="hidden fixed inset-0 z-50 flex items-center justify-center modal-overlay">
        <div class="modal-content w-full max-w-lg mx-4 p-6 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h2 class="font-display font-bold text-lg tracking-wider uppercase text-white">Settings</h2>
                <button onclick="App.toggleSettings()" class="text-white/40 hover:text-white text-xl">&times;</button>
            </div>

            <!-- General Config -->
            <h3 class="font-display font-bold text-sm tracking-wider uppercase text-white/60 mb-2">General</h3>
            <div id="configSettings" class="mb-4"></div>

            <!-- Column Config -->
            <h3 class="font-display font-bold text-sm tracking-wider uppercase text-white/60 mb-2">Display Columns</h3>
            <div id="columnsConfig" class="space-y-1"></div>

            <div class="mt-4 flex gap-2">
                <button onclick="App.saveSettings()" class="btn-primary">Save</button>
                <button onclick="App.resetColumns()" class="btn-danger">Reset Columns</button>
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>
