import { Check, Clock } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Timeline — frise verticale d'événements passés / présents / futurs.
 * Cf. wireframe 4.2 (détail facture) : "une seule colonne qui mélange passé
 * (plein) et futur (estompé) — l'utilisateur voit tout l'arc de la relance".
 *
 * Visuel :
 *  - past    : pastille rubis-glow + ✓ rubis-deep, texte ink
 *  - current : pastille rubis pleine + Clock blanc, texte ink, bordure rubis sur la pastille
 *  - future  : pastille blanche + bord line, texte ink-3 (estompé)
 *  - ligne verticale ink-3 entre les pastilles
 */
export type TimelineState = "past" | "current" | "future";

export type TimelineEvent = {
  id: string;
  state: TimelineState;
  /** Métadonnée temporelle ("02/04/2026 · facture émise" ou "J+10 — Étape 2"). */
  when: string;
  /** Action / titre de l'événement. Peut contenir du markup léger via React. */
  what: React.ReactNode;
  /** Détail secondaire optionnel (ex: "ouvert 2x"). */
  detail?: React.ReactNode;
};

type TimelineProps = {
  events: TimelineEvent[];
  className?: string;
};

export function Timeline({ events, className }: TimelineProps) {
  return (
    <ol className={cn("relative flex flex-col", className)}>
      {events.map((event, idx) => {
        const isLast = idx === events.length - 1;
        return (
          <li key={event.id} className="relative flex gap-4 pb-7 last:pb-0">
            {/* Ligne verticale qui descend de la pastille jusqu'au prochain item */}
            {!isLast && (
              <span
                aria-hidden="true"
                className={cn(
                  "absolute left-[14px] top-7 -bottom-1 w-px",
                  event.state === "past" ? "bg-rubis-glow" : "bg-line",
                )}
              />
            )}
            <Pastille state={event.state} />
            <div className="flex-1 min-w-0 pt-0.5">
              <p
                className={cn(
                  "text-[11px] font-semibold uppercase tracking-[0.1em]",
                  event.state === "future" ? "text-ink-3" : "text-rubis",
                )}
              >
                {event.when}
              </p>
              <div
                className={cn(
                  "mt-1 text-[14px] leading-relaxed",
                  event.state === "future" ? "text-ink-3" : "text-ink",
                )}
              >
                {event.what}
              </div>
              {event.detail && (
                <p className="mt-0.5 text-[12.5px] text-ink-3">{event.detail}</p>
              )}
            </div>
          </li>
        );
      })}
    </ol>
  );
}

function Pastille({ state }: { state: TimelineState }) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        "relative z-10 flex size-7 shrink-0 items-center justify-center rounded-full",
        state === "past" && "bg-rubis-glow text-rubis-deep",
        state === "current" && "bg-rubis text-white shadow-rubis ring-4 ring-rubis-glow",
        state === "future" && "bg-white text-ink-3 border border-line",
      )}
    >
      {state === "past" && <Check size={13} strokeWidth={2.5} aria-hidden="true" />}
      {state === "current" && <Clock size={13} strokeWidth={2.5} aria-hidden="true" />}
      {/* future : pas d'icône, juste un cercle vide. */}
    </span>
  );
}
