import Link from "next/link";
import { badgeVariants, type BadgeVariants } from "@/components/ui/badge";
import BrowseHeader from "@/components/BrowseHeader";
import CopyButton from "@/components/CopyButton";
import {
  SEVERITIES,
  countBySeverity,
  openCount,
  type Decision,
  type Severity,
} from "@/lib/decisions";
import { openDecisions } from "@/lib/projects";
import { fmtAgo } from "@/lib/format";

export const dynamic = "force-dynamic";

// A STATIC segment under app/browse/, so it wins over app/browse/[song]/ --
// which would otherwise catch /browse/decisions, fail readSong() and 404. Same
// trick /browse itself plays against app/[mode]/. The e2e suite asserts it,
// because when this regresses the page still renders perfectly in isolation and
// only the URL stops working.
//
// Zero client JS. The filters are links that change searchParams; nothing here
// changes without a navigation, and the list is short by construction.

// The three severities ARE three badge variants, one for one. That is not a
// coincidence to be tidied away: the palette reserves its hues for verdicts,
// and a severity is the closest thing this list has to one.
const TONE: Record<Severity, BadgeVariants["variant"]> = {
  blocking: "blocking",
  open: "open",
  info: "info",
};

export default async function DecisionsPage({
  searchParams,
}: {
  searchParams: Promise<{ severity?: string; kind?: string; project?: string }>;
}) {
  const { severity, kind, project } = await searchParams;
  const all = await openDecisions();

  const items = all.filter(
    (d) =>
      (!severity || d.severity === severity) &&
      (!kind || d.kind === kind) &&
      (!project || d.project === project),
  );

  const counts = countBySeverity(all);
  const kinds = [...new Set(all.map((d) => d.kind))].sort();
  const projects = [...new Set(all.map((d) => d.project))].sort();
  const byProject = new Map<string, Decision[]>();
  for (const d of items) {
    const list = byProject.get(d.project);
    if (list) list.push(d);
    else byProject.set(d.project, [d]);
  }

  const q = (next: Partial<{ severity: string; kind: string; project: string }>) => {
    const p = new URLSearchParams();
    const merged = { severity, kind, project, ...next };
    for (const [k, v] of Object.entries(merged)) if (v) p.set(k, v);
    const s = p.toString();
    return `/browse/decisions${s ? `?${s}` : ""}`;
  };

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        active="decisions"
        crumbs={[{ href: "/browse", label: "projects" }, { label: "decisions" }]}
        note={`${openCount(all)} waiting · ${all.length - openCount(all)} for information`}
      />

      <main className="deck-main flex-1 p-4">
        <div className="mb-3 flex flex-wrap items-center gap-1.5">
          <span className="micro">severity</span>
          <Chip href={q({ severity: "" })} on={!severity} label={`all ${all.length}`} />
          {SEVERITIES.map((s) => (
            <Chip
              key={s}
              href={q({ severity: s })}
              on={severity === s}
              label={`${s} ${counts[s]}`}
              tone={TONE[s]}
            />
          ))}

          <span className="micro ml-3">project</span>
          <Chip href={q({ project: "" })} on={!project} label="all" />
          {projects.map((p) => (
            <Chip key={p} href={q({ project: p })} on={project === p} label={p} />
          ))}

          <div className="ml-auto">
            <CopyButton
              label="copy the whole picture"
              title="every project as markdown — including this list"
              url="/api/browse/context"
            />
          </div>
        </div>

        <div className="mb-3 flex flex-wrap items-center gap-1.5">
          <span className="micro">kind</span>
          <Chip href={q({ kind: "" })} on={!kind} label="all" />
          {kinds.map((k) => (
            <Chip key={k} href={q({ kind: k })} on={kind === k} label={k} />
          ))}
        </div>

        {items.length === 0 ? (
          <p className="text-[12px] text-[var(--color-dim)]">
            {all.length === 0
              ? "Nothing undecided. Every cut ships, every live variant is judged, every recipe still describes its file."
              : "Nothing matches that filter."}
          </p>
        ) : (
          <div className="space-y-4">
            {[...byProject.entries()].map(([id, list]) => (
              <section key={id} data-project={id}>
                <h2 className="mb-1.5 flex items-baseline gap-2">
                  <Link
                    // An article's notes are listed under its page's path
                    // (lib/decisions.ts noteDecisions), not a project's.
                    href={id.startsWith("sites/") ? `/${id}` : `/browse/${id}`}
                    className="font-mono text-[13px] text-[var(--color-text)] hover:text-[var(--color-sel)]"
                  >
                    {id}
                  </Link>
                  <span className="micro">
                    {list.filter((d) => d.severity !== "info").length} waiting of {list.length}
                  </span>
                </h2>
                <ul className="space-y-1">
                  {list.map((d, i) => (
                    <li
                      key={`${d.kind}-${d.target}-${i}`}
                      data-decision={d.kind}
                      data-severity={d.severity}
                      data-target={d.target}
                      className="flex flex-wrap items-baseline gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-1.5"
                    >
                      <span className={badgeVariants({ variant: TONE[d.severity], size: "sm" })}>
                        {d.severity}
                      </span>
                      <Link
                        href={d.href}
                        className="font-mono text-[12px] text-[var(--color-sel)] hover:underline"
                      >
                        {d.target}
                      </Link>
                      <span className="text-[12px] text-[var(--color-dim)]">{d.why}</span>
                      <span className="micro ml-auto">{d.kind}</span>
                      <span className="num text-[11px] text-[var(--color-dim)]">
                        {fmtAgo(d.at)}
                      </span>
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}

function Chip({
  href,
  on,
  label,
  tone,
}: {
  href: string;
  on: boolean;
  label: string;
  tone?: BadgeVariants["variant"];
}) {
  return (
    <Link
      href={href}
      // Set by hand, not by the variant. It is what the e2e suite asserts on,
      // and it is the actual accessibility statement -- the colour is only the
      // visible half of it.
      aria-current={on ? "true" : undefined}
      className={badgeVariants({ variant: on ? "on" : (tone ?? "neutral") })}
    >
      {label}
    </Link>
  );
}