<?php require_once __DIR__ . '/includes/bootstrap.php';
$pageTitle = 'Charts | Underground FX Radio';
$currentPage = basename(__FILE__);
$chartItems = ugfx_top50_all();
$chartStats = ugfx_top50_stats();
$chartMeta = ugfx_chart_meta();
$recentChartHits = ugfx_chart_history(8);
$topTen = array_slice($chartItems, 0, 10);
include __DIR__ . '/includes/header.php';
?>
<section class="ugfx-page-hero">
  <div class="container-xxl">
    <div class="ugfx-kicker"><i class="bi bi-graph-up-arrow"></i> Underground FX Radio</div>
    <h1 class="page-title">Underground FX charts</h1>
    <p class="page-copy">Auto-updating Chart system captures that spin and updates the board automatically.</p>
  </div>
</section>

<section class="section-pad pt-3">
  <div class="container-xxl">
    <div class="row g-4 mb-4">
      <div class="col-md-3"><div class="ugfx-card p-4 h-100"><div class="ugfx-micro-label">TRACKS</div><h2><?= (int)($chartStats['tracks'] ?? 0) ?></h2><div class="text-secondary">Entries in rotation</div></div></div>
      <div class="col-md-3"><div class="ugfx-card p-4 h-100"><div class="ugfx-micro-label">TOTAL PLAYS</div><h2><?= (int)($chartStats['total_plays'] ?? 0) ?></h2><div class="text-secondary">Combined chart count</div></div></div>
      <div class="col-md-3"><div class="ugfx-card p-4 h-100"><div class="ugfx-micro-label">ARTISTS</div><h2><?= (int)($chartStats['artists'] ?? 0) ?></h2><div class="text-secondary">Unique artist names</div></div></div>
      <div class="col-md-3"><div class="ugfx-card p-4 h-100"><div class="ugfx-micro-label">UPDATED</div><h2 style="font-size:1rem"><?= htmlspecialchars($chartStats['last_updated'] ?: 'Waiting for update') ?></h2><div class="text-secondary">Most recent chart activity</div></div></div>
    </div>


    <div class="ugfx-card p-4 mb-4">
      <div class="row g-3 align-items-center">
        <div class="col-lg-7">
          <div class="ugfx-micro-label">AUTO CAPTURE</div>
          <h3 class="mb-2">Live chart sync is on</h3>
          <div class="text-secondary">Last detected track: <strong><?= htmlspecialchars((string)($chartMeta['last_seen_title'] ?? 'Waiting for track data')) ?></strong></div>
          <div class="text-secondary">Last recorded spin: <?= htmlspecialchars((string)($chartMeta['last_recorded_at'] ?? 'Not recorded yet')) ?><?php if (!empty($chartMeta['last_mount'])): ?> · Mount <?= htmlspecialchars((string)$chartMeta['last_mount']) ?><?php endif; ?></div>
        </div>
        <div class="col-lg-5">
          <div class="row g-3">
            <?php foreach ($recentChartHits as $hit): ?>
              <div class="col-12">
                <div class="d-flex justify-content-between gap-3 border rounded-4 p-3">
                  <div>
                    <div class="fw-semibold"><?= htmlspecialchars((string)($hit['title'] ?? 'Track')) ?></div>
                    <div class="text-secondary small">Detected <?= htmlspecialchars((string)($hit['seen_at'] ?? '')) ?></div>
                  </div>
                  <span class="ugfx-chip"><?= (int)($hit['listeners'] ?? 0) ?> listeners</span>
                </div>
              </div>
            <?php endforeach; ?>
            <?php if (!$recentChartHits): ?><div class="col-12 text-secondary">Recent auto-detected spins will appear here.</div><?php endif; ?>
          </div>
        </div>
      </div>
    </div>

    <div class="ugfx-card p-4 mb-4">
      <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-3">
        <div>
          <div class="ugfx-micro-label">TOP 10</div>
          <h3 class="mb-0">Hot rotation</h3>
        </div>
        <div class="text-secondary">Use the search box below to filter the full chart list.</div>
      </div>
      <div class="row g-3">
        <?php foreach ($topTen as $index => $track): ?>
          <div class="col-md-6 col-xl-4">
            <div class="ugfx-card p-3 h-100">
              <div class="d-flex justify-content-between gap-3">
                <div>
                  <div class="ugfx-micro-label">#<?= $index + 1 ?></div>
                  <div class="fw-bold"><?= htmlspecialchars((string)($track['title'] ?? 'Untitled')) ?></div>
                  <?php if (!empty($track['last_seen'])): ?><div class="text-secondary small">Last seen: <?= htmlspecialchars((string)$track['last_seen']) ?></div><?php endif; ?>
                </div>
                <span class="ugfx-chip ugfx-chip-blue"><?= (int)($track['count'] ?? 0) ?> plays</span>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
        <?php if (!$topTen): ?>
          <div class="col-12"><div class="text-secondary">No chart data has been added yet.</div></div>
        <?php endif; ?>
      </div>
    </div>

    <div class="ugfx-card p-4">
      <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap mb-3">
        <div>
          <div class="ugfx-micro-label">FULL BOARD</div>
          <h3 class="mb-0">Top 50 ranking</h3>
        </div>
        <div style="min-width:260px; max-width:420px; width:100%;">
          <input type="search" class="form-control" id="ugfxChartSearch" placeholder="Search artist or song">
        </div>
      </div>
      <div class="table-responsive">
        <table class="table ugfx-table align-middle" id="ugfxChartsTable">
          <thead><tr><th>#</th><th>Track</th><th>Plays</th><th>Last seen</th></tr></thead>
          <tbody>
            <?php foreach ($chartItems as $index => $track): ?>
            <tr data-chart-row>
              <td><?= $index + 1 ?></td>
              <td data-chart-title><?= htmlspecialchars((string)($track['title'] ?? 'Track')) ?></td>
              <td><?= (int)($track['count'] ?? 0) ?></td>
              <td><?= htmlspecialchars((string)($track['last_seen'] ?? '')) ?></td>
            </tr>
            <?php endforeach; ?>
            <?php if (!$chartItems): ?>
              <tr><td colspan="4" class="text-center text-secondary py-4">No chart data available yet.</td></tr>
            <?php endif; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<script>
(function(){
  const search = document.getElementById('ugfxChartSearch');
  const rows = Array.from(document.querySelectorAll('[data-chart-row]'));
  if (!search || !rows.length) return;
  search.addEventListener('input', function(){
    const q = (this.value || '').toLowerCase().trim();
    rows.forEach((row) => {
      const text = (row.querySelector('[data-chart-title]')?.textContent || '').toLowerCase();
      row.style.display = !q || text.includes(q) ? '' : 'none';
    });
  });
})();
</script>
<?php include __DIR__ . '/includes/footer.php'; ?>
