'use client';

import { useRouter } from 'next/navigation';
import { deletePackage } from '@/network/apis/dashboard/packages/packages.apis.';
import { Package } from '@/network/apis/dashboard/packages/type';
import { RiCheckboxCircleFill, RiErrorWarningFill } from '@remixicon/react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';

interface PackageDeleteDialogProps {
  open: boolean;
  closeDialog: () => void;
  packageItem: Package | null;
}

const PackageDeleteDialog = ({
  open,
  closeDialog,
  packageItem,
}: PackageDeleteDialogProps) => {
  const router = useRouter();
  const { mutate: deletePkg } = useMutation({
    mutationFn: (id: number) => deletePackage({ id }),

    onSuccess: () => {
      const message = 'Package deleted successfully.';

      toast.custom(
        () => (
          <Alert variant="mono" icon="success">
            <AlertIcon>
              <RiCheckboxCircleFill />
            </AlertIcon>
            <AlertTitle>{message}</AlertTitle>
          </Alert>
        ),
        {
          position: 'top-center',
        },
      );

      router.refresh();
      closeDialog();
    },
    onError: (error: Error) => {
      const message = error.message;
      toast.custom(
        () => (
          <Alert variant="mono" icon="destructive">
            <AlertIcon>
              <RiErrorWarningFill />
            </AlertIcon>
            <AlertTitle>{message}</AlertTitle>
          </Alert>
        ),
        {
          position: 'top-center',
        },
      );
    },
  });

  return (
    <Dialog open={open} onOpenChange={closeDialog}>
      <DialogContent close={false}>
        <DialogHeader>
          <DialogTitle>Confirm Delete</DialogTitle>
        </DialogHeader>
        <div>
          <p className="text-sm text-accent-foreground mb-2.5">
            Deleting
            <strong className="text-foreground px-1">
              {packageItem?.name}
            </strong>{' '}
            will permanently remove the package and all related data. This
            action cannot be undone.
          </p>

          <DialogFooter>
            <Button variant="outline" onClick={closeDialog}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              type="button"
              onClick={() => packageItem?.id && deletePkg(packageItem.id)}
            >
              {/* {mutation.status === 'pending' && (
                    <Spinner className="animate-spin" />
                  )} */}
              Delete
            </Button>
          </DialogFooter>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default PackageDeleteDialog;