'use client';
import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Textarea } from '../ui/textarea';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';

// Form validation schema
const formSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().min(1, 'Email is required'),
  subject: z.string().min(1, 'Subject is required'),
  message: z.string().min(1, 'Description is required')
});

type FormValues = z.infer<typeof formSchema>;

const ContactUs = () => {
  const { Toast, userInfo, setActiveModal } = useGlobalContext();

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: userInfo?.name,
      email: userInfo?.email,
      subject: '',
      message: ''
    }
  });

  const onSubmit = async (data: FormValues) => {
    // Handle form submission
    try {
      const apiRes = await apis.contact.add(data)
      if (apiRes) {
        setActiveModal('')
      }
      Toast.success('Message sent successfully');
    } catch (error) { Toast.error(error); }
  };




  return (
    <div className="mx-auto mt-3 max-w-2xl space-y-8 h-[88vh] overflow-y-scroll no-scrollbar">
      <span className="text-[#000] font-[400] text-[16px]">Our friendly support team is here to help you.</span>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <div className="grid grid-cols-1 gap-4 ">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter your name" {...field} maxLength={15} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter your email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="subject"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Subject</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter subject" {...field} maxLength={25} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="message"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Description</FormLabel>
                  <FormControl>
                    <Textarea rows={4} placeholder="Enter your description" {...field} maxLength={160} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />


          </div>



          <Button
            // type="submit"
            // onClick={()=>router.push(`/auth/restaurant/under-review`)}
            className="w-full"
            variant={'theme'}            >
            Save
          </Button>
        </form>
      </Form>
    </div>
  );
};

// export default BankDetailsForm;

export default ContactUs