import type { CSSProperties, ReactNode } from "react";
import { citationHeading } from "../../citations/CitationCard";
import { VerdictChip, VerdictTally } from "../VerdictChip";
import { reportFullTitle, CITATION_KIND_LABELS, type CitationView, type ReportPageView } from "../../../lib/report/views";
import { VERDICT_DEFAULTS, type Verdict, type VerdictStyle } from "../../../lib/report/verdicts";
import type {
  ClaimSlide,
  EntrySlide,
  FoundSlide,
  SectionSlide,
  SlideView,
  SourcesSlide,
  SummarySlide,
  TitleSlide,
} from "../../../lib/report/slides";
import { useSlidesHost } from "./SlidesHost";

// ONE SLIDE (lib/report/slides.ts SlideView), as the reader sees it in the
// Slides view, a card in the Overview, and a page of slides.html/slides.pdf.
// Presentational: no state, no effects — rendered on a server (slides.html)
// or in the browser alike. Styles: common/styles/slides.css (`.rs-*`).
//
// Every slide is three rows: where it is (its kind and place, its number),
// what it says (by layout), and the way back — "Read this in the article",
// to its anchor. Its left edge is its MARK: a claim's verdict colour, else
// the accent.

export type SlideFit = "canvas" | "reflow";

export function verdictStyleOf(view: Pick<ReportPageView, "verdicts">, v: Verdict): VerdictStyle {
  return view.verdicts?.[v] ?? VERDICT_DEFAULTS[v];
}

function markOf(slide: SlideView, view: ReportPageView): string | undefined {
  return slide.kind === "claim" && slide.verdict ? verdictStyleOf(view, slide.verdict).color : undefined;
}

function Eyebrow({ slide, total }: { slide: SlideView; total: number }) {
  let kind: string;
  let place: string | undefined;
  switch (slide.kind) {
    case "title":
      kind = "Article";
      break;
    case "summary":
      kind = "In brief";
      break;
    case "entry":
      kind = "Timeline";
      place = `${slide.index} of ${slide.count}`;
      break;
    case "found":
      kind = "Findings";
      place = `${slide.claimCount} claim${slide.claimCount === 1 ? "" : "s"} ruled`;
      break;
    case "section":
      kind = `Section ${slide.index} of ${slide.count}`;
      break;
    case "claim":
      kind = "Claim";
      place = slide.section.title;
      break;
    case "sources":
      kind = "Sources";
      break;
  }
  return (
    <p className="rs-eyebrow">
      <span className="rs-eyebrow-place">
        <b>{kind}</b>
        {place ? ` · ${place}` : null}
      </span>
      <span className="rs-eyebrow-n" aria-hidden="true">
        {String(slide.n).padStart(2, "0")} / {String(total).padStart(2, "0")}
      </span>
    </p>
  );
}

function Points({ points }: { points: readonly string[] }) {
  const host = useSlidesHost();
  return (
    <ul className="rs-points">
      {points.map((p, i) => (
        <li key={i}>{host.md(p)}</li>
      ))}
    </ul>
  );
}

// The picture a citation brings: a clip's poster, a post's capture, a
// document's still of the sentence.
function pictureOf(c: CitationView): { src: string; alt: string } | undefined {
  if ((c.kind === "video" || c.kind === "audio") && c.poster) return { src: c.poster, alt: "" };
  if (c.kind === "post" && c.shot) return { src: c.shot, alt: `Screenshot of the post${c.author ? ` by ${c.author}` : ""}` };
  if (c.kind === "source" && c.image) return { src: c.image, alt: `The sentence as ${c.sourceTitle} shows it: ${c.quote}` };
  return undefined;
}

// The evidence a slide shows: the picture (when there is one), the quote on
// a rail, what it is and its marker.
export function SlideEvidence({ c, quote = true }: { c: CitationView; quote?: boolean }) {
  const host = useSlidesHost();
  const pic = pictureOf(c);
  const { title, meta } = citationHeading(c);
  const rail = c.kind === "source" && c.sourceAccent ? ({ "--rs-ev-rail": c.sourceAccent } as CSSProperties) : undefined;
  return (
    <figure className="rs-ev" data-slide-evidence={c.id}>
      {pic && (
        // eslint-disable-next-line @next/next/no-img-element -- a published still of unknown size
        <img className="rs-ev-pic" data-kind={c.kind} src={pic.src} alt={pic.alt} loading="lazy" />
      )}
      {quote && !(c.kind === "source" && pic) && (
        <blockquote className="rs-ev-quote" style={rail}>
          {c.quote}
        </blockquote>
      )}
      <figcaption className="rs-ev-cap">
        <span className="rs-ev-kind">
          {CITATION_KIND_LABELS[c.kind]}
          {meta.length > 0 ? ` · ${meta.join(" · ")}` : ""}
        </span>
        <span className="rs-ev-title">{host.cite(c.id, title)}</span>
      </figcaption>
    </figure>
  );
}

