import clsx from "clsx";
import { AlertTriangle, CheckCircle2, Circle, Info, XCircle } from "lucide-react";
import type { Ton } from "@/lib/libelles";

const TONS: Record<Ton, string> = {
  neutre: "bg-stone-100 text-encre-2 border-stone-200",
  info: "bg-blue-50 text-blue-800 border-blue-200",
  succes: "bg-green-50 text-green-800 border-green-200",
  attention: "bg-amber-50 text-amber-900 border-amber-200",
  danger: "bg-red-50 text-red-800 border-red-200",
};

const ICONES: Record<Ton, typeof Circle> = {
  neutre: Circle,
  info: Info,
  succes: CheckCircle2,
  attention: AlertTriangle,
  danger: XCircle,
};

/** Badge de statut : couleur + icône + libellé (jamais la couleur seule). */
export function Badge({ ton, children, className }: { ton: Ton; children: React.ReactNode; className?: string }) {
  const Icone = ICONES[ton];
  return (
    <span className={clsx("inline-flex items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium", TONS[ton], className)}>
      <Icone className="h-3 w-3" aria-hidden />
      {children}
    </span>
  );
}

export function PastilleSociete({ code, couleur }: { code: string; couleur: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-xs font-medium text-encre-2">
      <span className="h-2 w-2 rounded-full" style={{ background: couleur }} aria-hidden />
      {code}
    </span>
  );
}

export function EnTetePage({ titre, sousTitre, actions }: { titre: string; sousTitre?: React.ReactNode; actions?: React.ReactNode }) {
  return (
    <div className="mb-6 flex flex-wrap items-end justify-between gap-3">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">{titre}</h1>
        {sousTitre && <p className="mt-1 text-sm text-encre-2">{sousTitre}</p>}
      </div>
      {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
    </div>
  );
}

export function Vide({ children }: { children: React.ReactNode }) {
  return <p className="px-4 py-8 text-center text-sm text-encre-3">{children}</p>;
}

/** Barre d'avancement d'une procédure : fait / total, rouge s'il y a du retard. */
export function Avancement({ faites, total, retard }: { faites: number; total: number; retard: number }) {
  const pct = total ? Math.round((faites / total) * 100) : 0;
  return (
    <div className="flex items-center gap-2" title={`${faites} / ${total} étapes traitées${retard ? `, ${retard} en retard` : ""}`}>
      <div className="h-1.5 w-20 overflow-hidden rounded-full bg-accent-clair">
        <div className="h-full rounded-full bg-accent" style={{ width: `${pct}%` }} />
      </div>
      <span className="chiffres text-xs text-encre-2">{pct} %</span>
      {retard > 0 && <Badge ton="danger">{retard} en retard</Badge>}
    </div>
  );
}