<script setup lang="ts">
/**
 * @file default.vue
 * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
 * Uses Quasar QLayout for responsive structure.
 */

const leftDrawerOpen = ref(false)

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

// Initialize global theme management
useThemeMode()
</script>

<template>
  <q-layout view="hHh lpr lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
    <!-- Header -->
    <q-header
      bordered
      class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
    >
      <AppHeader @toggle-sidebar="toggleLeftDrawer" />
    </q-header>

    <!-- Sidebar (Drawer) -->
    <q-drawer
      v-model="leftDrawerOpen"
      bordered
      class="!bg-white dark:!bg-[#1e293b] !text-slate-900 dark:!text-white border-r border-slate-200 dark:border-slate-700"
      :width="260"
    >
      <AppSidebar />
    </q-drawer>

    <!-- Main Content -->
    <q-page-container>
      <q-page class="relative">
        <slot />
      </q-page>
    </q-page-container>

    <!-- Mobile Bottom Nav -->
    <q-footer
      v-if="$q.screen.lt.md"
      bordered
      class="!bg-white dark:!bg-[#1e293b] text-primary border-t border-slate-200 dark:border-slate-700"
    >
       <MobileNav />
    </q-footer>
  </q-layout>
</template>

<style>
/* Ensure fonts are applied */
.font-inter {
  font-family: 'Inter', sans-serif;
}
</style>
