import { ArrowDownToLine, Rss } from "lucide-react";
import { AddedMark, CitationCard } from "yt-dlp-transcript-common/components/citations/CitationCard";
import { CitationsProvider } from "yt-dlp-transcript-common/components/citations/CitationsContext";
import { CitedMarkdown } from "yt-dlp-transcript-common/components/citations/CitedMarkdown";
import { ReferenceList } from "yt-dlp-transcript-common/components/citations/ReferenceList";
import { VerdictChip, VerdictTally } from "yt-dlp-transcript-common/components/report/VerdictChip";
import { ReportReader } from "yt-dlp-transcript-common/components/report/slides/ReportReader";
import { REPORT_PAGE_ANCHOR_IDS } from "yt-dlp-transcript-common/lib/report/slideRules";
import { hasSlides } from "yt-dlp-transcript-common/lib/report/slides";
import type { SourceArchive } from "yt-dlp-transcript-common/lib/citations/schema";
import {
  entryDateLabel,
  foundGroups,
  orderedCitations,
  reportDateParts,
  reportRevisionLabel,
  reportViewPath,
  sourceAnchor,
  verdictTally,
  type CitationView,
  type ClaimView,
  type EntryView,
  type ReportPageView,
  type SourceCitationView,
} from "yt-dlp-transcript-common/lib/report/views";
import { ArchiveList, ReportName, SourceBlock, SubjectCard, textLink } from "./parts";

// ONE REPORT, from its view (common/lib/report/views.ts): the header (its
// series and its title, or the title alone; one line of dates and the
// revision, linked to its history; the document under review as a card on its
// colour's rail, with its archive links; the subtitle), the three tiers each
// opened by a depth marker — the quick take (a fact-check's tally, the
// summary), the timeline when the report keeps one (dated entries, newest
// first, each its own anchor), what the check found, and every claim with its evidence: each
// claim its verdict and flag, the document's own sentence (its still), the
// findings with their inline citations, and the evidence cards (what the
// report added first, marked; what the document gave itself folded away
// last) — then the numbered reference list the inline markers jump to, and
// the downloads: the report as files (HTML, PDF, Markdown, the evidence pack)
// and its citations as data.
//
// A report with a timeline on a site with a public URL publishes feeds of it
// (common/lib/report/feeds.ts): the header links them ("Subscribe"), and the
// page's metadata names them (lib/reports.ts reportMetadata).
//
// ONE ARTICLE, THREE SHAPES (release 22): the view switch (Article | Slides |
// Overview — common/components/report/slides/ReportReader) follows the
// header and sticks under the site's header while the article scrolls, so a
// switch keeps the place the reader is at; every anchor in the article lands
// below the two bars (`scroll-mt-32`: the site header's 57 px and the
// switch's 54). Every place a slide stands for has its id here: the header, the quick
// take, what the check found, each section and claim, and the end matter
// (lib/report/slideRules.ts REPORT_PAGE_ANCHOR_IDS). The article itself stays
// this static page; the other views are built in the browser from page.json.

const proseClass = "text-[0.95rem] leading-relaxed text-foreground";

const DOWNLOADS: readonly (readonly [keyof NonNullable<ReportPageView["downloads"]>, string])[] = [
  ["html", "HTML"],
  ["pdf", "PDF"],
  ["md", "Markdown"],
  ["slides", "Slides"],
  ["slides-pdf", "Slides PDF"],
  ["zip", "Evidence pack"],
  ["json", "Citations JSON"],
  ["csv", "CSV"],
];

