"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import { cn } from "@/lib/utils";

const links = [
  { href: "/dashboard", label: "Accueil" },
  { href: "/dashboard/classes", label: "Classes" },
  { href: "/dashboard/students", label: "Étudiants" },
  { href: "/dashboard/nodes", label: "Nœuds" },
  { href: "/dashboard/instances", label: "Instances" },
  { href: "/dashboard/templates", label: "Templates" },
  { href: "/dashboard/download", label: "Téléchargements" },
];

const superadminLinks = [
  { href: "/superadmin", label: "Super Admin" },
  { href: "/superadmin/establishments", label: "Établissements" },
];

export default function DashboardNav({ role }: { role: string }) {
  const pathname = usePathname();

  return (
    <nav className="w-64 bg-white border-r flex flex-col">
      <div className="p-6 border-b">
        <h2 className="text-xl font-bold text-primary">EduBox</h2>
      </div>
      <div className="flex-1 p-4 space-y-1">
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className={cn(
              "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
              pathname === link.href ? "bg-primary text-primary-foreground" : "text-gray-700 hover:bg-gray-100"
            )}
          >
            {link.label}
          </Link>
        ))}
        {role === "superadmin" && (
          <div className="pt-4 mt-4 border-t">
            <p className="px-3 text-xs font-semibold text-muted-foreground uppercase mb-2">Super Admin</p>
            {superadminLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={cn(
                  "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                  pathname === link.href ? "bg-primary text-primary-foreground" : "text-gray-700 hover:bg-gray-100"
                )}
              >
                {link.label}
              </Link>
            ))}
          </div>
        )}
      </div>
      <div className="p-4 border-t">
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="w-full text-left px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors"
        >
          Déconnexion
        </button>
      </div>
    </nav>
  );
}