<?php /** @var array $user; @var array $todays; @var array $counts */
$totalToday = count($todays);
$pendingCount = $counts['PENDING'] ?? 0;
$hour = (int)date('G');
$timeGreeting = $hour < 12 ? t('hub.dashboard.morning') : ($hour < 18 ? t('hub.dashboard.afternoon') : t('hub.dashboard.evening'));
?>
<div class="p-5 md:p-8 max-w-6xl">

  <!-- Header -->
  <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-8">
    <div>
      <p class="text-bone/40 text-sm"><?= e($timeGreeting) ?></p>
      <h1 class="text-2xl md:text-3xl font-display mt-1"><?= e(($user['first_name'] ?? '') . ' ' . ($user['last_name'] ?? '')) ?></h1>
      <p class="text-bone/40 text-sm mt-1"><?= e((new DateTimeImmutable('today'))->format('l, F j, Y')) ?></p>
    </div>
    <div class="flex gap-2 shrink-0">
      <a href="<?= url('/hub/new-appointment') ?>" class="btn-gold text-xs px-4 py-2.5 flex items-center gap-2">
        <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>
      <a href="<?= url('/hub/walkin') ?>" class="btn-ghost text-xs px-4 py-2.5"><?= e(t('hub.dashboard.new_walkin')) ?></a>
    </div>
  </div>

  <!-- Stats cards -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
    <?php
    $cardColors = [
      'PENDING'   => ['from-yellow-500/10 to-yellow-600/5', 'border-yellow-500/20', 'text-yellow-400'],
      'APPROVED'  => ['from-blue-500/10 to-blue-600/5',     'border-blue-500/20',   'text-blue-400'],
      'COMPLETED' => ['from-green-500/10 to-green-600/5',   'border-green-500/20',  'text-green-400'],
      'CANCELED'  => ['from-red-500/10 to-red-600/5',       'border-red-500/20',    'text-red-400'],
    ];
    foreach ($counts as $status => $n):
      $c = $cardColors[$status] ?? ['from-white/5 to-white/[0.02]', 'border-white/10', 'text-bone'];
    ?>
      <a href="<?= url('/hub/appointments?status=' . $status) ?>"
         class="block bg-gradient-to-br <?= $c[0] ?> border <?= $c[1] ?> rounded-2xl p-5 hover:scale-[1.02] transition-transform">
        <div class="flex items-center justify-between">
          <div class="text-[10px] uppercase tracking-[0.2em] text-bone/50"><?= e(t('appt.status.' . strtolower($status))) ?></div>
          <?php if ($status === 'PENDING' && $n > 0): ?>
            <div class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></div>
          <?php endif; ?>
        </div>
        <div class="text-3xl md:text-4xl font-display <?= $c[2] ?> mt-2"><?= (int)$n ?></div>
      </a>
    <?php endforeach; ?>
  </div>

  <!-- Today's appointments -->
  <div class="mb-6">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-sm font-semibold uppercase tracking-wider text-bone/70 flex items-center gap-2">
        <?= e(t('hub.dashboard.todays')) ?>
        <?php if ($totalToday > 0): ?>
          <span class="w-5 h-5 rounded-full bg-gold/20 text-gold text-[10px] flex items-center justify-center font-bold"><?= $totalToday ?></span>
        <?php endif; ?>
      </h2>
      <a href="<?= url('/hub/appointments') ?>" class="text-xs text-gold/60 hover:text-gold transition-colors"><?= e(t('hub.dashboard.view_all')) ?> →</a>
    </div>

    <?php if (empty($todays)): ?>
      <div class="bg-white/[0.02] border border-white/5 rounded-2xl p-12 text-center">
        <div class="text-4xl mb-3 opacity-20">☀️</div>
        <p class="text-bone/30 text-sm"><?= e(t('hub.dashboard.no_appointments_today')) ?></p>
      </div>
    <?php else: ?>
      <!-- Desktop table -->
      <div class="hidden md:block bg-white/[0.02] border border-white/5 rounded-2xl overflow-hidden">
        <table class="w-full text-sm">
          <thead class="text-[10px] uppercase tracking-[0.2em] text-bone/30">
            <tr>
              <th class="text-left px-5 py-3 font-medium"><?= e(t('hub.table.time')) ?></th>
              <th class="text-left px-5 py-3 font-medium"><?= e(t('hub.table.customer')) ?></th>
              <th class="text-left px-5 py-3 font-medium"><?= e(t('hub.table.artist')) ?></th>
              <th class="text-left px-5 py-3 font-medium"><?= e(t('hub.table.status')) ?></th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($todays as $a):
              $cust = !empty($a['customer_id']) ? \App\Repositories\Container::users()->find($a['customer_id']) : null;
              $artist = !empty($a['artist_id']) ? \App\Repositories\Container::artists()->find($a['artist_id']) : null;
              $custName = trim(($cust['first_name'] ?? '') . ' ' . ($cust['last_name'] ?? '')) ?: '—';
            ?>
              <tr class="border-t border-white/5 hover:bg-white/[0.03] cursor-pointer transition-colors"
                  onclick="location.href='<?= url('/hub/appointments/' . e($a['id'])) ?>'">
                <td class="px-5 py-3.5 font-medium"><?= e((new DateTimeImmutable($a['start_at'] ?? 'now'))->format('g:i A')) ?></td>
                <td class="px-5 py-3.5"><?= e($custName) ?></td>
                <td class="px-5 py-3.5 text-bone/50"><?= e($artist['display_name'] ?? t('booking.no_preference')) ?></td>
                <td class="px-5 py-3.5"><span class="pill pill-<?= e(strtolower($a['status'] ?? 'pending')) ?>"><?= e(t('appt.status.' . strtolower($a['status'] ?? 'pending'))) ?></span></td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>

      <!-- Mobile cards -->
      <div class="md:hidden space-y-2">
        <?php foreach ($todays as $a):
          $cust = !empty($a['customer_id']) ? \App\Repositories\Container::users()->find($a['customer_id']) : null;
          $artist = !empty($a['artist_id']) ? \App\Repositories\Container::artists()->find($a['artist_id']) : null;
          $custName = trim(($cust['first_name'] ?? '') . ' ' . ($cust['last_name'] ?? '')) ?: '—';
        ?>
          <a href="<?= url('/hub/appointments/' . e($a['id'])) ?>"
             class="flex items-center gap-4 bg-white/[0.02] border border-white/5 rounded-xl px-4 py-3.5 hover:border-white/10 transition-colors">
            <div class="w-14 text-center shrink-0">
              <div class="text-sm font-semibold"><?= e((new DateTimeImmutable($a['start_at'] ?? 'now'))->format('g:i')) ?></div>
              <div class="text-[10px] text-bone/40"><?= e((new DateTimeImmutable($a['start_at'] ?? 'now'))->format('A')) ?></div>
            </div>
            <div class="w-px h-8 bg-white/10 shrink-0"></div>
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium truncate"><?= e($custName) ?></div>
              <div class="text-xs text-bone/40 mt-0.5"><?= e($artist['display_name'] ?? t('booking.no_preference')) ?></div>
            </div>
            <span class="pill pill-<?= e(strtolower($a['status'] ?? 'pending')) ?> shrink-0"><?= e(t('appt.status.' . strtolower($a['status'] ?? 'pending'))) ?></span>
          </a>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>

  <!-- Pending alert -->
  <?php if ($pendingCount > 0): ?>
    <a href="<?= url('/hub/appointments?status=PENDING') ?>"
       class="block bg-yellow-500/5 border border-yellow-500/20 rounded-2xl p-5 hover:bg-yellow-500/10 transition-colors">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-yellow-500/10 flex items-center justify-center shrink-0">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        </div>
        <div>
          <div class="text-sm font-medium text-yellow-300"><?= $pendingCount ?> <?= e(t('hub.dashboard.pending_need_review')) ?></div>
          <div class="text-xs text-bone/40 mt-0.5"><?= e(t('hub.dashboard.pending_hint')) ?></div>
        </div>
      </div>
    </a>
  <?php endif; ?>
</div>
