"use client";

import { useState, useTransition } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import type { ChannelHandling } from "yt-dlp-transcript-common/lib/channelConfig";
import type { SavedVideoPointer } from "yt-dlp-transcript-common/lib/savedVideo";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import {
  DEFAULT_SOURCE_VIDEO_QUALITY,
  SOURCE_VIDEO_QUALITIES,
  SOURCE_VIDEO_QUALITY_LABELS,
  type SourceVideoQuality,
} from "yt-dlp-transcript-common/ytdlp/downloadFormat";
import { QueueControl } from "../../../../../../components/QueueControl";
import { cancelJobAction } from "../../../../../../jobs/actions";
import {
  redownloadToArchiveAction,
  unpersistVideoAction,
} from "../../videoActions";

export function SourceVideoSection({
  slug,
  videoId,
  handling,
  defaultQueueKey,
  existingQueues,
  savedVideo,
  defaultQuality = DEFAULT_SOURCE_VIDEO_QUALITY,
}: {
  slug: string;
  videoId: string;
  handling: ChannelHandling;
  defaultQueueKey: string;
  existingQueues: string[];
  savedVideo: SavedVideoPointer | null;
  // The effective source-video quality (channel over global), resolved by the
  // page through resolveSourceVideoQuality: the select starts on it.
  defaultQuality?: SourceVideoQuality;
}) {
  const [queueKey, setQueueKey] = useState(defaultQueueKey);
  const [quality, setQuality] = useState<SourceVideoQuality>(defaultQuality);
  // Set the moment a persist run STARTS from this surface. That run's own
  // router.refresh() lands the saved-video pointer, and the persisted view used
  // to REPLACE this whole subtree — destroying the StreamActionLog below and the
  // log the operator was reading (plans/FACTS.md, "A run log lives in the
  // panel's React state"). One return, two fixed slots, and the run panel stays
  // mounted once it has been used; with no run it is still absent whenever the
  // video is already persisted, so the DOM is unchanged.
  const [ranHere, setRanHere] = useState(false);

  // EVERY CHANNEL GETS THE CONTROLS (release 10 slice N). A youtube-handling
  // channel used to be told persistence was for transcribe handling only —
  // which was true in effect, because its one media pass was skipped whenever a
  // transcript or captions existed. The run now forces that pass (forceMedia),
  // so the button does what it says on every channel.
  return (
    <div className="flex flex-col gap-3">
      {savedVideo ? (
        <PersistedSourceVideo
          slug={slug}
          videoId={videoId}
          savedVideo={savedVideo}
        />
      ) : handling === "youtube" ? (
        <p className="text-sm text-muted-foreground">
          Download this video&apos;s full source container and move it into
          the saved-video store. YouTube&apos;s subtitles are fetched again
          first, as on any re-download; a Whisper transcript is not touched,
          and no audio is extracted beside a transcript.
        </p>
      ) : (
        <p className="text-sm text-muted-foreground">
          Re-fetch this video&apos;s full source container and move it into the
          saved-video store, without disturbing the existing transcript. Use
          this to archive a video that was downloaded audio-only. (Videos in a
          channel&apos;s keep-latest window persist automatically on download.)
        </p>
      )}
      {savedVideo && !ranHere ? null : (
        <StreamActionLog
          key="persist-run"
          // Mounted after a run so its log survives, but NOT actionable once the
          // pointer is on disk: re-running would re-fetch a container the store
          // already has.
          disabled={!!savedVideo}
          trigger={() => {
            setRanHere(true);
            return redownloadToArchiveAction(
              slug,
              videoId,
              queueKey,
              quality,
            );
          }}
          cancelAction={cancelJobAction}
          buttonLabel="Persist source video"
          runningLabel="Archiving…"
          label={`Persist source video for ${videoId}`}
          extraControls={
            <>
              <label className="flex items-center gap-2 text-sm">
                Quality
                <select
                  value={quality}
                  onChange={(e) =>
                    setQuality(e.target.value as SourceVideoQuality)
                  }
                  aria-label="source video quality"
                  className="rounded border border-border bg-card px-2 py-1 text-sm"
                >
                  {SOURCE_VIDEO_QUALITIES.map((q) => (
                    <option key={q} value={q}>
                      {SOURCE_VIDEO_QUALITY_LABELS[q]}
                    </option>
                  ))}
                </select>
              </label>
              <QueueControl
                value={queueKey}
                onChange={setQueueKey}
                defaultQueueKey={defaultQueueKey}
                existingQueues={existingQueues}
                actionLabel={`Persist source video for ${videoId}`}
              />
            </>
          }
        />
      )}
    </div>
  );
}

