<?php /** @var array $grouped; @var string $status; @var array $tabs */ ?>
<div class="p-5 md:p-8">
  <div class="flex items-start justify-between mb-6">
    <div>
      <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('hub.appointments.kicker')) ?></div>
      <h1 class="mt-1 text-2xl md:text-3xl font-display"><?= e(t('hub.appointments.title')) ?></h1>
    </div>
    <a href="<?= url('/hub/new-appointment') ?>" class="btn-gold text-xs px-4 py-2.5 flex items-center gap-2 shrink-0">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      <?= e(t('hub.appointments.new')) ?>
    </a>
  </div>

  <!-- Status tabs -->
  <div class="flex flex-wrap gap-1.5 mb-6">
    <?php foreach ($tabs as $tab): ?>
      <a href="<?= url('/hub/appointments?status=' . $tab) ?>"
         class="px-3 py-1.5 rounded-full text-xs font-medium uppercase tracking-wider transition-colors <?= $status === $tab ? 'bg-gold text-ink' : 'bg-white/5 text-bone/60 hover:bg-white/10 hover:text-bone' ?>">
        <?= e(t('appt.status.' . strtolower($tab))) ?>
      </a>
    <?php endforeach; ?>
  </div>

  <?php if (empty($grouped)): ?>
    <div class="bg-ink/40 border border-white/10 rounded-2xl p-16 text-center">
      <div class="text-4xl mb-3">📅</div>
      <div class="text-bone/40 text-sm"><?= e(t('hub.appointments.empty')) ?></div>
    </div>
  <?php else: ?>
    <div class="space-y-6">
      <?php foreach ($grouped as $day => $appts):
        if ($day === 'unknown') {
          $dayLabel = '—';
        } else {
          $dt = new DateTimeImmutable($day);
          $today    = (new DateTimeImmutable('today'))->format('Y-m-d');
          $tomorrow = (new DateTimeImmutable('tomorrow'))->format('Y-m-d');
          if ($day === $today)    $dayLabel = t('hub.appointments.today');
          elseif ($day === $tomorrow) $dayLabel = t('hub.appointments.tomorrow');
          else $dayLabel = $dt->format('l, F j');
        }
      ?>
        <!-- Day group -->
        <div>
          <div class="flex items-center gap-3 mb-2">
            <span class="text-xs font-semibold uppercase tracking-widest text-gold"><?= e($dayLabel) ?></span>
            <div class="flex-1 border-t border-white/5"></div>
            <span class="text-xs text-bone/30"><?= count($appts) ?></span>
          </div>

          <div class="space-y-2">
            <?php foreach ($appts as $a):
              $cust   = $a['_customer'] ?? null;
              $artist = $a['_artist']   ?? null;
              $time   = !empty($a['start_at']) ? (new DateTimeImmutable($a['start_at']))->format('g:i A') : '—';
              $booked = !empty($a['created_at']) ? (new DateTimeImmutable($a['created_at']))->format('M j') : '—';
              $custName = trim(($cust['first_name'] ?? '') . ' ' . ($cust['last_name'] ?? '')) ?: '—';
            ?>
              <a href="<?= url('/hub/appointments/' . e($a['id'])) ?>"
                 class="flex items-center gap-4 bg-ink/40 border border-white/8 hover:border-white/20 rounded-xl px-4 py-3.5 transition-colors group">
                <!-- Time -->
                <div class="w-16 shrink-0 text-center">
                  <div class="text-sm font-semibold text-bone/90"><?= e($time) ?></div>
                </div>
                <!-- Divider -->
                <div class="w-px h-8 bg-white/10 shrink-0"></div>
                <!-- Info -->
                <div class="flex-1 min-w-0">
                  <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-sm font-medium truncate"><?= e($custName) ?></span>
                    <span class="pill pill-<?= e(strtolower($a['status'] ?? 'pending')) ?>"><?= e(t('appt.status.' . strtolower($a['status'] ?? 'pending'))) ?></span>
                  </div>
                  <div class="text-xs text-bone/50 mt-0.5 flex items-center gap-2 flex-wrap">
                    <span><?= e($artist['display_name'] ?? t('booking.no_preference')) ?></span>
                    <span class="text-white/20">·</span>
                    <span><?= e(t('hub.appointments.booked')) ?>: <?= e($booked) ?></span>
                    <?php if (!empty($a['source']) && $a['source'] !== 'ONLINE'): ?>
                      <span class="text-white/20">·</span>
                      <span class="uppercase tracking-widest"><?= e($a['source']) ?></span>
                    <?php endif; ?>
                    <?php if (($a['status'] ?? '') === 'CANCELED' && !empty($a['canceled_by_name'])): ?>
                      <span class="text-white/20">·</span>
                      <span class="text-red-400/60"><?= e(t('hub.appointment.canceled_by')) ?>: <?= e($a['canceled_by_name']) ?></span>
                    <?php endif; ?>
                  </div>
                </div>
                <!-- Arrow -->
                <svg class="w-4 h-4 text-bone/20 group-hover:text-bone/60 transition-colors shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>
