"use client";

import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import type { ChannelHandling } from "yt-dlp-transcript-common/lib/channelConfig";
import {
  DOWNLOAD_FORMAT_LABELS,
  DOWNLOAD_FORMAT_PRESETS,
} from "yt-dlp-transcript-common/ytdlp/downloadFormat";
import { QueueControl } from "../../../../../../components/QueueControl";
import { cancelJobAction } from "../../../../../../jobs/actions";
import {
  downloadVideoPipelineAction,
  whisperVideoAction,
} from "../../videoActions";

type DownloadMode = "pipeline" | "whisper";

export function RedownloadSection({
  slug,
  videoId,
  handling,
  defaultQueueKey,
  existingQueues,
  noAudio,
}: {
  slug: string;
  videoId: string;
  handling: ChannelHandling;
  defaultQueueKey: string;
  existingQueues: string[];
  noAudio: boolean;
}) {
  const [mode, setMode] = useState<DownloadMode>("pipeline");
  const [queueKey, setQueueKey] = useState(defaultQueueKey);
  // "" = inherit the channel/global default; otherwise a DownloadFormatPreset.
  const [downloadFormat, setDownloadFormat] = useState("");

  const desc = (() => {
    if (mode === "whisper") {
      return noAudio
        ? "Download the audio and run whisper-cli, in one job. Skips any VTT attempt."
        : "Run whisper-cli on this video's audio. Skips the download phase since audio is already on disk.";
    }
    if (handling === "youtube") {
      return noAudio
        ? "Try the VTT download first; fall back to audio + whisper if no subs are available."
        : "Re-run the pipeline: try VTT, then fall back to audio + whisper if needed.";
    }
    return noAudio
      ? "Download audio (and run any channel-configured audio checks)."
      : "Re-run the download pipeline for this video.";
  })();

  const verb = mode === "whisper"
    ? "Audio + Whisper"
    : noAudio
      ? "Run download pipeline"
      : "Re-run download pipeline";
  const runningLabel = mode === "whisper"
    ? "Transcribing…"
    : "Running pipeline…";
  const actionLabel = `${verb} for ${videoId}`;
  const trigger = mode === "whisper"
    ? () => whisperVideoAction(slug, videoId, queueKey)
    : () =>
        downloadVideoPipelineAction(
          slug,
          videoId,
          queueKey,
          downloadFormat || undefined,
        );

  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm text-muted-foreground">{desc}</p>
      <label className="flex items-center gap-2 text-sm">
        Mode
        <select
          value={mode}
          onChange={(e) => setMode(e.target.value as DownloadMode)}
          aria-label="download mode"
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          <option value="pipeline">Designated pipeline</option>
          <option value="whisper">Audio + Whisper (skip pipeline)</option>
        </select>
      </label>
      {mode === "pipeline" && (
        <label className="flex items-center gap-2 text-sm">
          Format
          <select
            value={downloadFormat}
            onChange={(e) => setDownloadFormat(e.target.value)}
            aria-label="download format"
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            <option value="">Inherit (channel / global)</option>
            {DOWNLOAD_FORMAT_PRESETS.map((p) => (
              <option key={p} value={p}>
                {DOWNLOAD_FORMAT_LABELS[p]}
              </option>
            ))}
          </select>
        </label>
      )}
      <StreamActionLog
        trigger={trigger}
        cancelAction={cancelJobAction}
        buttonLabel={verb}
        runningLabel={runningLabel}
        label={actionLabel}
        extraControls={
          <QueueControl
            value={queueKey}
            onChange={setQueueKey}
            defaultQueueKey={defaultQueueKey}
            existingQueues={existingQueues}
            actionLabel={actionLabel}
          />
        }
      />
    </div>
  );
}