'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { InfluencerNumber } from '../../hooks/useInfluencerNumbers';
import useDeleteInfluencerNumber from '../../hooks/useDeleteInfluencerNumber';
import { toast } from 'sonner';
import { Trash2 } from 'lucide-react';

interface DeleteInfluencerNumberDialogProps {
  item: InfluencerNumber;
}

export default function DeleteInfluencerNumberDialog({
  item,
}: DeleteInfluencerNumberDialogProps) {
  const [open, setOpen] = useState(false);
  const { mutate, isPending } = useDeleteInfluencerNumber();

  const handleDelete = () => {
    mutate(
      { id: item.id },
      {
        onSuccess: () => {
          toast.success('Influencer number deleted successfully');
          setOpen(false);
        },
        onError: () => {
          toast.error('Failed to delete influencer number');
        },
      }
    );
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" >
          <Trash2 className="size-4 text-destructive" />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Confirm Delete</DialogTitle>
        </DialogHeader>
        <div className="py-4">
          <p className="text-sm text-muted-foreground">
            Are you sure you want to delete the phone number{' '}
            <strong>{item.phone_number}</strong> for influencer{' '}
            <strong>{item.influencer.username}</strong>? This action cannot be
            undone.
          </p>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
            Cancel
          </Button>
          <Button
            variant="destructive"
            onClick={handleDelete}
            disabled={isPending}
          >
            {isPending ? 'Deleting...' : 'Delete'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}