'use client';

import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { useDeleteTrustedClientMutation } from '@/store/slice/trustedClientApi';
import { toast } from 'sonner';

interface DeleteClientDialogProps {
	isOpen: boolean;
	setIsOpen: (open: boolean) => void;
	client: {
		id: string;
		name: string;
	};
}

export const DeleteClientDialog = ({
	isOpen,
	setIsOpen,
	client,
}: DeleteClientDialogProps) => {
	const [deleteClient, { isLoading }] = useDeleteTrustedClientMutation();

	const handleClose = () => {
		if (!isLoading) {
			setIsOpen(false);
		}
	};

	const handleDelete = async () => {
		try {
			await deleteClient(client.id);

			// Success toast with Sonner
			toast.success('Client deleted successfully', {
				description: `${client?.name} has been removed from your clients.`,
				position: 'top-right',
				duration: 4000,
				className:
					'bg-[#1F1B16] border border-[#CBB26A]/15 text-[#E5D9C6] shadow-lg gold-glow',
				descriptionClassName: 'text-[#B8B2A8] text-sm',
				icon: '✅',
			});

			handleClose();
		} catch (error) {
			console.log(error);
			// Error toast with Sonner
			toast.error('Failed to delete client', {
				description: 'Please try again or contact support.',
				position: 'top-right',
				duration: 4000,
				className:
					'bg-[#1F1B16] border border-[#CD3232]/30 text-[#E5D9C6] shadow-lg',
				descriptionClassName: 'text-[#B8B2A8] text-sm',
				icon: '❌',
			});
		}
	};

	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={handleClose}
			header={
				<div className="w-full space-y-3">
					<h2 className="font-playfair text-xl font-bold text-[#E5D9C6]">
						Delete Client
					</h2>
					<div className="luxury-line w-12" />
					<div className="space-y-2">
						<p className="text-sm text-[#B8B2A8]">
							Are you sure you want to delete{' '}
							<span className="text-[#CBB26A] font-medium">
								{client?.name}
							</span>
							?
						</p>
						<div className="text-xs text-[#CD3232]/90 bg-[#CD3232]/10 p-3 rounded-lg border border-[#CD3232]/30">
							<p className="flex items-start gap-2">
								<span>⚠️</span>
								<span>
									This action cannot be undone. All associated data,
									contracts, and history will be permanently deleted.
								</span>
							</p>
						</div>
					</div>
				</div>
			}
			classNameContent="m-0 p-0 max-w-[520px] rounded-xl bg-[#1F1B16] border border-[#CBB26A]/15 shadow-2xl gold-glow max-h-[90vh] overflow-y-auto scrollbar-hide"
			classNameBody="p-6 sm:p-8"
			classNameCloseBtn="absolute top-4 right-4 text-[#B8B2A8] hover:text-[#CBB26A] transition-colors duration-200 z-10"
		>
			<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-end">
				<button
					onClick={handleClose}
					disabled={isLoading}
					className="px-5 py-2.5 rounded-lg border border-[#CBB26A]/20 bg-transparent text-[#B8B2A8] text-sm font-medium hover:bg-[#CBB26A]/5 hover:border-[#CBB26A]/40 hover:text-[#E5D9C6] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed order-2 sm:order-1 flex-1 sm:flex-none"
				>
					Cancel
				</button>
				<button
					onClick={handleDelete}
					disabled={isLoading}
					className="px-5 py-2.5 rounded-lg bg-linear-to-r from-[#CD3232] to-[#A52626] text-white text-sm font-medium hover:from-[#E53E3E] hover:to-[#B52B2B] disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 shadow-lg shadow-[#CD3232]/20 order-1 sm:order-2 flex-1 sm:flex-none min-w-[120px]"
				>
					{isLoading ? (
						<div className="flex items-center justify-center gap-2">
							<svg
								className="animate-spin h-4 w-4 text-white"
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
							>
								<circle
									className="opacity-25"
									cx="12"
									cy="12"
									r="10"
									stroke="currentColor"
									strokeWidth="4"
								></circle>
								<path
									className="opacity-75"
									fill="currentColor"
									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
								></path>
							</svg>
							<span>Deleting...</span>
						</div>
					) : (
						'Delete Client'
					)}
				</button>
			</div>
		</CustomResponsiveDialog>
	);
};