"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { KeyRoundIcon, LayoutDashboardIcon } from "lucide-react";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { siteIdFromPathname } from "@/lib/active-site";
import { keywordsHref } from "@/lib/keywords-scope";

// Surfaces de travail du site actif. Les modules (crawl, Search Console) s'ajouteront ici ;
// la gestion des sites vit sous Réglages (`nav-secondary`).

export function NavMain({ sites }: { sites: { id: string }[] }) {
  const pathname = usePathname();
  // Le site actif se lit dans la route (`/sites/<id>/…` ou `/settings/sites/<id>/…`). À
  // défaut, on ouvre Keywords sur le premier site de l'organisation : c'est exactement ce
  // que faisait l'ancienne route `/keywords` sans paramètre, mais l'URL le dit maintenant.
  const activeSiteId = siteIdFromPathname(pathname);
  const siteId = activeSiteId ?? sites[0]?.id ?? null;
  const keywords = siteId === null ? "/settings/sites/new" : keywordsHref(siteId);

  const items = [
    {
      title: "Tableau de bord",
      href: "/dashboard",
      match: "/dashboard",
      icon: LayoutDashboardIcon,
    },
    { title: "Mots-clés", href: keywords, match: "/keywords", icon: KeyRoundIcon },
  ];

  return (
    <SidebarGroup>
      <SidebarGroupLabel>Plateforme</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => {
          const Icon = item.icon;
          // L'état actif se juge sur le **segment de section**, pas sur le lien : celui-ci
          // porte un site qui n'est pas forcément celui de la page courante.
          const active =
            item.match === "/dashboard"
              ? pathname === "/dashboard"
              : pathname.includes("/keywords");
          return (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                tooltip={item.title}
                isActive={active}
                render={<Link href={item.href} />}
              >
                <Icon />
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          );
        })}
      </SidebarMenu>
    </SidebarGroup>
  );
}