<script setup lang="ts">
const auth = useAuthStore()
const { locale, locales, setLocale } = useI18n()
const { t } = useI18n()

const tabs = computed(() => [
  { to: '/', icon: 'i-lucide-flame', label: t('nav.dashboard') },
  { to: '/exercises', icon: 'i-lucide-dumbbell', label: t('nav.exercises') },
  { to: '/routines', icon: 'i-lucide-list-checks', label: t('nav.routines') },
  { to: '/history', icon: 'i-lucide-history', label: t('nav.history') },
  { to: '/profile', icon: 'i-lucide-user', label: t('nav.profile') }
])

const route = useRoute()
const langItems = computed(() => (locales.value as { code: string, name: string }[]).map(l => ({
  label: l.name,
  onSelect: () => setLocale(l.code as 'fr' | 'en' | 'pt-BR')
})))
</script>

<template>
  <div class="min-h-dvh flex flex-col bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100">
    <!-- Header -->
    <header class="sticky top-0 z-30 flex items-center justify-between px-4 h-14 border-b border-zinc-200/70 dark:border-zinc-800/70 backdrop-blur bg-white/80 dark:bg-zinc-950/80">
      <NuxtLink to="/" class="flex items-center gap-2">
        <SfLogo :size="30" />
        <span class="font-extrabold tracking-tight text-lg">
          <span class="sf-flame-text">Streak</span><span>Fit</span>
        </span>
      </NuxtLink>
      <div class="flex items-center gap-1">
        <UDropdownMenu :items="langItems">
          <UButton icon="i-lucide-languages" color="neutral" variant="ghost" size="sm" :label="locale.toUpperCase()" />
        </UDropdownMenu>
        <UColorModeButton />
      </div>
    </header>

    <!-- Contenu -->
    <main class="flex-1 w-full max-w-2xl mx-auto px-4 py-5 pb-24">
      <slot />
    </main>

    <!-- Bottom nav (mobile-first, masquée si non connecté) -->
    <nav
      v-if="auth.isAuthed"
      class="fixed bottom-0 inset-x-0 z-30 border-t border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur"
    >
      <ul class="max-w-2xl mx-auto grid grid-cols-5">
        <li v-for="tab in tabs" :key="tab.to">
          <NuxtLink
            :to="tab.to"
            class="flex flex-col items-center gap-0.5 py-2.5 text-xs transition-colors"
            :class="route.path === tab.to
              ? 'text-flame-600 dark:text-flame-400'
              : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'"
          >
            <UIcon :name="tab.icon" class="size-5" />
            <span>{{ tab.label }}</span>
          </NuxtLink>
        </li>
      </ul>
    </nav>
  </div>
</template>
