import path from "node:path";
import Link from "next/link";
import { notFound } from "next/navigation";
import { readRevisionHead, REPORT_HISTORY_GIT_DIRNAME } from "yt-dlp-transcript-common/publish/reportHistory";
import { siteReportDir } from "yt-dlp-transcript-common/publish/reportMedia";
import { hasSlides, slideLint } from "yt-dlp-transcript-common/lib/report/slides";
import BrowseHeader from "@/components/BrowseHeader";
import ArticleReader from "@/components/articles/ArticleReader";
import WorkspacePanel from "@/components/articles/WorkspacePanel";
import { badgeVariants } from "@/components/ui/badge";
import { articleView } from "@/lib/articles/article";
import { articleWorkspaceListing, openWorkspaceFile } from "@/lib/articles/files";
import { linkedProjects } from "@/lib/articles/links.mjs";
import { readArticleNotes, readReportFile, siteById, sitesPaths } from "@/lib/articles/sites";
import { sourceFor } from "@/lib/articles/sources.mjs";
import { corpusNotesFile } from "@/lib/paths";
import type { NotesRead } from "@/lib/annotations/types";

export const dynamic = "force-dynamic";

// One article: the reader with its notes (default), or `?tab=source` -- the
// workspace files it was written from, its draft marked, and what would make
// its slides read badly (lib/report/slides.ts slideLint, and the validator's
// slide problems).
//
//   ?rv=slides|iso              the article as slides, or the overview (the
//                               reader's own switch; the place is the hash)
//   ?status=open|resolved|all   the notes filter it opens with
//   ?note=<id>                  the note it opens on (the decisions inbox links here)
//   ?ws=&rel=                   a workspace file open on the source tab

type Search = { tab?: string; status?: string; note?: string; ws?: string; rel?: string };