// A claim's sentence in a quoted document: its still (or its words), on a rail
// in the document's colour (its `accent`, else the border colour) — the same
// colour as the document's box, so the sentences and the box read as one
// source. A sentence of the document under review needs no link to it: the
// rail says whose it is. Another document's sentence links to its box.
function SourceSentence({
  c,
  archives,
  isSubject,
}: {
  c: SourceCitationView;
  archives: readonly SourceArchive[] | undefined;
  isSubject: boolean;
}) {
  const hasArchives = !!archives && archives.length > 0;
  return (
    <figure
      data-source-sentence={c.id}
      className={`flex flex-col gap-1.5 border-l-4 pl-3${c.sourceAccent ? "" : " border-border"}`}
      style={c.sourceAccent ? { borderLeftColor: c.sourceAccent } : undefined}
    >
      {c.image ? (
        // eslint-disable-next-line @next/next/no-img-element -- a published file of unknown size; the export serves images unoptimized
        <img
          src={c.image}
          alt={c.quote}
          loading="lazy"
          className="w-full max-w-xl rounded-md border border-border bg-white object-contain object-left-top"
        />
      ) : (
        <blockquote className="italic text-muted-foreground">
          <q>{c.quote}</q>
        </blockquote>
      )}
      {(!isSubject || hasArchives) && (
        <figcaption className="flex flex-col gap-1 text-xs text-muted-foreground">
          {!isSubject && (
            <a href={`#${sourceAnchor(c.sourceId)}`} className={textLink}>
              from {c.sourceTitle}
            </a>
          )}
          {/* Only the document's archive links that sit in this sentence; the
              full list is with the document, once. */}
          {hasArchives && <ArchiveList archives={archives} />}
        </figcaption>
      )}
    </figure>
  );
}

// A claim's flag: a quiet pill in the accent, behind the project's mark (the
// mark added evidence wears: the two read as the report's own marks).
function FlagPill({ flag, className }: { flag: string; className?: string }) {
  return (
    <span
      data-claim-flag=""
      className={`inline-flex shrink-0 items-center gap-1.5 rounded-full border border-brand/40 bg-brand-soft px-2.5 py-0.5 text-xs font-medium text-brand${className ? ` ${className}` : ""}`}
    >
      <AddedMark className="size-3" />
      {flag}
    </span>
  );
}

// Where a tier of the page begins: a hairline with, at its left, how deep it
// goes (one, two or three dots filled in the accent). Decoration only: the
// tier's own label or heading names it.
function TierMarker({ depth }: { depth: 1 | 2 | 3 }) {
  return (
    <div data-tier-marker={depth} aria-hidden="true" className="flex items-center gap-2.5">
      <span className="flex items-center gap-1">
        {[1, 2, 3].map((i) => (
          <span
            key={i}
            data-depth-dot={i <= depth ? "filled" : "empty"}
            className={
              i <= depth
                ? "size-1.5 rounded-full bg-brand"
                : "size-1.5 rounded-full border border-muted-foreground/60"
            }
          />
        ))}
      </span>
      <span className="h-px flex-1 bg-border" />
    </div>
  );
}

// A timeline entry: its date first and largest (what a timeline is read by),
// linking to its own anchor, then its title and its body. A dot on the
// timeline's rail marks it.
function Entry({ entry }: { entry: EntryView }) {
  return (
    <li id={entry.id} data-entry={entry.id} className="relative flex scroll-mt-20 flex-col gap-1.5">
      <span
        aria-hidden="true"
        className="absolute top-[0.45rem] -left-[calc(1rem+4.5px)] size-2 rounded-full bg-brand ring-4 ring-background sm:-left-[calc(1.25rem+4.5px)]"
      />
      <p className="flex flex-wrap items-baseline gap-x-2 font-mono text-sm">
        <a href={`#${entry.id}`} data-entry-date="" className="font-semibold text-brand hover:underline">
          <time dateTime={entry.date}>{entryDateLabel(entry.date)}</time>
        </a>
        {entry.updated && (
          <span className="text-xs text-muted-foreground">
            updated <time dateTime={entry.updated}>{entryDateLabel(entry.updated)}</time>
          </span>
        )}
      </p>
      <h3 className="font-display text-lg font-semibold leading-snug text-foreground">{entry.title}</h3>
      <CitedMarkdown className={proseClass}>
        {entry.body}
      </CitedMarkdown>
    </li>
  );
}

