---
import Layout from './Layout.astro';
import Toaster from '@/components/Toaster.tsx';
import BrandMark from '@/components/BrandMark.astro';

interface Props {
  title?: string;
}
const { title } = Astro.props;

const profile = Astro.locals.profile;
const isAdmin = profile?.rol === 'admin';
const path = Astro.url.pathname;
const isActive = (href: string) => path === href || path.startsWith(href + '/');

type NavItem = { href: string; label: string; icon: string };

// Iconos: paths de heroicons/lucide outline (24x24). Solo el `d` del <path>.
const ICONS = {
  menu: 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
  stats: 'M2.25 18L9 11.25l4.306 4.306a11.95 11.95 0 015.814-5.518l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941',
  home: 'M2.25 12l8.954-8.955a1.5 1.5 0 012.122 0L22.28 12M4.5 9.75v10.125A1.125 1.125 0 005.625 21H9.75v-6h4.5v6h4.125A1.125 1.125 0 0019.5 19.875V9.75',
  grid: 'M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 8.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z',
  list: 'M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z',
  inbox: 'M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z',
  box: 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5H7.688C5.098 3.75 3 5.765 3 8.25v7.5c0 2.485 2.099 4.5 4.688 4.5h8.624c2.59 0 4.688-2.015 4.688-4.5v-7.5zM3 8.25l9 5.25 9-5.25',
  chart: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z',
  logout: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75',
  dashboard: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605',
};

const alumnoNav: NavItem[] = [
  { href: '/', label: 'Inicio', icon: 'home' },
  { href: '/alumno/catalogo', label: 'Catálogo', icon: 'grid' },
  { href: '/alumno/mis-prestamos', label: 'Mis préstamos', icon: 'list' },
];
const adminNav: NavItem[] = [
  { href: '/admin', label: 'Panel', icon: 'dashboard' },
  { href: '/admin/solicitudes', label: 'Solicitudes', icon: 'inbox' },
  { href: '/admin/inventario', label: 'Estadísticas', icon: 'stats' },
  { href: '/admin/reportes', label: 'Reportes', icon: 'chart' },
];
const nav = isAdmin ? adminNav : alumnoNav;

