"use client";

// The video's transcript, read on demand, with the small track switcher when it
// has more than one English track whose words differ (lib/captionTracks.ts).
// Switching is a reader's choice and changes nothing on disk — "Set as
// transcript" in the Transcript source card is how the primary changes.

import { useState, useTransition } from "react";
import type { AltTrack } from "yt-dlp-transcript-common/lib/captionTracks";
import { trackLabels } from "yt-dlp-transcript-common/lib/captionTracks";
import { formatTimestamp } from "yt-dlp-transcript-common/lib/vtt";
import { readTranscriptTracksAction } from "../../videoActions";

export function TranscriptTracksReader({
  slug,
  videoId,
}: {
  slug: string;
  videoId: string;
}) {
  const [pending, startTransition] = useTransition();
  const [tracks, setTracks] = useState<AltTrack[] | null>(null);
  const [shown, setShown] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = () => {
    setError(null);
    startTransition(async () => {
      const res = await readTranscriptTracksAction(slug, videoId);
      if (!res.ok) {
        setError(res.error);
        return;
      }
      setTracks(res.tracks);
      setShown(res.tracks[0]?.track ?? null);
    });
  };

  if (!tracks) {
    return (
      <div className="flex flex-col gap-2">
        <button
          type="button"
          onClick={load}
          disabled={pending}
          aria-label="read transcript"
          className="self-start px-2 py-1 rounded border border-border text-xs hover:bg-muted disabled:opacity-50"
        >
          {pending ? "Reading…" : "Read transcript"}
        </button>
        {error && (
          <span className="text-sm text-destructive" aria-label="read transcript error">
            {error}
          </span>
        )}
      </div>
    );
  }

  const current = tracks.find((t) => t.track === shown) ?? tracks[0];
  return (
    <div className="flex flex-col gap-2">
      {tracks.length > 1 && (
        <label className="inline-flex items-center gap-1.5 self-start text-xs text-muted-foreground">
          <span>Track:</span>
          <select
            aria-label="transcript track"
            value={current.track}
            onChange={(e) => setShown(e.target.value)}
            className="rounded border border-border bg-background px-1 py-0.5 text-xs text-foreground"
          >
            {trackLabels(tracks.map((t) => t.track)).map((label, i) => (
              <option key={tracks[i].track} value={tracks[i].track}>
                {label}
                {i === 0 ? " (default)" : ""}
              </option>
            ))}
          </select>
        </label>
      )}
      {current.cues.length === 0 ? (
        <p className="text-sm text-muted-foreground">No cues in this track.</p>
      ) : (
        <ol
          aria-label="transcript cues"
          className="max-h-96 overflow-y-auto rounded border border-border divide-y divide-border text-sm"
        >
          {current.cues.map((c, i) => (
            <li key={i} className="flex gap-3 px-3 py-1">
              <span className="shrink-0 w-16 font-mono text-xs text-muted-foreground pt-0.5">
                {formatTimestamp(c.start)}
              </span>
              <span className="min-w-0">{c.text}</span>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}