// A claim: its verdict, flag and title; the document's own sentence (its
// still, else its verbatim words) when the claim cites one, else the claim as
// the report states it, plain; the findings; the evidence.
function Claim({
  claim,
  view,
  subjectNoun,
}: {
  claim: ClaimView;
  view: ReportPageView;
  // What the document under review is called: "article" or "source".
  subjectNoun: string;
}) {
  const cited = claim.sourceQuote ? view.citations[claim.sourceQuote] : undefined;
  const sentence = cited?.kind === "source" ? cited : undefined;
  const evidence = claim.citations
    .filter((id) => id !== claim.sourceQuote)
    .map((id) => view.citations[id])
    .filter((c): c is CitationView => !!c);
  // What the report adds comes first, marked; then evidence of unknown origin;
  // what the document under review gave itself is folded away at the end.
  const added = evidence.filter((c) => c.origin === "added");
  const unknown = evidence.filter((c) => c.origin === undefined);
  const given = evidence.filter((c) => c.origin === "subject");
  const shown = [...added, ...unknown];
  const addedLabel = `Not in the ${subjectNoun}`;
  return (
    <article
      id={claim.id}
      data-claim={claim.id}
      className="flex scroll-mt-20 flex-col gap-3 rounded-lg border border-border bg-surface p-4 sm:p-5"
    >
      <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
        {claim.verdict && <VerdictChip verdict={claim.verdict} style={view.verdicts[claim.verdict]} className="mt-0.5" />}
        {claim.flag && <FlagPill flag={claim.flag} className="mt-0.5" />}
        <h3 className="min-w-0 flex-1 basis-60 font-display text-lg font-semibold leading-snug text-foreground">
          <a href={`#${claim.id}`} className="hover:text-brand transition-colors">
            {claim.title ?? claim.text}
          </a>
        </h3>
      </div>
      {sentence ? (
        <SourceSentence c={sentence} archives={claim.archives} isSubject={sentence.sourceId === view.subject} />
      ) : (
        claim.title && (
          <p data-claim-text="" className="text-sm text-muted-foreground">
            {claim.text}
          </p>
        )
      )}
      {claim.findings && (
        <CitedMarkdown className={proseClass}>
          {claim.findings}
        </CitedMarkdown>
      )}
      {evidence.length > 0 && (
        <div className="flex flex-col gap-2">
          <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">Evidence</p>
          {shown.length > 0 && (
            <div className="grid gap-3 sm:grid-cols-2">
              {shown.map((c) => (
                <CitationCard key={c.id} citation={c} addedLabel={addedLabel} />
              ))}
            </div>
          )}
          {given.length > 0 && (
            <details data-subject-evidence="" className="group">
              <summary className="cursor-pointer select-none font-mono text-xs text-muted-foreground hover:text-foreground">
                {`In the ${subjectNoun} (${given.length})`}
              </summary>
              <div className="mt-2 grid gap-3 sm:grid-cols-2">
                {given.map((c) => (
                  <CitationCard key={c.id} citation={c} addedLabel={addedLabel} />
                ))}
              </div>
            </details>
          )}
        </div>
      )}
    </article>
  );
}

