import {
  reportHistoryViewPath,
  type ClaimChange,
  type ClaimDiffField,
  type DiffSegment,
  type ReportHistoryView,
  type ReportRevisionView,
} from "yt-dlp-transcript-common/lib/report/revisions";
import { reportPagePath } from "yt-dlp-transcript-common/lib/report/views";
import { ReportName, textLink } from "./parts";

// A REPORT'S REVISION HISTORY, from its history.json (common/lib/report/revisions.ts):
// how to clone it, then every revision, newest first — its number, date,
// commit and report.json sha256 (the hash every export's footer prints), the
// change summary, and each changed claim as an inline word diff against the
// revision before.

const FIELD_LABELS: Record<ClaimDiffField, string> = {
  title: "Title",
  text: "Claim",
  verdict: "Verdict",
  findings: "Findings",
};

const STATUS_LABELS: Record<ClaimChange["status"], string> = {
  added: "added",
  removed: "removed",
  edited: "edited",
};

// `2026-03-08T12:00:00Z` → `2026-03-08 12:00 UTC`.
export function revisionDate(iso: string): string {
  const m = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/.exec(iso);
  return m ? `${m[1]} ${m[2]} UTC` : iso;
}

function Diff({ segments }: { segments: DiffSegment[] }) {
  return (
    <>
      {segments.map((s, i) =>
        s.op === "ins" ? (
          <ins key={i} data-diff="ins" className="rounded-sm bg-success-soft text-foreground no-underline decoration-success">
            {s.text}
          </ins>
        ) : s.op === "del" ? (
          <del key={i} data-diff="del" className="rounded-sm bg-destructive-soft text-muted-foreground decoration-destructive">
            {s.text}
          </del>
        ) : (
          <span key={i}>{s.text}</span>
        ),
      )}
    </>
  );
}

function ClaimDiff({ change }: { change: ClaimChange }) {
  return (
    <div
      data-claim-change={change.id}
      data-status={change.status}
      className="flex flex-col gap-1.5 rounded-md border border-border bg-card px-3 py-2 text-sm"
    >
      <p className="font-mono text-[11px] text-muted-foreground">
        <span className="text-foreground">{change.id}</span> · {change.section} · {STATUS_LABELS[change.status]}
      </p>
      {change.fields.map((f) => (
        <p key={f.field} data-field={f.field} className="whitespace-pre-wrap break-words leading-relaxed">
          <span className="mr-2 font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
            {FIELD_LABELS[f.field]}
          </span>
          <Diff segments={f.diff} />
        </p>
      ))}
    </div>
  );
}

function Revision({ r }: { r: ReportRevisionView }) {
  return (
    <li id={`r${r.revision}`} data-revision={r.revision} className="flex scroll-mt-20 flex-col gap-3 border-t border-border pt-5">
      <div className="flex flex-col gap-1">
        <h2 className="font-display text-xl font-semibold tracking-tight text-foreground">Revision {r.revision}</h2>
        <p className="font-mono text-xs text-muted-foreground">{revisionDate(r.date)}</p>
      </div>
      <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 font-mono text-xs">
        <dt className="text-muted-foreground">commit</dt>
        <dd data-commit={r.commit} className="break-all text-foreground">
          {r.commit}
        </dd>
        <dt className="text-muted-foreground">report sha256</dt>
        <dd data-report-sha256={r.reportSha256} className="break-all text-foreground">
          {r.reportSha256}
        </dd>
      </dl>
      {r.summary.length > 0 && (
        <ul data-revision-summary="" className="flex list-disc flex-col gap-0.5 pl-5 text-sm text-foreground">
          {r.summary.map((line, i) => (
            <li key={i}>{line}</li>
          ))}
        </ul>
      )}
      {r.claims.length > 0 && (
        <div className="flex flex-col gap-2">
          {r.claims.map((c) => (
            <ClaimDiff key={c.id} change={c} />
          ))}
        </div>
      )}
    </li>
  );
}

export default function ReportHistory({ view }: { view: ReportHistoryView }) {
  const revisions = [...view.revisions].reverse();
  return (
    <article data-report-history={view.reportId} className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      <header className="flex flex-col gap-3">
        <p className="text-sm">
          <a href={reportPagePath(view.reportId)} className={textLink}>
            <ReportName series={view.series} title={view.title} />
          </a>
        </p>
        <h1 className="font-display text-3xl font-semibold leading-tight tracking-tight text-foreground">Revision history</h1>
        <p className="text-sm text-muted-foreground">
          Every edit to this report, newest first. Each revision is a commit in the report&apos;s own git history; its
          report sha256 is the hash printed at the foot of the report&apos;s downloads.{" "}
          <a href={reportHistoryViewPath(view.reportId)} className={textLink}>
            history.json
          </a>
        </p>
        <pre
          data-history-clone=""
          className="overflow-x-auto rounded-md border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground"
        >
          <code>git clone {view.clone}</code>
        </pre>
      </header>
      <ol className="flex flex-col gap-6">
        {revisions.map((r) => (
          <Revision key={r.revision} r={r} />
        ))}
      </ol>
    </article>
  );
}