'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { useFieldArray, useForm } from 'react-hook-form'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Toaster, toast } from 'sonner'
import { useRouter } from 'next/navigation'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

import { cn } from '@/lib/utils'

// Define form schema
const formSchema = z.object({
  fullName: z.string().min(2, 'Please enter your full name.'),
  email: z.string().email('Invalid email address.'),
  phone: z.string().min(10, 'Please enter valid phone number.'),

  destination: z.string(),

  date: z.string(),
  level: z.string(),
})

export type ContactFormType = z.infer<typeof formSchema>

export default function ContactUsForm() {
  const router = useRouter()

  const form = useForm<ContactFormType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: '',
      email: '',
      phone: '',
    },
  })
  const {
    control,
    handleSubmit,
    formState: { isSubmitting },
  } = form

  const onSubmit = async (data: ContactFormType) => {
    try {
      console.log(data)

      toast.success('Message sent successfully!')
      form.reset({})
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <div
      className={cn('grid place-items-center', {
        'pointer-events-none opacity-40': isSubmitting,
      })}
    >
      <Form {...form}>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="grid grid-cols-1 md:grid-cols-2 gap-7 w-full p-2 "
        >
          {/* Full Name */}
          <FormField
            control={form.control}
            name="fullName"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Full Name*</FormLabel>
                <Input
                  placeholder="Bir Bahadur"
                  {...field}
                  className="p-2 placeholder-gray-400 placeholder:text-xs "
                />
                {formState.errors.fullName && (
                  <FormMessage>{formState.errors.fullName.message}</FormMessage>
                )}
              </FormItem>
            )}
          />
          {/* Phone */}
          <FormField
            control={form.control}
            name="phone"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Phone*</FormLabel>
                <Input
                  placeholder="9868658057"
                  {...field}
                  type="tel"
                  className="p-2 placeholder-gray-400 placeholder:text-xs "
                />
                {formState.errors.phone && (
                  <FormMessage>{formState.errors.phone.message}</FormMessage>
                )}
              </FormItem>
            )}
          />
          {/* Email */}
          <FormField
            control={form.control}
            name="email"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <Input
                  placeholder="example@gmail.com"
                  {...field}
                  type="email"
                  className="p-2 placeholder-gray-400 placeholder:text-xs "
                />
                {formState.errors.email && (
                  <FormMessage>{formState.errors.email.message}</FormMessage>
                )}
              </FormItem>
            )}
          />
          {/* study destination */}
          <FormField
            control={form.control}
            name="destination"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Your preferred study destination.*</FormLabel>
                <Select onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="Choose one " />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="New Zealand">New Zealand</SelectItem>
                    <SelectItem value="UK">UK</SelectItem>
                    <SelectItem value="Canada">Canada</SelectItem>
                    <SelectItem value="USA">USA</SelectItem>
                    <SelectItem value="Australia">Australia</SelectItem>
                    <SelectItem value="South Korea">South Korea</SelectItem>
                    <SelectItem value="Japan">Japan</SelectItem>
                    <SelectItem value="Dubai">Dubai</SelectItem>
                    <SelectItem value="Europe">Europe</SelectItem>
                  </SelectContent>
                </Select>
                {formState.errors.destination && (
                  <FormMessage>
                    {formState.errors.destination.message}
                  </FormMessage>
                )}
              </FormItem>
            )}
          />
          {/* study destination */}
          <FormField
            control={form.control}
            name="date"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Preferred Study Year*</FormLabel>
                <Select onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="Choose one " />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2024">2024</SelectItem>
                    <SelectItem value="2025">2025</SelectItem>
                    <SelectItem value="2026">2026</SelectItem>
                  </SelectContent>
                </Select>
                {formState.errors.date && (
                  <FormMessage>{formState.errors.date.message}</FormMessage>
                )}
              </FormItem>
            )}
          />

          {/* study destination */}
          <FormField
            control={form.control}
            name="level"
            render={({ field, formState }) => (
              <FormItem>
                <FormLabel>Preferred Study Level*</FormLabel>
                <Select onValueChange={field.onChange}>
                  <SelectTrigger>
                    <SelectValue placeholder="Choose one " />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Bachelor">Bachelor</SelectItem>
                    <SelectItem value="Master">Master</SelectItem>
                    <SelectItem value="PHD">PHD</SelectItem>
                  </SelectContent>
                </Select>
                {formState.errors.level && (
                  <FormMessage>{formState.errors.level.message}</FormMessage>
                )}
              </FormItem>
            )}
          />
          {/* Submit Button */}
          <div className="md:col-span-2 ">
            <Button className="bg-bblue" type="submit">
              Submit Details
            </Button>
          </div>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}