"use client";

import { Fragment } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";

// Libellés des segments de route connus ; un segment inconnu (identifiant de site,
// par exemple) retombe sur « Détail » plutôt que d'afficher un UUID.
const LABELS: Record<string, string> = {
  dashboard: "Tableau de bord",
  sites: "Sites",
  settings: "Réglages",
  security: "Sécurité",
  onboarding: "Organisation",
  keywords: "Mots-clés",
  imports: "Imports",
};

// `new` est le seul segment ambigu : il crée un site sous `/settings/sites`, un import sous
// `…/keywords/imports`. Son libellé se lit donc sur le segment qui le précède.
const NEW_LABELS: Record<string, string> = { sites: "Nouveau site", imports: "Nouvel import" };

function labelFor(segment: string, previous: string | undefined): string {
  if (segment === "new") return NEW_LABELS[previous ?? ""] ?? "Nouveau";
  // Identifiant de site (`/sites/<id>/keywords`, `/settings/sites/<id>`) : le nom du site
  // n'est pas connu de l'en-tête, qui est rendu au-dessus des pages. « Site » est plus
  // honnête que « Détail », et la miette reste cliquable — `/sites/<id>` redirige vers la
  // fiche du site.
  if (previous === "sites") return "Site";
  return LABELS[segment] ?? "Détail";
}

export function SiteHeader() {
  const pathname = usePathname();
  const segments = pathname.split("/").filter(Boolean);
  // Tout segment de l'app a désormais sa page : chaque miette intermédiaire est un lien.
  const crumbs = segments.map((segment, index) => ({
    label: labelFor(segment, segments[index - 1]),
    href: `/${segments.slice(0, index + 1).join("/")}`,
  }));

  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
        <SidebarTrigger className="-ml-1" />
        <Separator orientation="vertical" className="mx-2 h-4 data-vertical:self-auto" />
        <Breadcrumb>
          <BreadcrumbList>
            {crumbs.map((crumb, index) => (
              <Fragment key={crumb.href}>
                {index > 0 ? <BreadcrumbSeparator /> : null}
                <BreadcrumbItem>
                  {index === crumbs.length - 1 ? (
                    <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
                  ) : (
                    <BreadcrumbLink render={<Link href={crumb.href} />}>
                      {crumb.label}
                    </BreadcrumbLink>
                  )}
                </BreadcrumbItem>
              </Fragment>
            ))}
          </BreadcrumbList>
        </Breadcrumb>
      </div>
    </header>
  );
}