function TitleBody({ slide }: { slide: TitleSlide }) {
  return (
    <>
      {slide.series && <p className="rs-title-series">{slide.series}</p>}
      <h2 className="rs-h rs-title-h">{slide.title}</h2>
      {slide.line && <p className="rs-sub">{slide.line}</p>}
      {slide.dates.length > 0 && <p className="rs-dates">{slide.dates.join(" · ")}</p>}
      {slide.subject && (
        <div
          className="rs-subject"
          style={slide.subject.accent ? ({ "--rs-subject": slide.subject.accent } as CSSProperties) : undefined}
        >
          <b>{slide.subject.title}</b>
          {slide.subject.meta.length > 0 && <span>{slide.subject.meta.join(" · ")}</span>}
        </div>
      )}
    </>
  );
}

function SummaryBody({ slide, view }: { slide: SummarySlide; view: ReportPageView }) {
  const host = useSlidesHost();
  return (
    <>
      <h2 className="rs-h rs-h-sm">{slide.title}</h2>
      {slide.points ? <Points points={slide.points} /> : slide.text ? <div className="rs-statement">{host.md(slide.text)}</div> : null}
      {slide.tally && (
        <div className="rs-chip">
          <VerdictTally tally={slide.tally} styles={view.verdicts} />
        </div>
      )}
    </>
  );
}

// A timeline entry: its date first (what a timeline is read by), its title,
// the first sentences of its body.
function EntryBody({ slide }: { slide: EntrySlide }) {
  const host = useSlidesHost();
  return (
    <>
      <p className="rs-dates">
        <time dateTime={slide.datetime}>{slide.date}</time>
      </p>
      <h2 className="rs-h">{slide.title}</h2>
      {slide.text && <div className="rs-statement">{host.md(slide.text)}</div>}
    </>
  );
}

