"use client";

// The per-video digest review surface — the thing that makes a validation run
// readable.
//
// Until this existed the digest layer had nowhere for a human to LOOK at what it
// produced: the channel Digest stage is a queue-and-count card by its own
// admission, and the per-video page had no digest reference at all. A ~100-video
// validation run cannot mean anything while its output is invisible, and
// STATE.md's own lesson from this layer is that "the digest layer's failure
// modes live at the wiring, not in the pure functions."
//
// So this panel leads with the things that are wrong rather than the things that
// are right: warnings first, then provenance (WHICH configuration produced
// this), then the items. During a bake-off-driven validation the provenance line
// is the entire point — two videos can carry visually similar chapters from
// completely different engines, models or prompt versions.
//
// THE FRAME IS NOW OperationPanel'S: the section, the heading and the freshness
// pill are drawn once for every operation. This is the digest's BODY, and the
// only thing about it that is digest-specific.

import { useState, useTransition } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import {
  digestBucketAction,
  saveDigestOverridesAction,
  type DigestLaneChoice,
} from "../../../digestActions";
import type {
  DigestChapter,
  DigestSectionState,
  DigestWarning,
  EffectiveDigest,
} from "yt-dlp-transcript-common/lib/digest";
import { cancelJobAction } from "../../../../../jobs/actions";

export type DigestBodyData = {
  digest: EffectiveDigest;
  hasMachineDigest: boolean;
  // One row per section KIND the current settings ask for, so a section that
  // was never generated is as visible as one that is stale. Computed on the
  // server by digestSectionStates — the SAME fold the digest operation's
  // state() counts, so this panel and the channel's work list cannot disagree.
  sections: DigestSectionState[];
  // What a regeneration would produce right now, for the "stale because…" line.
  target: {
    appId: string;
    model: string;
    promptVersion: number;
    promptVariant?: string;
    contextHash: string;
  };
  hasOverrides: boolean;
  note: string;
  remoteEnabled: boolean;
};

export function DigestBody({
  slug,
  videoId,
  data,
}: {
  slug: string;
  videoId: string;
  data: DigestBodyData;
}) {
  const [lane, setLane] = useState<DigestLaneChoice>("local");
  const { digest, sections, target } = data;

  return (
    <>
      {data.digest.derivedFrom && (
        <SharedFrom derivedFrom={data.digest.derivedFrom} />
      )}

      {!data.hasMachineDigest ? (
        <p aria-label="digest empty" className="text-sm text-muted-foreground">
          No digest has been generated for this video yet. Run one below, or
          sweep the whole channel from the channel page&apos;s Digest stage.
        </p>
      ) : (
        <>
          <Warnings warnings={digest.warnings} />
          <SectionProvenance sections={sections} target={target} />
          <Chapters chapters={digest.chapters} />
          <Tags tags={digest.tags} />
        </>
      )}

      <OverridesEditor
        slug={slug}
        videoId={videoId}
        chapters={digest.chapters}
        note={data.note}
        hasOverrides={data.hasOverrides}
      />

      <div className="flex flex-col gap-2 border-t border-border pt-3">
        <StreamActionLog
          trigger={() => digestBucketAction(slug, [videoId], lane)}
          cancelAction={cancelJobAction}
          buttonLabel="Regenerate digest"
          runningLabel="Generating…"
          label="Regenerate digest"
          extraControls={
            <label className="flex items-center gap-1 text-xs text-muted-foreground">
              Lane
              <select
                value={lane}
                onChange={(e) => setLane(e.target.value as DigestLaneChoice)}
                aria-label="lane for Regenerate digest"
                className="rounded border border-border bg-card px-1 py-0.5"
              >
                <option value="local">local (ollama)</option>
                <option value="remote" disabled={!data.remoteEnabled}>
                  metered
                  {data.remoteEnabled ? "" : " — disabled on the Digest page"}
                </option>
              </select>
            </label>
          }
        />
        <p className="text-xs text-muted-foreground">
          Regeneration only ever rewrites <code>ai-digest.json</code>. Hand
          corrections live in <code>ai-digest.overrides.json</code> and are never
          touched by it — which is what lets a correction survive a re-sweep of a
          corpus too large to generate twice.
        </p>
      </div>
    </>
  );
}

// A borrowed digest must NEVER be presented as native. Sharing only happens at
// near-zero measured offset, so the offset is shown as the reason it was
// considered safe rather than left implicit.
function SharedFrom({
  derivedFrom,
}: {
  derivedFrom: NonNullable<EffectiveDigest["derivedFrom"]>;
}) {
  const [channelSlug, id] = derivedFrom.slug.split("/");
  return (
    <div
      aria-label="digest shared from"
      className="rounded border border-info/30 bg-info-soft p-2 text-sm"
    >
      <p>
        <strong>Shared from a duplicate.</strong> This digest was generated for{" "}
        <a
          href={`/channels/${channelSlug}/videos/${id}`}
          className="underline font-mono"
        >
          {derivedFrom.slug}
        </a>
        , the canonical member of its cluster, and copied here.
      </p>
      <p className="text-xs text-muted-foreground mt-1">
        Cue timings were measured{" "}
        <strong>{derivedFrom.offsetSeconds.toFixed(2)}s</strong> apart at the
        sampled anchors, which is why placing it here was considered safe.
        Regenerating the canonical member re-applies the share.
      </p>
    </div>
  );
}

