<?php require_once __DIR__ . '/config.php'; $settings = get_settings(); ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= esc($settings['event_name'] ?? ($settings['site_name'] ?? 'Broadcasturself')) ?></title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="site-shell">
  <div class="topbar">
    <div class="brand">
      <img src="<?= esc($settings['site_logo'] ?? 'assets/site-logo.png') ?>" alt="Logo">
      <div>
        <h1><?= esc($settings['site_name'] ?? 'Broadcasturself') ?></h1>
        <div class="meta"><?= esc($settings['site_tagline'] ?? 'Live radio event network') ?></div>
      </div>
    </div>
    <div class="live-pill"><span class="live-dot"></span><span><?= strtoupper(esc($settings['site_status'] ?? 'live')) ?></span></div>
  </div>
  <div class="nav">
    <a href="index.php">Home</a>
    <a href="stations.php">Participating Stations</a>
    <a href="schedule.php">Schedule</a>
    <a href="submit.php">Submit Entry</a>
    <a href="poll.php">Live Polls</a>
  </div>
    <?php
    $clues = get_clues();
    $stations = get_stations();
    $remaining = time_remaining($settings);
    $network = current_network_message();
    $dj = latest_dj_message();
    ?>
    <div class="alert-stack">
      <?php if (($settings['site_status'] ?? 'live') === 'offline'): ?>
        <div class="banner danger">The site is currently offline.</div>
      <?php elseif (($settings['site_status'] ?? 'live') === 'coming_soon'): ?>
        <div class="banner warn"><?= esc($settings['coming_soon_text'] ?? 'Coming soon.') ?></div>
      <?php endif; ?>

      <?php if (!empty($settings['announcement_enabled']) && !empty($settings['announcement_text'])): ?>
        <div class="banner info"><?= esc($settings['announcement_text']) ?></div>
      <?php endif; ?>

      <?php if (!empty($settings['winner_announced']) && !empty($settings['winner_name'])): ?>
        <div class="banner success">🏆 We have a winner: <strong><?= esc($settings['winner_name']) ?></strong></div>
      <?php endif; ?>

      <?php if (!empty($network['global_message'])): ?>
        <div class="banner <?= ($network['type'] ?? '') === 'winner' ? 'success' : (($network['type'] ?? '') === 'switch' ? 'warn' : 'info') ?>">
          <?= esc($network['global_message']) ?>
        </div>
      <?php endif; ?>

      <?php if ($dj): ?>
        <div class="banner <?= ($dj['type'] ?? '') === 'onair' ? 'danger' : 'info' ?>">
          <?= ($dj['type'] ?? '') === 'onair' ? '🔴 ON AIR: ' : '📢 ' ?><?= esc($dj['message'] ?? '') ?>
        </div>
      <?php endif; ?>
    </div>

    <div class="hero hero-grid">
      <div>
        <div class="status-pill"><?= esc($settings['event_type'] ?? 'Featured Event') ?></div>
        <h2><?= esc($settings['headline'] ?? ($settings['event_name'] ?? 'Live Event')) ?></h2>
        <p><?= nl2br(esc($settings['description'] ?? 'Welcome to the event platform.')) ?></p>
        <p class="meta"><?= esc($settings['date_range'] ?? '') ?></p>
        <?php if (!empty($settings['primary_button_url']) && !empty($settings['primary_button_label'])): ?>
          <p><a class="button" href="<?= esc($settings['primary_button_url']) ?>" target="_blank" rel="noopener"><?= esc($settings['primary_button_label']) ?></a></p>
        <?php endif; ?>
      </div>
      <div class="panel <?= !empty($settings['kicker_active']) ? 'kicker' : '' ?>">
        <h3>Live Event Control</h3>
        <?php if ($remaining > 0): ?>
          <div class="countdown" id="countdown" data-seconds="<?= $remaining ?>">--:--</div>
          <div class="meta">Submissions close automatically when the timer hits zero.</div>
        <?php else: ?>
          <div class="countdown">No active countdown</div>
          <div class="meta">The countdown can be started from the admin control room.</div>
        <?php endif; ?>
        <?php if (!empty($settings['kicker_active'])): ?>
          <div class="banner warn" style="margin-top:12px">🎯 Kicker round is active.</div>
        <?php endif; ?>
      </div>
    </div>

    <div class="grid cards">
      <div class="card">
        <h3>About This Event</h3>
        <p><?= nl2br(esc($settings['how_it_works'] ?? '')) ?></p>
      </div>
      <div class="card">
        <h3>Participating Stations</h3>
        <p><?= count($stations) ?> stations are taking part across the network.</p>
        <p><a class="button secondary" href="stations.php">View all stations</a></p>
      </div>
      <div class="card">
        <h3>Now Playing</h3>
        <div id="now-playing-widget" class="small">Loading live station metadata…</div>
      </div>
    </div>

    <?php if (!empty($clues)): ?>
      <div class="card" style="margin-top:18px">
        <h3><?= esc($settings['clue_box_title'] ?? 'Clues') ?></h3>
        <p class="meta"><?= esc($settings['clue_box_intro'] ?? '') ?></p>
        <div class="grid cards">
          <?php foreach ($clues as $index => $clue): ?>
            <div class="panel">
              <h4><?= esc($clue['label'] ?? ('Clue ' . ($index + 1))) ?></h4>
              <?php if (!empty($clue['teaser'])): ?><div class="meta"><?= esc($clue['teaser']) ?></div><?php endif; ?>
              <p><?= nl2br(esc($clue['body'] ?? '')) ?></p>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endif; ?>

    <script>
    (function(){
      var el = document.getElementById('countdown');
      if (el) {
        var remaining = parseInt(el.getAttribute('data-seconds'), 10) || 0;
        function render() {
          var m = Math.floor(remaining / 60);
          var s = remaining % 60;
          el.textContent = m + ':' + String(s).padStart(2, '0');
          if (remaining > 0) {
            remaining--;
            setTimeout(render, 1000);
          }
        }
        render();
      }

      function refreshNowPlaying() {
        fetch('now-playing.php')
          .then(function(r){ return r.json(); })
          .then(function(rows){
            var target = document.getElementById('now-playing-widget');
            if (!Array.isArray(rows) || rows.length === 0) {
              target.textContent = 'No live stream data available yet.';
              return;
            }
            target.innerHTML = rows.map(function(row){
              var badge = row.status === 'live' ? '🔴 LIVE' : (row.status === 'auto' ? '🟡 AUTO' : '⚫ OFFLINE');
              return '<div class="feed-item"><strong>' + row.station + '</strong><br>' + badge + '<br>🎧 ' + row.title + '<br>Listeners: ' + row.listeners + '</div>';
            }).join('');
          })
          .catch(function(){
            document.getElementById('now-playing-widget').textContent = 'Unable to load live stream data.';
          });
      }
      refreshNowPlaying();
      setInterval(refreshNowPlaying, 10000);
    })();
    </script>

  <div class="footer-note"><?= esc($settings['footer_note'] ?? 'Powered by Broadcasturself') ?></div>
</div>
</body>
</html>
