import Link from "next/link";
import { notFound } from "next/navigation";
import BrowseHeader from "@/components/BrowseHeader";
import ArticleTable, { articleHref } from "@/components/articles/ArticleTable";
import SiteChips from "@/components/articles/SiteChips";
import WorkspacePanel from "@/components/articles/WorkspacePanel";
import { badgeVariants } from "@/components/ui/badge";
import { readSiteRow, siteById } from "@/lib/articles/sites";
import { openWorkspaceFile, siteWorkspaceListings, takeTally } from "@/lib/articles/files";
import { videoProjects } from "@/lib/articles/links.mjs";

export const dynamic = "force-dynamic";

// One site: its articles, the videos they play, the umtool projects those
// videos were cut in (with their takes), and the workspace files the articles
// were written from. `?ws=&rel=` opens a workspace file below.

export default async function SitePage({
  params,
  searchParams,
}: {
  params: Promise<{ site: string }>;
  searchParams: Promise<{ ws?: string; rel?: string }>;
}) {
  const { site: siteId } = await params;
  const sp = await searchParams;
  const site = siteById(siteId);
  if (!site) notFound();
  const row = await readSiteRow(site);

  const projects = await videoProjects();
  const linkedIds = [...new Set(row.articles.flatMap((a) => a.projects.linked.map((p) => p.id)))];
  const linked = await Promise.all(
    linkedIds.map(async (id) => {
      const p = projects.find((x: { id: string }) => x.id === id) as { id: string; dir: string };
      return { id: p.id, tally: await takeTally(p.dir), articles: row.articles.filter((a) => a.projects.linked.some((l) => l.id === id)) };
    }),
  );
  const videos = row.articles.filter((a) => a.hasVideo);
  const workspaces = await siteWorkspaceListings(site.siteId, row.articles.map((a) => a.id));
  const opened = sp.ws && sp.rel ? await openWorkspaceFile(sp.ws, sp.rel) : null;
  const hrefFor = (ws: string, rel: string) =>
    `/sites/${site.siteId}?${new URLSearchParams({ ws, rel }).toString()}#files`;
  const media = (id: string, file: string) =>
    `/api/sites/media?site=${encodeURIComponent(site.siteId)}&report=${encodeURIComponent(id)}&file=${file}`;

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        active="articles"
        crumbs={[{ href: "/sites", label: "articles" }, { label: row.title }]}
        note={`${row.published} published · ${row.drafts} drafts · ${row.openNotes} open notes`}
      />
      <main className="deck-main flex-1 space-y-6 p-4">
        <div className="flex flex-wrap items-baseline gap-2">
          <h1 className="text-[16px] font-semibold text-[var(--color-text)]">{row.title}</h1>
          <span className="font-mono text-[11px] text-[var(--color-dim)]">{row.siteId}</span>
          <SiteChips site={row} />
        </div>

        <section data-section="articles">
          <h2 className="micro mb-1.5">articles</h2>
          <ArticleTable articles={row.articles} />
        </section>

        <section data-section="videos">
          <h2 className="micro mb-1.5">report videos {videos.length}</h2>
          {videos.length === 0 ? (
            <p className="text-[12px] text-[var(--color-dim)]">none</p>
          ) : (
            <div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3">
              {videos.map((a) => (
                <figure key={a.id} data-report-video={a.id} className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-2">
                  <video
                    controls
                    preload="none"
                    src={media(a.id, "video.mp4")}
                    poster={a.hasPoster ? media(a.id, "poster.jpg") : undefined}
                    className="aspect-video w-full rounded bg-black"
                  />
                  <figcaption className="mt-1 text-[12px]">
                    <Link href={articleHref(a)} className="text-[var(--color-text)] hover:text-[var(--color-sel)]">
                      {a.title}
                    </Link>
                  </figcaption>
                </figure>
              ))}
            </div>
          )}
        </section>

        <section data-section="projects">
          <h2 className="micro mb-1.5">video projects {linked.length}</h2>
          {linked.length === 0 ? (
            <p className="text-[12px] text-[var(--color-dim)]">none linked</p>
          ) : (
            <ul className="space-y-1">
              {linked.map((p) => (
                <li key={p.id} data-video-project={p.id} className="flex flex-wrap items-baseline gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-1.5 text-[12px]">
                  <Link href={`/browse/${p.id}`} className="font-mono text-[var(--color-sel)] hover:underline">
                    {p.id}
                  </Link>
                  <span className="text-[var(--color-dim)]">{p.articles.map((a) => a.title).join(", ")}</span>
                  <Link href={`/browse/${p.id}/takes`} className="ml-auto text-[var(--color-dim)] hover:text-[var(--color-text)]" data-takes={p.tally.takes}>
                    {p.tally.takes} takes
                  </Link>
                  <span className={badgeVariants({ variant: "neutral", size: "sm" })}>like {p.tally.like}</span>
                  <span className={badgeVariants({ variant: "neutral", size: "sm" })}>maybe {p.tally.maybe}</span>
                  <span className={badgeVariants({ variant: "neutral", size: "sm" })}>no {p.tally.no}</span>
                </li>
              ))}
            </ul>
          )}
        </section>

        <section data-section="files" id="files">
          <h2 className="micro mb-1.5">workspace files</h2>
          <WorkspacePanel workspaces={workspaces} opened={opened} hrefFor={hrefFor} />
        </section>
      </main>
    </div>
  );
}