<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>F1 Telemetria — Painel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css?v=8">
</head>
<body>
<header class="topbar">
    <div class="brand">
        <span class="mark">F1</span>
        <span>Telemetria <small>&nbsp;por pista · setups · leaderboard</small></span>
    </div>
    <a class="overlay-link" href="/overlay" target="_blank">⧉ Abrir overlay</a>
    <div class="status-pill">
        <span class="dot" id="conn-dot"></span>
        <span id="conn-text">Procurando o jogo…</span>
    </div>
</header>

<nav class="tabs">
    <button data-tab="live" class="active">Corrida ao vivo</button>
    <button data-tab="evolution">Evolução por pista</button>
    <button data-tab="telemetry">Telemetria</button>
    <button data-tab="setups">Setups</button>
    <button data-tab="refsetups">Setups de referência</button>
    <button data-tab="insights">Histórico por corrida</button>
    <button data-tab="rivals">Rivais</button>
    <button data-tab="sessions">Sessões</button>
    <button data-tab="config">Configuração</button>
</nav>

<main>
    <!-- ===================== CORRIDA AO VIVO ===================== -->
    <section class="panel active" id="panel-live">
        <div class="weather-strip" id="weather-strip" hidden></div>
        <div class="radio-strip" id="radio-strip" hidden></div>
        <div class="spotter-bar" id="spotter-bar" hidden></div>
        <div class="hud" id="hud"></div>
        <div id="feed-wrap" hidden>
            <h2 class="section">Avisos e punições</h2>
            <div id="penalty-feed" class="feed"></div>
        </div>
        <div id="race-banner" class="race-banner" hidden></div>
        <h2 class="section">Torre de tempos</h2>
        <div id="leaderboard"><div class="empty">Aguardando dados da corrida…</div></div>
        <p class="hint">Atualiza automaticamente. Mostra pneu, idade, intervalo para a frente,
            gap para o líder, última volta, punições e danos (asa e desgaste de pneu).</p>
    </section>

    <!-- ===================== EVOLUÇÃO ===================== -->
    <section class="panel" id="panel-evolution">
        <div class="controls">
            <label class="inline">Pista
                <select id="evo-track"></select>
            </label>
        </div>
        <div class="chart-wrap">
            <h4>Evolução da melhor volta (válida) por sessão</h4>
            <canvas id="evo-chart" height="320"></canvas>
        </div>
        <div id="evo-table"></div>
    </section>

    <!-- ===================== TELEMETRIA ===================== -->
    <section class="panel" id="panel-telemetry">
        <div class="controls">
            <label class="inline">Sessão
                <select id="tel-session"></select>
            </label>
            <label class="inline">Volta A
                <select id="tel-lapA"></select>
            </label>
            <label class="inline">Comparar com volta B
                <select id="tel-lapB"></select>
            </label>
        </div>
        <div class="chart-wrap">
            <h4>Velocidade (km/h) × distância na volta (m)</h4>
            <canvas id="tel-speed" height="240"></canvas>
            <div class="legend" id="tel-legend"></div>
        </div>
        <div class="chart-wrap">
            <h4>Acelerador e Freio (%) × distância</h4>
            <canvas id="tel-pedals" height="200"></canvas>
        </div>
        <div class="chart-wrap">
            <h4>Marcha × distância</h4>
            <canvas id="tel-gear" height="160"></canvas>
        </div>
    </section>

    <!-- ===================== SETUPS ===================== -->
    <section class="panel" id="panel-setups">
        <div class="controls">
            <label class="inline">Pista
                <select id="setup-track"></select>
            </label>
        </div>
        <div id="setup-cards" class="cards"></div>
    </section>

    <!-- ===================== SETUPS DE REFERÊNCIA ===================== -->
    <section class="panel" id="panel-refsetups">
        <div class="controls">
            <label class="inline">Pista
                <select id="refsetup-track"></select>
            </label>
            <label class="inline">Fonte
                <select id="refsetup-source"></select>
            </label>
            <label class="inline">Sessão
                <select id="refsetup-session"></select>
            </label>
            <label class="inline">Condição
                <select id="refsetup-condition"></select>
            </label>
        </div>
        <div id="refsetup-compare" class="setup-compare" hidden></div>
        <h2 class="section">Setups disponíveis</h2>
        <p class="hint">Escolha um setup e clique <b>Usar como alvo</b>: a janela
            “Setup” do overlay (e o quadro acima) passam a mostrar, ao vivo, cada
            valor do alvo × o que está na garagem do jogo — fica verde quando bate.</p>
        <div id="refsetup-cards" class="cards"></div>
    </section>

    <!-- ===================== HISTÓRICO / INSIGHTS ===================== -->
    <section class="panel" id="panel-insights">
        <div class="controls">
            <label class="inline">Corrida
                <select id="ins-session"></select>
            </label>
        </div>
        <div id="ins-report"><div class="empty">Selecione uma corrida para ver o relatório.</div></div>
    </section>

    <!-- ===================== RIVAIS ===================== -->
    <section class="panel" id="panel-rivals">
        <div class="controls">
            <label class="inline">Corrida <select id="riv-session"></select></label>
        </div>
        <h2 class="section">Estratégia dos rivais</h2>
        <p class="hint">Composto e desgaste de pneu por volta de cada carro — quem parou
            quando, em qual pneu e como o ritmo evoluiu.</p>
        <div id="riv-strategy"><div class="empty">Selecione uma corrida.</div></div>
        <h2 class="section">Estratégia ótima desta pista</h2>
        <p class="hint">Calculada dos SEUS dados gravados nesta pista (ritmo e desgaste medidos
            por composto). Compara 1 × 2 paradas e sugere a ordem de pneus e as voltas de pit.</p>
        <div id="riv-strategy-rec"><div class="empty">—</div></div>
        <h2 class="section">Comparar pilotagem</h2>
        <div class="controls">
            <label class="inline">Volta <select id="riv-lap"></select></label>
            <label class="inline">Rival <select id="riv-car"></select></label>
            <label class="inline">Cor <select id="riv-color">
                <option value="speed">Velocidade</option>
                <option value="brake">Freio</option>
                <option value="driver">Por piloto</option>
            </select></label>
        </div>
        <div id="riv-line-wrap">
            <canvas id="riv-line" width="900" height="520"></canvas>
            <div id="riv-line-legend" class="hint"></div>
        </div>
    </section>

    <!-- ===================== SESSÕES ===================== -->
    <section class="panel" id="panel-sessions">
        <h2 class="section">Sessões registradas</h2>
        <div id="sessions-table"></div>
    </section>

    <!-- ===================== CONFIGURAÇÃO ===================== -->
    <section class="panel" id="panel-config">
        <h2 class="section">Painéis do overlay nativo</h2>
        <p class="hint">Ligue ou desligue cada janela do overlay sobre o jogo.
            Aplica em poucos segundos (o overlay precisa estar rodando).</p>
        <div id="config-windows" class="config-list"></div>
    </section>
</main>

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