"use client";

import { useState, useTransition } from "react";
import type { SubtitleProvenance } from "yt-dlp-transcript-common/lib/subtitleProvenance";
import {
  setPrimaryTranscriptAction,
} from "../../videoActions";
import { CANONICAL_VTT, TRANSCRIPT_PIN_FILENAME, WHISPER_FILENAME } from "./videoFiles";

const PROVENANCE_LABEL: Record<SubtitleProvenance, string> = {
  asr: "YouTube auto-captions",
  manual: "manual captions",
  unknown: "unknown source",
};

export function TranscriptSourceSection({
  slug,
  videoId,
  vttTracks,
  primaryVtt,
  hasWhisper,
  vttProvenance,
}: {
  slug: string;
  videoId: string;
  vttTracks: string[];
  primaryVtt: string | null;
  hasWhisper: boolean;
  vttProvenance: Record<string, SubtitleProvenance>;
}) {
  const [pending, startTransition] = useTransition();
  const [busyFile, setBusyFile] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const setPrimary = (filename: string) => {
    setError(null);
    setBusyFile(filename);
    startTransition(async () => {
      const res = await setPrimaryTranscriptAction(slug, videoId, filename);
      if (!res.ok) setError(res.error);
      setBusyFile(null);
    });
  };

  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm text-muted-foreground">
        Pick which subtitle track is this video&apos;s primary transcript. The
        chosen track is copied to <code>{CANONICAL_VTT}</code> and pinned there
        with <code>{TRANSCRIPT_PIN_FILENAME}</code>. Unpinned, the transcript
        is the first English track with text, <code>transcript.en-orig.vtt</code>{" "}
        first. Reversible: delete <code>{TRANSCRIPT_PIN_FILENAME}</code> in
        Files to fall back to that pick, or choose another track to switch.
      </p>
      {hasWhisper && (
        <p
          className="text-sm text-warning"
          aria-label="whisper precedence note"
        >
          A whisper transcript (<code>{WHISPER_FILENAME}</code>) is present and
          takes precedence over any VTT when indexing.
        </p>
      )}
      <ul aria-label="transcript tracks" className="flex flex-col gap-2">
        {vttTracks.map((name) => {
          const isPrimary = name === primaryVtt;
          return (
            <li
              key={name}
              aria-label={`transcript track ${name}`}
              className="flex items-center justify-between gap-3 rounded border border-border px-3 py-2"
            >
              <span className="flex items-center gap-2 font-mono text-sm">
                {name}
                {vttProvenance[name] && (
                  <span
                    aria-label={`transcript provenance ${name}`}
                    className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-sans font-medium uppercase tracking-wide text-muted-foreground"
                  >
                    {PROVENANCE_LABEL[vttProvenance[name]]}
                  </span>
                )}
                {isPrimary && (
                  <span
                    aria-label={`primary transcript ${name}`}
                    className="rounded bg-success-soft text-success px-1.5 py-0.5 text-[10px] font-sans font-medium uppercase tracking-wide"
                  >
                    Primary
                  </span>
                )}
              </span>
              {!isPrimary && (
                <button
                  type="button"
                  disabled={pending}
                  aria-label={`set ${name} as primary transcript`}
                  onClick={() => setPrimary(name)}
                  className="shrink-0 px-2 py-1 rounded border border-border text-xs hover:bg-muted disabled:opacity-50"
                >
                  {pending && busyFile === name
                    ? "Setting…"
                    : "Set as transcript"}
                </button>
              )}
            </li>
          );
        })}
      </ul>
      {error && (
        <span
          className="text-sm text-destructive"
          aria-label="set primary transcript error"
        >
          {error}
        </span>
      )}
    </div>
  );
}