"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function ReasonAction({
  endpoint,
  label,
  variant = "danger",
}: {
  endpoint: string;
  label: string;
  variant?: "danger" | "default";
}) {
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const [reason, setReason] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ reason }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const message = body?.errors?.reason?.[0] ?? body?.message ?? "Action failed.";
      setError(message);
      toast(message, "error");
      return;
    }

    setIsOpen(false);
    setReason("");
    toast(`${label} successful.`, "success");
    router.refresh();
  }

  if (!isOpen) {
    return (
      <Button type="button" variant={variant === "danger" ? "danger" : "secondary"} size="sm" onClick={() => setIsOpen(true)}>
        {label}
      </Button>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex w-full flex-col gap-2 rounded-lg border border-kolabora-neutral-dark/10 p-3">
      <label className="flex flex-col gap-1 text-xs font-medium">
        {label} Reason
        <Textarea required rows={2} size="sm" value={reason} onChange={(e) => setReason(e.target.value)} />
      </label>
      {error && <p className="text-xs text-red-600">{error}</p>}
      <div className="flex gap-2">
        <Button type="submit" size="sm" loading={isSubmitting}>
          Submit
        </Button>
        <Button type="button" variant="secondary" size="sm" onClick={() => setIsOpen(false)} disabled={isSubmitting}>
          Cancel
        </Button>
      </div>
    </form>
  );
}