"use client";

import { useActionState } from "react";
import type { ActionResult } from "../actions";
import { SeededInput } from "../../components/forms/Field";

type Props = {
  slug: string;
  action: (
    prev: ActionResult,
    formData: FormData,
  ) => Promise<ActionResult>;
  // Why the delete is refused right now, or null. Same shape and same reason as
  // the rename form's: the action is the guard, this is the earlier warning.
  busyReason?: string | null;
};

export function DeleteChannelForm({ slug, action, busyReason = null }: Props) {
  const [state, formAction] = useActionState<ActionResult, FormData>(
    action,
    undefined,
  );
  return (
    <form action={formAction} className="flex flex-col gap-2">
      <p className="text-sm text-muted-foreground">
        Deleting will remove <code>transcripts/channels/{slug}/</code> and all
        downloaded videos. Type the slug to confirm.
      </p>
      {busyReason && (
        <p
          role="status"
          aria-label="delete blocked"
          className="text-sm rounded border border-border bg-muted px-3 py-2"
        >
          {busyReason}
        </p>
      )}
      <div className="flex gap-2 items-start">
        <SeededInput
          state={state}
          name="confirmSlug"
          initial=""
          required
          placeholder={slug}
          aria-label="confirm slug to delete"
          className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
        />
        <button
          type="submit"
          disabled={busyReason !== null}
          className="px-3 py-1.5 rounded-md bg-destructive text-destructive-foreground text-sm font-medium hover:bg-destructive/90 disabled:opacity-50"
        >
          Delete channel
        </button>
      </div>
      {state?.error && (
        <p className="text-sm text-destructive">{state.error}</p>
      )}
    </form>
  );
}