<?php
require_once __DIR__ . '/includes/stream_lib.php';
$settingsFile = __DIR__ . '/data/settings.json';
$settings = file_exists($settingsFile) ? json_decode((string) file_get_contents($settingsFile), true) : [];
if (!is_array($settings)) $settings = [];
if (array_key_exists('top50_enabled', $settings) && empty($settings['top50_enabled'])) {
    http_response_code(404);
    $pageTitle = 'Top 50 Unavailable — Home Time Radio';
    include __DIR__ . '/includes/header.php';
    echo '<div class="container content-box mt-5"><div class="htr-box text-center"><h1>Top 50 is currently unavailable</h1></div></div>';
    include __DIR__ . '/includes/footer.php';
    exit;
}
$current = smurf_top50_touch(__DIR__ . '/data/top50.json', __DIR__ . '/data/top50_state.json');
$rows = smurf_top50_sorted(__DIR__ . '/data/top50.json');
$pageTitle = 'Top 50 — Home Time Radio';
include __DIR__ . '/includes/header.php';
?>
<style>
.top50-hero,.top50-card,.top50-row{background-color:var(--panel-color);color:var(--text-color);border:2px solid var(--accent-color);border-radius:16px;box-shadow:0 0 12px rgba(0,204,136,.22);} 
.top50-hero,.top50-card{padding:1.5rem;}
.top50-hero h1,.top50-card h2,.top50-copy h3{color:var(--accent-color);}
.top50-list{display:grid;gap:1rem;}
.top50-row{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;}
.top50-rank{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:700;background:rgba(0,0,0,.28);border:2px solid var(--accent-color);color:var(--accent-color);}
.top50-row.is-top{box-shadow:0 0 18px rgba(0,204,136,.32);}
.top50-copy p{margin:0 0 .35rem;}
.top50-note{opacity:.9;}
@media (max-width: 767px){.top50-row{grid-template-columns:1fr;text-align:center;}.top50-rank{margin:0 auto;}}
</style>
<div class="container content-box mt-5">
  <section class="top50-hero text-center mb-4">
    <h1>🎵 Home Time Top 50</h1>
    <p class="subtext">The homepage chart block has been moved out to its own page in the Smurfettes style, while keeping the Home Time look and theme.</p>
    <?php if ($current): ?><p class="top50-note mb-0">Now tracking: <strong><?= htmlspecialchars($current, ENT_QUOTES, 'UTF-8') ?></strong></p><?php endif; ?>
  </section>

  <section class="top50-card">
    <h2 class="mb-4">Live Chart</h2>
    <?php if (empty($rows)): ?>
      <p class="mb-0">No chart data yet. Once the stream is running, this page will begin building automatically.</p>
    <?php else: ?>
      <div class="top50-list">
        <?php foreach ($rows as $idx => $row): ?>
          <article class="top50-row <?= $idx < 3 ? 'is-top' : '' ?>">
            <div class="top50-rank">#<?= $idx + 1 ?></div>
            <div class="top50-copy">
              <h3><?= htmlspecialchars((string)($row['title'] ?? ''), ENT_QUOTES, 'UTF-8') ?></h3>
              <p><strong>Tracked spins:</strong> <?= (int)($row['count'] ?? 0) ?></p>
              <?php if (!empty($row['last_seen'])): ?><p><strong>Last seen:</strong> <?= htmlspecialchars((string)$row['last_seen'], ENT_QUOTES, 'UTF-8') ?></p><?php endif; ?>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </section>
</div>
<?php include __DIR__ . '/includes/footer.php'; ?>
