<?php
/** @var string $content; @var string $title */
$user = \App\Auth::user();
$uri = $_SERVER['REQUEST_URI'] ?? '/admin';
$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="theme-color" content="#0a0a0a">
  <title><?= e($title ?: 'Admin') ?> · MysticAdmin</title>
  <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'] } } } };</script>
  <link rel="stylesheet" href="<?= asset('css/site.css') ?>">
  <style>[x-cloak] { display: none !important; }</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-60 shrink-0 bg-ink border-r border-white/5 flex flex-col transition-transform duration-200 ease-out"
         style="height:100dvh;">
    <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">Admin</span></div>
        <div class="text-[10px] uppercase tracking-widest text-bone/40 mt-0.5"><?= e(t('admin.management')) ?></div>
      </div>
      <button @click="sidebarOpen = false" class="md:hidden text-bone/40 hover:text-bone p-1">
        <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 class="flex-1 px-3 py-4 space-y-0.5 text-sm overflow-y-auto">
      <?php
      $links = [
        ['/admin',          'admin.nav.overview',  '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>'],
        ['/admin/staff',    'admin.nav.staff',     '<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"/>'],
        ['/admin/artists',  'admin.nav.artists',   '<path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/>'],
        ['/admin/gallery',  'admin.nav.gallery',   '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>'],
        ['/admin/users',    'admin.nav.users',     '<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>'],
        ['/admin/audit',    'admin.nav.audit',     '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>'],
        ['/admin/settings', 'admin.nav.settings',  '<circle cx="12" cy="12" r="3"/><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 9z"/>'],
      ];
      foreach ($links as [$path, $key, $icon]):
        $active = $path === '/admin' ? $uri === '/admin' : $is($path);
      ?>
        <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="16" height="16" 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; ?>

      <div class="pt-3 mt-3 border-t border-white/5">
        <a href="<?= url('/hub') ?>" @click="sidebarOpen = false"
           class="flex items-center gap-3 px-3 py-3 rounded-xl text-bone/60 hover:bg-white/5 hover:text-bone transition-colors">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M15 18l-6-6 6-6"/></svg>
          <?= e(t('admin.nav.back_to_hub')) ?>
        </a>
      </div>
    </nav>

    <div class="px-4 py-4 border-t border-white/5">
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-full bg-gold/20 border border-gold/30 flex items-center justify-center text-gold font-semibold text-xs 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="12" height="12" 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 -->
  <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">
      <button @click="sidebarOpen = true" class="p-2 -ml-1 text-bone/60 hover:text-bone">
        <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">Admin</span></span>
    </header>

    <?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; ?>

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