<?php
declare(strict_types=1);

require __DIR__ . '/../access.php';
$config = require __DIR__ . '/../config.php';

// --- Второй слой защиты поверх Cloudflare Access на границе ---
$jwt = $_SERVER['HTTP_CF_ACCESS_JWT_ASSERTION'] ?? null;
$claims = $jwt !== null
    ? cfAccessVerify($jwt, $config['cf_team_domain'], $config['cf_access_aud'])
    : null;

if ($claims === null) {
    http_response_code(403);
    header('Content-Type: text/plain; charset=utf-8');
    echo "Доступ запрещён: проверка Cloudflare Access не пройдена.";
    exit;
}

$userEmail   = $claims['email'] ?? 'неизвестно';
$streamPath  = $config['stream_path'];
$channelName = $config['channel_name'];
$hostname    = $config['public_hostname'];
?>
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow">
  <title>Трансляция</title>
  <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=Space+Grotesk:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>

  <div class="console">
    <div class="console__strip">
      <div class="tally" id="tally">
        <span class="tally__dot"></span>
        <span id="tallyLabel">проверка…</span>
      </div>
      <div class="console__channel">CH·01 · <?= htmlspecialchars($channelName, ENT_QUOTES) ?></div>
      <div class="console__meta">
        <span id="clock">00:00:00</span>
        <span>зрителей: <strong id="viewers">—</strong></span>
      </div>
    </div>

    <div class="screen">
      <div class="screen__frame">
        <video id="player" controls autoplay muted playsinline></video>
      </div>
    </div>

    <div class="console__footer">
      <span><?= htmlspecialchars($hostname, ENT_QUOTES) ?></span>
      <span>вошли как <?= htmlspecialchars($userEmail, ENT_QUOTES) ?></span>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
  <script>
    const streamPath = <?= json_encode($streamPath) ?>;
    const video = document.getElementById('player');
    const tally = document.getElementById('tally');
    const tallyLabel = document.getElementById('tallyLabel');
    const viewers = document.getElementById('viewers');
    const clockEl = document.getElementById('clock');

    async function playWebRTC() {
      const pc = new RTCPeerConnection();
      pc.addTransceiver('video', { direction: 'recvonly' });
      pc.addTransceiver('audio', { direction: 'recvonly' });
      pc.ontrack = (event) => {
        if (video.srcObject !== event.streams[0]) {
          video.srcObject = event.streams[0];
        }
      };
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);
      const resp = await fetch('/whep', {
        method: 'POST',
        headers: { 'Content-Type': 'application/sdp' },
        body: offer.sdp,
      });
      if (!resp.ok) throw new Error('WHEP недоступен');
      const answerSdp = await resp.text();
      await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
      return pc;
    }

    function playHls() {
      const src = `/hls/${streamPath}/index.m3u8`;
      if (Hls.isSupported()) {
        const hls = new Hls({ liveSyncDuration: 3 });
        hls.loadSource(src);
        hls.attachMedia(video);
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = src;
      }
    }

    playWebRTC().catch(() => playHls());

    async function pollStatus() {
      try {
        const r = await fetch('/api/status', { cache: 'no-store' });
        const data = await r.json();
        tally.className = 'tally ' + (data.live ? 'is-live' : 'is-offline');
        tallyLabel.textContent = data.live ? 'в эфире' : 'не в эфире';
        viewers.textContent = data.live ? data.readers : '0';
      } catch {
        tally.className = 'tally is-offline';
        tallyLabel.textContent = 'нет связи';
      }
    }
    pollStatus();
    setInterval(pollStatus, 10000);

    function tick() {
      const now = new Date();
      const pad = (n) => String(n).padStart(2, '0');
      clockEl.textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    }
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>
