'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 { usePathname, useRouter } from 'next/navigation'

const ContactForm = () => {
    const t = useTranslations()
    const [loading, setLoading] = 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>) => {
        setLoading(true)
        try {
            await Contact.post(values)
            router.push(`/thank-you?from=${encodeURIComponent(currentPath)}`)
        } catch (error) {
            console.error("Submission error", error)
        } finally {
            setLoading(false)
        }
    }

    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("Contact us")}</H3>
            <P className='!text-gray-500 !font-[400] !text-[18px] mt-1'>
                {t("Do you have any questions or comments? We're here to help, send us a message and we'll respond within 24 hours")}
            </P>

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

            <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>
                        )}
                    />
                    <div className='mt-4 w-full  gap-4 grid  grid-cols-1 lg:grid-cols-2'>

                        <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>
                            )}
                        />
                    </div>
                    <FormField
                        control={form.control}
                        name="vehicles_number"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel className='!text-[14px] !text-gray-700 !font-[500]'>{t("Fleet size")} *</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' disabled={loading}>{loading ? t("Submitting...") : t("Book an appointment!")}</Button>
                    </div>
                </form>
            </Form>
        </CustomCard>
    )
}

export default ContactForm;