const activeCheck = (item: NavItem) => {
  if (item.href === '/') return path === '/';
  if (item.href === '/admin') return path === '/admin';
  return isActive(item.href);
};
---
<Layout title={title}>
  <!-- No-flash: aplica estado colapsado del sidebar antes de pintar -->
  <script is:inline>
    try {
      if (localStorage.getItem('sidebar') === 'collapsed') {
        document.documentElement.classList.add('sidebar-collapsed');
      }
    } catch (_) {}
  </script>

  <div class="min-h-screen flex flex-col md:block">

    <!-- Sidebar desktop -->
    <aside id="app-sidebar" class="hidden md:flex md:fixed md:top-0 md:left-0 md:w-64 md:h-screen bg-[color:var(--color-primary)] text-white md:flex-col md:z-40 sidebar-panel transition-transform duration-200 ease-out">
      <a href="/" class="p-6 flex items-center gap-3 border-b border-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" aria-label="LabPréstamos — Inicio">
        <div class="w-9 h-9 rounded-lg bg-white/15 grid place-items-center p-2" aria-hidden="true">
          <BrandMark class="w-full h-full text-white" />
        </div>
        <div>
          <div class="font-semibold leading-tight">LabPréstamos</div>
          <div class="text-xs text-white/70">UABC · Lab. Sistemas</div>
        </div>
      </a>
      <nav class="flex-1 p-3 flex flex-col gap-1" aria-label="Navegación principal">
        {nav.map((item) => (
          <a
            href={item.href}
            class:list={[
              'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
              activeCheck(item)
                ? 'bg-white/15 text-white'
                : 'text-white/85 hover:bg-white/10 hover:text-white'
            ]}
            aria-current={activeCheck(item) ? 'page' : undefined}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d={ICONS[item.icon as keyof typeof ICONS]} />
            </svg>
            {item.label}
          </a>
        ))}
      </nav>
      <div class="p-3 border-t border-white/10">
        <div class="px-3 py-2 text-sm">
          <div class="font-medium truncate">{profile?.nombre ?? profile?.email}</div>
          <div class="text-white/70 text-xs capitalize">{profile?.rol}</div>
        </div>
        <form method="POST" action="/api/auth/signout">
          <button type="submit" class="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-white/10 transition-colors flex items-center gap-2">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d={ICONS.logout} />
            </svg>
            Cerrar sesión
          </button>
        </form>
      </div>
    </aside>

    <!-- Header mobile mínimo -->
    <header class="md:hidden flex items-center justify-between px-4 py-3 bg-[color:var(--color-primary)] text-white">
      <a href="/" class="flex items-center gap-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white rounded-lg" aria-label="LabPréstamos — Inicio">
        <div class="w-8 h-8 rounded-lg bg-white/15 grid place-items-center p-1.5" aria-hidden="true">
          <BrandMark class="w-full h-full text-white" />
        </div>
        <span class="font-semibold text-sm">LabPréstamos</span>
      </a>
      <div class="text-xs text-white/80 truncate max-w-[45%] text-right">
        <div class="font-medium truncate">{profile?.nombre ?? profile?.email}</div>
        <div class="text-white/60 capitalize">{profile?.rol}</div>
      </div>
    </header>

    <main id="main" class="flex-1 p-4 md:p-8 pb-28 md:pb-8 md:ml-64 sidebar-aware transition-[margin] duration-200 ease-out">
      <!-- Botón hamburguesa desktop: toggle sidebar -->
      <button
        type="button"
        id="sidebar-toggle"
        aria-label="Alternar menú lateral"
        aria-controls="app-sidebar"
        class="hidden md:inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4 text-[color:var(--color-ink)]/80 hover:bg-[color:var(--color-ink)]/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)]"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d={ICONS.menu} />
        </svg>
      </button>
      <slot />
    </main>

    <!-- Dock flotante mobile -->
    <nav
      class="md:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-50 rounded-full px-2 py-2 flex items-center gap-1 backdrop-blur bg-white/95 shadow-[0_10px_30px_-8px_rgba(0,0,0,0.25)] border"
      style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent); padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));"
      aria-label="Navegación principal"
    >
      {nav.map((item) => {
        const active = activeCheck(item);
        return (
          <a
            href={item.href}
            aria-label={item.label}
            aria-current={active ? 'page' : undefined}
            class:list={[
              'grid place-items-center rounded-full w-11 h-11 transition-[background-color,color,transform] duration-150 motion-safe:active:scale-95',
              active
                ? 'bg-[color:var(--color-primary)] text-white'
                : 'text-[color:var(--color-ink)]/70 hover:text-[color:var(--color-ink)] hover:bg-[color:var(--color-ink)]/5'
            ]}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d={ICONS[item.icon as keyof typeof ICONS]} />
            </svg>
          </a>
        );
      })}
      <span class="w-px h-6 mx-1" style="background: color-mix(in oklab, var(--color-ink) 15%, transparent);" aria-hidden="true"></span>
      <form method="POST" action="/api/auth/signout" class="contents">
        <button
          type="submit"
          aria-label="Cerrar sesión"
          class="grid place-items-center rounded-full w-11 h-11 text-[color:var(--color-ink)]/70 hover:text-[color:var(--color-danger)] hover:bg-[color:var(--color-danger)]/10 transition-[background-color,color,transform] duration-150 motion-safe:active:scale-95"
        >
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d={ICONS.logout} />
          </svg>
        </button>
      </form>
    </nav>

    <Toaster client:idle />
  </div>
</Layout>

<style is:global>
  @media (min-width: 768px) {
    .sidebar-collapsed .sidebar-panel { transform: translateX(-100%); }
    .sidebar-collapsed .sidebar-aware { margin-left: 0; }
  }
</style>

<script>
  const btn = document.getElementById('sidebar-toggle');
  const root = document.documentElement;
  const sync = () => {
    const collapsed = root.classList.contains('sidebar-collapsed');
    btn?.setAttribute('aria-expanded', String(!collapsed));
  };
  sync();
  btn?.addEventListener('click', () => {
    root.classList.toggle('sidebar-collapsed');
    const collapsed = root.classList.contains('sidebar-collapsed');
    try { localStorage.setItem('sidebar', collapsed ? 'collapsed' : 'open'); } catch (_) {}
    sync();
  });
</script>