import { Button } from '@/components/ui/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { deleteRequest } from '@/data/request/delete-request';
import { TrashIcon } from '@phosphor-icons/react';
import { useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

type ConfirmDeleteButtonProps = {
  url: string;
  onSuccess?: () => void;

  title?: string;
  description?: string;

  confirmText?: string;
  cancelText?: string;
  disabled?: boolean;
  buttonVariant?: 'destructive' | 'outline' | 'ghostDestructive';
  buttonSize?: 'sm' | 'default' | 'lg';
};

export default function ConfirmDeleteButton({
  url,
  onSuccess,

  title = 'Are you sure?',
  description = 'This action cannot be undone.',
  confirmText = 'Yes, Delete',
  cancelText = 'Cancel',
  disabled = false,
  buttonVariant = 'ghostDestructive',
  buttonSize = 'default',
}: ConfirmDeleteButtonProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const handleDelete = () => {
    startTransition(async () => {
      const res = await deleteRequest(url);

      if (res?.success) {
        toast.success(t(res?.message));
        onSuccess?.();
        setIsOpen(false);
      }
    });
  };

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button variant={buttonVariant} size={buttonSize} disabled={disabled}>
          <TrashIcon weight="bold" className="size-4" />
        </Button>
      </PopoverTrigger>

      <PopoverContent className="w-80">
        <div className="space-y-2">
          <h4 className="leading-none font-medium">{t(title)}</h4>
          <p className="text-sm text-muted-foreground">{t(description)}</p>
        </div>

        <div className="mt-4 flex items-center gap-2">
          <Button
            variant="destructive"
            size="sm"
            loading={isPending}
            onClick={handleDelete}
            className="w-full"
          >
            {confirmText}
          </Button>

          <Button
            variant="outline"
            size="sm"
            className="w-full"
            onClick={() => setIsOpen(false)}
          >
            {cancelText}
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}