<template>
  <!-- Mobile: header + drawer -->
  <AppHeader class="lg:hidden" @toggle-drawer="drawerOpen = !drawerOpen" />
  <AppDrawer :open="drawerOpen" @close="drawerOpen = false" />

  <!-- Desktop: sidebar fixe + contenu -->
  <div class="lg:flex">
    <!-- Sidebar desktop -->
    <aside class="hidden lg:flex lg:flex-col lg:fixed lg:inset-y-0 lg:w-60 bg-bg-hard border-r border-bg-soft z-30">
      <div class="px-5 pt-6 pb-4 border-b border-bg-soft">
        <RouterLink to="/" class="text-green font-bold text-xl tracking-wide flex items-center gap-2">
          🌿 <span>Jardin</span>
        </RouterLink>
      </div>
      <nav class="flex-1 py-4 px-3 flex flex-col gap-0.5 overflow-y-auto">
        <RouterLink
          v-for="l in links" :key="l.to" :to="l.to"
          class="flex items-center gap-3 text-text-muted hover:text-text py-2 px-3 rounded-lg text-sm transition-colors group"
          active-class="bg-bg-soft text-green font-medium"
        >
          <span class="text-base leading-none">{{ l.icon }}</span>
          <span>{{ l.label }}</span>
        </RouterLink>
      </nav>
      <div class="px-4 py-4 border-t border-bg-soft text-text-muted text-xs">
        🌱 Jardin App
      </div>
    </aside>

    <!-- Main content -->
    <main class="pt-14 lg:pt-0 lg:pl-60 min-h-screen w-full">
      <RouterView />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import AppDrawer from '@/components/AppDrawer.vue'

const drawerOpen = ref(false)

const links = [
  { to: '/', label: 'Dashboard', icon: '🏠' },
  { to: '/jardins', label: 'Jardins', icon: '🪴' },
  { to: '/plantes', label: 'Plantes', icon: '🌱' },
  { to: '/bibliotheque', label: 'Bibliothèque', icon: '📷' },
  { to: '/outils', label: 'Outils', icon: '🔧' },
  { to: '/plantations', label: 'Plantations', icon: '🥕' },
  { to: '/taches', label: 'Tâches', icon: '✅' },
  { to: '/planning', label: 'Planning', icon: '📆' },
  { to: '/calendrier', label: 'Calendrier', icon: '🌙' },
  { to: '/reglages', label: 'Réglages', icon: '⚙️' },
]
</script>
