"use client"
import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { useCreateCategory, useUpdateCategory } from "@/lib/react-query/hooks/services"
import { useTranslations } from "next-intl"

interface AddCategoryModalProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    editData?: { id: string, name: string } | null
}

export function AddCategoryModal({ open, onOpenChange, editData }: AddCategoryModalProps) {
    const t = useTranslations()
    const [categoryName, setCategoryName] = useState("")
    const { mutate: createCategory, isPending: isAdding } = useCreateCategory()
    const { mutate: updateCategory, isPending: isUpdating } = useUpdateCategory()

    const isPending = isAdding || isUpdating

    useEffect(() => {
        if (editData) {
            setCategoryName(editData.name)
        } else {
            setCategoryName("")
        }
    }, [editData, open])

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (!categoryName.trim()) return

        if (editData) {
            updateCategory(
                { id: editData.id, payload: { name: categoryName.trim() } },
                {
                    onSuccess: () => {
                        onOpenChange(false)
                    }
                }
            )
        } else {
            createCategory(
                { name: categoryName.trim() },
                {
                    onSuccess: () => {
                        setCategoryName("")
                        onOpenChange(false)
                    }
                }
            )
        }
    }

    const handleClose = () => {
        if (!editData) setCategoryName("")
        onOpenChange(false)
    }

    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>{editData ? t("services.category.editTitle") : t("services.category.addTitle")}</DialogTitle>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-4 mt-4">
                    <div className="space-y-2">
                        <Label htmlFor="categoryName">{t("services.category.nameLabel")}</Label>
                        <Input
                            id="categoryName"
                            value={categoryName}
                            onChange={(e) => setCategoryName(e.target.value)}
                            placeholder={t("services.category.namePlaceholder")}
                            className="h-12 border-gray-300 focus:border-primary-blue focus:ring-2 focus:ring-primary-blue/20"
                        />
                    </div>
                    <div className="flex justify-end gap-3 pt-4">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={handleClose}
                            disabled={isPending}
                        >
                            {t("common.cancel")}
                        </Button>
                        <Button
                            type="submit"
                            className="bg-primary-gradient text-white"
                            disabled={isPending || !categoryName.trim()}
                        >
                            {isPending
                                ? (editData ? t("services.category.updating") : t("services.category.adding"))
                                : (editData ? t("services.category.updateButton") : t("services.category.addButton"))}
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    )
}

export default AddCategoryModal