import type { ScoreBreakdown, ScoreTier } from "@/lib/inbox-api";

const FIELDS: Array<{ key: keyof ScoreBreakdown; label: string; weight: number }> = [
  { key: "patient", label: "Patient", weight: 40 },
  { key: "date", label: "Date", weight: 25 },
  { key: "amount", label: "Amount", weight: 20 },
  { key: "provider", label: "Provider", weight: 15 },
];

export function CandidateBreakdown({
  score,
  breakdown,
  tier,
}: {
  score: number;
  breakdown: ScoreBreakdown;
  tier: ScoreTier;
}) {
  return (
    <div className="mono" style={{ fontSize: 11 }}>
      <div className="flex items-baseline justify-between mb-3">
        <span
          className="uppercase"
          style={{
            color: "var(--tt-ink-dim)",
            letterSpacing: "0.18em",
            fontSize: 10,
            fontWeight: 600,
          }}
        >
          Match score
        </span>
        <span
          className="display tabular-nums"
          style={{
            color: "var(--tt-amber)",
            fontSize: 28,
            lineHeight: 1,
            letterSpacing: "-0.02em",
          }}
        >
          {score}
        </span>
      </div>

      <ul className="space-y-1.5">
        {FIELDS.map((f) => {
          const v = breakdown[f.key];
          const score = Math.round(v * f.weight);
          const pct = Math.max(0.04, v);
          return (
            <li key={f.key} className="flex flex-col gap-1">
              <div className="flex items-baseline justify-between">
                <span style={{ color: "var(--tt-ink)" }}>{f.label}</span>
                <span
                  className="tabular-nums"
                  style={{ color: "var(--tt-ink-dim)" }}
                >
                  <span style={{ color: "var(--tt-amber)" }}>{score}</span>
                  <span className="opacity-50"> / {f.weight}</span>
                </span>
              </div>
              <div
                aria-hidden
                className="h-[3px] rounded-full overflow-hidden"
                style={{ background: "var(--tt-muted)" }}
              >
                <div
                  className="h-full rounded-full"
                  style={{
                    width: `${pct * 100}%`,
                    background:
                      "linear-gradient(90deg, var(--tt-amber) 0%, var(--tt-amber) 100%)",
                    boxShadow: "0 0 4px -1px var(--tt-amber)",
                  }}
                />
              </div>
            </li>
          );
        })}
      </ul>

      <p
        className="mt-4 inline-flex items-center gap-1.5 uppercase"
        style={{
          color: "var(--tt-amber)",
          letterSpacing: "0.18em",
          fontSize: 9,
          fontWeight: 700,
        }}
      >
        <span
          aria-hidden
          className="inline-block h-1 w-1 rounded-full"
          style={{ background: "var(--tt-amber)" }}
        />
        {tier}
      </p>
    </div>
  );
}
