"use client";

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

export function DoNotCleanSection({
  slug,
  videoId,
  doNotClean,
}: {
  slug: string;
  videoId: string;
  doNotClean: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const next = !doNotClean;
  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm text-muted-foreground">
        {doNotClean
          ? "This video is marked “do not clean”. The transcribed-audio and extra-format cleanup jobs will skip it, so its media is preserved for archiving. Reversible — allow cleanup to remove the marker."
          : "Mark this video “do not clean” so the cleanup jobs never delete its audio (e.g. a deleted or members-only upload you want to keep). Reversible at any time."}
      </p>
      <button
        type="button"
        disabled={pending}
        aria-label={
          next
            ? `mark video ${videoId} do not clean`
            : `allow cleanup for video ${videoId}`
        }
        onClick={() => {
          setError(null);
          startTransition(async () => {
            const res = await toggleDoNotCleanAction(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…"
          : doNotClean
            ? "Allow cleanup"
            : "Mark do not clean"}
      </button>
      {error && (
        <span
          className="text-sm text-destructive"
          aria-label="do not clean error"
        >
          {error}
        </span>
      )}
    </div>
  );
}