{% extends "base.html" %}
{% from "_macros.html" import kpi, pc, px %}

{% block title %}FastF1 Live Stream — Racing Lines{% endblock %}

{% block content %}
<style>
  .live-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
  }

  .live-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .live-head h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .live-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ff4444;
    border-radius: 50%;
    animation: pulse 1s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
  }

  .pill.live {
    background: #ff4444;
    color: white;
  }

  .pill.no {
    background: #f8f9fa;
    color: #666;
  }

  .live-meta {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    font-size: 13px;
    color: #666;
  }

  .live-meta span {
    display: flex;
    gap: 5px;
  }

  .session-select {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
  }

  .session-select input,
  .session-select select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .session-select button {
    padding: 8px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
  }

  .session-select button:hover {
    background: #0056b3;
  }

  .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
  }

  .kpi-card {
    background: white;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .kpi-card h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: bold;
  }

  .kpi-card .value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }

  .kpi-card .subtitle {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }

  .ptabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
  }

  .ptabs button {
    padding: 10px 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    border-bottom: 3px solid transparent;
    position: relative;
    bottom: -2px;
  }

  .ptabs button[aria-pressed="true"] {
    color: #007bff;
    border-bottom-color: #007bff;
  }

  .ptabs button:hover {
    color: #333;
  }

  .ptabs .n {
    margin-left: 5px;
    font-size: 12px;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
  }

  .status-bar {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
  }

  .status-item {
    display: flex;
    flex-direction: column;
  }

  .status-item label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: bold;
  }

  .status-item value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }

  .board.single {
    grid-template-columns: 1fr;
  }

  .card {
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  .card h2 {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
  }

  .scroll {
    overflow-x: auto;
  }

  .timing-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
  }

  .timing-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }

  .timing-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    font-size: 13px;
  }

  .timing-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 13px;
  }

  .timing-table tbody tr:hover {
    background: #f8f9fa;
  }

  .position-col {
    font-weight: bold;
    font-size: 14px;
    color: #007bff;
    min-width: 30px;
  }

  .driver-col {
    font-weight: 600;
    min-width: 100px;
  }

  .team-col {
    color: #666;
    font-size: 12px;
  }

  .time-col {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: #444;
  }

  .gap-col {
    font-weight: 600;
    color: #ff6b6b;
    min-width: 70px;
  }

  .status-col {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
    text-align: center;
  }

  .status-on_track {
    background: #d4edda;
    color: #155724;
  }

  .status-pitted {
    background: #fff3cd;
    color: #856404;
  }

  .status-out {
    background: #f8d7da;
    color: #721c24;
  }

  .connection-status {
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
  }

  .connection-status.connected {
    background: #d4edda;
    color: #155724;
  }

  .connection-status.disconnected {
    background: #f8d7da;
    color: #721c24;
  }

  .connection-status.connecting {
    background: #fff3cd;
    color: #856404;
  }

  .loading {
    text-align: center;
    padding: 40px;
    color: #666;
  }

  .error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid #721c24;
  }

  section[hidden] {
    display: none;
  }
</style>

