"use client";

import { useActionState, useEffect, useState } from "react";
import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { initialState } from "@/server/actions/action-state";
import type { ActionState } from "@/server/actions/action-state";
import { toast } from "sonner";

type Props = {
  userId: string;
  isActive: boolean;
  disabled?: boolean;
  action: (id: string, nextIsActive: boolean, state: ActionState, formData: FormData) => Promise<ActionState>;
};

export function UserStatusDialog({ userId, isActive, disabled, action }: Props) {
  const [open, setOpen] = useState(false);
  const [state, formAction] = useActionState(action.bind(null, userId, !isActive), initialState);

  useEffect(() => {
    if (!state.message) return;
    if (state.success) {
      toast.success(state.message);
      window.setTimeout(() => setOpen(false), 0);
    } else {
      toast.error(state.message);
    }
  }, [state.message, state.success]);

  const label = isActive ? "Desactivar" : "Activar";

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          type="button"
          variant={isActive ? "outline" : "secondary"}
          size="sm"
          disabled={disabled}
          className={isActive ? "text-destructive hover:bg-danger-subtle" : ""}
        >
          <AlertTriangle className="h-4 w-4" />
          {label}
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{label} usuario</DialogTitle>
          <DialogDescription>
            Esta acción cambiará el estado del usuario sin eliminarlo físicamente del sistema.
          </DialogDescription>
        </DialogHeader>
        <form action={formAction} className="space-y-4">
          <p className="text-sm text-muted-foreground">
            ¿Confirmas que deseas {label.toLowerCase()} este usuario?
          </p>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancelar
            </Button>
            <Button type="submit" variant={isActive ? "destructive" : "default"}>
              Confirmar
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}