/**
 * The severity ladder's visual encoding — see UI_REDESIGN.md §2.3.
 *
 * Colour is never the only channel: severity is triple-encoded so it
 * survives both grayscale and colour-blindness.
 *   major    — filled triangle,   colour, 5px spine
 *   moderate — outline triangle,  colour, 5px spine (thinner fill)
 *   minor    — outline circle,    neutral ink, 3px spine
 *   routine  — faint outline circle, neutral ink, 2px spine
 */
import type { Severity } from "@/lib/severity";
import { SEVERITY_COLORS, SEVERITY_LABEL } from "@/lib/severity";

const SPINE_WIDTH: Record<Severity, number> = { major: 5, moderate: 5, minor: 3, routine: 2 };
const GLYPH_SIZE: Record<"sm" | "md", number> = { sm: 12, md: 16 };

function Glyph({ severity, size }: { severity: Severity; size: number }) {
  const color = SEVERITY_COLORS[severity];
  if (severity === "major") {
    // filled triangle
    return (
      <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
        <polygon points="8,1.5 14.5,14.5 1.5,14.5" fill={color} />
      </svg>
    );
  }
  if (severity === "moderate") {
    // outline triangle
    return (
      <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
        <polygon points="8,1.5 14.5,14.5 1.5,14.5" fill="none" stroke={color} strokeWidth={1.75} strokeLinejoin="round" />
      </svg>
    );
  }
  if (severity === "minor") {
    // outline circle, neutral
    return (
      <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden>
        <circle cx="8" cy="8" r="6" fill="none" stroke={color} strokeWidth={1.75} />
      </svg>
    );
  }
  // routine — faint outline circle
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" aria-hidden style={{ opacity: 0.6 }}>
      <circle cx="8" cy="8" r="6" fill="none" stroke={color} strokeWidth={1.25} />
    </svg>
  );
}

export function SeverityMark({
  severity,
  showLabel = false,
  spine = false,
  size = "sm",
  className,
}: {
  severity: Severity;
  showLabel?: boolean;
  spine?: boolean;
  size?: "sm" | "md";
  className?: string;
}) {
  const color = SEVERITY_COLORS[severity];
  return (
    <span className={`inline-flex items-center gap-1.5 ${className ?? ""}`}>
      {spine && (
        <span
          aria-hidden
          className="inline-block rounded-full self-stretch"
          style={{ width: SPINE_WIDTH[severity], background: color, minHeight: "0.9em" }}
        />
      )}
      <Glyph severity={severity} size={GLYPH_SIZE[size]} />
      {showLabel && (
        <span className="text-xs font-medium" style={{ color }}>
          {SEVERITY_LABEL[severity]}
        </span>
      )}
    </span>
  );
}

/** Standalone spine bar — for list rows that render the mark and spine in separate flex slots. */
export function SeveritySpine({ severity, className }: { severity: Severity; className?: string }) {
  return (
    <span
      aria-hidden
      className={`inline-block rounded-full self-stretch ${className ?? ""}`}
      style={{ width: SPINE_WIDTH[severity], background: SEVERITY_COLORS[severity], minHeight: "100%" }}
    />
  );
}