<div class="live-container">
  <div class="live-head">
    <h1>
      <span class="live-indicator"></span>
      FastF1 Live Stream
    </h1>
    <span class="connection-status connecting" id="connection-status">Disconnected</span>
  </div>

  <div class="live-meta" id="meta-container" style="display: none;">
    <span>Last update <b id="update-label">—</b>, <span id="update-age">—</span> ago</span>
    <span id="market-count">0 markets</span>
  </div>

  <div id="error-container"></div>

  <div class="session-select">
    <label>Year: <input type="number" id="year" value="{{ year or 2026 }}" min="2021" max="2030" style="width: 80px;"></label>
    <label>Round: <input type="number" id="round" value="{{ round_num or 21 }}" min="1" max="24" style="width: 80px;"></label>
    <label>Session:
      <select id="session">
        <option value="FP1">FP1</option>
        <option value="FP2">FP2</option>
        <option value="FP3">FP3</option>
        <option value="SQ">Sprint Qualifying</option>
        <option value="SS">Sprint</option>
        <option value="Q">Qualifying</option>
        <option value="R">Race</option>
      </select>
    </label>
    <button onclick="startLiveStream()">Start Live Stream</button>
  </div>

  <div id="kpis-container" class="kpis" style="display: none;">
    <div class="kpi-card">
      <h3>Current Leader</h3>
      <div class="value" id="leader-name">—</div>
      <div class="subtitle" id="leader-team">—</div>
    </div>
  </div>

  <nav class="ptabs" id="tabs-container" style="display: none;" role="tablist">
    <button type="button" role="tab" data-tab="race" aria-pressed="true">Race</button>
    <button type="button" role="tab" data-tab="markets">Winner Odds<span class="n" id="market-n">0</span></button>
  </nav>

  <section id="race-panel" data-panel="race">
    <div class="board single">
      <div class="card">
        <h2 id="session-title">Race Classification</h2>
        <div id="timing-container" style="display: none;">
          <div class="scroll">
            <table class="timing-table" id="timing-table">
              <thead>
                <tr>
                  <th>Pos</th>
                  <th>Driver</th>
                  <th>Team</th>
                  <th>Laps</th>
                  <th>Last Lap</th>
                  <th>Best Lap</th>
                  <th>Gap</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody id="timing-body">
              </tbody>
            </table>
          </div>
        </div>
        <div id="loading-container" class="loading" style="display: none;">
          <p>Loading live data...</p>
        </div>
      </div>
    </div>
  </section>

  <section id="markets-panel" data-panel="markets" hidden>
    <div class="board single">
      <div class="card">
        <h2>Winner Odds</h2>
        <div id="markets-container" style="display: none;">
          <div class="scroll">
            <table class="timing-table">
              <thead>
                <tr>
                  <th class="l">Driver</th>
                  <th>Fair</th>
                  <th>Bid / ask</th>
                </tr>
              </thead>
              <tbody id="markets-body">
              </tbody>
            </table>
          </div>
        </div>
        <div id="markets-loading" class="loading" style="display: none;">
          <p>Loading market data...</p>
        </div>
      </div>
    </div>
  </section>
</div>

