"use client";

import { ChevronRightIcon, ConstructionIcon } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
export function NavMain({
  items,
}: {
  items: {
    title: string;
    url: string;
    icon?: React.ReactNode;
    isActive?: boolean;
    underConstruction?: boolean;
    items?: {
      title: string;
      url: string;
      underConstruction?: boolean;
    }[];
  }[];
}) {
  const t = useTranslations("Construction");
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Platform</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible
            key={item.title}
            asChild
            defaultOpen={item.isActive}
            className="group/collapsible"
          >
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton tooltip={item.title}>
                  {item.icon}
                  <span className="uppercase font-bold text-xs">
                    {item.title}
                  </span>
                  {item.underConstruction && (
                    <ConstructionIcon
                      aria-label={t("badge")}
                      className="size-3.5 text-amber-500"
                    />
                  )}
                  <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                </SidebarMenuButton>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items?.map((subItem) => (
                    <SidebarMenuSubItem key={subItem.title}>
                      <SidebarMenuSubButton asChild>
                        <Link href={subItem.url}>
                          {/* `truncate` explicite : le style de base du
                              SidebarMenuSubButton ne tronque que `span:last-child`,
                              et la pastille lui vole ce rang — sans ça le libellé
                              passe à la ligne et déborde de la rangée (h-7). */}
                          <span className="truncate">{subItem.title}</span>
                          {subItem.underConstruction && (
                            <Tooltip>
                              <TooltipTrigger asChild>
                                {/* Enveloppe <span> volontaire : un <svg> enfant
                                    direct hériterait de `[&>svg]:text-sidebar-accent-foreground`
                                    (spécificité supérieure à `text-amber-500`). */}
                                <span className="ml-auto flex shrink-0 items-center text-amber-500">
                                  <ConstructionIcon
                                    aria-hidden="true"
                                    className="size-3.5"
                                  />
                                  <span className="sr-only">{t("badge")}</span>
                                </span>
                              </TooltipTrigger>
                              <TooltipContent side="right">
                                {t("badge")}
                              </TooltipContent>
                            </Tooltip>
                          )}
                        </Link>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </CollapsibleContent>
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}