"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight, Home, Shield } from "lucide-react";
import { useMemo, useState, useEffect } from "react";

// Mapping des routes vers des labels lisibles
const ROUTE_LABELS: Record<string, string> = {
  "/": "Tableau de bord",
  "/contrats": "Contrats & Paies",
  "/contrats-rg": "Contrats & Paies",
  "/contrats-multi": "Contrats & Paies",
  "/salaries": "Salariés",
  "/salaries/nouveau": "Nouveau salarié",
  "/signatures-electroniques": "Signatures électroniques",
  "/virements-salaires": "Virements de salaires",
  "/cotisations": "Cotisations",
  "/facturation": "Facturation",
  "/informations": "Vos informations",
  "/vos-documents": "Vos documents",
  "/vos-acces": "Gestion des accès",
  "/vos-acces/nouveau": "Nouvel utilisateur",
  "/securite": "Sécurité",
  "/minima-ccn": "Minima CCN",
  "/minima-ccn/ccneac": "Entreprises Artistiques & Culturelles",
  "/minima-ccn/ccnpa": "Production Audiovisuelle",
  "/minima-ccn/ccnsvp": "Spectacle Vivant Privé",
  "/simulateur": "Simulateur de paie",
  "/support": "Support",
  "/debug": "Debug",
  "/staff": "Staff",
  "/staff/tickets": "Tickets support",
  "/staff/contrats": "Contrats",
  "/staff/avenants": "Avenants",
  "/staff/payslips": "Fiches de paie",
  "/staff/salaries": "Salariés",
  "/staff/facturation": "Facturation",
  "/staff/virements-salaires": "Virements de salaires",
  "/staff/organisations": "Organisations",
  "/staff/analytics": "Analytics",
};

