import Link from "next/link";
import BrowseHeader from "@/components/BrowseHeader";
import ArticleTable from "@/components/articles/ArticleTable";
import SiteChips from "@/components/articles/SiteChips";
import { badgeVariants } from "@/components/ui/badge";
import { listSiteRows, type ArticleRow } from "@/lib/articles/sites";

export const dynamic = "force-dynamic";

// Every site's articles, private sites first. Zero client JS: the filters are
// links that change searchParams (/browse/decisions' idiom), so a filtered
// view is one pasteable URL.

type Search = { site?: string; status?: string; notes?: string };

export default async function SitesPage({ searchParams }: { searchParams: Promise<Search> }) {
  const sp = await searchParams;
  const all = await listSiteRows();

  const keep = (a: ArticleRow) =>
    (!sp.status || a.status === sp.status) && (sp.notes !== "open" || a.openNotes > 0);
  const sites = all
    .filter((s) => !sp.site || s.siteId === sp.site)
    .map((s) => ({ ...s, shown: s.articles.filter(keep) }))
    .filter((s) => s.shown.length > 0 || (!sp.status && !sp.notes));

  const articles = all.flatMap((s) => s.articles);
  const open = articles.reduce((n, a) => n + a.openNotes, 0);
  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 `/sites${s ? `?${s}` : ""}`;
  };

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader active="articles" crumbs={[{ label: "articles" }]} note={`${all.length} sites · ${articles.length} articles · ${open} open notes`} />
      <main className="deck-main flex-1 p-4">
        <div className="mb-3 flex flex-wrap items-center gap-1.5">
          <span className="micro">site</span>
          <Chip href={qs({ site: "" })} on={!sp.site} label={`all ${all.length}`} />
          {all.map((s) => (
            <Chip key={s.siteId} href={qs({ site: s.siteId })} on={sp.site === s.siteId} label={s.siteId} />
          ))}
          <span className="micro ml-3">status</span>
          <Chip href={qs({ status: "" })} on={!sp.status} label="all" />
          <Chip href={qs({ status: "published" })} on={sp.status === "published"} label={`published ${articles.filter((a) => a.status === "published").length}`} />
          <Chip href={qs({ status: "draft" })} on={sp.status === "draft"} label={`draft ${articles.filter((a) => a.status === "draft").length}`} />
          <span className="micro ml-3">notes</span>
          <Chip href={qs({ notes: "" })} on={sp.notes !== "open"} label="all" />
          <Chip href={qs({ notes: "open" })} on={sp.notes === "open"} label={`open ${articles.filter((a) => a.openNotes > 0).length}`} />
        </div>

        {sites.length === 0 ? (
          <p className="text-[12px] text-[var(--color-dim)]">{all.length === 0 ? "no sites" : "nothing matches that filter"}</p>
        ) : (
          <div className="space-y-6">
            {sites.map((s) => (
              <section key={s.siteId} data-site={s.siteId}>
                <h2 className="mb-1.5 flex flex-wrap items-baseline gap-2">
                  <Link href={`/sites/${s.siteId}`} className="text-[14px] font-semibold text-[var(--color-text)] hover:text-[var(--color-sel)]">
                    {s.title}
                  </Link>
                  <span className="font-mono text-[11px] text-[var(--color-dim)]">{s.siteId}</span>
                  <SiteChips site={s} />
                  <span className="micro" data-counts={`${s.published}/${s.drafts}`}>
                    {s.published} published · {s.drafts} draft{s.drafts === 1 ? "" : "s"}
                  </span>
                </h2>
                <ArticleTable articles={s.shown} />
              </section>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}

function Chip({ href, on, label }: { href: string; on: boolean; label: string }) {
  return (
    <Link href={href} aria-current={on ? "true" : undefined} className={badgeVariants({ variant: on ? "on" : "neutral" })}>
      {label}
    </Link>
  );
}