import type { ClaimDetail } from "@/types";

type DiagnosesListProps = {
  diagnoses: ClaimDetail["diagnoses"];
};

// Minimal ICD-10 description lookup. Covers the most common codes
// likely to appear in the test fixtures; the full ICD-10 catalog is
// ~95k entries and out of scope. Codes not in this map render without
// a description (the code + qualifier still display).
const ICD10_DESCRIPTION: Record<string, string> = {
  "E11.9": "Type 2 diabetes mellitus without complications",
  "E11.65": "Type 2 diabetes mellitus with hyperglycemia",
  "I10": "Essential (primary) hypertension",
  "J45.909": "Unspecified asthma, uncomplicated",
  "M54.5": "Low back pain",
  "R51": "Headache",
  "Z00.00": "General adult medical examination",
};

function describe(code: string): string | null {
  return ICD10_DESCRIPTION[code] ?? null;
}

/**
 * Diagnoses list for the claim detail drawer (SP4).
 *
 * Inline list of mono codes + (when present) qualifier + (when the
 * code is in our small ICD-10 dictionary) a short human description.
 * The dictionary is intentionally tiny — the drawer's purpose is to
 * show what the claim says, not to be an ICD-10 reference.
 */
export function DiagnosesList({ diagnoses }: DiagnosesListProps) {
  return (
    <section className="flex flex-col gap-3 px-6 py-4">
      <h3
        data-testid="section-label"
        className="eyebrow text-[color:var(--m-ink-tertiary)]"
      >
        Diagnoses ({diagnoses.length})
      </h3>

      {diagnoses.length === 0 ? (
        <p
          data-testid="diagnoses-empty"
          className="text-sm text-[color:var(--m-ink-tertiary)]"
        >
          No diagnoses
        </p>
      ) : (
        <ul className="flex flex-col gap-2" data-testid="diagnoses-list">
          {diagnoses.map((d, i) => {
            const desc = describe(d.code);
            return (
              <li
                key={`${d.code}-${i}`}
                data-testid="diagnosis-item"
                className="flex items-baseline gap-3 text-sm"
              >
                <span
                  className="mono text-[color:var(--m-ink-primary)] font-medium"
                >
                  {d.qualifier ? `${d.qualifier} ${d.code}` : d.code}
                </span>
                {desc ? (
                  <>
                    <span
                      className="h-px w-3 bg-[color:var(--m-border-heavy)]/30"
                      aria-hidden
                    />
                    <span className="text-[color:var(--m-ink-secondary)] italic">
                      {desc}
                    </span>
                  </>
                ) : null}
              </li>
            );
          })}
        </ul>
      )}
    </section>
  );
}