// Hook pour récupérer les labels dynamiques
function useDynamicLabel(segment: string, currentPath: string): string | null {
  const [label, setLabel] = useState<string | null>(null);

  useEffect(() => {
    // Réinitialiser le label si le segment change
    setLabel(null);

    // Détecter le pattern et récupérer les données
    const fetchLabel = async () => {
      try {
        // Pattern : /salaries/[matricule]
        if (currentPath.match(/^\/salaries\/[^/]+$/)) {
          const matricule = segment;
          const res = await fetch(`/api/salaries?search=${encodeURIComponent(matricule)}`, { 
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            if (data.items && data.items.length > 0) {
              // Trouver le salarié exact avec le bon matricule
              const salarie = data.items.find((s: any) => 
                s.matricule === matricule || s.code_salarie === matricule
              );
              
              if (salarie) {
                // Format: NOM Prénom (nom de famille en majuscules)
                // Extraire nom et prénom du champ nom complet
                const parts = salarie.nom?.split(' ') || [];
                if (parts.length >= 2) {
                  const nom = parts[0]?.toUpperCase();
                  const prenom = parts.slice(1).join(' ');
                  setLabel(`${nom} ${prenom}`.trim());
                } else {
                  setLabel(salarie.nom || matricule);
                }
              }
            }
          }
        }
        
        // Pattern : /staff/facturation/[id]
        else if (currentPath.match(/^\/staff\/facturation\/[^/]+$/)) {
          const id = segment;
          const res = await fetch(`/api/staff/facturation/${id}`, {
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            setLabel(data.period_label || `Facture ${id.substring(0, 8)}`);
          }
        }

        // Pattern : /support/[id] (ticket)
        else if (currentPath.match(/^\/support\/[^/]+$/)) {
          const id = segment;
          const res = await fetch(`/api/tickets/${id}`, {
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            setLabel(data.subject || `Ticket #${id.substring(0, 8)}`);
          }
        }

        // Pattern : /contrats-multi/[id] (CDDU multi-mois)
        else if (currentPath.match(/^\/contrats-multi\/[^/]+$/)) {
          const id = segment;
          const res = await fetch(`/api/contrats/${id}`, {
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            setLabel(`CDDU multi-mois ${data.numero || id.substring(0, 8)}`);
          }
        }

        // Pattern : /contrats-rg/[id] (Contrat Régime Général)
        else if (currentPath.match(/^\/contrats-rg\/[^/]+$/)) {
          const id = segment;
          const res = await fetch(`/api/contrats/${id}`, {
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            setLabel(`Contrat Régime Général ${data.numero || id.substring(0, 8)}`);
          }
        }

        // Pattern : /contrats/[id] (CDDU mono-mois ou autre)
        else if (currentPath.match(/^\/contrats\/[^/]+$/)) {
          const id = segment;
          const res = await fetch(`/api/contrats/${id}`, {
            credentials: 'include',
            cache: 'no-store'
          });
          if (res.ok) {
            const data = await res.json();
            setLabel(`CDDU ${data.numero || id.substring(0, 8)}`);
          }
        }
      } catch (error) {
        // En cas d'erreur, ne rien faire (on garde le label par défaut)
        console.debug('Breadcrumb: impossible de récupérer le label dynamique', error);
      }
    };

    // Lancer la récupération seulement si on détecte un pattern connu
    if (
      currentPath.match(/^\/salaries\/[^/]+$/) ||
      currentPath.match(/^\/staff\/facturation\/[^/]+$/) ||
      currentPath.match(/^\/support\/[^/]+$/) ||
      currentPath.match(/^\/contrats-multi\/[^/]+$/) ||
      currentPath.match(/^\/contrats-rg\/[^/]+$/) ||
      currentPath.match(/^\/contrats\/[^/]+$/)
    ) {
      fetchLabel();
    }
  }, [segment, currentPath]);

  return label;
}

export default function Breadcrumb() {
  const pathname = usePathname();

  const breadcrumbs = useMemo(() => {
    // Ne pas afficher sur la page d'accueil
    if (pathname === "/") return [];

    const segments = pathname.split("/").filter(Boolean);
    const crumbs: Array<{ 
      label: string; 
      href: string; 
      isLast: boolean;
      isStaff: boolean;
      isDynamic: boolean;
      segment: string;
    }> = [];

    // Toujours commencer par l'accueil
    crumbs.push({
      label: "Accueil",
      href: "/",
      isLast: false,
      isStaff: false,
      isDynamic: false,
      segment: "",
    });

    // Construire le breadcrumb segment par segment
    let currentPath = "";
    segments.forEach((segment, index) => {
      currentPath += `/${segment}`;
      const isLast = index === segments.length - 1;
      const isStaff = currentPath.startsWith("/staff");

      // Détection des patterns spéciaux (IDs, matricules, etc.)
      let label = ROUTE_LABELS[currentPath];
      let isDynamic = false;
      
      if (!label) {
        // Vérifier si c'est un pattern dynamique connu
        if (
          currentPath.match(/^\/salaries\/[^/]+$/) ||
          currentPath.match(/^\/staff\/facturation\/[^/]+$/) ||
          currentPath.match(/^\/support\/[^/]+$/) ||
          currentPath.match(/^\/contrats-multi\/[^/]+$/) ||
          currentPath.match(/^\/contrats-rg\/[^/]+$/) ||
          currentPath.match(/^\/contrats\/[^/]+$/)
        ) {
          isDynamic = true;
          // Label temporaire selon le type de page
          if (currentPath.match(/^\/salaries\/[^/]+$/)) {
            label = "Salarié";
          } else {
            label = "Chargement...";
          }
        }
        // Si c'est un UUID ou un nombre (probablement un ID)
        else if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
          label = "Détails";
        } else if (/^\d+$/.test(segment)) {
          label = `#${segment}`;
        } else {
          // Fallback : capitaliser et remplacer les tirets
          label = segment
            .replace(/-/g, " ")
            .replace(/\b\w/g, (l) => l.toUpperCase());
        }
      }

      crumbs.push({
        label,
        href: currentPath,
        isLast,
        isStaff,
        isDynamic,
        segment,
      });
    });

    return crumbs;
  }, [pathname]);

  // Ne rien afficher si c'est la page d'accueil
  if (breadcrumbs.length === 0) return null;

  return (
    <nav 
      aria-label="Fil d'Ariane" 
      className="flex items-center gap-2 text-sm mb-4 px-1"
    >
      {breadcrumbs.map((crumb, index) => (
        <BreadcrumbItem 
          key={crumb.href} 
          crumb={crumb} 
          index={index}
        />
      ))}
    </nav>
  );
}

// Composant pour un item de breadcrumb (permet d'utiliser le hook dynamique)
function BreadcrumbItem({ 
  crumb, 
  index 
}: { 
  crumb: { 
    label: string; 
    href: string; 
    isLast: boolean;
    isStaff: boolean;
    isDynamic: boolean;
    segment: string;
  };
  index: number;
}) {
  // Récupérer le label dynamique si nécessaire
  const dynamicLabel = useDynamicLabel(
    crumb.isDynamic ? crumb.segment : "",
    crumb.isDynamic ? crumb.href : ""
  );

  // Utiliser le label dynamique si disponible, sinon le label statique
  const displayLabel = dynamicLabel || crumb.label;

  return (
    <div className="flex items-center gap-2">
      {index > 0 && (
        <ChevronRight className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" aria-hidden />
      )}
      {crumb.isLast ? (
        <span className="text-slate-700 font-medium truncate max-w-[400px] flex items-center gap-1.5">
          {displayLabel}
          {crumb.isStaff && (
            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-semibold bg-indigo-100 text-indigo-700 border border-indigo-200">
              <Shield className="w-3 h-3" />
              Staff
            </span>
          )}
        </span>
      ) : (
        <Link
          href={crumb.href}
          className="text-slate-500 hover:text-indigo-600 transition truncate max-w-[300px] flex items-center gap-1.5"
          title={displayLabel}
        >
          {index === 0 ? (
            <>
              <Home className="w-4 h-4 flex-shrink-0" aria-label="Accueil" />
              <span className="hidden sm:inline">Accueil</span>
            </>
          ) : (
            <>
              {displayLabel}
              {crumb.isStaff && (
                <span className="inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-xs font-semibold bg-indigo-100 text-indigo-700 border border-indigo-200">
                  <Shield className="w-2.5 h-2.5" />
                </span>
              )}
            </>
          )}
        </Link>
      )}
    </div>
  );
}
