import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { isCitedSite } from "yt-dlp-transcript-common/lib/site";
import { readReportMediaIndex } from "yt-dlp-transcript-common/publish/reportMedia";
import { PrepareReportMediaButton } from "../../components/PrepareReportMediaButton";
import { FetchMissingEvidenceButton } from "../../components/FetchMissingEvidenceButton";
import { ExportReportsButton } from "../../components/ExportReportsButton";
import {
  REPORT_EXPORT_FILENAMES,
  REPORT_EXPORT_FORMATS,
} from "yt-dlp-transcript-common/lib/report/views";
import { ReportRowActions } from "../../components/ReportRowActions";
import {
  publishRefusal,
  reportMediaSummary,
  type ReportMediaSummary,
  type ReportRow,
} from "../../lib/reportList";
import {
  latestSiteReportsJob,
  readSiteReportExports,
  readSiteReportRows,
  type ReportExportsRow,
} from "../../lib/reportListServer";
import { getSiteCached } from "../lib/siteCache";

export const dynamic = "force-dynamic";
// → "Reports — <id> — Sites" through the layout's title template.
export const metadata: Metadata = { title: "Reports" };

// A SITE'S REPORTS: every report directory under `sites/<siteId>/reports/`,
// whether the site publishes it (site.json `reports`, in order) or it is a
// draft, and what is wrong with it — the report's own checker, so this lists
// what prepare and the build would refuse. Publish, unpublish and reorder write
// that one key (lib/reportsActions.ts). The evidence media the published
// reports cite is prepared here too, before a build, and the reports exported
// as files (HTML, PDF, Markdown, an evidence pack) for the build to publish;
// each export of a changed report.json commits a revision to the report's own
// history, and each report shows its revision and the last change.
//
// The documents themselves are written elsewhere (a converter, or by hand);
// this tab never edits a report.json.
export default async function SiteReportsPage({
  params,
}: {
  params: Promise<{ siteId: string }>;
}) {
  const { siteId } = await params;
  const site = getSiteCached(siteId);
  if (!site) notFound();
  const paths = getPaths();
  const [rows, mediaIndex, lastJob, exportRows, lastExportJob] = await Promise.all([
    readSiteReportRows(paths, site),
    readReportMediaIndex(paths, siteId),
    latestSiteReportsJob(paths, siteId, "reports-prepare"),
    readSiteReportExports(paths, site),
    latestSiteReportsJob(paths, siteId, "reports-export"),
  ]);
  const publishedCount = rows.filter((r) => r.position !== null).length;
  const cited = isCitedSite(site);

  return (
    <div className="flex flex-col gap-8 max-w-4xl">
      <section className="flex flex-col gap-2" aria-label="Publish scope">
        <p className="text-sm text-muted-foreground">
          A report is a <code>report.json</code> in its own directory under this
          site&apos;s <code>reports/</code>. The site publishes the reports listed
          here as published, in this order; any other report directory is a
          draft. Only a report with no problems can be published.
        </p>
        <p className="text-sm">
          <span className="font-medium">Publishes:</span>{" "}
          {cited
            ? "Reports only — search is off"
            : "Full archive — search is on"}{" "}
          <span className="text-muted-foreground">
            (changed on{" "}
            <Link href={`/sites/${siteId}`} className="underline">
              Settings
            </Link>
            )
          </span>
        </p>
        {cited && publishedCount === 0 && (
          <p role="status" className="text-sm text-warning">
            Search is off and no report is published: the site is an empty
            report index.
          </p>
        )}
      </section>

      <section className="flex flex-col gap-3" aria-label="Reports">
        <h2 className="text-lg font-semibold">
          Reports{" "}
          <span className="text-sm font-normal text-muted-foreground">
            {publishedCount} published, {rows.length - publishedCount} draft
            {rows.length - publishedCount === 1 ? "" : "s"}
          </span>
        </h2>
        {rows.length === 0 ? (
          <p className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
            No reports yet. Put a report at{" "}
            <code>sites/{siteId}/reports/&lt;reportId&gt;/report.json</code>.
          </p>
        ) : (
          <ul className="flex flex-col gap-3">
            {rows.map((row) => (
              <ReportListItem
                key={row.id}
                siteId={siteId}
                row={row}
                publishedCount={publishedCount}
              />
            ))}
          </ul>
        )}
      </section>

      <section
        className="flex flex-col gap-3 border-t border-border pt-6"
        aria-label="Evidence media"
      >
        <div>
          <h2 className="text-lg font-semibold">Evidence media</h2>
          <p className="text-sm text-muted-foreground">
            Fetch missing evidence downloads the window of every cited span
            whose media is not on disk, one paced job per platform; Preview
            lists them, and the spans no window can fill (a deleted video, a
            channel off this site), without fetching. Prepare then cuts a clip
            of every cited span and copies every cited post capture, from the
            media on disk, ready for the site&apos;s next build — it downloads
            nothing, and lists a citation whose media is still missing as a
            problem.
          </p>
        </div>
        <FetchMissingEvidenceButton siteId={siteId} />
        <PrepareReportMediaButton siteId={siteId} />
        <p className="text-sm text-muted-foreground">
          Last prepare job:{" "}
          {lastJob ? (
            <Link href={`/jobs/${lastJob.id}`} className="underline font-mono">
              {lastJob.id}
            </Link>
          ) : (
            "none among recent jobs"
          )}
          {lastJob && <> ({lastJob.status})</>}
        </p>
        {mediaIndex ? (
          <MediaSummary summary={reportMediaSummary(mediaIndex)} />
        ) : (
          <p className="text-sm text-muted-foreground">
            Not prepared yet.
          </p>
        )}
      </section>

      <section
        className="flex flex-col gap-3 border-t border-border pt-6"
        aria-label="Exports"
      >
        <div>
          <h2 className="text-lg font-semibold">Exports</h2>
          <p className="text-sm text-muted-foreground">
            Writes each published report as files a reader can save and host
            again — one self-contained HTML page, a PDF of it, Markdown, and an
            evidence pack (the page with its clips, stills and screenshots) —
            for the site&apos;s next build to publish beside the report.
            Preparing the evidence media exports too. A file over 24 MiB stays
            on this machine. Exporting a changed report also commits a new
            revision to the report&apos;s history, which the site publishes.
          </p>
        </div>
        <ExportReportsButton siteId={siteId} />
        <p className="text-sm text-muted-foreground">
          Last export job:{" "}
          {lastExportJob ? (
            <Link href={`/jobs/${lastExportJob.id}`} className="underline font-mono">
              {lastExportJob.id}
            </Link>
          ) : (
            "none among recent jobs"
          )}
          {lastExportJob && <> ({lastExportJob.status})</>}
        </p>
        {exportRows.length === 0 ? (
          <p className="text-sm text-muted-foreground">No published report to export.</p>
        ) : (
          <ul className="flex flex-col gap-2" aria-label="Report exports">
            {exportRows.map((row) => (
              <ExportSummary key={row.reportId} row={row} />
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

const STATUS_TEXT: Record<ReportRow["status"], string> = {
  ok: "No problems",
  problems: "Has problems",
  invalid: "Not a valid report",
  missing: "Missing",
};

function ReportListItem({
  siteId,
  row,
  publishedCount,
}: {
  siteId: string;
  row: ReportRow;
  publishedCount: number;
}) {
  const dates = [
    row.publishedDate ? `published ${row.publishedDate}` : null,
    row.updatedDate ? `updated ${row.updatedDate}` : null,
  ].filter(Boolean);
  return (
    <li
      data-testid="report-row"
      data-report={row.id}
      className="flex flex-col gap-2 rounded-lg border bg-card/60 px-3 py-3"
    >
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div className="flex flex-col gap-0.5">
          <span className="font-medium">
            {row.position !== null && (
              <span className="text-muted-foreground">{row.position + 1}. </span>
            )}
            {row.title ?? row.id}
          </span>
          {row.subtitle && (
            <span className="text-sm text-muted-foreground">{row.subtitle}</span>
          )}
          <span className="text-xs text-muted-foreground">
            <code>{row.id}</code>
            {row.kind && <> · {row.kind === "factcheck" ? "fact-check" : "sweep"}</>}
            {dates.length > 0 && <> · {dates.join(", ")}</>}
          </span>
        </div>
        <div className="flex flex-col items-end gap-1">
          <span
            className={`text-xs ${row.position !== null ? "text-success" : "text-muted-foreground"}`}
          >
            {row.position !== null ? "Published" : "Draft"}
          </span>
          <ReportRowActions
            siteId={siteId}
            reportId={row.id}
            position={row.position}
            publishedCount={publishedCount}
            publishable={publishRefusal(row)}
          />
        </div>
      </div>

      {(row.status === "ok" || row.status === "problems") && (
        <p className="text-sm">
          {row.sections} section{row.sections === 1 ? "" : "s"} · {row.claims} claim
          {row.claims === 1 ? "" : "s"} · {row.citations} citation
          {row.citations === 1 ? "" : "s"}
          {row.citationsByKind.length > 0 && (
            <span className="text-muted-foreground">
              {" "}
              ({row.citationsByKind.map((k) => `${k.count} ${k.kind}`).join(", ")})
            </span>
          )}
        </p>
      )}

      {row.tally && row.verdicts && row.tally.length > 0 && (
        <ul aria-label={`Verdicts of ${row.id}`} className="flex flex-wrap gap-2">
          {row.tally.map((t) => (
            <li
              key={t.verdict}
              className="flex items-center gap-1.5 rounded border border-border px-2 py-0.5 text-xs"
            >
              <span
                aria-hidden
                className="inline-block h-2 w-2 rounded-full"
                style={{ backgroundColor: row.verdicts![t.verdict].color }}
              />
              {row.verdicts![t.verdict].label} {t.count}
            </li>
          ))}
        </ul>
      )}

      {row.problems.length === 0 ? (
        <span className="text-xs text-muted-foreground">{STATUS_TEXT[row.status]}</span>
      ) : (
        <details>
          <summary className="cursor-pointer select-none text-xs text-warning">
            {STATUS_TEXT[row.status]} — {row.problems.length} problem
            {row.problems.length === 1 ? "" : "s"}
          </summary>
          <ul className="mt-2 flex flex-col gap-1 text-xs">
            {row.problems.map((p, i) => (
              <li key={i}>
                {p.path && <code className="text-muted-foreground">{p.path}</code>}
                {p.path && ": "}
                {p.message}
              </li>
            ))}
          </ul>
        </details>
      )}
    </li>
  );
}

function MediaSummary({ summary }: { summary: ReportMediaSummary }) {
  return (
    <div className="flex flex-col gap-2 rounded-md border border-border bg-card px-4 py-3 text-sm">
      <p>
        Prepared {new Date(summary.preparedAt).toLocaleString()}: {summary.moments} moment
        {summary.moments === 1 ? "" : "s"}
        {summary.momentsByKind.length > 0 && (
          <> ({summary.momentsByKind.map((k) => `${k.count} ${k.kind}`).join(", ")})</>
        )}
        , {formatBytes(summary.totalBytes)}.
      </p>
      {summary.problems.length === 0 ? (
        <p className="text-success">No problems.</p>
      ) : (
        <details>
          <summary className="cursor-pointer select-none text-warning">
            {summary.problems.length} problem{summary.problems.length === 1 ? "" : "s"}:{" "}
            {summary.problemsByKind.map((k) => `${k.count} ${k.kind}`).join(", ")}
          </summary>
          <ul className="mt-2 flex flex-col gap-1 text-xs">
            {summary.problems.map((p, i) => (
              <li key={i}>
                <code className="text-muted-foreground">{p.kind}</code>{" "}
                {p.moment ? (
                  <code>{p.moment}</code>
                ) : (
                  <>
                    <code>{p.report ?? "?"}</code>
                    {p.path && <code className="text-muted-foreground"> {p.path}</code>}
                  </>
                )}
                {p.citations && p.citations.length > 0 && (
                  <span className="text-muted-foreground"> (cited by {p.citations.join(", ")})</span>
                )}
                : {p.message}
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}

function ExportSummary({ row }: { row: ReportExportsRow }) {
  const { manifest, publishable } = row;
  return (
    <li
      data-testid="report-export"
      data-report={row.reportId}
      className="flex flex-col gap-1 rounded-md border border-border bg-card px-4 py-3 text-sm"
    >
      <p>
        <code>{row.reportId}</code>{" "}
        {manifest ? (
          <span className="text-muted-foreground">
            exported {new Date(manifest.exportedAt).toLocaleString()}
          </span>
        ) : (
          <span className="text-muted-foreground">not exported yet</span>
        )}
      </p>
      {manifest?.revision && (
        <p data-testid="report-revision" className="text-xs">
          Revision {manifest.revision.revision} · {manifest.revision.date.slice(0, 10)} ·{" "}
          <code title={manifest.revision.commit}>{manifest.revision.commit.slice(0, 12)}</code>
          {manifest.revision.summary.length > 0 && (
            <span className="text-muted-foreground">
              {" "}
              — {manifest.revision.summary.join("; ")}
            </span>
          )}
        </p>
      )}
      {manifest && (
        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs">
          {REPORT_EXPORT_FORMATS.filter((f) => manifest.files[f]).map((f) => (
            <li key={f}>
              <code>{REPORT_EXPORT_FILENAMES[f]}</code>{" "}
              {formatBytes(manifest.files[f]!.bytes)}{" "}
              {publishable.files[f] ? (
                <span className="text-success">published on build</span>
              ) : (
                <span className="text-warning">local only</span>
              )}
            </li>
          ))}
        </ul>
      )}
      {[...(manifest?.notes ?? []), ...publishable.notes].map((note, i) => (
        <p key={i} className="text-xs text-muted-foreground">
          {note}
        </p>
      ))}
    </li>
  );
}