"use client";

// The bodies for the three speaker operations — what a diarization or an
// attribution record actually says about this video.
//
// Until this existed the speaker layer had the problem the digest layer had
// before its panel: sidecars on disk with nowhere for a human to look at them.
// diarization.json is produced from audio that the cleanup sweep then deletes,
// so the record is frequently the ONLY surviving evidence of what was heard —
// and it was invisible per video.
//
// BOTH ATTRIBUTION OPERATIONS SHARE attribution.json (lib/operations.ts's
// two-kinds-one-file rule). So `attribution-diarized` and `attribution-text`
// draw the SAME record with their own state(): the pill differs, the body does
// not, and `provenance.method` is how a reader tells which lane wrote it.
//
// TYPE-ONLY imports from the common lib modules named here: lib/diarization.ts
// and lib/attribution.ts have no imports at all and are safe for values, but
// nothing in this file needs one.

import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import type { DiarizationEngine } from "yt-dlp-transcript-common/lib/diarization";
import type { AttributionProvenance } from "yt-dlp-transcript-common/lib/attribution";
import { runOperationForVideoAction } from "../operationActions";
import { cancelJobAction } from "../../../../../jobs/actions";
import type { OperationPanelView } from "./operationState";

// Projected on the server from DiarizationRecord — `turns` as a COUNT, because
// a long recording has thousands of them and none is worth a row here.
export type DiarizationBodyData = {
  record: {
    generatedAt: string;
    audioSeconds?: number;
    durationMs?: number;
    speakers: number;
    turns: number;
    engine: DiarizationEngine;
    windowing?: {
      windows: number;
      windowSeconds: number;
      overlapSeconds: number;
    };
  } | null;
};

// Projected from AttributionRecord. `segments` and `warnings` are counts for
// the same reason; the speakers ARE the content and are listed.
export type AttributionBodyData = {
  record: {
    generatedAt: string;
    speakers: {
      index: number;
      label: string;
      cluster?: number;
      confidence?: number;
      seconds?: number;
    }[];
    segments: number;
    warnings: number;
    provenance: AttributionProvenance;
  } | null;
};

export function DiarizationBody({
  slug,
  videoId,
  view,
  data,
}: {
  slug: string;
  videoId: string;
  view: OperationPanelView;
  data: DiarizationBodyData;
}) {
  // ONE CHILD LIST, WHATEVER IS ON DISK — and that is what keeps the run log
  // alive. React reconciles a fragment's children BY POSITION, so the old shape
  // (`[empty state, RunOne]` before a record exists, `[provenance, …, RunOne]`
  // after) MOVED <RunOne> down the list the moment the record appeared. A moved
  // child is not re-rendered, it is unmounted and mounted again — taking
  // StreamActionLog's `log` state with it. So the run finished, its own
  // router.refresh() landed the new record, and the operator's log vanished at
  // the instant the summary line reached it. `attribution.spec.ts:346` was the
  // 1-in-10 witness: it waits for the batch's "1 done" and the panel was gone.
  // The record body is a SIBLING of the button now, and RunOne is last and keyed
  // in both branches, so nothing can move it.
  return (
    <>
      {data.record ? (
        <DiarizationRecordBody record={data.record} />
      ) : (
        <p
          aria-label="diarization empty"
          className="text-sm text-muted-foreground"
        >
          No speaker turns have been captured for this video.
        </p>
      )}
      <RunOne key="run-one" slug={slug} videoId={videoId} view={view} />
    </>
  );
}

function DiarizationRecordBody({
  record,
}: {
  record: NonNullable<DiarizationBodyData["record"]>;
}) {
  const e = record.engine;
  return (
    <>
      {/* WHICH configuration produced this, for the same reason the digest's
          provenance block exists: swapping the engine, a model or the
          clustering threshold changes the answer, and after the audio is gone
          this record is the only thing that can say which one ran. */}
      <dl
        aria-label="diarization provenance"
        className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs font-mono"
      >
        <Row label="engine" value={e.engine} />
        {e.segmentationModel && (
          <Row label="segmentationModel" value={e.segmentationModel} />
        )}
        {e.embeddingModel && (
          <Row label="embeddingModel" value={e.embeddingModel} />
        )}
        {e.model && <Row label="model" value={e.model} />}
        {e.version && <Row label="version" value={e.version} />}
        {e.threshold !== undefined && (
          <Row label="threshold" value={String(e.threshold)} />
        )}
        <Row label="generated" value={record.generatedAt} />
        {record.audioSeconds !== undefined && (
          <Row label="audio" value={clock(record.audioSeconds)} />
        )}
        {record.durationMs !== undefined && (
          <Row label="took" value={`${Math.round(record.durationMs / 1000)}s`} />
        )}
        {record.windowing && (
          <Row
            label="windows"
            value={`${record.windowing.windows} × ${record.windowing.windowSeconds}s, ${record.windowing.overlapSeconds}s overlap`}
          />
        )}
      </dl>
      <p aria-label="diarization summary" className="text-sm">
        {record.speakers} speakers · {record.turns} turns
      </p>
    </>
  );
}

