/**
 * DocStatusBar — 5 colored dots showing SWO, Visit, PECOS, PA, Diagnosis status.
 * Green = complete, Amber = pending/estimated, Red = missing/denied.
 */

const DOT_STATUS = {
  // SWO
  "Expired": "red",
  // PECOS
  "Verified": "green",
  "Needs verification": "red",
  "N/A": "gray",
  // PA
  "Not Required": "green",
  "Approved": "green",
  "Denied": "red",
  // Diagnosis
  "Not on file": "red",
  // Transfer / generic pending
  "Pending": "amber",
  "Not yet submitted": "red",
  "Estimated, confirm with prescriber": "amber",
  "Pending confirmation": "amber",
};

function dotColor(status) {
  if (!status) return "amber";
  const s = status.trim();
  if (s.startsWith("Confirmed")) return "green";
  if (s.startsWith("Approved")) return "green";
  if (s === "On File") return "green";
  return DOT_STATUS[s] || "amber";
}

const COLOR_MAP = {
  green: "bg-[#28A050]",
  amber: "bg-[#CB6B20]",
  red:   "bg-[#CC2222]",
  gray:  "bg-[#AAAAAA]",
};

const LABELS = ["SWO", "Visit", "PECOS", "PA", "Dx"];

export default function DocStatusBar({ docState }) {
  if (!docState) return null;

  const items = [
    docState.swo,
    docState.visit,
    docState.pecos,
    docState.pa,
    docState.diagnosis,
  ];

  return (
    <div className="flex items-center gap-[5px]" title="Documentation status: SWO · Visit · PECOS · PA · Diagnosis">
      {items.map((status, i) => (
        <div key={i} className="flex flex-col items-center gap-[2px]">
          <div
            className={`w-[8px] h-[8px] rounded-full ${COLOR_MAP[dotColor(status)]}`}
            title={`${LABELS[i]}: ${status || "Unknown"}`}
          />
        </div>
      ))}
    </div>
  );
}
