"use client";

import { useState, useTransition } from "react";
import {
  markVideoUntranscribableAction,
} from "../../videoActions";

export function MarkUntranscribableSection({
  slug,
  videoId,
}: {
  slug: string;
  videoId: string;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm text-muted-foreground">
        Writes an empty transcript.json so the pipeline stops retrying. Removes
        this video from the failed list. Reversible — just delete
        transcript.json.
      </p>
      <button
        type="button"
        disabled={pending}
        aria-label={`mark video ${videoId} untranscribable`}
        onClick={() => {
          setError(null);
          startTransition(async () => {
            const res = await markVideoUntranscribableAction(slug, videoId);
            if (!res.ok) setError(res.error);
          });
        }}
        className="self-start px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "Marking…" : "Mark untranscribable"}
      </button>
      {error && (
        <span
          className="text-sm text-destructive"
          aria-label="mark untranscribable error"
        >
          {error}
        </span>
      )}
    </div>
  );
}