export default function ReportArticle({ view }: { view: ReportPageView }) {
  const isFactcheck = view.kind === "factcheck";
  const tally = isFactcheck ? verdictTally(view) : [];
  const references = orderedCitations(view);
  const subject = view.subject ? view.sources[view.subject] : undefined;
  const subjectNoun = subject?.kind === "article" ? "article" : "source";
  const dates = reportDateParts(view);
  const claimCount = view.sections.reduce((n, s) => n + s.claims.length, 0);
  // The report as files (its exports), then its citations as data: only what
  // compose published.
  const downloads = DOWNLOADS.flatMap(([key, label]) => {
    const href = view.downloads?.[key];
    return href ? [[key, label, href] as const] : [];
  });
  const groups = isFactcheck ? foundGroups(view) : [];
  const slides = hasSlides(view);
  const jumps = [
    ...(groups.length > 0 ? [{ href: "#found", label: "What the check found" }] : []),
    { href: "#claims", label: "Every claim" },
    ...(downloads.length > 0 ? [{ href: "#downloads", label: "Downloads" }] : []),
  ];
  // Documents quoted that are not the subject, each shown once before the
  // references.
  const otherSources = Object.values(view.sources).filter((s) => s.id !== view.subject);

  return (
    // One citation map for every inline marker on the page (CitationsContext):
    // serialized once, not once per marker.
    <CitationsProvider citations={view.citations}>
      <article
        data-report={view.id}
        className={`mx-auto flex w-full max-w-3xl flex-col gap-8${slides ? " [&_[id]]:scroll-mt-32" : ""}`}
      >
        {/* The report's name (its series on one line, its title on the next;
            without a series, the title alone), one line of dates and the
            revision, the document under review, the subtitle. */}
        <header id={REPORT_PAGE_ANCHOR_IDS.head} className="flex scroll-mt-20 flex-col gap-3">
          <h1 className="font-display text-3xl font-semibold leading-tight tracking-tight text-foreground [overflow-wrap:anywhere] sm:text-4xl">
            <ReportName series={view.series} title={view.title} />
          </h1>
          {(dates.length > 0 || view.history) && (
            <p data-report-dates="" className="font-mono text-xs text-muted-foreground">
              {dates.join(" · ")}
              {view.history && (
                <>
                  {dates.length > 0 ? " · " : null}
                  <a href={view.history.href} data-report-revision={view.history.revision}
                    className="underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
                  >
                    {reportRevisionLabel(view.history.revision, view.history.current)}
                  </a>
                </>
              )}
            </p>
          )}
          {view.feeds && (
            <p data-report-feeds="" className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground">
              <Rss className="size-3.5" aria-hidden />
              Subscribe:
              <a href={view.feeds.rss} type="application/rss+xml" data-feed="rss" className={textLink}>
                RSS
              </a>
              <span aria-hidden="true">·</span>
              <a href={view.feeds.json} type="application/feed+json" data-feed="json" className={textLink}>
                JSON
              </a>
            </p>
          )}
          {subject && <SubjectCard source={subject} />}
          {view.subtitle && <p className="text-lg text-muted-foreground">{view.subtitle}</p>}
        </header>

        {/* The view switch: sticky just under the site's header (Header.tsx,
            `sticky top-0`, 56 px and its border), within the article's box. */}
        {slides && (
          <div data-report-views="" className="sticky top-14 z-10 flex items-center bg-background/80 py-2 backdrop-blur-md">
            <ReportReader pagePath={reportViewPath(view.id)} title={view.title} series={view.series} />
          </div>
        )}

        {/* The report as a video, when it has one. */}
        {view.video && (
          <figure data-report-video="" className="flex flex-col gap-2">
            <video
              controls
              playsInline
              preload="metadata"
              poster={view.video.poster}
              src={view.video.src}
              className="aspect-video w-full rounded-lg border border-border bg-black"
            />
            {view.video.caption && (
              <figcaption className="text-sm text-muted-foreground">{view.video.caption}</figcaption>
            )}
          </figure>
        )}

        {/* The quick take: the tally and the summary, then where to go next. */}
        <section
          id={REPORT_PAGE_ANCHOR_IDS.summary}
          data-report-tier="1"
          aria-label="In brief"
          className="flex scroll-mt-20 flex-col gap-4"
        >
          <TierMarker depth={1} />
          {tally.length > 0 && (
            <div className="flex flex-col gap-2">
              <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
                {claimCount} claim{claimCount === 1 ? "" : "s"} checked
              </p>
              <VerdictTally tally={tally} styles={view.verdicts} />
            </div>
          )}
          {view.summary && (
            <CitedMarkdown className={proseClass}>
              {view.summary}
            </CitedMarkdown>
          )}
          <p data-report-jumps="" className="flex flex-wrap gap-x-2 gap-y-1 text-sm">
            {jumps.map((j, i) => (
              <span key={j.href} className="whitespace-nowrap">
                {i > 0 && <span aria-hidden="true" className="mr-2 text-muted-foreground">·</span>}
                <a href={j.href} className={textLink}>
                  {j.label}
                </a>
              </span>
            ))}
          </p>
        </section>

        {/* The timeline: dated entries, newest first, on a rail. */}
        {view.entries && view.entries.length > 0 && (
          <section data-report-timeline="" aria-labelledby="timeline-heading" className="flex flex-col gap-4">
            <h2 id="timeline-heading" className="font-display text-2xl font-semibold tracking-tight text-foreground">
              Timeline
            </h2>
            <ol className="ml-1 flex flex-col gap-7 border-l border-border pl-4 sm:pl-5">
              {view.entries.map((e) => (
                <Entry key={e.id} entry={e} />
              ))}
            </ol>
          </section>
        )}

        {/* What the check found: every ruled claim by verdict, one line each. */}
        {groups.length > 0 && (
          <section id="found" data-report-tier="2" aria-labelledby="found-heading" className="flex scroll-mt-20 flex-col gap-4">
            <TierMarker depth={2} />
            <h2 id="found-heading" className="font-display text-2xl font-semibold tracking-tight text-foreground">
              What the check found
            </h2>
            {groups.map((g) => (
              <div key={g.verdict} data-found-group={g.verdict} className="flex flex-col gap-2">
                <h3>
                  <VerdictChip verdict={g.verdict} style={view.verdicts[g.verdict]} count={g.claims.length} />
                </h3>
                <ul className="flex flex-col gap-1.5 pl-1 text-sm">
                  {g.claims.map((c) => (
                    <li key={c.id} data-found-row={c.id} className="leading-snug">
                      <a href={`#${c.id}`} className="font-medium text-foreground hover:text-brand transition-colors">
                        {c.title ?? c.text}
                      </a>
                      {c.gist && <span className="text-muted-foreground"> — {c.gist}</span>}
                      {c.flag && (
                        <>
                          {" "}
                          <FlagPill flag={c.flag} className="ml-1 align-middle" />
                        </>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </section>
        )}

        {/* Every claim, with its evidence. */}
        <div id="claims" data-report-tier="3" className="flex scroll-mt-20 flex-col gap-8">
          <div className="flex flex-col gap-4">
            <TierMarker depth={3} />
            <h2 className="font-display text-2xl font-semibold tracking-tight text-foreground">
              Every claim, with its evidence
            </h2>
            {view.method && (
              <div data-report-method="" className="flex flex-col gap-1">
                <h3 className="font-mono text-xs uppercase tracking-[0.16em] text-muted-foreground">How it was checked</h3>
                <CitedMarkdown className={proseClass}>
                  {view.method}
                </CitedMarkdown>
              </div>
            )}
          </div>

          {view.sections.length > 1 && (
            <nav aria-label="Sections" className="rounded-lg border border-border p-4 text-sm">
              <ol className="flex list-decimal flex-col gap-1 pl-5 marker:text-muted-foreground">
                {view.sections.map((s) => (
                  <li key={s.id}>
                    <a href={`#${s.id}`} className={textLink}>
                      {s.title}
                    </a>
                    {s.claims.length > 0 && (
                      <span className="ml-2 font-mono text-xs text-muted-foreground">
                        {s.claims.length} claim{s.claims.length === 1 ? "" : "s"}
                      </span>
                    )}
                  </li>
                ))}
              </ol>
            </nav>
          )}

          {view.sections.map((s) => (
            <section key={s.id} id={s.id} data-section={s.id} className="flex scroll-mt-20 flex-col gap-4">
              <h2 className="font-display text-2xl font-semibold tracking-tight text-foreground">{s.title}</h2>
              {s.body && (
                <CitedMarkdown className={proseClass}>
                  {s.body}
                </CitedMarkdown>
              )}
              {s.claims.map((c) => (
                <Claim key={c.id} claim={c} view={view} subjectNoun={subjectNoun} />
              ))}
            </section>
          ))}
        </div>

        {/* The end matter: the documents quoted, the references, the
            downloads — the sources slide's place. */}
        <div id={REPORT_PAGE_ANCHOR_IDS.end} className="flex scroll-mt-20 flex-col gap-8 empty:hidden">
          {otherSources.length > 0 && (
            <section aria-labelledby="sources-heading" className="flex flex-col gap-3 border-t border-border pt-6">
              <h2 id="sources-heading" className="font-display text-2xl font-semibold tracking-tight text-foreground">
                Sources
              </h2>
              {otherSources.map((s) => (
                <SourceBlock key={s.id} source={s} label="Quoted" />
              ))}
            </section>
          )}

          {references.length > 0 && (
            <section id="references" aria-labelledby="references-heading" className="flex scroll-mt-20 flex-col gap-2 border-t border-border pt-6">
              <h2 id="references-heading" className="font-display text-2xl font-semibold tracking-tight text-foreground">
                References
              </h2>
              <ReferenceList citations={references} addedLabel={`Not in the ${subjectNoun}`} />
            </section>
          )}

          {downloads.length > 0 && (
            <p
              id="downloads"
              data-citation-downloads=""
              className="flex scroll-mt-20 flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground"
            >
              <ArrowDownToLine className="size-4" aria-hidden />
              Download:
              {downloads.map(([key, label, href]) => (
                <a key={key} href={href} download data-download={key} className={textLink}>
                  {label}
                </a>
              ))}
            </p>
          )}
        </div>
      </article>
    </CitationsProvider>
  );
}