// The persisted-details view: a sibling of the run panel above, never a
// replacement for it.
function PersistedSourceVideo({
  slug,
  videoId,
  savedVideo,
}: {
  slug: string;
  videoId: string;
  savedVideo: SavedVideoPointer;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <>
      <p className="text-sm text-muted-foreground">
        The source container for this video is persisted to the saved-video
        store, so the Clean-audio sweep can reclaim its <code>audio.*</code>{" "}
        without losing the original. Transcription falls back to it when no
        audio is on disk.
      </p>
      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
        <dt className="text-muted-foreground">File</dt>
        <dd className="font-mono break-all">{savedVideo.file}</dd>
        <dt className="text-muted-foreground">Size</dt>
        <dd className="tabular-nums">{formatBytes(savedVideo.bytes)}</dd>
        <dt className="text-muted-foreground">Stored</dt>
        <dd>{new Date(savedVideo.storedAt).toLocaleString()}</dd>
        {/* WHAT WAS KEPT: the quality asked for and the format yt-dlp took.
            Absent on a pointer written before the quality setting. */}
        {savedVideo.format && (
          <>
            <dt className="text-muted-foreground">Format</dt>
            <dd>
              {savedVideo.format.height
                ? `${savedVideo.format.height}p`
                : "unknown height"}
              {savedVideo.format.vcodec ? ` ${savedVideo.format.vcodec}` : ""}
              {` (${SOURCE_VIDEO_QUALITY_LABELS[savedVideo.format.preset]})`}
            </dd>
          </>
        )}
        {savedVideo.keepReason && (
          <>
            <dt className="text-muted-foreground">Reason</dt>
            <dd>{savedVideo.keepReason}</dd>
          </>
        )}
        {/* WHO ASKED. `keepReason` cannot say it — it stays override/pin so the
            retention prune leaves this container alone — so "why is this 4 GB
            file here" needs its own line. */}
        {savedVideo.origin && (
          <>
            <dt className="text-muted-foreground">Requested by</dt>
            <dd>
              {savedVideo.origin.requestedBy}
              {[savedVideo.origin.manifest, savedVideo.origin.clipId]
                .filter(Boolean)
                .join("/")
                ? ` for ${[savedVideo.origin.manifest, savedVideo.origin.clipId]
                    .filter(Boolean)
                    .join("/")}`
                : ""}
              {savedVideo.origin.reason
                ? ` \u2014 \u201c${savedVideo.origin.reason}\u201d`
                : ""}
            </dd>
          </>
        )}
        {savedVideo.sha256 && (
          <>
            <dt className="text-muted-foreground">sha256</dt>
            <dd className="font-mono text-xs break-all">
              {savedVideo.sha256}
            </dd>
          </>
        )}
        <dt className="text-muted-foreground">Location</dt>
        <dd className="font-mono text-xs break-all">{savedVideo.dir}</dd>
      </dl>
      <p className="text-xs text-muted-foreground">
        Unpersist moves the container back into this video&apos;s data dir
        (where it appears under Files and plays inline) and removes the
        pointer.
      </p>
      <button
        type="button"
        disabled={pending}
        aria-label={`unpersist source video ${videoId}`}
        onClick={() => {
          setError(null);
          startTransition(async () => {
            const res = await unpersistVideoAction(slug, videoId);
            if (!res.ok) setError(res.error);
          });
        }}
        className="self-start px-3 py-2 rounded-md border border-border text-sm font-medium hover:bg-muted disabled:opacity-50"
      >
        {pending ? "Restoring…" : "Unpersist (move back to data dir)"}
      </button>
      {error && (
        <span
          className="text-sm text-destructive"
          aria-label="unpersist error"
        >
          {error}
        </span>
      )}
    </>
  );
}