<?php
/** @var string $content; @var string $title */
$user = \App\Auth::user();
$uri = $_SERVER['REQUEST_URI'] ?? '/hub';
$is = fn(string $prefix) => str_starts_with($uri, $prefix);
$role = $user['role'] ?? '';
?>
<!DOCTYPE html>
<html lang="<?= e(locale()) ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="MysticHub">
  <meta name="theme-color" content="#0a0a0a">
  <title><?= e($title ?: 'Hub') ?> · MysticHub</title>
  <link rel="apple-touch-icon" href="<?= asset('img/logo/mystic-art.png') ?>">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind.config = { theme: { extend: { colors: { ink: '#0a0a0a', slate: '#0d0d0f', panel: '#111113', bone: '#f5f5f2', gold: '#d4af37' }, fontFamily: { sans: ['Inter','system-ui','sans-serif'], display: ['Playfair Display','serif'] }, screens: { xs: '400px' } } } };</script>
  <link rel="stylesheet" href="<?= asset('css/site.css') ?>">
  <style>
    /* PWA safe area insets */
    .safe-top    { padding-top:    env(safe-area-inset-top); }
    .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
    .safe-left   { padding-left:   env(safe-area-inset-left); }
    /* Sidebar slide-in */
    [x-cloak] { display: none !important; }
    /* Pill styles */
    .pill { display:inline-flex; align-items:center; padding:1px 8px; border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
    .pill-pending   { background:rgba(234,179,8,.15);  color:#eab308; }
    .pill-approved  { background:rgba(59,130,246,.15); color:#60a5fa; }
    .pill-upcoming  { background:rgba(139,92,246,.15); color:#a78bfa; }
    .pill-completed { background:rgba(34,197,94,.15);  color:#4ade80; }
    .pill-canceled  { background:rgba(239,68,68,.12);  color:#f87171; }
    .pill-no_show   { background:rgba(107,114,128,.15);color:#9ca3af; }
    .pill-draft     { background:rgba(107,114,128,.15);color:#9ca3af; }
    .pill-submitted { background:rgba(234,179,8,.15);  color:#eab308; }
    .pill-signed    { background:rgba(34,197,94,.15);  color:#4ade80; }
    /* Locked inputs readable */
    input[readonly], select[disabled], textarea[readonly] {
      opacity: 1 !important;
      color: rgb(245 245 242 / 0.85) !important;
      -webkit-text-fill-color: rgb(245 245 242 / 0.85) !important;
    }
    input[type=checkbox][disabled], input[type=radio][disabled] {
      opacity: 0.9 !important;
      accent-color: #d4af37;
    }
  </style>
  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://unpkg.com/htmx.org@1.9.10" defer></script>
</head>
<body class="bg-slate text-bone font-sans antialiased">

<div class="min-h-[100dvh] flex" x-data="{ sidebarOpen: false }">

  <!-- Mobile overlay -->
  <div x-show="sidebarOpen"
       x-cloak
       @click="sidebarOpen = false"
       x-transition:enter="transition-opacity ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm md:hidden"></div>

  <!-- Sidebar -->
  <aside
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
    class="fixed md:relative z-50 top-0 left-0 h-full md:h-auto w-72 md:w-64 shrink-0 bg-ink border-r border-white/5 flex flex-col transition-transform duration-200 ease-out safe-top safe-bottom"
    style="height: 100dvh;">

    <!-- Logo + close -->
    <div class="px-5 py-4 border-b border-white/5 flex items-center justify-between">
      <div>
        <div class="text-lg font-display tracking-wider">Mystic<span class="text-gold">Hub</span></div>
        <div class="text-[10px] uppercase tracking-widest text-bone/40 mt-0.5"><?= e(t('hub.staff_workspace')) ?></div>
      </div>
      <button @click="sidebarOpen = false" class="md:hidden text-bone/40 hover:text-bone p-1" aria-label="Close menu">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

    <!-- Nav -->
    <nav class="flex-1 px-3 py-4 space-y-0.5 text-sm overflow-y-auto">
      <?php
      $links = [
        ['/hub',              'hub.nav.today',       '<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>'],
        ['/hub/appointments', 'hub.nav.appointments','<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>'],
        ['/hub/customers',    'hub.nav.customers',   '<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>'],
        ['/hub/walkin',       'hub.nav.walkin',      '<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>'],
        ['/hub/new-appointment', 'hub.nav.new_appt', '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="12" y1="14" x2="12" y2="18"/><line x1="10" y1="16" x2="14" y2="16"/>'],
      ];
      foreach ($links as [$path, $key, $icon]):
        $active = $is($path) && ($path === '/hub' ? $uri === '/hub' : true);
      ?>
        <a href="<?= url($path) ?>"
           @click="sidebarOpen = false"
           class="flex items-center gap-3 px-3 py-3 rounded-xl transition-colors <?= $active ? 'bg-gold/10 text-gold' : 'text-bone/60 hover:bg-white/5 hover:text-bone' ?>">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><?= $icon ?></svg>
          <span><?= e(t($key)) ?></span>
        </a>
      <?php endforeach; ?>

      <!-- Account settings -->
      <a href="<?= url('/hub/account') ?>"
         @click="sidebarOpen = false"
         class="flex items-center gap-3 px-3 py-3 rounded-xl transition-colors <?= $is('/hub/account') ? 'bg-gold/10 text-gold' : 'text-bone/60 hover:bg-white/5 hover:text-bone' ?>">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20v-1a8 8 0 0116 0v1"/></svg>
        <span><?= e(t('hub.nav.account')) ?></span>
      </a>

      <?php if (in_array($role, ['ADMIN'], true)): ?>
        <div class="pt-3 mt-3 border-t border-white/5">
          <a href="<?= url('/admin') ?>"
             @click="sidebarOpen = false"
             class="flex items-center gap-3 px-3 py-3 rounded-xl transition-colors text-bone/60 hover:bg-white/5 hover:text-bone">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 9a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9z"/></svg>
            <?= e(t('hub.nav.admin')) ?>
          </a>
        </div>
      <?php endif; ?>
    </nav>

    <!-- User footer -->
    <div class="px-4 py-4 border-t border-white/5 safe-bottom">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-gold/20 border border-gold/30 flex items-center justify-center text-gold font-semibold text-sm shrink-0">
          <?= strtoupper(substr($user['first_name'] ?? '?', 0, 1)) ?>
        </div>
        <div class="min-w-0">
          <div class="text-sm font-medium truncate"><?= e(($user['first_name'] ?? '') . ' ' . ($user['last_name'] ?? '')) ?></div>
          <div class="text-[10px] uppercase tracking-widest text-gold/60"><?= e($role) ?></div>
        </div>
      </div>
      <a href="<?= url('/hub/logout') ?>" class="mt-3 flex items-center gap-2 text-xs text-bone/40 hover:text-bone transition-colors">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>
        <?= e(t('hub.logout')) ?>
      </a>
    </div>
  </aside>

  <!-- Main content -->
  <div class="flex-1 min-w-0 flex flex-col">

    <!-- Mobile top bar -->
    <header class="md:hidden flex items-center gap-3 px-4 py-3 bg-ink/90 backdrop-blur border-b border-white/5 sticky top-0 z-30 safe-top">
      <button @click="sidebarOpen = true" class="p-2 -ml-1 text-bone/60 hover:text-bone" aria-label="Open menu">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <span class="font-display text-base tracking-wider">Mystic<span class="text-gold">Hub</span></span>
      <div class="ml-auto text-[10px] uppercase tracking-widest text-bone/40"><?= e($role) ?></div>
    </header>

    <!-- Flash messages -->
    <?php if ($f = flash()): foreach ($f as $k => $msg): ?>
      <div class="mx-4 mt-4 rounded-xl px-4 py-3 text-sm <?= $k === 'error' ? 'bg-red-500/10 text-red-300 border border-red-500/20' : 'bg-gold/10 text-gold border border-gold/20' ?>">
        <?= e($msg) ?>
      </div>
    <?php endforeach; endif; ?>

    <!-- Page content -->
    <main class="flex-1">
      <?= $content ?>
    </main>
  </div>
</div>
</body>
</html>
