import Link from "next/link";
import { badgeVariants, type BadgeVariants } from "@/components/ui/badge";
import BrowseHeader from "@/components/BrowseHeader";
import NewProjectMenu from "@/components/NewProjectMenu";
import CopyButton from "@/components/CopyButton";
import ProjectGrid from "@/components/projects/ProjectGrid";
import { KINDS, decisionCounts, indexHealth, listFolders, listProjects } from "@/lib/projects";
import { PROJECT_STATES } from "@/lib/project-types";
import { projectsNote } from "@/lib/dashboard";

export const dynamic = "force-dynamic";

// A STATIC segment, so it wins over app/[mode]/page.tsx -- which would
// otherwise catch /browse, fail isMode(), and 404. Same trick as /mix.
//
// ZERO CLIENT JS, still. The four filters are links that change searchParams,
// exactly as /browse/decisions does it, and `?q=` is a plain GET form carrying
// the others as hidden inputs -- the /browse/find idiom -- so any filtered view
// is one pasteable URL. Nothing here hydrates.
//
// Counts on the chips come from the UNFILTERED set on purpose. A chip whose
// number changes when you click a different chip moves under the cursor, and
// the whole point of a filter row is to say how much is behind each one.

type Search = {
  kind?: string;
  template?: string;
  state?: string;
  open?: string;
  q?: string;
  sort?: string;
};

