(function() {
  var CURRENT_BIB = null;

  function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }

  function formatIsoToTime(iso) {
    if (!iso) return '';
    try {
      var d = new Date(iso);
      return d.toLocaleTimeString('ru-RU', { hour12: false });
    } catch (e) {
      return iso;
    }
  }

  function renderFeedItems(items) {
      var feedEl = document.getElementById('feed');
      if (!feedEl) return;
      if (!items || !items.length) {
      feedEl.innerHTML = '<div class="feed-empty"><i>Пока нет проходов по КП</i></div>';
      return;
      }
      var html = '';
      for (var i = 0; i < items.length; i++) {
      var it = items[i];
      html += '<div class="feed-item">';
      html += '  <div class="feed-main">';
      html += '    <div class="feed-bib-line">';
      html += '      <span class="feed-bib">#' + (it.bib || '') + '</span>';
      html += '      <span class="feed-name">' + (it.name || '') + '</span>';
      if (it.cp_code) {{
        html += '      <span class="badge-cp">CP ' + it.cp_code +
                (it.lap_no != null ? (' · Lap ' + it.lap_no) : '') +
                '</span>';
      }} else {{
        html += '      <span class="badge-cp">CP ?</span>';
      }}
      html += '    </div>';
      if (it.team) {{
        html += '    <div class="feed-meta-small">' + it.team + '</div>';
      }}
      html += '  </div>';
      html += '  <div class="feed-ts">' + (it.ts ? formatIsoToTime(it.ts) : '') + '</div>';
      html += '</div>';
      }
      feedEl.innerHTML = html;
  }


  async function loadParticipant(EVENT_ID, bib) {
    CURRENT_BIB = bib;
    var card = document.getElementById('participant-card');
    if (!card) return;
    card.innerHTML = '<i>Загрузка...</i>';
    try {
      var resp = await fetch('/public/api/spectator/participant?event_id=' + EVENT_ID + '&bib=' + encodeURIComponent(bib));
      if (!resp.ok) {
        card.innerHTML = '<span style="color:#f97373;">Участник не найден</span>';
        return;
      }
      var data = await resp.json();
      var p = data.participant;
      var dist = data.distance || {};
      var res = data.result || {};

      // при желании можно динамически обновить заголовок события
      var subtitle = document.querySelector('.subtitle');
      if (subtitle && data.event && data.event.name) {{
        subtitle.textContent = data.event.name + ' · Event ID=' + data.event.id;
      }}

      var statusLabel = data.status || 'UNKNOWN';
      var statusColor = '#4b5563';
      if (statusLabel.indexOf('FINISH') === 0) statusColor = '#16a34a';
      else if (statusLabel.indexOf('DNS') === 0 || statusLabel.indexOf('DNF') === 0) statusColor = '#b91c1c';
      else if (statusLabel) statusColor = '#1d4ed8';

      var lastSplit = data.last_split;
      var eta = data.eta_finish;

      var html = '';
      html += '<div class="participant-name">#' + (p.bib || '') + ' ' + (p.name || '') + '</div>';
      html += '<div class="participant-meta">';
      html += (dist.name ? ('Дистанция: ' + dist.name) : 'Дистанция: —');
      if (p.team) {{
        html += ' · Команда: ' + p.team;
      }}
      if (p.age != null) {{
        html += ' · Возраст: ' + p.age;
      }}
      html += '</div>';

      // Верхние "пилюли"
      html += '<div class="pill-row">';
      html += '  <div class="pill"><span class="pill-label">Статус</span><span class="pill-value" style="color:' + statusColor + ';">' + (statusLabel || '—') + '</span></div>';
      if (data.laps_done != null && dist.total_laps != null) {{
        html += '  <div class="pill"><span class="pill-label">Круги</span><span class="pill-value">' + data.laps_done + ' / ' + dist.total_laps + '</span></div>';
      }}
      if (eta) {{
        html += '  <div class="pill"><span class="pill-label">ETA финиша</span><span class="pill-value">' + eta + '</span></div>';
      }}
      html += '</div>';

      // Сетка статов
      html += '<div class="stat-grid">';
      html += '  <div class="stat-item">';
      html += '    <div class="stat-label">Старт</div>';
      html += '    <div class="stat-value">' + (res.start_ts ? formatIsoToTime(res.start_ts) : '—') + '</div>';
      html += '  </div>';
      html += '  <div class="stat-item">';
      html += '    <div class="stat-label">Финиш</div>';
      html += '    <div class="stat-value">' + (res.finish_ts ? formatIsoToTime(res.finish_ts) : '—') + '</div>';
      html += '  </div>';
      html += '  <div class="stat-item">';
      html += '    <div class="stat-label">Итоговое время</div>';
      html += '    <div class="stat-value">' + (res.elapsed || '—') + '</div>';
      html += '  </div>';
      html += '  <div class="stat-item">';
      html += '    <div class="stat-label">Последний КП</div>';
      if (lastSplit && lastSplit.cp_code) {{
        var cp = 'CP ' + lastSplit.cp_code;
        if (lastSplit.lap_no != null) {{
          cp += ' · Lap ' + lastSplit.lap_no;
        }}
        html += '    <div class="stat-value">' + cp + '</div>';
      }} else {{
        html += '    <div class="stat-value">—</div>';
      }}
      html += '  </div>';
      html += '</div>';

      // Время последнего КП снизу
      html += '<div class="row">';
      html += 'Последний проход по КП в ';
      if (lastSplit && lastSplit.ts) {{
        html += formatIsoToTime(lastSplit.ts);
      }} else {{
        html += '—';
      }}
      html += '</div>';

      card.innerHTML = html;
    } catch (e) {
      console.error(e);
      card.innerHTML = '<span style="color:#f97373;">Ошибка загрузки данных</span>';
    }
  }


  async function loadFeedOnce(EVENT_ID) {
    var feedEl = document.getElementById('feed');
    if (!feedEl) return;
    try {
      var resp = await fetch('/public/api/spectator/feed?event_id=' + EVENT_ID + '&limit=30');
      if (!resp.ok) {
        feedEl.innerHTML = '<div class="feed-item"><span style="color:#f97373;">Ошибка загрузки ленты</span></div>';
        return;
      }
      var data = await resp.json();
      renderFeedItems(data.items || []);
    } catch (e) {
      console.error(e);
      feedEl.innerHTML = '<div class="feed-item"><span style="color:#f97373;">Ошибка загрузки ленты</span></div>';
    }
  }

    async function subscribePush(EVENT_ID) {
    if (!('Notification' in window) || !('serviceWorker' in navigator) || !('PushManager' in window)) {
      alert('Браузер не поддерживает push-уведомления');
      return;
    }
    if (!CURRENT_BIB) {
      alert('Сначала выберите участника (BIB)');
      return;
    }

    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
      alert('Уведомления не разрешены');
      return;
    }

    const reg = await navigator.serviceWorker.ready;

    // Получаем публичный VAPID-ключ
    const cfgResp = await fetch('/public/api/push/config');
    const cfg = await cfgResp.json();
    const vapidKey = cfg.vapid_public_key;
    if (!vapidKey) {
      alert('Сервер не настроен для push (нет VAPID ключа)');
      return;
    }

    const applicationServerKey = urlBase64ToUint8Array(vapidKey);
    const sub = await reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    await fetch('/public/api/push/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event_id: EVENT_ID,
        bib: CURRENT_BIB,
        subscription: sub
      })
    });

    alert('Подписка на уведомления оформлена');
  }


  document.addEventListener('DOMContentLoaded', function() {
    var body = document.body;
    var eventIdAttr = body ? body.getAttribute('data-event-id') : null;
    var EVENT_ID = eventIdAttr ? parseInt(eventIdAttr, 10) : null;
    if (!EVENT_ID) {
      console.warn('No EVENT_ID on page');
      return;
    }

        // --- Автозагрузка участника по BIB из URL ---
    var params = new URLSearchParams(window.location.search);
    var urlBib = params.get('bib');
    if (urlBib) {
      CURRENT_BIB = urlBib;
      var bibInput = document.getElementById('bib-input');
      if (bibInput) bibInput.value = urlBib;
      loadParticipant(EVENT_ID, urlBib);
    }


    var bibInput = document.getElementById('bib-input');
    var bibBtn = document.getElementById('bib-btn');
    var notifyBtn = document.getElementById('notify-btn');
    if (notifyBtn) {
      notifyBtn.addEventListener('click', function () {
        subscribePush(EVENT_ID);
      });
    }


    if (bibBtn) {
      bibBtn.addEventListener('click', function() {
        if (!bibInput) return;
        var v = (bibInput.value || '').trim();
        if (!v) return;
        loadParticipant(EVENT_ID, v);
      });
    }

    if (bibInput) {
      bibInput.addEventListener('keyup', function(e) {
        if (e.key === 'Enter') {
          var v = (bibInput.value || '').trim();
          if (v) loadParticipant(EVENT_ID, v);
        }
      });
    }

    // первичная загрузка ленты
    loadFeedOnce(EVENT_ID);

    if ('EventSource' in window) {
      var es = new EventSource('/public/api/spectator/feed_sse?event_id=' + EVENT_ID);
      es.onmessage = function(e) {
        try {
          var data = JSON.parse(e.data);
          renderFeedItems(data.items || []);
        } catch (err) {
          console.error('SSE parse error', err);
        }
      };
      es.onerror = function(e) {
        console.error('SSE error', e);
      };
    } else {
      // fallback: периодический опрос
      setInterval(function() {
        loadFeedOnce(EVENT_ID);
      }, 10000);
    }
  });
})();