<template>
  <div class="min-h-screen bg-kestrel-bg text-kestrel-text font-mono flex flex-col">
    <div class="relative flex flex-1 min-h-0">
      <NavDrawer v-model="drawerOpen" />
      <div
        class="flex min-h-0 flex-1 flex-col transition-[margin] duration-200 ease-out"
        :class="{ 'md:ml-[260px]': drawerOpen }"
      >
        <header class="flex h-14 shrink-0 items-center gap-3 border-b border-kestrel-border bg-kestrel-surface px-4 shadow-glow-sm shadow-glow-header">
          <button
            type="button"
            class="rounded p-2 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
            aria-label="Toggle navigation"
            :aria-expanded="drawerOpen"
            @click="drawerOpen = !drawerOpen"
          >
            <span
              class="text-lg leading-none"
              aria-hidden="true"
            >&#9776;</span>
          </button>
          <div class="min-w-0 flex-1">
            <h1 class="text-lg font-semibold tracking-wide text-kestrel-text text-shadow-glow-md">
              KestrelOS
            </h1>
            <p class="text-xs uppercase tracking-widest text-kestrel-muted">
              &gt; Tactical Operations Center — OSINT Feeds
            </p>
          </div>
          <div class="flex items-center gap-2">
            <template v-if="user">
              <span class="text-xs text-kestrel-muted">{{ user.identifier }}</span>
              <button
                type="button"
                class="rounded px-2 py-1 text-xs text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-accent"
                @click="onLogout"
              >
                Logout
              </button>
            </template>
            <NuxtLink
              v-else
              to="/login"
              class="rounded px-2 py-1 text-xs text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-accent"
            >
              Sign in
            </NuxtLink>
          </div>
        </header>
        <main class="min-h-0 flex-1">
          <slot />
        </main>
      </div>
    </div>
  </div>
</template>

<script setup>
const drawerOpen = ref(true)
const { user, refresh } = useUser()
const route = useRoute()

async function onLogout() {
  await $fetch('/api/auth/logout', { method: 'POST' })
  await refresh()
  await navigateTo('/')
}
watch(() => route.path, () => {
  drawerOpen.value = false
})
</script>