export default async function BrowsePage({
  searchParams,
}: {
  searchParams: Promise<Search>;
}) {
  const sp = await searchParams;
  const { kind, template, state, open, q, sort } = sp;

  const all = await listProjects();
  const counts = await decisionCounts();
  const folders = await listFolders();

  const needle = (q ?? "").trim().toLowerCase();
  const match = (p: (typeof all)[number]) => {
    const c = counts.get(p.id);
    return (
      (!kind || p.kind === kind) &&
      (!template || p.template === template) &&
      (!state || p.state === state) &&
      (!open ||
        (open === "blocking" ? (c?.blocking ?? 0) > 0 : (c?.blocking ?? 0) + (c?.open ?? 0) > 0)) &&
      (!needle || p.haystack.includes(needle))
    );
  };

  const items = all.filter(match);
  const sorted =
    sort === "name" ? [...items].sort((a, b) => a.id.localeCompare(b.id)) : items;

  const nOf = (pred: (p: (typeof all)[number]) => boolean) => all.filter(pred).length;

  const qs = (next: Partial<Search>) => {
    const p = new URLSearchParams();
    for (const [k, v] of Object.entries({ ...sp, ...next })) if (v) p.set(k, String(v));
    const s = p.toString();
    return `/browse${s ? `?${s}` : ""}`;
  };

  // Group by folder, using the COLLAPSED labels but never collapsed URLs.
  const groups = new Map<string, typeof sorted>();
  for (const p of sorted) {
    // Which displayed folder owns this project: the deepest collapsed node
    // whose path is a prefix of the project's id.
    let owner = "";
    for (const f of folders.keys()) {
      if (f && (p.id === f || p.id.startsWith(`${f}/`)) && f.length > owner.length) owner = f;
    }
    const list = groups.get(owner);
    if (list) list.push(p);
    else groups.set(owner, [p]);
  }

  const blocking = [...counts.values()].reduce((n, c) => n + c.blocking, 0);
  const openN = [...counts.values()].reduce((n, c) => n + c.open, 0);

  // The index's only visible surface. It self-heals silently, so its health has
  // to be said deliberately or it cannot be observed at all.
  const ix = indexHealth();

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ label: "projects" }]}
        note={projectsNote(all.length, blocking, openN)}
      />
      <main className="deck-main flex-1 p-4">
        {/* --- filters, as links ---------------------------------------- */}
        <div className="mb-2 flex flex-wrap items-center gap-1.5">
          <span className="micro">kind</span>
          <Chip href={qs({ kind: "", template: "" })} on={!kind && !template} label={`all ${all.length}`} />
          {KINDS.map((k) => (
            <Chip
              key={k.id}
              href={qs({ kind: k.id, template: "" })}
              on={kind === k.id && !template}
              label={`${k.label} ${nOf((p) => p.kind === k.id)}`}
            />
          ))}
        </div>

        <div className="mb-2 flex flex-wrap items-center gap-1.5">
          <span className="micro">state</span>
          <Chip href={qs({ state: "" })} on={!state} label="any" />
          {PROJECT_STATES.filter((s) => nOf((p) => p.state === s) > 0).map((s) => (
            <Chip
              key={s}
              href={qs({ state: s })}
              on={state === s}
              label={`${s} ${nOf((p) => p.state === s)}`}
            />
          ))}

          <span className="micro ml-3">decisions</span>
          <Chip href={qs({ open: "" })} on={!open} label="any" />
          <Chip
            href={qs({ open: "blocking" })}
            on={open === "blocking"}
            label={`blocking ${nOf((p) => (counts.get(p.id)?.blocking ?? 0) > 0)}`}
            tone="blocking"
          />
          <Chip
            href={qs({ open: "1" })}
            on={open === "1"}
            label={`waiting ${nOf(
              (p) => (counts.get(p.id)?.blocking ?? 0) + (counts.get(p.id)?.open ?? 0) > 0,
            )}`}
          />

          <span className="micro ml-3">sort</span>
          <Chip href={qs({ sort: "" })} on={sort !== "name"} label="recent" />
          <Chip href={qs({ sort: "name" })} on={sort === "name"} label="name" />
        </div>

        <div className="mb-3 flex flex-wrap items-center gap-2">
          {/* A GET form so the result is a pasteable URL, and hidden inputs so
              searching does not throw away the filters you already set. */}
          <form method="get" action="/browse" className="flex items-center gap-1.5">
            {(["kind", "template", "state", "open", "sort"] as const).map((k) =>
              sp[k] ? <input key={k} type="hidden" name={k} value={sp[k]} /> : null,
            )}
            <input
              type="search"
              name="q"
              defaultValue={q ?? ""}
              placeholder="title, id, source…"
              aria-label="filter projects"
              className="w-56 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-2 py-1 font-mono text-[12px] text-[var(--color-text)] placeholder:text-[var(--color-dim)]"
            />
            <button
              type="submit"
              className="rounded border border-[var(--color-line)] px-2 py-1 text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
            >
              filter
            </button>
            {q && (
              <Link href={qs({ q: "" })} className="micro hover:text-[var(--color-text)]">
                clear
              </Link>
            )}
          </form>

          <NewProjectMenu kinds={KINDS.map((k) => ({ id: k.id, label: k.label, scaffold: k.scaffold }))} />
          <div className="ml-auto flex items-center gap-2">
            <Link
              href="/browse/decisions"
              className="rounded border border-[var(--color-line)] px-2.5 py-1 text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
            >
              decisions
            </Link>
            <CopyButton
              label="copy the whole picture"
              title="every project as markdown — spec, cuts, verdicts, notes and resolved marks"
              url="/api/browse/context"
              className="rounded border border-[var(--color-sel)] px-2.5 py-1 text-[12px] text-[var(--color-sel)] hover:bg-[color-mix(in_srgb,var(--color-sel)_14%,transparent)]"
            />
          </div>
        </div>

        {all.length === 0 ? (
          <p className="text-[12px] text-[var(--color-dim)]">
            No projects under <code className="font-mono">REPORTS_DIR</code>. A directory becomes
            one by holding a <code className="font-mono">video.manifest.json</code>, a{" "}
            <code className="font-mono">spec.json</code>, or a sweep report.
          </p>
        ) : (
          <div className="space-y-5">
            {[...groups.entries()].map(([folderPath, list]) => (
              <section key={folderPath || "_root"} data-folder={folderPath}>
                {folderPath && (
                  <h2 className="micro mb-1.5">
                    {folders.get(folderPath)?.label ?? folderPath}
                  </h2>
                )}
                <ProjectGrid projects={list} counts={counts} />
              </section>
            ))}
          </div>
        )}

        {ix.ok && ix.total > 0 && (
          <p className="micro mt-6" data-index={`${ix.fresh}/${ix.total}`}>
            index: {ix.fresh}/{ix.total} fresh — the filesystem is the model; this only
            caches what it said
          </p>
        )}
      </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>
  );
}