export function AttributionBody({
  slug,
  videoId,
  view,
  data,
}: {
  slug: string;
  videoId: string;
  view: OperationPanelView;
  data: AttributionBodyData;
}) {
  // Same two-child shape as DiarizationBody above, and for the same reason:
  // <RunOne> must not change position when the record appears, or React
  // remounts it and StreamActionLog loses the log the run just wrote.
  return (
    <>
      {data.record ? (
        <AttributionRecordBody record={data.record} />
      ) : (
        <p
          aria-label="attribution empty"
          className="text-sm text-muted-foreground"
        >
          No speaker names for this video yet.
        </p>
      )}
      <RunOne key="run-one" slug={slug} videoId={videoId} view={view} />
    </>
  );
}

function AttributionRecordBody({
  record,
}: {
  record: NonNullable<AttributionBodyData["record"]>;
}) {
  const p = record.provenance;
  return (
    <>
      <dl
        aria-label="attribution provenance"
        className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs font-mono"
      >
        {/* The row that says which of the two lanes wrote this file. */}
        <Row label="method" value={p.method} />
        <Row label="engine" value={p.appId} />
        <Row
          label="model"
          value={
            p.modelRequested && p.modelRequested !== p.model
              ? `${p.modelRequested} → ${p.model}`
              : p.model
          }
        />
        <Row label="promptVersion" value={String(p.promptVersion)} />
        {p.transcriptSource && (
          <Row label="transcriptSource" value={p.transcriptSource} />
        )}
        {p.diarizationGeneratedAt && (
          <Row
            label="diarizationGeneratedAt"
            value={p.diarizationGeneratedAt}
          />
        )}
        {p.chunks !== undefined && (
          <Row
            label="chunks"
            value={`${p.chunksOk ?? "?"} of ${p.chunks} usable`}
          />
        )}
        <Row label="generated" value={p.generatedAt} />
        {p.costUsd !== undefined && (
          <Row label="cost" value={`$${p.costUsd.toFixed(4)}`} />
        )}
      </dl>
      <ul
        aria-label="attribution speakers"
        className="flex flex-col gap-0.5 text-sm"
      >
        {record.speakers.map((s) => (
          <li key={s.index} aria-label={`attribution speaker ${s.index}`}>
            <span className="font-medium">{s.label}</span>
            {s.cluster !== undefined && (
              <span className="text-muted-foreground"> · cluster {s.cluster}</span>
            )}
            {s.confidence !== undefined && (
              <span className="text-muted-foreground">
                {" "}
                · {(s.confidence * 100).toFixed(0)}% confident
              </span>
            )}
            {s.seconds !== undefined && (
              <span className="text-muted-foreground">
                {" "}
                · {clock(s.seconds)}
              </span>
            )}
          </li>
        ))}
      </ul>
      <p aria-label="attribution summary" className="text-sm">
        {record.segments} segments · {record.warnings} warnings
      </p>
    </>
  );
}

// One video, on the speaker lane. NOT DRAWN for a switched-off operation: its
// panel is shown so the record stays visible, but there is nothing to run — the
// action refuses on the same condition, which is the belt behind this brace.
function RunOne({
  slug,
  videoId,
  view,
}: {
  slug: string;
  videoId: string;
  view: OperationPanelView;
}) {
  if (!view.enabled) return null;
  return (
    <div className="flex flex-col gap-2 border-t border-border pt-3">
      <StreamActionLog
        trigger={() => runOperationForVideoAction(slug, videoId, view.id)}
        cancelAction={cancelJobAction}
        buttonLabel={`Run ${view.label}`}
        runningLabel="Running…"
        // The accessible name the log, the cancel button and the error all
        // derive from — see StreamActionLog.
        label={`Run ${view.label}`}
      />
      <p className="text-xs text-muted-foreground">
        Runs this one video on the speaker lane, behind nothing — the channel&apos;s
        Speakers stage runs the whole channel.
      </p>
    </div>
  );
}

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

function clock(seconds: number): string {
  const s = Math.max(0, Math.round(seconds));
  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
}