import Link from "next/link";
import { badgeVariants, type BadgeVariants } from "@/components/ui/badge";
import { countBySeverity, type Decision, type Severity } from "@/lib/decisions";
import Panel from "./Panel";

const TONE: Record<Severity, BadgeVariants["variant"]> = {
  blocking: "blocking",
  open: "open",
  info: "info",
};

/** Worst first, eight of them, and the count of the rest. */
export default function DecisionsPanel({ decisions }: { decisions: Decision[] }) {
  const counts = countBySeverity(decisions);
  const worst = decisions.slice(0, 8);
  return (
    <Panel
      title="needs a decision"
      testid="decisions"
      more={{ href: "/browse/decisions", label: `all ${decisions.length} →` }}
    >
      <div className="mb-1.5 flex gap-1.5" data-decision-totals={`${counts.blocking}/${counts.open}/${counts.info}`}>
        <span className={badgeVariants({ variant: "blocking", size: "sm" })}>{counts.blocking} blocking</span>
        <span className={badgeVariants({ variant: "open", size: "sm" })}>{counts.open} open</span>
        <span className={badgeVariants({ variant: "info", size: "sm" })}>{counts.info} info</span>
      </div>
      {worst.length === 0 ? (
        <p className="text-[12px] text-[var(--color-dim)]">nothing undecided</p>
      ) : (
        <ul className="space-y-0.5">
          {worst.map((d, i) => (
            <li
              key={`${d.project}-${d.kind}-${d.target}-${i}`}
              data-decision={d.kind}
              data-severity={d.severity}
              className="flex flex-wrap items-baseline gap-1.5 text-[11px]"
            >
              <span className={badgeVariants({ variant: TONE[d.severity], size: "sm" })}>{d.severity}</span>
              <Link href={d.href} className="font-mono text-[var(--color-sel)] hover:underline">
                {d.project}
              </Link>
              <span className="truncate text-[var(--color-dim)]">
                {d.target} — {d.why}
              </span>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}