// StatusChip — the single visual idiom for any "this thing has a state"
// signal in the workspace. Replaces the five ad-hoc chips that grew over
// time: term-badge-new / term-badge-deprecated / finding-sev / finding-code /
// req-flag / EntityColumns ReviewBadge.
//
// Variants are picked from a tiny vocabulary so the visual rhythm is
// consistent across surfaces: review state (suggested / accepted /
// deprecated / dismissed / resolved), severity (low / medium / high), or a
// validation code (S1, M2, X3, …) rendered as `code`.
//
// Usage:
//   <StatusChip variant="suggested" />          // "NEW"
//   <StatusChip variant="deprecated" />         // "DEPRECATED"
//   <StatusChip variant="severity" value="high" />
//   <StatusChip variant="code" value="X3" />
//   <StatusChip variant="confidence" value={0.87} />
//   <StatusChip variant="warn" label="unsupported" />
//
// CSS lives in styles/base.css under .status-chip; tone is one of:
//   accent   — review-pending / NEW / suggestion
//   muted    — neutral / deprecated / code
//   warn     — risky / high-severity / unsupported
//   ok       — confirmed / resolved
//   info     — informational / confidence

"use client";

export type StatusTone = "accent" | "muted" | "warn" | "ok" | "info";

export type StatusChipProps =
  | { variant: "suggested"; title?: string }
  | { variant: "accepted"; title?: string }
  | { variant: "deprecated"; title?: string }
  | { variant: "dismissed"; title?: string }
  | { variant: "resolved"; title?: string }
  | { variant: "severity"; value: "low" | "medium" | "high"; title?: string }
  | { variant: "code"; value: string; title?: string }
  | { variant: "confidence"; value: number; title?: string }
  | { variant: "warn"; label: string; title?: string }
  | { variant: "ok"; label: string; title?: string }
  | { variant: "muted"; label: string; title?: string };

/** Single-axis style picker. Every visual decision flows through this fn so
 *  designers can tweak one place. */
function styleFor(props: StatusChipProps): { tone: StatusTone; label: string } {
  switch (props.variant) {
    case "suggested":
      return { tone: "accent", label: "NEW" };
    case "accepted":
      return { tone: "ok", label: "KEPT" };
    case "deprecated":
      return { tone: "muted", label: "DEPRECATED" };
    case "dismissed":
      return { tone: "muted", label: "DISMISSED" };
    case "resolved":
      return { tone: "ok", label: "RESOLVED" };
    case "severity":
      return {
        tone: props.value === "high" ? "warn" : props.value === "medium" ? "info" : "muted",
        label: props.value.toUpperCase(),
      };
    case "code":
      return { tone: "muted", label: props.value };
    case "confidence":
      return {
        tone: props.value >= 0.75 ? "ok" : props.value >= 0.4 ? "info" : "muted",
        label: `${Math.round(props.value * 100)}%`,
      };
    case "warn":
      return { tone: "warn", label: props.label };
    case "ok":
      return { tone: "ok", label: props.label };
    case "muted":
      return { tone: "muted", label: props.label };
  }
}

export function StatusChip(props: StatusChipProps) {
  const { tone, label } = styleFor(props);
  return (
    <span
      className={`status-chip status-chip-${tone}`}
      title={props.title}
      aria-label={props.title ?? label}
    >
      {label}
    </span>
  );
}