<script>
  let websocket = null;
  let sessionId = null;
  let raceId = {{ race_id or 'null' }};
  let lastUpdateTime = null;

  function updateConnectionStatus(status) {
    const statusEl = document.getElementById('connection-status');
    statusEl.textContent = status;
    statusEl.className = 'connection-status';

    if (status === 'Connected') {
      statusEl.classList.add('connected');
    } else if (status === 'Disconnected') {
      statusEl.classList.add('disconnected');
    } else {
      statusEl.classList.add('connecting');
    }
  }

  function showError(message) {
    const container = document.getElementById('error-container');
    container.innerHTML = `<div class="error-message">${message}</div>`;
    setTimeout(() => { container.innerHTML = ''; }, 5000);
  }

  function formatTime(seconds) {
    if (!seconds) return '-';
    const mins = Math.floor(seconds / 60);
    const secs = (seconds % 60).toFixed(3);
    return `${mins}:${secs.padStart(6, '0')}`;
  }

  function updateMetaBar() {
    const container = document.getElementById('meta-container');
    if (lastUpdateTime) {
      const elapsed = Math.floor((Date.now() - lastUpdateTime) / 1000);
      const mins = Math.floor(elapsed / 60);
      const secs = elapsed % 60;
      document.getElementById('update-age').textContent = `${mins}m ${secs}s`;
      container.style.display = 'flex';
    }
  }

  function updateTimingTable(drivers) {
    const body = document.getElementById('timing-body');
    body.innerHTML = '';

    if (!drivers || drivers.length === 0) {
      body.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #999;">No driver data available</td></tr>';
      return;
    }

    drivers.forEach((driver, idx) => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td class="position-col">${driver.position}</td>
        <td class="driver-col">#${driver.driver_number}</td>
        <td class="team-col">${driver.team}</td>
        <td>${driver.lap_count}</td>
        <td class="time-col">${formatTime(driver.last_lap_time)}</td>
        <td class="time-col">${formatTime(driver.best_lap_time)}</td>
        <td class="gap-col">${driver.gap_to_leader ? formatTime(driver.gap_to_leader) : '-'}</td>
        <td class="status-col status-${driver.status}">${driver.status}</td>
      `;
      body.appendChild(row);

      // Update leader KPI
      if (idx === 0) {
        document.getElementById('leader-name').textContent = `#${driver.driver_number}`;
        document.getElementById('leader-team').textContent = driver.team;
      }
    });
  }

  function updateMarketData() {
    if (!raceId) return;

    fetch(`/api/f1/markets/${raceId}`)
      .then(r => r.json())
      .then(data => {
        const body = document.getElementById('markets-body');
        body.innerHTML = '';

        if (!data.markets || data.markets.length === 0) {
          body.innerHTML = '<tr><td colspan="3" style="text-align: center; color: #999;">No market data available</td></tr>';
          return;
        }

        document.getElementById('market-n').textContent = data.markets.length;
        document.getElementById('market-count').textContent = `${data.markets.length} markets`;

        data.markets.forEach(m => {
          const row = document.createElement('tr');
          const fairVal = m.fair !== null ? `${(m.fair * 100).toFixed(1)}%` : '—';
          const bid = m.bid !== null ? `${(m.bid * 100).toFixed(1)}%` : '—';
          const ask = m.ask !== null ? `${(m.ask * 100).toFixed(1)}%` : '—';
          row.innerHTML = `
            <td class="driver-col">${m.subject}</td>
            <td>${fairVal}</td>
            <td class="time-col">${bid} / ${ask}</td>
          `;
          body.appendChild(row);
        });

        document.getElementById('markets-loading').style.display = 'none';
        document.getElementById('markets-container').style.display = 'block';
      })
      .catch(e => {
        console.error('Market fetch error:', e);
        document.getElementById('markets-loading').innerHTML = '<p style="color: #999;">Unable to load market data</p>';
      });
  }

  function setupTabs() {
    const tabs = document.querySelectorAll('[role="tab"]');
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const tabName = tab.getAttribute('data-tab');
        tabs.forEach(t => t.setAttribute('aria-pressed', 'false'));
        tab.setAttribute('aria-pressed', 'true');

        document.getElementById('race-panel').style.display = tabName === 'race' ? 'block' : 'none';
        document.getElementById('markets-panel').style.display = tabName === 'markets' ? 'block' : 'none';

        if (tabName === 'markets') {
          updateMarketData();
        }
      });
    });
  }

  function startLiveStream() {
    const year = parseInt(document.getElementById('year').value);
    const round = parseInt(document.getElementById('round').value);
    const session = document.getElementById('session').value;

    if (!year || !round || !session) {
      showError('Please select year, round, and session');
      return;
    }

    // Close existing connection
    if (websocket) {
      websocket.close();
    }

    sessionId = `f1-${year}-${round}-${session}`;
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/ws/f1/live/${sessionId}`;

    updateConnectionStatus('Connecting...');
    document.getElementById('loading-container').style.display = 'block';
    document.getElementById('timing-container').style.display = 'none';
    document.getElementById('tabs-container').style.display = 'none';
    document.getElementById('kpis-container').style.display = 'none';

    websocket = new WebSocket(wsUrl);

    websocket.onopen = () => {
      updateConnectionStatus('Connected');
      websocket.send(JSON.stringify({
        type: 'start',
        year: year,
        round: round,
        session: session
      }));
    };

    websocket.onmessage = (event) => {
      try {
        const message = JSON.parse(event.data);

        if (message.type === 'timing_update') {
          const data = message.data;

          if (data.error) {
            showError(`Error: ${data.error}`);
            return;
          }

          lastUpdateTime = Date.now();
          document.getElementById('loading-container').style.display = 'none';
          document.getElementById('timing-container').style.display = 'block';
          document.getElementById('tabs-container').style.display = 'flex';
          document.getElementById('kpis-container').style.display = 'grid';
          document.getElementById('meta-container').style.display = 'flex';

          updateTimingTable(data.drivers);
          updateMetaBar();

          const sessionType = data.session.session_type.toUpperCase();
          document.getElementById('session-title').textContent = sessionType + ' Classification';
        } else if (message.type === 'error') {
          const data = message.data;
          showError(`Connection error: ${data.error}`);
          document.getElementById('loading-container').style.display = 'block';
          document.getElementById('loading-container').innerHTML = `<p style="color: #c00;">${data.error}</p>`;
        }
      } catch (e) {
        console.error('Error parsing message:', e);
      }
    };

    websocket.onerror = (error) => {
      updateConnectionStatus('Disconnected');
      showError('WebSocket error: Check browser console for details');
      console.error('WebSocket error:', error);
    };

    websocket.onclose = () => {
      updateConnectionStatus('Disconnected');
      document.getElementById('loading-container').style.display = 'block';
      document.getElementById('timing-container').style.display = 'none';
    };
  }

  // Setup event listeners
  setupTabs();

  // Update age every second
  setInterval(updateMetaBar, 1000);

  // Auto-start live stream on page load with detected race values
  window.addEventListener('load', () => {
    // Default session to "R" (Race) if viewing a live event
    document.getElementById('session').value = 'R';
    startLiveStream();
  });
</script>
{% endblock %}