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

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

function ugfx_schedule_range_label(int $start, int $end): string {
    return ugfx_schedule_hour_label($start) . ' - ' . date('g:00 A', strtotime(sprintf('%02d:00', $end % 24)));
}

function ugfx_schedule_show_name(array $selected, int $hour): string {
    $show = trim((string)($selected[$hour] ?? 'Underground FX AutoDJ'));
    return $show !== '' ? $show : 'Underground FX AutoDJ';
}

$schedule = ugfx_get_schedule();
$days = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
foreach ($days as $day) {
    if (!isset($schedule[$day]) || !is_array($schedule[$day])) {
        $schedule[$day] = array_fill(0, 24, 'Underground FX AutoDJ');
    }
}
$today = ugfx_day_name();
if (!in_array($today, $days, true)) $today = 'Monday';
$currentHour = (int) date('G');
$currentShow = ugfx_schedule_show_name($schedule[$today], $currentHour);
$nextHour = ($currentHour + 1) % 24;
$nextShow = ugfx_schedule_show_name($schedule[$today], $nextHour);
$periods = [
    ['key' => 'morning', 'title' => 'Morning', 'range' => '12:00 AM - 11:00 AM', 'start' => 0, 'end' => 11],
    ['key' => 'afternoon', 'title' => 'Afternoon', 'range' => '12:00 PM - 5:00 PM', 'start' => 12, 'end' => 17],
    ['key' => 'evening', 'title' => 'Evening', 'range' => '6:00 PM - 11:00 PM', 'start' => 18, 'end' => 23],
];
?>
<section class="ugfx-page-hero">
  <div class="container-xxl">
    <div class="ugfx-kicker"><i class="bi bi-calendar2-week-fill"></i> Underground FX Radio</div>
    <h1 class="page-title">On-air schedule</h1>
    <p class="page-copy">Select a day to view the full 24-hour station board. AutoDJ slots stay visible so they can be swapped out later.</p>
  </div>
</section>

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

      <div class="ugfx-schedule-tabs mt-3" role="tablist" aria-label="Schedule days">
        <?php foreach ($days as $day): ?>
          <?php $isActive = $day === $today; ?>
          <button
            class="ugfx-schedule-tab <?= $isActive ? 'is-active' : '' ?>"
            type="button"
            data-schedule-day="<?= htmlspecialchars($day) ?>"
            aria-pressed="<?= $isActive ? 'true' : 'false' ?>"
          >
            <span><?= htmlspecialchars(substr($day, 0, 3)) ?></span>
            <small><?= htmlspecialchars($day) ?></small>
          </button>
        <?php endforeach; ?>
      </div>

      <?php foreach ($days as $day): ?>
        <?php $selected = $schedule[$day]; $isActive = $day === $today; ?>
        <div class="ugfx-schedule-panel <?= $isActive ? 'is-active' : '' ?>" data-schedule-panel="<?= htmlspecialchars($day) ?>">
          <div class="ugfx-schedule-header">
            <div>
              <div class="ugfx-kicker"><i class="bi bi-stars"></i> <?= htmlspecialchars($day) ?></div>
              <h3 class="mt-3 mb-2"><?= htmlspecialchars($day) ?> lineup</h3>
              <p class="text-secondary mb-0">Full 24-hour lineup for <?= htmlspecialchars($day) ?> with all scheduled and AutoDJ hours visible.</p>
            </div>
          </div>

          <div class="ugfx-schedule-table-grid mt-4">
            <?php foreach ($periods as $period): ?>
              <div class="ugfx-schedule-table-card">
                <div class="ugfx-schedule-table-head">
                  <div class="ugfx-schedule-table-title"><?= htmlspecialchars($period['title']) ?></div>
                  <div class="ugfx-schedule-table-range"><?= htmlspecialchars($period['range']) ?></div>
                </div>
                <div class="table-responsive">
                  <table class="table ugfx-schedule-table align-middle mb-0">
                    <thead>
                      <tr>
                        <th style="width:140px;">Time</th>
                        <th>Show</th>
                        <th style="width:120px;">Type</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php for ($h = $period['start']; $h <= $period['end']; $h++): ?>
                        <?php
                          $show = ugfx_schedule_show_name($selected, $h);
                          $isAuto = stripos($show, 'autodj') !== false;
                          $isLive = ($day === $today && $currentHour === $h);
                        ?>
                        <tr class="<?= $isLive ? 'is-live' : '' ?>">
                          <td class="ugfx-schedule-time-cell"><?= htmlspecialchars(ugfx_schedule_hour_label($h)) ?></td>
                          <td>
                            <div class="ugfx-schedule-showname"><?= htmlspecialchars($show) ?></div>
                          </td>
                          <td>
                            <span class="ugfx-schedule-pill <?= $isAuto ? 'is-auto' : 'is-hosted' ?>"><?= $isAuto ? 'AutoDJ' : 'DJ Show' ?></span>
                            <?= $isLive ? '<span class="ugfx-live-pill ms-2">LIVE</span>' : '' ?>
                          </td>
                        </tr>
                      <?php endfor; ?>
                    </tbody>
                  </table>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      <?php 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) => {
      const active = panel.getAttribute('data-schedule-panel') === day;
      panel.classList.toggle('is-active', active);
    });
  }

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

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