{% extends "base.html" %}

{% block title %}PaddocLabs - Live Telemetry{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/paddoclabs-glass.css?v=1775648225">
<link rel="stylesheet" href="/static/css/dashboard_v2.css?v=1775648225">
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0/dist/chartjs-plugin-streaming.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1/dist/chartjs-adapter-luxon.umd.min.js"></script>
<script src="/static/js/dashboard_v2.js"></script>
{% endblock %}

{% block content %}
    <!-- Session Join Overlay (shown before connecting) -->
    <div class="session-join-overlay" id="sessionJoinOverlay">
        <div class="session-join-card">
            <img src="/static/images/paddoclabs_logo_esteso_w.png" alt="PaddocLabs" class="session-join-logo">
            <h2 class="session-join-title">Join Session</h2>
            <p class="session-join-subtitle">Enter the session code from your pilot</p>
            <div class="session-join-input-group">
                <input type="text" id="sessionCodeInput" class="session-code-input"
                       placeholder="ABC123" maxlength="6" autocomplete="off" spellcheck="false">
                <button id="joinSessionBtn" class="session-join-btn">JOIN</button>
            </div>
            <div id="sessionJoinError" class="session-join-error"></div>
            <div class="session-join-divider"><span>or</span></div>
            <button id="createSessionBtn" class="session-create-btn">Create Session (Pilot)</button>
        </div>
    </div>

    <!-- Top Bar -->
    <div class="top-bar">
        <div class="brand">
            <img src="/static/images/paddoclabs_logo_esteso_w.png" alt="PaddocLabs" class="brand-logo">
            <span class="brand-subtitle">Remote Garage</span>
        </div>
        <div class="connection-status">
            <div class="status-indicator session-code-display" id="sessionCodeDisplay" style="display: none;">
                <span class="session-code-label">SESSION</span>
                <span class="session-code-value" id="sessionCodeValue">------</span>
            </div>
            <div class="status-indicator">
                <div class="status-dot" id="statusDot"></div>
                <span id="statusText">Connecting...</span>
            </div>
            <div class="status-indicator">
                <span id="username">Guest</span>
            </div>
        </div>
    </div>

    <!-- Main Dashboard Grid -->
    <div class="dashboard-container">
        <div class="panel panel-speed-chart">
            <div class="panel-header">
                <div>
                    <div class="panel-title">SPEED</div>
                    <div class="panel-subtitle">Real-time velocity</div>
                </div>
                <div class="metric-value" id="speedCurrent">0 <span class="metric-unit">km/h</span></div>
            </div>
            <div class="chart-container"><canvas id="speedChart"></canvas></div>
        </div>

        <div class="panel panel-rpm-chart">
            <div class="panel-header">
                <div>
                    <div class="panel-title">RPM</div>
                    <div class="panel-subtitle">Engine revolutions</div>
                </div>
                <div class="metric-value" id="rpmCurrent">0 <span class="metric-unit">rpm</span></div>
            </div>
            <div class="chart-container"><canvas id="rpmChart"></canvas></div>
        </div>

        <div class="panel panel-lap-times">
            <div class="panel-header"><div class="panel-title">LAP TIMES</div></div>
            <div class="lap-time-display">
                <div class="lap-time-label">Current Lap</div>
                <div class="lap-time-value" id="currentLapTime">0:00.000</div>
            </div>
            <div class="metric-grid">
                <div class="metric">
                    <div class="metric-label">Best</div>
                    <div class="metric-value lap-time-best" id="bestLapTime">--:--</div>
                </div>
                <div class="metric">
                    <div class="metric-label">Last</div>
                    <div class="metric-value lap-time-last" id="lastLapTime">--:--</div>
                </div>
            </div>
        </div>

        <div class="panel panel-gear-inputs">
            <div class="panel-header"><div class="panel-title">INPUTS</div></div>
            <div class="gear-display"><div class="gear-number" id="gearDisplay">N</div></div>
            <div class="input-bar-container">
                <div class="input-bar-label"><span>THROTTLE</span><span id="throttleValue">0%</span></div>
                <div class="input-bar-background"><div class="input-bar-fill throttle" id="throttleBar" style="width: 0%"></div></div>
            </div>
            <div class="input-bar-container">
                <div class="input-bar-label"><span>BRAKE</span><span id="brakeValue">0%</span></div>
                <div class="input-bar-background"><div class="input-bar-fill brake" id="brakeBar" style="width: 0%"></div></div>
            </div>
        </div>

        <div class="panel panel-session-info">
            <div class="panel-header"><div class="panel-title">SESSION</div></div>
            <div class="session-details">
                <div class="session-detail"><span class="session-detail-label">Type</span><span class="session-detail-value" id="sessionType">-</span></div>
                <div class="session-detail"><span class="session-detail-label">Remaining</span><span class="session-detail-value" id="sessionTime">-</span></div>
                <div class="session-detail"><span class="session-detail-label">Track</span><span class="session-detail-value" id="trackName">-</span></div>
                <div class="session-detail"><span class="session-detail-label">Car</span><span class="session-detail-value" id="carModel">-</span></div>
            </div>
        </div>

        <div class="panel panel-tyre-temps">
            <div class="panel-header"><div class="panel-title">TYRE TEMPS</div></div>
            <div class="tyre-grid">
                <div class="tyre-card"><div class="tyre-label">FL</div><div class="tyre-temp temp-optimal" id="tyreTempFL">--&deg;</div><div class="tyre-pressure" id="tyrePressFL">-- PSI</div></div>
                <div class="tyre-card"><div class="tyre-label">FR</div><div class="tyre-temp temp-optimal" id="tyreTempFR">--&deg;</div><div class="tyre-pressure" id="tyrePressFR">-- PSI</div></div>
                <div class="tyre-card"><div class="tyre-label">RL</div><div class="tyre-temp temp-optimal" id="tyreTempRL">--&deg;</div><div class="tyre-pressure" id="tyrePressRL">-- PSI</div></div>
                <div class="tyre-card"><div class="tyre-label">RR</div><div class="tyre-temp temp-optimal" id="tyreTempRR">--&deg;</div><div class="tyre-pressure" id="tyrePressRR">-- PSI</div></div>
            </div>
        </div>

        <div class="panel panel-brake-temps">
            <div class="panel-header"><div class="panel-title">BRAKE TEMPS</div></div>
            <div class="tyre-grid">
                <div class="tyre-card"><div class="tyre-label">FL</div><div class="tyre-temp temp-optimal" id="brakeTempFL">--&deg;</div></div>
                <div class="tyre-card"><div class="tyre-label">FR</div><div class="tyre-temp temp-optimal" id="brakeTempFR">--&deg;</div></div>
                <div class="tyre-card"><div class="tyre-label">RL</div><div class="tyre-temp temp-optimal" id="brakeTempRL">--&deg;</div></div>
                <div class="tyre-card"><div class="tyre-label">RR</div><div class="tyre-temp temp-optimal" id="brakeTempRR">--&deg;</div></div>
            </div>
        </div>

        <div class="panel panel-fuel-gauge">
            <div class="panel-header"><div class="panel-title">FUEL</div></div>
            <div class="metric-grid">
                <div class="metric"><div class="metric-label">Level</div><div class="metric-value large" id="fuelLevel">--</div><div class="metric-label">Litri</div></div>
            </div>
            <div class="fuel-bar-container"><div class="fuel-bar-bg"><div class="fuel-bar-fill" id="fuelBar" style="width: 100%"></div></div></div>
            <div class="metric-grid" style="margin-top: 12px;">
                <div class="metric"><div class="metric-label">Per Lap</div><div class="metric-value" style="font-size: 18px;" id="fuelPerLap">--</div></div>
                <div class="metric"><div class="metric-label">Laps Left</div><div class="metric-value" style="font-size: 18px;" id="fuelLaps">--</div></div>
            </div>
        </div>

        <div class="panel panel-engine-temps">
            <div class="panel-header"><div class="panel-title">ENGINE</div></div>
            <div class="metric-grid">
                <div class="metric"><div class="metric-label">Water</div><div class="metric-value large temp-optimal" id="engineTemp">--&deg;</div></div>
            </div>
            <div class="metric-grid" style="margin-top: 20px;">
                <div class="metric"><div class="metric-label">Oil</div><div class="metric-value" style="font-size: 24px;" id="oilTemp">--&deg;</div></div>
            </div>
        </div>

        <!-- PIT STRATEGY COMMANDER -->
        <div class="panel panel-pit-commander">
            <div class="panel-header"><div class="panel-title">PIT STRATEGY</div></div>
            <div class="pit-controls">
                <div class="pit-row">
                    <label class="pit-label">FUEL</label>
                    <div class="pit-slider-group">
                        <button class="pit-btn-sm" data-action="fuel" data-delta="-10">-10</button>
                        <button class="pit-btn-sm" data-action="fuel" data-delta="-1">-1</button>
                        <input type="number" id="pitFuel" class="pit-input" value="50" min="0" max="120" step="1">
                        <span class="pit-unit">L</span>
                        <button class="pit-btn-sm" data-action="fuel" data-delta="1">+1</button>
                        <button class="pit-btn-sm" data-action="fuel" data-delta="10">+10</button>
                    </div>
                </div>

                <div class="pit-row">
                    <label class="pit-label">COMPOUND</label>
                    <div class="pit-compound-group">
                        <button class="pit-compound-btn active" data-compound="Dry">DRY</button>
                        <button class="pit-compound-btn" data-compound="Wet">WET</button>
                    </div>
                </div>

                <div class="pit-row">
                    <label class="pit-label">TYRE SET</label>
                    <div class="pit-tyre-set-group">
                        <button class="pit-set-btn" data-set="1">1</button>
                        <button class="pit-set-btn" data-set="2">2</button>
                        <button class="pit-set-btn active" data-set="3">3</button>
                        <button class="pit-set-btn" data-set="4">4</button>
                        <button class="pit-set-btn" data-set="5">5</button>
                    </div>
                </div>

                <div class="pit-row">
                    <label class="pit-label">PRESSURES</label>
                    <div class="pit-pressures-grid">
                        <div class="pit-pressure-cell">
                            <span class="pit-pressure-label">FL</span>
                            <input type="number" id="pitPressFL" class="pit-input-sm" value="27.5" min="20" max="35" step="0.1">
                        </div>
                        <div class="pit-pressure-cell">
                            <span class="pit-pressure-label">FR</span>
                            <input type="number" id="pitPressFR" class="pit-input-sm" value="27.5" min="20" max="35" step="0.1">
                        </div>
                        <div class="pit-pressure-cell">
                            <span class="pit-pressure-label">RL</span>
                            <input type="number" id="pitPressRL" class="pit-input-sm" value="27.5" min="20" max="35" step="0.1">
                        </div>
                        <div class="pit-pressure-cell">
                            <span class="pit-pressure-label">RR</span>
                            <input type="number" id="pitPressRR" class="pit-input-sm" value="27.5" min="20" max="35" step="0.1">
                        </div>
                    </div>
                </div>

                <div class="pit-row">
                    <label class="pit-label">REPAIRS</label>
                    <div class="pit-repairs-group">
                        <label class="pit-checkbox"><input type="checkbox" id="pitRepairBody" checked><span>Body</span></label>
                        <label class="pit-checkbox"><input type="checkbox" id="pitRepairSusp" checked><span>Suspension</span></label>
                    </div>
                </div>

                <button id="sendStrategyBtn" class="pit-send-btn">SEND STRATEGY</button>

                <div class="pit-quick-actions">
                    <button class="pit-quick-btn" data-quick="fuel10">+10L</button>
                    <button class="pit-quick-btn" data-quick="dry2">Dry Set 2</button>
                    <button class="pit-quick-btn" data-quick="dry3">Dry Set 3</button>
                    <button class="pit-quick-btn" data-quick="wets">Wets</button>
                </div>

                <div id="pitCommandStatus" class="pit-status"></div>
            </div>
        </div>

        <!-- AI RACE ENGINEER CHAT -->
        <div class="panel panel-ai-chat">
            <div class="panel-header"><div class="panel-title">AI ENGINEER</div></div>
            <div class="ai-chat-messages" id="aiChatMessages">
                <div class="ai-msg ai-msg-bot">
                    <span class="ai-msg-sender">AI</span>
                    <span class="ai-msg-text">Ready. Join a session to start analyzing telemetry.</span>
                </div>
            </div>
            <div class="ai-chat-input-group">
                <input type="text" id="aiChatInput" class="ai-chat-input"
                       placeholder="Ask about strategy, fuel, tyres..." autocomplete="off">
                <button id="aiChatSendBtn" class="ai-chat-send-btn">SEND</button>
            </div>
        </div>
    </div>

<script>
// Auto-connect when arriving from /remote-garage/connection with session codes
(function() {
    const params = new URLSearchParams(window.location.search);
    const sessions = params.get('sessions');
    if (sessions) {
        // Hide the join overlay immediately — sessions already authorized
        const overlay = document.getElementById('sessionJoinOverlay');
        if (overlay) overlay.style.display = 'none';

        const codes = sessions.split(',').filter(c => c.trim().length === 6);

        // Populate navbar team pill
        if (codes.length > 0 && window.PL && PL.Navbar) {
            const members = codes.map((code, i) => ({ name: 'Pilot ' + (i + 1) }));
            PL.Navbar.addTeamPill({
                name: 'Remote Garage',
                carNumber: codes.length,
                slug: 'rg-live',
                members: members,
            });
            // Update pill link to current page
            const pill = document.querySelector('.pl-team-pill');
            if (pill) {
                pill.href = window.location.href;
                pill.classList.add('pl-team-pill--active');
            }
        }

        // Auto-join first session code
        if (codes.length > 0) {
            const tryJoin = setInterval(() => {
                const input = document.getElementById('sessionCodeInput');
                const btn = document.getElementById('joinSessionBtn');
                if (input && btn && typeof btn.click === 'function') {
                    input.value = codes[0];
                    input.dispatchEvent(new Event('input'));
                    btn.click();
                    clearInterval(tryJoin);
                    console.log('[RG] Auto-joined session:', codes[0]);
                }
            }, 200);
            setTimeout(() => clearInterval(tryJoin), 5000);
        }
    }
})();
</script>

{% endblock %}