const LEGEND_ITEMS = [
  { color: "#E53E3E", name: "At Risk",        meaning: "Supply or documentation gap. Act now." },
  { color: "#F59E0B", name: "Action Needed",  meaning: "Deadline approaching. Confirm before window closes." },
  { color: "#2EA3A3", name: "On Track",       meaning: "Documentation current." },
  { color: "#22C55E", name: "Clear to Ship",  meaning: "In resupply window. Ready to go.", check: true },
];

// P6 additions (Kisa-approved 2026-07-07): the readiness states the nested
// worklist introduces. Legacy surfaces keep the original four.
const EXTENDED_ITEMS = [
  { color: "#9B8EC4", name: "Plan Type Needed", meaning: "Map the plan type to grade documentation." },
  { color: "#9B8EC4", name: "Data gap", meaning: "A required column was not in the file. Fix the import, not the patient.", diamond: true },
];

export default function StatusLegend({ extended = false }) {
  const items = extended ? [...LEGEND_ITEMS, ...EXTENDED_ITEMS] : LEGEND_ITEMS;
  return (
    <div className="flex items-center gap-x-5 gap-y-2 flex-wrap px-[22px] py-[10px] border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)] font-body">
      {items.map((item) => (
        <div key={item.name} className="flex items-center gap-[7px] whitespace-nowrap">
          {item.check
            ? <span style={{ color: item.color, fontSize: "13px", fontWeight: 800, lineHeight: 1, width: "8px", textAlign: "center" }}>✓</span>
            : item.diamond
            ? <span style={{ color: item.color, fontSize: "11px", fontWeight: 800, lineHeight: 1, width: "8px", textAlign: "center" }}>◇</span>
            : <span className="inline-block rounded-full shrink-0" style={{ width: "8px", height: "8px", backgroundColor: item.color }} />
          }
          <span className="text-[11.5px] font-semibold text-[var(--text-secondary)]">
            {item.name}
          </span>
          <span className="text-[11px] text-[var(--text-warm)]">
            {item.meaning}
          </span>
        </div>
      ))}
    </div>
  );
}
