<script setup>
import { useRoute, RouterLink } from "vue-router";
import {
  LayoutDashboard,
  Users,
  Activity,
  GraduationCap,
  History,
  UserCog,
} from "lucide-vue-next";

const route = useRoute();

const navItems = [
  {
    to: "/",
    name: "dashboard",
    icon: LayoutDashboard,
    label: "Tableau de bord",
  },
  {
    to: "/students",
    name: "students",
    icon: Users,
    label: "Annuaire Étudiants",
  },
  {
    to: "/activity",
    name: "activity",
    icon: Activity,
    label: "Suivi Personnel",
  },
  {
    to: "/results",
    name: "results",
    icon: GraduationCap,
    label: "Résultats Académiques",
  },
  {
    to: "/history",
    name: "history",
    icon: History,
    label: "Historique Global",
  },
  {
    to: "/users",
    name: "users",
    icon: UserCog,
    label: "Utilisateurs",
  },
];

const isActive = (name) => route.name === name;
</script>

<template>
  <nav
    class="lg:w-72 w-full gradient-brand text-white flex flex-col p-6 shadow-xl"
  >
    <!-- Logo -->
    <div class="flex items-center gap-3 mb-10 overflow-hidden">
      <div class="bg-white p-2 rounded-lg logo-shine">
        <svg
          width="40"
          height="40"
          viewBox="0 0 100 100"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="50" cy="50" r="45" fill="#1e40af" />
          <path
            d="M30 70 L45 30 L55 50 L70 20"
            stroke="white"
            stroke-width="8"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <circle cx="70" cy="20" r="5" fill="white" />
        </svg>
      </div>
      <div>
        <h1 class="font-black text-xl leading-tight">SB SPORT</h1>
        <p
          class="text-[10px] text-blue-100 uppercase tracking-widest font-medium"
        >
          Sanae Benkhlifa
        </p>
      </div>
    </div>

    <!-- Nav links -->
    <div class="flex flex-col gap-2 flex-grow">
      <RouterLink
        v-for="item in navItems"
        :key="item.name"
        :to="item.to"
        :class="[
          'flex items-center gap-3 p-3 rounded-xl transition-all',
          isActive(item.name)
            ? 'bg-white/20 font-semibold'
            : 'hover:bg-white/10',
        ]"
      >
        <component :is="item.icon" class="w-5 h-5" />
        {{ item.label }}
      </RouterLink>
    </div>

    <!-- Footer -->
    <div
      class="mt-auto pt-6 border-t border-white/10 text-[10px] text-blue-200 text-center uppercase tracking-tighter"
    >
      &copy; 2024 Sanae Benkhlifa Sports
    </div>
  </nav>
</template>
