<script setup lang="ts">
/**
 * Sidebar de navigation principale (fixée à gauche, 240px).
 * Reproduit la maquette : logo + CTA Nouveau Projet + nav + badge bas de page.
 */
import { RouterLink } from 'vue-router'
import { useAuth } from '@/composables/useAuth'

const { isAuthenticated, logout } = useAuth()

interface NavLink {
  to: string
  label: string
  iconPath: string
}

// Icônes : paths SVG sobres (style lucide), 24x24 viewBox.
const navItems: NavLink[] = [
  {
    to: '/',
    label: 'Accueil',
    iconPath: 'M3 12 12 3l9 9M5 10v10a1 1 0 0 0 1 1h3v-6h6v6h3a1 1 0 0 0 1-1V10',
  },
  {
    to: '/dashboard',
    label: 'Tableau de bord',
    iconPath: 'M3 3h7v9H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 16h7v5H3z',
  },
  {
    to: '/projects',
    label: 'Projets Actifs',
    iconPath: 'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
  },
  {
    to: '/archives',
    label: 'Archives',
    iconPath: 'M21 8H3M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8M10 12h4M3 4h18v4H3z',
  },
  {
    to: '/categories',
    label: 'Catégories',
    iconPath: 'M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8zM7 7h.01',
  },
  {
    to: '/donut',
    label: 'Vision Donut',
    iconPath: 'M12 3a9 9 0 1 0 9 9M12 3v9h9M12 7a5 5 0 1 0 5 5',
  },
]
</script>

<template>
  <aside
    class="w-60 shrink-0 border-r border-donut-border bg-donut-surface flex flex-col"
  >
    <!-- Logo / nom de l'app -->
    <div class="px-5 py-5 border-b border-donut-border">
      <RouterLink to="/" class="flex items-center gap-2.5 group">
        <!-- Mini-donut SVG -->
        <svg viewBox="0 0 32 32" class="w-7 h-7" aria-hidden="true">
          <circle cx="16" cy="16" r="13" fill="none" stroke="#22C55E" stroke-width="3" stroke-dasharray="20 6" />
          <circle cx="16" cy="16" r="8"  fill="none" stroke="#F97316" stroke-width="3" stroke-dasharray="15 4" />
          <circle cx="16" cy="16" r="3"  fill="#A855F7" />
        </svg>
        <span class="font-semibold text-donut-text group-hover:text-black">
          Le Donut <span class="text-donut-muted font-normal">Infolab</span>
        </span>
      </RouterLink>
    </div>

    <!-- CTA Nouveau Projet -->
    <div class="px-3 pt-4 pb-2">
      <RouterLink
        :to="{ name: 'project-new' }"
        class="flex items-center justify-center gap-1.5 w-full bg-donut-text text-white rounded-lg px-3 py-2.5 text-sm font-medium hover:bg-black transition-colors"
      >
        <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
          <path d="M12 5v14M5 12h14" />
        </svg>
        Nouveau Projet
      </RouterLink>
    </div>

    <!-- Navigation -->
    <nav class="px-3 py-2 flex-1">
      <div class="px-2 pt-3 pb-2 text-[10px] font-semibold uppercase tracking-wider text-donut-muted">
        Navigation
      </div>
      <!--
        Pattern v-slot custom : on prend la main sur le rendu du <a> pour
        styler "actif" différemment selon que l'item est /, où on veut
        un match exact (sinon "Accueil" serait actif partout vu que `/`
        est le préfixe de toutes les routes), ou un autre chemin où un
        match préfixe suffit.

        Le `custom` prop est OBLIGATOIRE quand on remplace l'élément rendu :
        sans lui, RouterLink rend son propre <a> ET notre slot -> on aurait
        des liens imbriqués et le clic ne navigue pas. Avec `custom`, c'est
        nous qui devons câbler @click="navigate".
      -->
      <RouterLink
        v-for="item in navItems"
        :key="item.to"
        :to="item.to"
        custom
        v-slot="{ href, navigate, isActive, isExactActive }"
      >
        <a
          :href="href"
          @click="navigate"
          :class="[
            'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
            (item.to === '/' ? isExactActive : isActive)
              ? 'bg-orange-50 text-status-active font-medium'
              : 'text-donut-text hover:bg-gray-50',
          ]"
        >
          <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path :d="item.iconPath" />
          </svg>
          {{ item.label }}
        </a>
      </RouterLink>

      <!-- Section admin (visible uniquement quand on a un token) -->
      <template v-if="isAuthenticated">
        <div class="px-2 pt-5 pb-2 text-[10px] font-semibold uppercase tracking-wider text-donut-muted">
          Administration
        </div>
        <RouterLink
          :to="{ name: 'admin-overview' }"
          custom
          v-slot="{ href, navigate, isActive }"
        >
          <a
            :href="href" @click="navigate"
            :class="[
              'flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors',
              isActive
                ? 'bg-orange-50 text-status-active font-medium'
                : 'text-donut-text hover:bg-gray-50',
            ]"
          >
            <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
            Dashboard admin
          </a>
        </RouterLink>
      </template>
    </nav>

    <!-- Badge bas de sidebar : statut admin -->
    <div class="px-3 pb-4 pt-2 border-t border-donut-border">
      <div v-if="isAuthenticated" class="flex items-center justify-between text-xs">
        <span class="flex items-center gap-1.5 text-donut-muted">
          <span class="w-2 h-2 rounded-full bg-green-500"></span>
          Admin connecté
        </span>
        <button @click="logout" class="text-donut-muted hover:text-donut-text underline">
          Quitter
        </button>
      </div>
      <RouterLink
        v-else
        :to="{ name: 'admin-login' }"
        class="text-xs text-donut-muted hover:text-donut-text underline"
      >
        Connexion admin
      </RouterLink>
      <div class="mt-3 text-[10px] font-bold uppercase tracking-widest text-donut-muted">
        Le Donut <span class="text-status-active">INFOLAB</span>
      </div>
    </div>
  </aside>
</template>
