"use client";

import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import {
  AUDIO_FORMAT_VALUES,
  type AudioFormat,
} from "yt-dlp-transcript-common/lib/channelConfig";
import { QueueControl } from "../../../../../../components/QueueControl";
import { cancelJobAction } from "../../../../../../jobs/actions";
import {
  transcodeAudioAction,
} from "../../videoActions";
import { Heading } from "./Heading";
import { audioExt, type VideoFile } from "./videoFiles";

export function PerFileTranscodeRow({
  slug,
  videoId,
  file,
  existingQueues,
  channelAudioFormat,
}: {
  slug: string;
  videoId: string;
  file: VideoFile;
  existingQueues: string[];
  channelAudioFormat?: AudioFormat;
}) {
  const ext = audioExt(file.name);
  const transcodeTargets = AUDIO_FORMAT_VALUES.filter((f) => f !== ext);
  const preferredTarget =
    channelAudioFormat && transcodeTargets.includes(channelAudioFormat)
      ? channelAudioFormat
      : transcodeTargets[0] ?? "opus";
  const [target, setTarget] = useState<AudioFormat>(preferredTarget);
  const [transcodeQueue, setTranscodeQueue] = useState("");

  if (transcodeTargets.length === 0) return null;
  return (
    <div className="flex flex-col gap-2 rounded border border-border p-3">
      <Heading
        title={`Transcode ${file.name}`}
        desc="Re-encode this audio file with ffmpeg. The source file is kept; the output is named audio.<format>."
      />
      <label className="flex items-center gap-2 text-sm">
        Target format
        <select
          value={target}
          onChange={(e) => setTarget(e.target.value as AudioFormat)}
          aria-label={`transcode target for ${file.name}`}
          className="rounded border border-border bg-card px-2 py-1 text-sm"
        >
          {transcodeTargets.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
        </select>
      </label>
      <StreamActionLog
        trigger={() =>
          transcodeAudioAction(slug, videoId, file.name, target, transcodeQueue)
        }
        cancelAction={cancelJobAction}
        buttonLabel={`Transcode ${file.name} → ${target}`}
        runningLabel="Transcoding…"
        label={`Transcode ${file.name} to ${target}`}
        extraControls={
          <QueueControl
            value={transcodeQueue}
            onChange={setTranscodeQueue}
            defaultQueueKey=""
            existingQueues={existingQueues}
            actionLabel={`Transcode ${file.name} to ${target}`}
          />
        }
      />
    </div>
  );
}