"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 rename is refused right now, or null. The ACTION asks the same
  // question and refuses with the same sentence — this is the courtesy that
  // says so before the form is filled in, not the guard.
  busyReason?: string | null;
};

export function RenameChannelForm({ 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">
        Renaming moves <code>transcripts/channels/{slug}/</code> (and its saved
        videos, site memberships and scheduled-sync state) to the new slug, and{" "}
        <strong>changes this channel&apos;s public URL</strong> — existing links
        to the old slug will break. Type the current slug to confirm.
      </p>
      <label className="flex flex-col gap-1 text-sm">
        <span className="font-medium">New slug</span>
        <SeededInput
          state={state}
          name="newSlug"
          initial=""
          required
          placeholder="new-channel-slug"
          aria-label="new slug"
          className="rounded border border-border bg-card px-2 py-1 text-sm font-mono max-w-xs"
        />
      </label>
      {busyReason && (
        <p
          role="status"
          aria-label="rename 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 current slug"
          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"
        >
          Rename channel
        </button>
      </div>
      {state?.error && (
        <p className="text-sm text-destructive">{state.error}</p>
      )}
    </form>
  );
}