"use client"

import { Loader2Icon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/src/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/src/components/ui/dialog"
import { useDeleteCategoryMutation } from "@/src/state/menu"
import type { MenuCategory } from "@/src/state/menu"
import { extractErrorMessage } from "../utils"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  category: MenuCategory | null
}

export function DeleteCategoryDialog({ open, onOpenChange, category }: Props) {
  const [deleteCategory, { isLoading }] = useDeleteCategoryMutation()

  const handleDelete = async () => {
    if (!category) return
    try {
      await deleteCategory(category.id).unwrap()
      toast.success("Catégorie supprimée")
      onOpenChange(false)
    } catch (err) {
      toast.error(extractErrorMessage(err, "Erreur lors de la suppression"))
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[534px]">
        <DialogHeader>
          <DialogTitle>Supprimer la catégorie</DialogTitle>
          <DialogDescription>
            Êtes-vous sûr de vouloir supprimer{" "}
            <span className="font-medium text-foreground">&quot;{category?.name}&quot;</span> ?
            Cette action est irréversible.
          </DialogDescription>
        </DialogHeader>

        <div className="flex justify-end gap-2 pt-2">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
            Annuler
          </Button>
          <Button variant="destructive" onClick={handleDelete} disabled={isLoading}>
            {isLoading && <Loader2Icon className="animate-spin" />}
            Supprimer
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}