'use client';

import { useRouter } from 'next/navigation';
import axios from '@/network/axios';
import { apis } from '@/utils/apis/apis';
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';

export type CustomerRegistration = {
  id: number;
  company_type_id: number;
  company_type_name: string;
  collaboration_goal_id: number;
  collaboration_goal_name: string;
  collaboration_manager_id: number;
  collaboration_manager_name: string;
  start_preference_id: number;
  start_preference_name: string;
  annual_revenue_system_id: number;
  annual_revenue_system_name: string;
  full_name: string;
  company_name: string;
  company_website: string;
  email: string;
  mobile: string;
  country_id: number;
  country_name: string;
};

interface CustomerDeleteDialogProps {
  open: boolean;
  closeDialog: () => void;
  customer: CustomerRegistration | null;
}

const CustomerDeleteDialog = ({
  open,
  closeDialog,
  customer,
}: CustomerDeleteDialogProps) => {
  const router = useRouter();

  const { mutate: deleteCustomer, isPending } = useMutation({
    mutationFn: async (id: number) => {
      await axios.post(
        apis.DASHBOARD.CUSTOMERS_REGISTRATIONS.DELETE(String(id)),
      );
    },
    onSuccess: () => {
      const message = 'Customer registration deleted successfully.';

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

      closeDialog();
      router.replace('/customers-registrations');
    },
    onError: (error: Error) => {
      const message = error.message || 'Failed to delete customer';

      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">
              {customer?.full_name}
            </strong>
            from registrations will permanently remove this record. This action
            cannot be undone.
          </p>

          <DialogFooter>
            <Button variant="outline" onClick={closeDialog}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              type="button"
              disabled={isPending}
              onClick={() => customer?.id && deleteCustomer(customer.id)}
            >
              {isPending ? 'Deleting…' : 'Delete'}
            </Button>
          </DialogFooter>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default CustomerDeleteDialog;