export default async function ArticlePage({
  params,
  searchParams,
}: {
  params: Promise<{ site: string; report: string }>;
  searchParams: Promise<Search>;
}) {
  const { site: siteId, report: reportId } = await params;
  const sp = await searchParams;
  const site = siteById(siteId);
  if (!site) notFound();
  const read = await readReportFile(site.siteId, reportId);
  if (!read.report && read.problems[0]?.message === "no report.json") notFound();

  const [notes, source] = await Promise.all([readArticleNotes(site.siteId, reportId), sourceFor(site.siteId, reportId)]);
  const links = await linkedProjects(site.siteId, reportId, { workspace: source?.workspace ?? null });
  const gitDir = path.join(/* turbopackIgnore: true */ siteReportDir(sitesPaths(), site.siteId, reportId), REPORT_HISTORY_GIT_DIRNAME);
  const head = await readRevisionHead(gitDir).catch(() => null);
  const published = (site.reports ?? []).includes(reportId);
  const r = read.report;
  const tab = sp.tab === "source" ? "source" : "article";
  const base = `/sites/${site.siteId}/${reportId}`;
  const media = (file: string) =>
    `/api/sites/media?site=${encodeURIComponent(site.siteId)}&report=${encodeURIComponent(reportId)}&file=${encodeURIComponent(file)}`;

  const meta = (
    <div data-article-meta className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-[var(--color-dim)]">
      <Link href={`/sites/${site.siteId}`} className="hover:text-[var(--color-text)]">
        {site.siteTitle || site.siteId}
      </Link>
      <span data-status={published ? "published" : "draft"} className={badgeVariants({ variant: published ? "on" : "neutral", size: "sm" })}>
        {published ? "published" : "draft"}
      </span>
      {r?.published && <span>published {r.published}</span>}
      {r?.updated && <span>updated {r.updated}</span>}
      {head && <span data-revisions={head.revision}>{head.revision} revision{head.revision === 1 ? "" : "s"}</span>}
      {links.linked.map((p: { id: string }) => (
        <Link key={p.id} href={`/browse/${p.id}`} data-project-link={p.id} className="font-mono text-[var(--color-sel)] hover:underline">
          {p.id}
        </Link>
      ))}
      {links.possible.map((p: { id: string }) => (
        <Link key={p.id} href={`/browse/${p.id}`} className="font-mono hover:underline" title="shares the slug; not linked">
          {p.id} (possible)
        </Link>
      ))}
      <nav className="ml-auto flex gap-2" aria-label="article views">
        <Link href={base} aria-current={tab === "article" ? "page" : undefined} className={tab === "article" ? "text-[var(--color-sel)]" : "hover:text-[var(--color-text)]"}>
          article
        </Link>
        <Link href={`${base}?tab=source`} aria-current={tab === "source" ? "page" : undefined} className={tab === "source" ? "text-[var(--color-sel)]" : "hover:text-[var(--color-text)]"}>
          source
        </Link>
        <Link href={`${base}/evidence`} className="hover:text-[var(--color-text)]">
          evidence
        </Link>
      </nav>
      {source && (
        <div className="w-full font-mono text-[11px]" title={source.how}>
          {source.draft && <span>draft {source.draft}</span>}
          {source.generator && <span className="ml-3">generator {source.generator}</span>}
        </div>
      )}
    </div>
  );

  const header = (
    <BrowseHeader
      active="articles"
      crumbs={[{ href: "/sites", label: "articles" }, { href: `/sites/${site.siteId}`, label: site.siteId }, { label: reportId }]}
      note={`${notes.doc?.notes.filter((n) => n.status === "open").length ?? 0} open notes`}
    />
  );

  if (!r) {
    return (
      <div className="flex h-full flex-col">
        {header}
        <main className="deck-main flex-1 p-4">
          <div className="mx-auto max-w-[72ch] space-y-3">
            {meta}
            <p className="text-[13px] text-[var(--color-bad)]">report.json does not read as a report:</p>
            <ul className="list-disc pl-5 text-[12px] text-[var(--color-dim)]">
              {read.problems.slice(0, 20).map((p, i) => (
                <li key={i}>{p.message}</li>
              ))}
            </ul>
          </div>
        </main>
      </div>
    );
  }

  if (tab === "source") {
    const ws = await articleWorkspaceListing(source?.workspace);
    const opened =
      sp.ws && sp.rel
        ? await openWorkspaceFile(sp.ws, sp.rel)
        : ws && source?.draft
          ? await openWorkspaceFile(ws.name, path.relative(ws.dir, source.draft))
          : null;
    const draftRel = ws && source?.draft ? `${ws.name}/${path.relative(ws.dir, source.draft)}` : null;
    const { view: slideView } = await articleView(r);
    const lint = hasSlides(slideView) ? slideLint(slideView) : [];
    const slideProblems = read.problems.filter((p) => /(^|\.)slides?(\.|\[|$)/.test(p.path ?? ""));
    return (
      <div className="flex h-full flex-col">
        {header}
        <main className="deck-main flex-1 p-4">
          <div className="space-y-4">
            {meta}
            {hasSlides(slideView) && (
              <section data-slide-lint={lint.length + slideProblems.length} className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2 text-[12px]">
                <div className="micro">slides</div>
                {lint.length + slideProblems.length === 0 ? (
                  <p className="mt-1 text-[var(--color-dim)]">nothing to fix</p>
                ) : (
                  <ul className="mt-1 space-y-1">
                    {slideProblems.map((p, i) => (
                      <li key={`p${i}`} data-lint="problem" className="text-[var(--color-bad)]">
                        <code className="font-mono text-[11px]">{p.path}</code> {p.message}
                      </li>
                    ))}
                    {lint.map((l, i) => (
                      <li key={`l${i}`} data-lint={l.key}>
                        <Link href={`${base}?rv=slides#${l.anchorId}`} className="font-mono text-[11px] text-[var(--color-sel)] hover:underline">
                          {l.key}
                        </Link>{" "}
                        <span className="text-[var(--color-text)]">{l.message}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </section>
            )}
            <WorkspacePanel
              workspaces={ws ? [ws] : []}
              opened={opened}
              highlight={draftRel}
              hrefFor={(w, rel) => `${base}?${new URLSearchParams({ tab: "source", ws: w, rel })}`}
            />
          </div>
        </main>
      </div>
    );
  }

  const { view, error } = await articleView(r);
  const initialNotes: NotesRead = {
    subject: { kind: "article", site: site.siteId, report: reportId },
    file: corpusNotesFile(site.siteId, reportId) ?? "",
    token: notes.token,
    doc: notes.doc,
    source: notes.doc?.source ?? source ?? null,
    ...(notes.error ? { error: notes.error } : {}),
  };
  const status = sp.status === "resolved" || sp.status === "all" ? sp.status : "open";
  const video = r.video
    ? { file: r.video.src, src: media(r.video.src), poster: r.video.poster ? media(r.video.poster) : undefined, caption: r.video.caption }
    : null;

  return (
    <div className="flex h-full flex-col">
      {header}
      <ArticleReader
        site={site.siteId}
        report={reportId}
        view={view}
        viewError={error}
        initialNotes={initialNotes}
        initialFilter={status}
        initialNote={sp.note ?? null}
        meta={meta}
        video={video}
        videoProjects={links.linked.map((p: { id: string; title: string; generatedBy: string | null }) => ({ id: p.id, title: p.title, generatedBy: p.generatedBy }))}
      />
    </div>
  );
}