"use client"
import React, { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

import { useTranslations } from "next-intl"
import { useAddVacation } from "@/lib/react-query/hooks/stylists"

interface AddVacationModalProps {
    open: boolean
    setOpen: (open: boolean) => void
    stylistId: string
}

export default function AddVacationModal({ open, setOpen, stylistId }: AddVacationModalProps) {
    const tStaff = useTranslations("staff")
    const tCommon = useTranslations("common")
    const addVacation = useAddVacation()

    const [formData, setFormData] = useState({
        startDate: "",
        endDate: "",
        reason: ""
    })

    const handleSubmit = async () => {
        // Basic validation
        if (!formData.startDate || !formData.endDate) {
            return // Should show error
        }

        const payload = {
            start: `${formData.startDate}T00:00:00.000Z`,
            end: `${formData.endDate}T00:00:00.000Z`,
            reason: formData.reason
        }

        try {
            await addVacation.mutateAsync({ id: stylistId, payload })
            setOpen(false)
            // Reset form
            setFormData({
                startDate: "",
                endDate: "",
                reason: ""
            })
        } catch (error) {
            console.error(error)
        }
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="sm:max-w-[500px] bg-white border-0 [&>button]:top-4 [&>button]:right-4 [&>button]:text-white [&>button]:hover:text-gray-200">
                <DialogHeader className="bg-primary-gradient -m-6 mb-0 px-6 py-3 rounded-t-lg">
                    <DialogTitle className="text-white text-lg font-medium">{tStaff("modals.addVacation")}</DialogTitle>
                </DialogHeader>

                <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-2">
                            <Label htmlFor="startDate">{tStaff("vacation.startDate")}</Label>
                            <Input
                                id="startDate"
                                type="date"
                                value={formData.startDate}
                                onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                            />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="endDate">{tStaff("vacation.endDate")}</Label>
                            <Input
                                id="endDate"
                                type="date"
                                value={formData.endDate}
                                onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                            />
                        </div>
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="reason">{tStaff("vacation.reason")}</Label>
                        <Input
                            id="reason"
                            value={formData.reason}
                            onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
                            placeholder={tStaff("vacation.reasonPlaceholder")}
                        />
                    </div>
                </div>

                <DialogFooter className="flex justify-end gap-2 pt-4 border-t">
                    <Button variant="outline" onClick={() => setOpen(false)} className="px-8 border-blue-950">
                        {tCommon("cancel")}
                    </Button>
                    <Button
                        onClick={handleSubmit}
                        disabled={addVacation.isPending}
                        className="px-8 bg-primary-gradient text-white"
                    >
                        {addVacation.isPending ? tCommon("saving") : tCommon("save")}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}