// Warnings lead. This is the array Phase 11a's review queue is built on, and
// showing it per-video first is what makes a validation run readable: a section
// generated from 3 of 5 chunks looks perfectly healthy until you read these.
function Warnings({ warnings }: { warnings: DigestWarning[] }) {
  if (warnings.length === 0) {
    return (
      <p aria-label="digest warnings empty" className="text-xs text-success">
        No warnings — every chunk parsed and every item passed the guards.
      </p>
    );
  }
  const byCode = new Map<string, DigestWarning[]>();
  for (const w of warnings) {
    const list = byCode.get(w.code) ?? [];
    list.push(w);
    byCode.set(w.code, list);
  }
  return (
    <div
      aria-label="digest warnings"
      className="rounded border border-warning/30 bg-warning-soft p-2"
    >
      <p className="text-sm font-medium">
        {warnings.length} warning{warnings.length === 1 ? "" : "s"}
      </p>
      <ul className="mt-1 flex flex-col gap-1 text-xs">
        {Array.from(byCode.entries()).map(([code, list]) => (
          <li key={code} aria-label={`digest warning ${code}`}>
            <code className="font-medium">{code}</code> × {list.length}
            <span className="text-muted-foreground">
              {" "}
              ({list[0].section}
              {list[0].chunk !== undefined ? `, chunk ${list[0].chunk}` : ""})
            </span>
            {list[0].value && (
              <span className="text-muted-foreground">
                {" "}
                — first: <code>{list[0].value}</code>
              </span>
            )}
            {list[0].detail && (
              <span className="text-muted-foreground"> — {list[0].detail}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// WHICH configuration produced this. During a bake-off-driven validation, two
// videos can carry similar-looking chapters from entirely different engines.
function SectionProvenance({
  sections,
  target,
}: {
  sections: DigestSectionState[];
  target: DigestBodyData["target"];
}) {
  return (
    <div aria-label="digest provenance" className="flex flex-col gap-2">
      {sections.map((s) => (
        <div
          key={s.kind}
          aria-label={`digest section ${s.kind}`}
          className="rounded border border-border p-2 text-xs"
        >
          <div className="flex flex-wrap items-baseline gap-2">
            <span className="text-sm font-medium">{s.kind}</span>
            {!s.present ? (
              <span className="text-muted-foreground">never generated</span>
            ) : s.fresh ? (
              <span className="text-success">current</span>
            ) : (
              <span className="text-warning">stale</span>
            )}
          </div>
          {s.provenance ? (
            <dl className="mt-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 font-mono">
              <Row label="engine" value={s.provenance.appId} />
              <Row
                label="model"
                value={
                  s.provenance.modelRequested &&
                  s.provenance.modelRequested !== s.provenance.model
                    ? `${s.provenance.modelRequested} → ${s.provenance.model}`
                    : s.provenance.model
                }
              />
              <Row label="lane" value={s.provenance.lane} />
              <Row
                label="promptVersion"
                value={String(s.provenance.promptVersion)}
              />
              <Row
                label="promptVariant"
                value={s.provenance.promptVariant ?? "(default)"}
              />
              <Row label="contextHash" value={s.provenance.contextHash} />
              {s.provenance.chunks !== undefined && (
                <Row
                  label="chunks"
                  value={`${s.provenance.chunksOk ?? "?"} of ${s.provenance.chunks} usable`}
                />
              )}
              <Row label="generated" value={s.provenance.generatedAt} />
              {s.provenance.costUsd !== undefined && (
                <Row label="cost" value={`$${s.provenance.costUsd.toFixed(4)}`} />
              )}
            </dl>
          ) : null}
          {s.present && !s.fresh && (
            <p className="mt-1 text-muted-foreground">
              A regeneration would produce{" "}
              <code>
                {target.appId}/{target.model} v{target.promptVersion}
                {target.promptVariant ? ` (${target.promptVariant})` : ""}
              </code>
              .
            </p>
          )}
        </div>
      ))}
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <>
      <dt className="text-muted-foreground">{label}</dt>
      <dd className="break-all">{value}</dd>
    </>
  );
}

function Chapters({ chapters }: { chapters: DigestChapter[] }) {
  if (chapters.length === 0) {
    return (
      <p aria-label="digest chapters empty" className="text-sm text-muted-foreground">
        No chapters.
      </p>
    );
  }
  return (
    <div>
      <h3 className="text-sm font-medium">Chapters ({chapters.length})</h3>
      <ol aria-label="digest chapters" className="mt-1 flex flex-col gap-0.5">
        {chapters.map((c) => (
          <li
            key={c.id}
            aria-label={`digest chapter ${c.id}`}
            className="flex gap-2 text-sm"
          >
            <span className="font-mono text-muted-foreground">{c.clock}</span>
            <span>{c.title}</span>
            {c.decidedBy === "human" && (
              <span className="text-xs text-info">edited</span>
            )}
          </li>
        ))}
      </ol>
    </div>
  );
}

function Tags({ tags }: { tags: EffectiveDigest["tags"] }) {
  if (tags.length === 0) return null;
  return (
    <div>
      <h3 className="text-sm font-medium">Tags ({tags.length})</h3>
      <ul aria-label="digest tags" className="mt-1 flex flex-wrap gap-1">
        {tags.map((t) => (
          <li
            key={t.id}
            className="rounded bg-muted px-1.5 py-0.5 text-xs"
          >
            {t.tag}
            {t.decidedBy === "human" && <span className="text-info"> ✎</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Corrections. Deliberately minimal: retitle a chapter, or suppress it. Those
// are the two things a reviewer actually does, and both are id-keyed so a
// regeneration that re-emits the same segmentation keeps honoring them.
function OverridesEditor({
  slug,
  videoId,
  chapters,
  note,
  hasOverrides,
}: {
  slug: string;
  videoId: string;
  chapters: DigestChapter[];
  note: string;
  hasOverrides: boolean;
}) {
  const [rows, setRows] = useState(() =>
    chapters.map((c) => ({ id: c.id, title: c.title, enabled: true })),
  );
  const [noteText, setNoteText] = useState(note);
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<string | null>(null);

  // The panel re-renders from the server after a save (revalidatePath), so the
  // row list can go stale against a regeneration that happened in between.
  const chapterIds = chapters.map((c) => c.id).join(",");
  const rowIds = rows.map((r) => r.id).join(",");
  if (chapterIds !== rowIds) {
    setRows(chapters.map((c) => ({ id: c.id, title: c.title, enabled: true })));
  }

  if (chapters.length === 0 && !hasOverrides) return null;

  const save = (): void => {
    setResult(null);
    startTransition(async () => {
      const edited = rows.filter((row, i) => {
        const original = chapters[i];
        return (
          !original || row.title !== original.title || row.enabled === false
        );
      });
      const res = await saveDigestOverridesAction(slug, videoId, {
        chapters: edited.map((row) => ({
          id: row.id,
          // start/clock are patched in from the machine item by mergeItems — an
          // override authored as (id + title) must not blank them.
          start: chapters.find((c) => c.id === row.id)?.start ?? 0,
          clock: chapters.find((c) => c.id === row.id)?.clock ?? "00:00:00",
          title: row.title,
          decidedBy: "human" as const,
          ...(row.enabled ? {} : { enabled: false }),
        })),
        ...(noteText.trim() ? { note: noteText.trim() } : {}),
      });
      setResult(res.ok ? "Saved." : res.error);
    });
  };

  return (
    <details className="text-sm">
      <summary className="cursor-pointer font-medium">
        Correct this digest{hasOverrides ? " (edited)" : ""}
      </summary>
      <div className="mt-2 flex flex-col gap-2">
        {rows.map((row, i) => (
          <div key={row.id} className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={row.enabled}
              aria-label={`keep chapter ${row.id}`}
              onChange={(e) =>
                setRows((prev) =>
                  prev.map((r, j) =>
                    j === i ? { ...r, enabled: e.target.checked } : r,
                  ),
                )
              }
            />
            <span className="font-mono text-xs text-muted-foreground">
              {chapters[i]?.clock}
            </span>
            <input
              type="text"
              value={row.title}
              aria-label={`title for chapter ${row.id}`}
              onChange={(e) =>
                setRows((prev) =>
                  prev.map((r, j) =>
                    j === i ? { ...r, title: e.target.value } : r,
                  ),
                )
              }
              className="flex-1 rounded border border-border bg-card px-2 py-1 text-sm"
            />
          </div>
        ))}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-medium">Note (why)</span>
          <input
            type="text"
            value={noteText}
            aria-label="digest override note"
            onChange={(e) => setNoteText(e.target.value)}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          />
        </label>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={save}
            disabled={pending}
            className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
          >
            {pending ? "Saving…" : "Save corrections"}
          </button>
          {result && (
            <span
              role="status"
              className="text-sm text-muted-foreground"
            >
              {result}
            </span>
          )}
        </div>
        <p className="text-xs text-muted-foreground">
          Unchecking a chapter suppresses it without deleting it, so a
          regeneration that re-emits the same item does not resurrect something
          you rejected.
        </p>
      </div>
    </details>
  );
}