/**
 * Stage colours for the repair Documents flow.
 *
 * Visual contract:
 *   - "pending"     : red     — operator hasn't produced this artefact yet
 *   - "in_progress" : amber   — produced / received, awaiting next step
 *   - "done"        : emerald — final stage of this flow, complete
 *   - "skipped"     : muted   — superseded / replaced (e.g. a re-quoted
 *                              customer quote); still rendered but de-emphasised
 *
 * Each stage has:
 *   - label     — short human label rendered in the row badge
 *   - tone      — tailwind semantic colour bucket used to derive classes
 *   - stripe    — left-edge stripe colour (the row's "stage colour")
 *   - dot       — small filled circle colour (used inside the badge)
 *   - badge     — badge background + text colour pair
 *   - dim       — row background tint (very subtle; lets the stripe
 *                 do most of the visual lifting)
 *
 * The class strings are kept as constants so we never have to
 * dynamically build Tailwind class names (Tailwind's JIT needs the
 * full string in source for it to be in the generated CSS).
 */

export type DocumentStageTone =
  | "pending"
  | "in_progress"
  | "done"
  | "skipped";

export interface DocumentStageStyle {
  label: string;
  /** Tone bucket — drives the other fields. */
  tone: DocumentStageTone;
  /** Tailwind class for the left-edge stripe. */
  stripeClass: string;
  /** Tailwind class for the small filled circle inside the badge. */
  dotClass: string;
  /** Tailwind classes for the badge background + text. */
  badgeClass: string;
  /** Tailwind class for the very-subtle row background tint. */
  tintClass: string;
}

const STYLE: Record<DocumentStageTone, Omit<DocumentStageStyle, "tone">> = {
  pending: {
    label: "Not started",
    stripeClass: "bg-red-500",
    dotClass: "bg-red-500",
    badgeClass: "bg-red-100 text-red-700 ring-red-600/20",
    tintClass: "bg-red-50/40",
  },
  in_progress: {
    label: "In progress",
    stripeClass: "bg-amber-500",
    dotClass: "bg-amber-500",
    badgeClass: "bg-amber-100 text-amber-800 ring-amber-600/20",
    tintClass: "bg-amber-50/40",
  },
  done: {
    label: "Done",
    stripeClass: "bg-emerald-500",
    dotClass: "bg-emerald-500",
    badgeClass: "bg-emerald-100 text-emerald-800 ring-emerald-600/20",
    tintClass: "bg-emerald-50/40",
  },
  skipped: {
    label: "Replaced",
    stripeClass: "bg-zinc-300",
    dotClass: "bg-zinc-400",
    badgeClass: "bg-zinc-100 text-zinc-600 ring-zinc-500/20",
    tintClass: "bg-zinc-50/40",
  },
};

export function documentStageStyle(tone: DocumentStageTone): DocumentStageStyle {
  return { tone, ...STYLE[tone] };
}