'use client'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { H3, P } from '@/components/ui/typography'
import React, { useState } from 'react'
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { useTranslations } from 'next-intl'

import { Contact } from '@/models/Contact'
import { CheckCircle } from 'lucide-react'
import { usePathname,useRouter } from 'next/navigation'

const ContactForm = () => {
    const t = useTranslations()
    const [submitted, setSubmitted] = useState(false)
    const router = useRouter()
    const currentPath = usePathname()
    const formSchema = z.object({
        name: z.string().min(2, {
            message: t("This field is required"),
        }),
        company_name: z.string().min(2, {
            message: t("This field is required"),
        }),
        email: z.string().email({
            message: t("This field is required"),
        }),
        phone: z.string()
            .min(10, {
                message: t("Phone must be 10 digits"),
            })
            .max(10, {
                message: t("Phone must be 10 digits"),
            })
            .regex(/^\d+$/, {
                message: t("Phone must be 10 digits"),
            }),
        vehicles_number: z.number().min(1, {
            message: t("This field is required"),
        })
    })

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            name: "",
            company_name: "",
            email: "",
            phone: "",
            vehicles_number: NaN
        },
    })

    const onSubmit = async (values: z.infer<typeof formSchema>) => {

        try {
            await Contact.post(values)
            router.push(`/thank-you?from=${encodeURIComponent(currentPath)}`)
            setSubmitted(true)
            form.reset()
        } catch (error) {
            console.error("Submission error", error)
        }
    }
    return (
        <CustomCard className='px-[24px] py-[24px] lg:px-[32px] lg:py-[28px] !border-none shadow-lg shadow-black/5'>
            <H3 className='!text-gray-700 !font-[600]'>{t("Want to chat? Contact us!")}</H3>
            <P className='!text-gray-500 !font-[400] !text-[18px] mt-1'>
                {t("Do you have any questions or comments? We are here to help, Send us a message and we will respond within 24 hours")}
            </P>

            <div className='my-4 w-full h-[1px] bg-gray-200' />

            {submitted && (
                <div className="flex items-center gap-2 bg-green-100 border border-green-300 text-green-800 px-4 py-3 rounded-md mb-4">
                    <CheckCircle className="w-5 h-5 text-green-600" />
                    <p className="text-sm font-medium">
                        {t("Your message has been successfully sent!")}
                    </p>
                </div>
            )}

            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                    <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>{t("Full name")} *</FormLabel>
                                <FormControl>
                                    <Input placeholder={t("Full name")} {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="company_name"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>{t("Company")} *</FormLabel>
                                <FormControl>
                                    <Input placeholder={t("Company")} {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>Email *</FormLabel>
                                <FormControl>
                                    <Input placeholder="Email" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="phone"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>{t("Phone")} *</FormLabel>
                                <FormControl>
                                    <Input placeholder={t("Phone")} {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="vehicles_number"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>{t("Number of vehicles")} *</FormLabel>
                                <Select onValueChange={(val) => field.onChange(parseInt(val))} defaultValue={String(field.value)}>
                                    <FormControl>
                                        <SelectTrigger className="w-full">
                                            <SelectValue placeholder="0" />
                                        </SelectTrigger>
                                    </FormControl>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="10">1-10</SelectItem>
                                            <SelectItem value="50">10-50</SelectItem>
                                            <SelectItem value="100">50-100</SelectItem>
                                            <SelectItem value="200">100-200</SelectItem>
                                            <SelectItem value="201">+200</SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <div className='mt-1'>
                        <Button url='' className='h-11 w-full' type='submit'>{t("Book an appointment!")}</Button>
                    </div>
                </form>
            </Form>
        </CustomCard>
    )
}

export default ContactForm