<template>
  <div class="flex h-screen overflow-hidden">
    <!-- Mobile-only top header with hamburger (admin) -->
    <header class="lg:hidden fixed top-0 left-0 right-0 z-30 flex items-center gap-3 px-4 py-3 bg-white border-b border-gray-200">
      <button
        @click="drawerOpen = true"
        aria-label="Open admin navigation"
        data-test="admin-hamburger-btn"
        class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <span class="text-base font-bold text-indigo-600 tracking-tight">DocuVault</span>
      <span class="text-xs font-semibold text-indigo-500">Admin</span>
    </header>

    <!-- Drawer backdrop (mobile only) — teleported to body to guarantee stacking -->
    <Teleport to="body">
      <div
        v-if="drawerOpen"
        class="lg:hidden fixed inset-0 z-40 bg-black/40"
        data-test="admin-drawer-backdrop"
        @click="drawerOpen = false"
      ></div>
    </Teleport>

    <!-- Sidebar: always visible on lg+; slides in as overlay drawer below lg -->
    <div
      class="fixed inset-y-0 left-0 z-50 transition-transform duration-200 ease-in-out lg:static lg:z-auto lg:translate-x-0 shrink-0"
      :class="drawerOpen ? 'translate-x-0' : '-translate-x-full'"
      data-test="admin-sidebar-wrapper"
    >
      <AdminSidebar />
    </div>

    <main class="flex-1 overflow-y-auto pt-[53px] lg:pt-0">
      <div class="p-8 max-w-5xl mx-auto">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import AdminSidebar from '../components/admin/AdminSidebar.vue'

// Drawer state owned by AdminLayout (per D-04/D-05 — not in AdminSidebar)
const drawerOpen = ref(false)

const route = useRoute()

// Close drawer on route change (navigation tap closes the drawer automatically)
watch(() => route.fullPath, () => {
  drawerOpen.value = false
})
</script>
