// src/components/keywords/planning/readiness-dot.tsx
// Tri-state readiness dot shared by the Planning table + Overview modal.
// ready = green · progress = amber · missing = red (design "Planning & Overview").
"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { ReadyState } from "@/lib/keywords/prompt/types";

const RING: Record<ReadyState, string> = {
  ready: "bg-emerald-500 ring-emerald-500/15",
  progress: "bg-amber-500 ring-amber-500/15",
  missing: "bg-red-500 ring-red-500/15",
};

export const READY_LABEL: Record<ReadyState, string> = {
  ready: "Prêt",
  progress: "En cours",
  missing: "Manquant",
};

export function ReadinessDot({
  state,
  tooltip,
}: {
  state: ReadyState;
  tooltip?: React.ReactNode;
}) {
  const dot = (
    <span className="inline-grid size-[22px] place-items-center">
      <span
        role="img"
        aria-label={READY_LABEL[state]}
        className={`size-2.5 rounded-full ring-4 ${RING[state]}`}
      />
    </span>
  );
  if (!tooltip) return dot;
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <span>{dot}</span>
        </TooltipTrigger>
        <TooltipContent>{tooltip}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

/** Small coloured legend (Prêt / En cours / Manquant). */
export function ReadinessLegend() {
  return (
    <div className="flex items-center gap-4 text-muted-foreground text-xs">
      {(["ready", "progress", "missing"] as ReadyState[]).map((s) => (
        <span key={s} className="flex items-center gap-1.5">
          <span className={`size-2 rounded-full ${RING[s].split(" ")[0]}`} />
          {READY_LABEL[s]}
        </span>
      ))}
    </div>
  );
}