<?php require_once __DIR__ . '/includes/bootstrap.php';
$pageTitle = 'Schedule | Underground FX Radio';
$currentPage = basename(__FILE__);
include __DIR__ . '/includes/header.php';

function ugfx_schedule_label(int $hour): string {
    return date('g:00 A', strtotime(sprintf('%02d:00', $hour)));
}

function ugfx_schedule_periods(array $slots): array {
    $groups = [
        'Morning / Day' => range(0, 11),
        'Evening / Night' => range(12, 23),
    ];
    $out = [];
    foreach ($groups as $label => $hours) {
        $rows = [];
        foreach ($hours as $hour) {
            $show = trim((string)($slots[$hour] ?? 'FX Vibe Radio Flow'));
            $isAuto = stripos($show, 'autodj') !== false || stripos($show, 'automix') !== false || strcasecmp($show, 'FX Vibe Radio Flow') === 0;
            $rows[] = [
                'hour' => $hour,
                'time' => ugfx_schedule_label($hour),
                'show' => $show !== '' ? $show : 'FX Vibe Radio Flow',
                'type' => $isAuto ? 'FX Vibe Radio Flow' : 'DJ Show',
                'is_auto' => $isAuto,
            ];
        }
        $out[$label] = $rows;
    }
    return $out;
}

$schedule = ugfx_get_schedule();
$today = ugfx_day_name();
$currentHour = (int) date('G');
$currentShow = $schedule[$today][$currentHour] ?? 'FX Vibe Radio Flow';
$nextHour = ($currentHour + 1) % 24;
$nextShow = $schedule[$today][$nextHour] ?? 'FX Vibe Radio Flow';
?>

<section class="ugfx-page-hero ugfx-schedule-hero-wrap">
  <div class="container-xxl">
    <div class="ugfx-card ugfx-schedule-hero-card">
      <div class="ugfx-kicker"><i class="bi bi-calendar2-week-fill"></i> Weekly programming</div>
      <h1 class="page-title mb-3">Underground FX schedule</h1>
      <p class="page-copy mb-0">One day at a time, cleaner hosted-show blocks, and every FX Vibe Radio Flow slot still visible so you can swap a DJ into that hour later.</p>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container-xxl">
    <div class="ugfx-schedule-mini-bar mb-3">
      <div class="ugfx-card ugfx-schedule-mini-card">
        <div class="ugfx-schedule-mini-label"><i class="bi bi-broadcast-pin"></i> Live right now</div>
        <strong><?= htmlspecialchars($currentShow) ?></strong>
        <small><?= htmlspecialchars($today) ?> · <?= date('g:i A') ?></small>
      </div>
      <div class="ugfx-card ugfx-schedule-mini-card">
        <div class="ugfx-schedule-mini-label"><i class="bi bi-clock-history"></i> Up next</div>
        <strong><?= htmlspecialchars($nextShow) ?></strong>
        <small>Starts <?= date('g:i A', strtotime(sprintf('%02d:00', $nextHour))) ?></small>
      </div>
    </div>

    <div class="ugfx-card ugfx-schedule-shell-premium p-3 p-lg-4">
      <div class="ugfx-schedule-tabs-premium" role="tablist" aria-label="Schedule days">
        <?php $dayIndex = 0; foreach ($schedule as $day => $slots): ?>
          <?php $isActive = ($day === $today) || ($today === '' && $dayIndex === 0); ?>
          <button class="ugfx-schedule-day-btn <?= $isActive ? 'is-active' : '' ?>" type="button" data-schedule-day="<?= htmlspecialchars($day) ?>" aria-pressed="<?= $isActive ? 'true' : 'false' ?>">
            <?= htmlspecialchars($day) ?>
          </button>
        <?php $dayIndex++; endforeach; ?>
      </div>

      <?php $dayIndex = 0; foreach ($schedule as $day => $slots): ?>
        <?php
          $isActive = ($day === $today) || ($today === '' && $dayIndex === 0);
          $periods = ugfx_schedule_periods($slots);
        ?>
        <div class="ugfx-schedule-day-panel <?= $isActive ? 'is-active' : '' ?>" data-schedule-panel="<?= htmlspecialchars($day) ?>">
          <div class="ugfx-schedule-day-head">
            <h2><?= htmlspecialchars($day) ?></h2>
            <?php if ($day === $today): ?><span class="ugfx-chip">Today</span><?php endif; ?>
          </div>

          <div class="ugfx-schedule-grid-premium">
            <?php foreach ($periods as $label => $rows): ?>
              <div class="ugfx-card ugfx-schedule-period-card">
                <div class="ugfx-schedule-period-head">
                  <h3><?= htmlspecialchars($label) ?></h3>
                </div>
                <div class="ugfx-schedule-period-list">
                  <?php foreach ($rows as $row): ?>
                    <?php $isLive = ($day === $today && $row['hour'] === $currentHour); ?>
                    <div class="ugfx-schedule-row <?= $isLive ? 'is-live' : '' ?> <?= $row['is_auto'] ? 'is-auto' : 'is-dj' ?>">
                      <div class="ugfx-schedule-time-pill"><?= htmlspecialchars($row['time']) ?></div>
                      <div class="ugfx-schedule-show-pill">
                        <span class="ugfx-schedule-show-name"><?= htmlspecialchars($row['show']) ?></span>
                        <?php if ($isLive): ?><span class="ugfx-live-pill">LIVE</span><?php endif; ?>
                      </div>
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      <?php $dayIndex++; endforeach; ?>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const tabs = Array.from(document.querySelectorAll('[data-schedule-day]'));
  const panels = Array.from(document.querySelectorAll('[data-schedule-panel]'));
  if (!tabs.length || !panels.length) return;

  function activate(day) {
    tabs.forEach((tab) => {
      const active = tab.getAttribute('data-schedule-day') === day;
      tab.classList.toggle('is-active', active);
      tab.setAttribute('aria-pressed', active ? 'true' : 'false');
    });
    panels.forEach((panel) => {
      panel.classList.toggle('is-active', panel.getAttribute('data-schedule-panel') === day);
    });
  }

  tabs.forEach((tab) => tab.addEventListener('click', () => activate(tab.getAttribute('data-schedule-day'))));
});
</script>

<?php include __DIR__ . '/includes/footer.php'; ?>
