"use client"
import React, { useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useUpdateClient, useGetClientDetails } from "@/lib/react-query/hooks/clients"
import { ClientStatus } from "@/types/clients"
import { useTranslations } from "next-intl"

const errorInputClass = "h-12 border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200 px-2 py-4 text-base"
const normalInputClass = "h-12 border-gray-300 focus:border-primary-blue focus:ring-2 focus:ring-primary-blue/20 px-2 py-4 text-base"

interface EditCustomerModalProps {
    clientId: string
    open: boolean
    setOpen: (open: boolean) => void
}

export default function EditCustomerModal({ clientId, open, setOpen }: EditCustomerModalProps) {
    const updateClientMutation = useUpdateClient()
    const { data: clientDetails, isLoading: detailsLoading } = useGetClientDetails(clientId, open)
    const t = useTranslations()

    const customerSchema = z.object({
        name: z.string().min(2, t("customers.validation.clientNameRequired")),
        email: z.string().email(t("customers.validation.invalidEmail")).optional().or(z.literal("")),
        phone: z.string().optional(),
        status: z.nativeEnum(ClientStatus),
        description: z.string().optional()
    })

    type CustomerFormData = z.infer<typeof customerSchema>

    const form = useForm<CustomerFormData>({
        resolver: zodResolver(customerSchema),
        defaultValues: {
            name: "",
            email: "",
            phone: "",
            status: ClientStatus.NEW,
            description: ""
        }
    })

    // Pre-fill form when client data is loaded
    useEffect(() => {
        if (clientDetails) {
            form.reset({
                name: clientDetails.name || "",
                email: clientDetails.email || "",
                phone: clientDetails.phone || "",
                status: clientDetails.status as ClientStatus || ClientStatus.NEW,
                description: clientDetails.description || ""
            })
        }
    }, [clientDetails, form])

    function onSubmit(data: CustomerFormData) {
        updateClientMutation.mutate({
            id: clientId,
            payload: {
                ...data,
                phone: clientDetails?.phone || "",
                status: data.status
            }
        }, {
            onSuccess: () => {
                setOpen(false)
            }
        })
    }

    if (detailsLoading && open) {
        return (
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="sm:max-w-[600px] bg-white border-0 flex items-center justify-center min-h-[200px]">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
                </DialogContent>
            </Dialog>
        )
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="sm:max-w-[600px] bg-white border-0 max-h-[90vh] overflow-y-auto [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]">
                <DialogHeader className="bg-primary-gradient -m-6 mb-0 px-6 py-3 rounded-t-lg">
                    <DialogTitle className="text-white text-lg font-medium">{t("customers.modals.editClient")}</DialogTitle>
                </DialogHeader>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="overflow-y-auto px-1 mt-6 max-h-[70vh]">
                        <div className="space-y-4">
                            <div className="group">
                                <FormField
                                    name="name"
                                    control={form.control}
                                    render={({ field, fieldState }) => (
                                        <FormItem>
                                            <FormLabel className="group-focus-within:text-primary-blue font-semibold">{t("customers.form.clientName")}</FormLabel>
                                            <FormControl>
                                                <Input
                                                    className={fieldState.invalid ? errorInputClass : normalInputClass + " group w-full"}
                                                    placeholder={t("customers.form.placeholders.clientName")}
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="group">
                                    <FormField
                                        name="email"
                                        control={form.control}
                                        render={({ field, fieldState }) => (
                                            <FormItem>
                                                <FormLabel className="group-focus-within:text-primary-blue font-semibold">{t("customers.form.email")}</FormLabel>
                                                <FormControl>
                                                    <Input
                                                        type="email"
                                                        className={fieldState.invalid ? errorInputClass : normalInputClass + " group w-full"}
                                                        placeholder={t("customers.form.placeholders.email")}
                                                        {...field}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>
                                <div className="group">
                                    <FormField
                                        name="phone"
                                        control={form.control}
                                        render={({ field, fieldState }) => (
                                            <FormItem>
                                                <FormLabel className="group-focus-within:text-primary-blue font-semibold">{t("customers.form.phone")}</FormLabel>
                                                <FormControl>
                                                    <Input
                                                        type="tel"
                                                        disabled
                                                        className={fieldState.invalid ? errorInputClass : normalInputClass + " group w-full bg-gray-50 cursor-not-allowed"}
                                                        placeholder={t("customers.form.placeholders.phone")}
                                                        {...field}
                                                    />
                                                </FormControl>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                </div>
                            </div>

                            <div className="group">
                                <FormField
                                    name="status"
                                    control={form.control}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel className="group-focus-within:text-primary-blue font-semibold">{t("customers.form.status")}</FormLabel>
                                            <Select onValueChange={field.onChange} value={field.value}>
                                                <FormControl>
                                                    <SelectTrigger className="w-full h-12 border-gray-300 focus:border-primary-blue focus:ring-2 focus:ring-primary-blue/20 px-4 py-3 text-base">
                                                        <SelectValue placeholder="Select Status" />
                                                    </SelectTrigger>
                                                </FormControl>
                                                <SelectContent className="bg-white">
                                                    <SelectItem value={ClientStatus.NEW}>{t("customers.customerItem.status.new")}</SelectItem>
                                                    <SelectItem value={ClientStatus.ACTIVE}>{t("customers.customerItem.status.active")}</SelectItem>
                                                    <SelectItem value={ClientStatus.INACTIVE}>{t("customers.customerItem.status.inactive")}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <div className="group">
                                <FormField
                                    name="description"
                                    control={form.control}
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel className="group-focus-within:text-primary-blue font-semibold">{t("customers.form.description")}</FormLabel>
                                            <FormControl>
                                                <Textarea
                                                    className="min-h-32 border-gray-300 focus:border-primary-blue focus:ring-2 focus:ring-primary-blue/20 px-4 py-3 text-base"
                                                    placeholder={t("customers.form.placeholders.description")}
                                                    {...field}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                            </div>

                            <DialogFooter className="flex justify-end w-full pt-4">
                                <div className="flex gap-2">
                                    <Button
                                        variant="outline"
                                        type="button"
                                        onClick={() => setOpen(false)}
                                        className="flex-1 bg-transparent border-blue-950 text-blue-950 px-8"
                                    >
                                        {t("customers.form.buttons.cancel")}
                                    </Button>
                                    <Button type="submit" disabled={updateClientMutation.isPending} className="flex-1 bg-primary-gradient text-white px-8">
                                        {updateClientMutation.isPending ? t("customers.form.buttons.saving") : t("customers.form.buttons.saveChanges")}
                                    </Button>
                                </div>
                            </DialogFooter>
                        </div>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    )
}