<script setup lang="ts">
const route = useRoute()
const supabase = useSupabaseClient()

const navItems = [
  { label: '대시보드', to: '/', icon: 'i-lucide-layout-dashboard' },
  { label: '구매 관리', to: '/purchases', icon: 'i-lucide-shopping-cart' },
  { label: '중고 판매', to: '/used-sales', icon: 'i-lucide-tag' },
  { label: 'AI 추천', to: '/ai-chat', icon: 'i-lucide-bot' }
]

async function signOut() {
  await supabase.auth.signOut()
  await navigateTo('/login')
}
</script>

<template>
  <UApp>
    <div class="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
      <!-- Sidebar -->
      <aside class="flex flex-col w-64 shrink-0 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
        <!-- Logo -->
        <div class="flex items-center gap-3 px-6 py-5 border-b border-gray-200 dark:border-gray-800">
          <UIcon name="i-lucide-tent" class="text-2xl text-primary-500" />
          <span class="text-lg font-bold text-gray-900 dark:text-white">CampGear</span>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
          <NuxtLink
            v-for="item in navItems"
            :key="item.to"
            :to="item.to"
            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors"
            :class="route.path === item.to || (item.to !== '/' && route.path.startsWith(item.to))
              ? 'bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400'
              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'"
          >
            <UIcon :name="item.icon" class="text-lg shrink-0" />
            {{ item.label }}
          </NuxtLink>
        </nav>

        <!-- User Section -->
        <div class="px-3 py-4 border-t border-gray-200 dark:border-gray-800 space-y-2">
          <UColorModeButton class="w-full justify-start" variant="ghost" />
          <UButton
            icon="i-lucide-log-out"
            label="로그아웃"
            variant="ghost"
            color="neutral"
            class="w-full justify-start"
            @click="signOut"
          />
        </div>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 overflow-y-auto">
        <slot />
      </main>
    </div>
  </UApp>
</template>
