import { VerificationBadge } from "yt-dlp-transcript-common/components/citations/VerificationBadge";
import { VerdictChip } from "yt-dlp-transcript-common/components/report/VerdictChip";
import { formatTimestamp } from "yt-dlp-transcript-common/lib/vtt";
import { CITATION_KIND_LABELS, spanLabel, type MomentPageView } from "yt-dlp-transcript-common/lib/report/views";
import { ExternalLinkText, Eyebrow, dateLabel, textLink } from "./parts";

// ONE CITED MOMENT, from its view (common/lib/report/views.ts): a span's
// self-hosted evidence clip (video, or audio with its poster) or a post's
// captured shot and text; the quote and what checking it found; the transcript
// lines around the span; the record's metadata and a link to the original at
// its time (and into the corpus on a full site); and every place on the site
// that cites it.

export default function MomentArticle({ view }: { view: MomentPageView }) {
  const r = view.record;
  const isSpan = view.kind === "video" || view.kind === "audio";
  const span = isSpan && view.start !== undefined && view.end !== undefined ? spanLabel(view.start, view.end) : null;
  const meta = [r.channelTitle ?? r.channel, dateLabel(view.date ?? r.date), span].filter(Boolean).join(" · ");
  const title = r.title ?? (view.kind === "post" ? (view.post?.author ?? r.channelTitle ?? r.channel) : `${r.channel}/${r.id}`);
  const clip = view.clip;
  const padded =
    clip && view.start !== undefined && view.end !== undefined && (clip.start < view.start || clip.end > view.end);

  return (
    <article data-moment={view.key} data-moment-kind={view.kind} className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      <header className="flex flex-col gap-2">
        <Eyebrow>Cited {CITATION_KIND_LABELS[view.kind].toLowerCase()}</Eyebrow>
        <h1 className="font-display text-2xl font-semibold leading-tight tracking-tight text-foreground sm:text-3xl">
          {title}
        </h1>
        {meta && <p className="font-mono text-xs text-muted-foreground">{meta}</p>}
      </header>

      {clip && view.kind === "video" && (
        <video
          data-evidence-clip=""
          controls
          playsInline
          preload="metadata"
          poster={clip.poster}
          src={clip.src}
          className="aspect-video w-full rounded-lg border border-border bg-black"
        />
      )}
      {clip && view.kind === "audio" && (
        <div className="flex flex-col gap-3">
          {clip.poster && (
            // eslint-disable-next-line @next/next/no-img-element -- a published file of unknown size; the export serves images unoptimized
            <img src={clip.poster} alt="" className="aspect-video w-full rounded-lg border border-border object-cover" />
          )}
          <audio data-evidence-clip="" controls preload="metadata" src={clip.src} className="w-full" />
        </div>
      )}
      {clip && padded && (
        <p className="-mt-3 text-xs text-muted-foreground">
          The clip runs {spanLabel(clip.start, clip.end)}, a little either side of the cited {span} for context.
        </p>
      )}
      {view.post?.shot && (
        // eslint-disable-next-line @next/next/no-img-element -- a published file of unknown size; the export serves images unoptimized
        <img
          src={view.post.shot}
          alt={`Screenshot of the post${view.post.author ? ` by ${view.post.author}` : ""}`}
          className="w-full max-w-xl rounded-lg border border-border"
        />
      )}

      <div className="flex flex-col gap-2">
        <blockquote className="border-l-4 border-brand pl-4 text-lg leading-relaxed text-foreground">
          {view.speaker && <span className="font-medium text-muted-foreground">{view.speaker}: </span>}
          <q className="italic">{view.quote}</q>
        </blockquote>
        <VerificationBadge verification={view.verification} />
      </div>

      {view.post && view.post.text.trim() !== view.quote.trim() && (
        <div className="flex flex-col gap-1">
          <p className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">The post</p>
          <p className="whitespace-pre-line text-sm leading-relaxed text-foreground">{view.post.text}</p>
        </div>
      )}
      {view.post?.media && view.post.media.length > 0 && (
        <ul className="flex flex-col gap-3">
          {view.post.media.map((m) =>
            m.kind === "image" ? (
              <li key={m.src}>
                {/* eslint-disable-next-line @next/next/no-img-element -- a published file of unknown size; the export serves images unoptimized */}
                <img src={m.src} alt="" className="max-w-full rounded-md border border-border" />
              </li>
            ) : (
              <li key={m.src}>
                <video src={m.src} controls playsInline preload="metadata" className="w-full rounded-md border border-border" />
              </li>
            ),
          )}
        </ul>
      )}

      {view.cues && view.cues.length > 0 && (
        <section aria-labelledby="cues-heading" className="flex flex-col gap-2">
          <h2 id="cues-heading" className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
            Transcript
          </h2>
          <ol data-cue-lines="" className="flex flex-col rounded-lg border border-border bg-card text-sm">
            {view.cues.map((c, i) => (
              <li
                key={`${c.start}-${i}`}
                data-in-span={c.inSpan ? "" : undefined}
                className={
                  c.inSpan
                    ? "flex gap-3 bg-brand-soft px-3 py-1.5 text-foreground"
                    : "flex gap-3 px-3 py-1.5 text-muted-foreground"
                }
              >
                <span className="w-14 shrink-0 font-mono text-xs leading-6 tabular-nums">{formatTimestamp(c.start)}</span>
                <span className="leading-6">{c.text}</span>
              </li>
            ))}
          </ol>
        </section>
      )}

      {(r.originalUrl || r.corpusUrl) && (
        <p className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
          {r.originalUrl && (
            <ExternalLinkText href={r.originalUrl}>
              {isSpan && view.start !== undefined
                ? `${r.originalLabel ?? "Original"} at ${formatTimestamp(view.start)}`
                : "Original post"}
            </ExternalLinkText>
          )}
          {r.downloads?.map((d) => (
            <ExternalLinkText key={d.url} href={d.url}>
              {d.label}
            </ExternalLinkText>
          ))}
          {r.corpusUrl && (
            <a href={r.corpusUrl} className={textLink}>
              Open in the archive
            </a>
          )}
        </p>
      )}

      {view.citedIn.length > 0 && (
        <section aria-labelledby="cited-in-heading" className="flex flex-col gap-2 border-t border-border pt-5">
          <h2 id="cited-in-heading" className="font-display text-xl font-semibold text-foreground">
            Cited in
          </h2>
          <ul data-cited-in="" className="flex flex-col gap-2">
            {view.citedIn.map((e) => (
              <li
                key={`${e.reportId}/${e.sectionId}/${e.claimId}/${e.entryId ?? ""}/${e.citationId}`}
                className="flex flex-col gap-1 rounded-lg border border-border bg-card p-3 text-sm"
              >
                <a href={e.href} className={`font-medium ${textLink}`}>
                  {e.reportTitle}
                </a>
                <div className="flex flex-wrap items-center gap-2 text-muted-foreground">
                  {e.verdict && e.verdictStyle && <VerdictChip verdict={e.verdict} style={e.verdictStyle} />}
                  {e.sectionTitle ? (
                    <span>{e.sectionTitle}</span>
                  ) : e.entryId ? (
                    <span>Timeline{e.entryTitle ? ` — ${e.entryTitle}` : ""}</span>
                  ) : (
                    !e.sectionId && <span>Summary</span>
                  )}
                  {(e.claimTitle ?? e.claimText) && (
                    <span className="text-foreground">— {e.claimTitle ?? e.claimText}</span>
                  )}
                  {e.number !== undefined && <span className="font-mono text-xs">[{e.number}]</span>}
                </div>
              </li>
            ))}
          </ul>
        </section>
      )}
    </article>
  );
}