import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/shared/common/ui/alert-dialog";
import { Button } from "@/shared/common/ui/button";
import { usePositions } from "@/user-management/hooks/usePosition";
import { Loader2, AlertTriangle } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { toast } from "sonner";

interface DeleteDepartmentDialogProps {
  departmentName: string;
  departmentId: string;
  isOpen: boolean;
  onClose: () => void;
}

export const DeleteDepartmentDialog: React.FC<DeleteDepartmentDialogProps> = ({
  departmentName,
  departmentId,
  isOpen,
  onClose,
}) => {
  const { t } = useTranslation();
  const [isDeleting, setIsDeleting] = useState(false);
  const { deletePosition: deletePositionMutation, isDeleting: isMutationDeleting } = usePositions();

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deletePositionMutation({
        id: departmentId,
        successCallback: () => {
          toast.success(t("department.deletedSuccessfully", "Department removed successfully"));
          onClose();
        },
      });
    } catch (error: any) {
      // Handle error - the mutation will already show toast via hook
      // Just close loading state
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <AlertDialog open={isOpen} onOpenChange={onClose}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 mt-0.5">
              <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
            </div>
            <div className="flex-1">
              <AlertDialogTitle className="text-lg font-semibold text-red-900 dark:text-red-100">
                {t("department.deleteConfirm", "Delete Department?")}
              </AlertDialogTitle>
              <AlertDialogDescription className="mt-2 text-sm text-gray-700 dark:text-gray-300">
                This will permanently delete <strong className="font-semibold text-gray-900 dark:text-gray-100">{departmentName}</strong> and
                all its sub-items. This action cannot be undone.
              </AlertDialogDescription>
            </div>
          </div>
        </AlertDialogHeader>

        <div className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50 rounded-lg p-3 my-2">
          <p className="text-sm text-red-800 dark:text-red-200">
            {t("department.deleteWarning", "Make sure all employees have been reassigned before deleting.")}
          </p>
        </div>

        <AlertDialogFooter className="gap-2">
          <AlertDialogCancel disabled={isDeleting || isMutationDeleting}>
            {t("common.Cancel", "Cancel")}
          </AlertDialogCancel>
          <Button
            variant="destructive"
            onClick={handleDelete}
            disabled={isDeleting || isMutationDeleting}
            className="gap-2"
          >
            {(isDeleting || isMutationDeleting) && <Loader2 className="h-4 w-4 animate-spin" />}
            {isDeleting || isMutationDeleting ? t("common.deleting", "Deleting...") : t("department.delete", "Delete")}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};