function FoundBody({ slide, view }: { slide: FoundSlide; view: ReportPageView }) {
  return (
    <>
      <h2 className="rs-h rs-h-sm">{slide.title}</h2>
      <div className="rs-found" style={{ "--rs-cols": Math.min(slide.groups.length, 5) } as CSSProperties}>
        {slide.groups.map((g) => {
          const s = verdictStyleOf(view, g.verdict);
          return (
            <div key={g.verdict} className="rs-found-group" data-found-group={g.verdict} style={{ "--rs-verdict": s.color } as CSSProperties}>
              <span className="rs-found-n">{g.claims.length}</span>
              <span className="rs-found-label">{s.label}</span>
              <ul className="rs-found-claims">
                {g.claims.map((c) => (
                  <li key={c.id}>{c.title}</li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </>
  );
}

function SectionBody({ slide, view }: { slide: SectionSlide; view: ReportPageView }) {
  const host = useSlidesHost();
  const cited = slide.cite ? view.citations[slide.cite] : undefined;
  const words = slide.points ? (
    <Points points={slide.points} />
  ) : slide.text ? (
    <div className="rs-statement">{host.md(slide.text)}</div>
  ) : slide.claims.length > 0 ? (
    <ul className="rs-claimlist">
      {slide.claims.map((c) => (
        <li
          key={c.id}
          style={c.verdict ? ({ "--rs-verdict": verdictStyleOf(view, c.verdict).color } as CSSProperties) : undefined}
        >
          <i aria-hidden="true" />
          <span>
            {c.title}
            {c.verdict && <span className="sr-only"> ({verdictStyleOf(view, c.verdict).label})</span>}
          </span>
        </li>
      ))}
    </ul>
  ) : null;
  if (slide.layout === "quote" && cited) {
    return (
      <>
        <h2 className="rs-h rs-h-sm">{slide.title}</h2>
        <PullQuote c={cited} />
      </>
    );
  }
  if (cited) {
    return (
      <div className="rs-split">
        <div className="rs-col">
          <h2 className="rs-h">{slide.title}</h2>
          {words}
        </div>
        <SlideEvidence c={cited} />
      </div>
    );
  }
  return (
    <>
      <h2 className="rs-h">{slide.title}</h2>
      {words}
    </>
  );
}

function PullQuote({ c }: { c: CitationView }) {
  const host = useSlidesHost();
  const { title, meta } = citationHeading(c);
  return (
    <figure className="rs-ev" data-slide-evidence={c.id}>
      <blockquote className="rs-pull">{c.quote}</blockquote>
      <figcaption className="rs-ev-cap" style={{ paddingLeft: "64px" }}>
        <span className="rs-ev-kind">
          {CITATION_KIND_LABELS[c.kind]}
          {meta.length > 0 ? ` · ${meta.join(" · ")}` : ""}
        </span>
        <span className="rs-ev-title">{host.cite(c.id, title)}</span>
      </figcaption>
    </figure>
  );
}

function ClaimHead({ slide, view, small }: { slide: ClaimSlide; view: ReportPageView; small?: boolean }) {
  return (
    <>
      {(slide.verdict || slide.flag) && (
        <div className="rs-chips rs-chip">
          {slide.verdict && <VerdictChip verdict={slide.verdict} style={verdictStyleOf(view, slide.verdict)} />}
          {slide.flag && <span className="rs-flag">{slide.flag}</span>}
        </div>
      )}
      <h2 className={small ? "rs-h rs-h-sm" : "rs-h"}>{slide.title}</h2>
    </>
  );
}

function ClaimBody({ slide, view }: { slide: ClaimSlide; view: ReportPageView }) {
  const cited = slide.cite ? view.citations[slide.cite] : undefined;
  const finding = slide.points ? <Points points={slide.points} /> : slide.gist ? <p className="rs-gist">{slide.gist}</p> : null;
  const text = slide.text ? <p className="rs-claimtext">{slide.text}</p> : null;
  if (slide.layout === "quote" && cited) {
    return (
      <>
        <ClaimHead slide={slide} view={view} small />
        <PullQuote c={cited} />
      </>
    );
  }
  if (slide.layout === "evidence" && cited) {
    return (
      <div className="rs-split">
        <div className="rs-col">
          <ClaimHead slide={slide} view={view} small />
          {text}
          {finding}
        </div>
        <SlideEvidence c={cited} />
      </div>
    );
  }
  return (
    <>
      <ClaimHead slide={slide} view={view} />
      {text}
      {finding}
    </>
  );
}

function SourcesBody({ slide, pageUrl }: { slide: SourcesSlide; pageUrl?: string }) {
  return (
    <>
      <h2 className="rs-h">{slide.title}</h2>
      <div className="rs-figures">
        <div className="rs-figure">
          <b>{slide.references}</b>
          <span>{slide.references === 1 ? "reference" : "references"}</span>
        </div>
        {slide.documents > 0 && (
          <div className="rs-figure">
            <b>{slide.documents}</b>
            <span>{slide.documents === 1 ? "document quoted" : "documents quoted"}</span>
          </div>
        )}
      </div>
      {slide.closing && <p className="rs-sub">{slide.closing}</p>}
      {pageUrl && <p className="rs-url">{pageUrl}</p>}
    </>
  );
}

export function Slide({
  slide,
  view,
  total,
  fit = "canvas",
  pageUrl,
  style,
  id,
  hideRead,
}: {
  slide: SlideView;
  view: ReportPageView;
  total: number;
  fit?: SlideFit;
  // The article's address, shown on the sources slide.
  pageUrl?: string;
  style?: CSSProperties;
  id?: string;
  // A thumbnail (the Overview's card) has no way back of its own.
  hideRead?: boolean;
}) {
  const host = useSlidesHost();
  const mark = markOf(slide, view);
  let body: ReactNode;
  switch (slide.kind) {
    case "title":
      body = <TitleBody slide={slide} />;
      break;
    case "summary":
      body = <SummaryBody slide={slide} view={view} />;
      break;
    case "entry":
      body = <EntryBody slide={slide} />;
      break;
    case "found":
      body = <FoundBody slide={slide} view={view} />;
      break;
    case "section":
      body = <SectionBody slide={slide} view={view} />;
      break;
    case "claim":
      body = <ClaimBody slide={slide} view={view} />;
      break;
    case "sources":
      body = <SourcesBody slide={slide} pageUrl={pageUrl} />;
      break;
  }
  return (
    <article
      id={id}
      className="rs-slide"
      data-slide={slide.key}
      data-slide-kind={slide.kind}
      data-layout={slide.layout}
      data-fit={fit}
      style={{ ...(mark ? ({ "--rs-mark": mark } as CSSProperties) : {}), ...style }}
    >
      <span className="rs-band" aria-hidden="true" />
      <Eyebrow slide={slide} total={total} />
      <div className="rs-main">{body}</div>
      <footer className="rs-foot">
        <span className="rs-foot-name">{reportFullTitle(view)}</span>
        {host.badge?.(slide)}
        {!hideRead && (
          <a
            className="rs-read"
            href={host.readHref(slide)}
            data-slide-read={slide.anchorId}
            onClick={
              host.onRead
                ? (e) => {
                    e.preventDefault();
                    host.onRead!(slide);
                  }
                : undefined
            }
          >
            Read this in the article <span aria-hidden="true">→</span>
          </a>
        )}
      </footer>
    </article>
  );
}