"use client";

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

export function ExcludeTruncatedCheckSection({
  slug,
  videoId,
  excluded,
}: {
  slug: string;
  videoId: string;
  excluded: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const next = !excluded;
  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm text-muted-foreground">
        {excluded
          ? "This video is excluded from the truncated-transcript check. It won't be flagged as incomplete/short even when its transcript covers only part of the runtime. Reversible at any time."
          : "Exclude this video from the truncated-transcript check — useful when the back half legitimately has no speech (so low coverage is expected, not a broken download). Reversible at any time."}
      </p>
      <button
        type="button"
        disabled={pending}
        aria-label={
          next
            ? `exclude video ${videoId} from truncated check`
            : `include video ${videoId} in truncated check`
        }
        onClick={() => {
          setError(null);
          startTransition(async () => {
            const res = await toggleExcludeTruncatedCheckAction(
              slug,
              videoId,
              next,
            );
            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
          ? "Saving…"
          : excluded
            ? "Re-enable check"
            : "Exclude from check"}
      </button>
      {error && (
        <span
          className="text-sm text-destructive"
          aria-label="truncated check error"
        >
          {error}
        </span>
      )}
    </div>
  );
}