'use client';
import React from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { Text } from '@/components/ui/text';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useForm } from 'react-hook-form';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const frameworksList = [
  { value: 'Male', label: 'Male' },
  { value: 'Female', label: 'Female' },
];
const countryList = [
  { value: 'India', label: 'India' },
  { value: 'Afghanistan', label: 'Afghanistan' },
  { value: 'Australia', label: 'Australia' },
  { value: 'New Zealand', label: 'New Zealand' },
  { value: 'Germany', label: 'Germany' },
];
const stateList = [
  { value: 'Haryana', label: 'Haryana' },
  { value: 'Punjab', label: 'Punjab' },
  { value: 'Gujarat Zealand', label: 'Gujarat' },
  { value: 'Rajasthan', label: 'Rajasthan' },
];
const cityList = [
  { value: 'Amritsar', label: 'Amritsar' },
  { value: 'Ludhiana', label: 'Ludhiana' },
  { value: 'Jalandhar', label: 'Jalandhar' },
  { value: 'Mohali', label: 'Mohali' },
];
const AddNewEmployeeSchema = z.object({
  Employee_Code: z
    .string()
    .min(1, 'Employee Code is required')
    .max(10, 'Maximum 10 characters allowed'),
  First_Name: z
    .string()
    .min(1, 'First Name is required')
    .max(50, 'Maximum 50 characters allowed'),
  Last_Name: z
    .string()
    .min(1, 'Last Name is required')
    .max(50, 'Maximum 50 characters allowed'),
  Gender: z.string().min(1, 'Gender is required'),
  DOB: z
    .string()
    .min(1, 'Date of Birth is required')
    .refine((val) => /\d{4}-\d{2}-\d{2}/.test(val), {
      message: 'DOB must be in YYYY-MM-DD format',
    }),
  Personal_Email: z
    .string()
    .min(1, 'Email is required')
    .email('Invalid email format'),
  Personal_Phone_Code: z.string().min(1, 'Phone Code is required'),
  Personal_Phone: z
    .string()
    .min(7, 'Phone number must be at least 7 digits')
    .max(15, 'Phone number must be less than 15 digits')
    .regex(/^\d+$/, 'Phone number must contain only digits'),
  Country_AddEmp: z.string().min(1, 'Country is required'),
  State_AddEmp: z.string().min(1, 'State is required'),
  City_AddEmp: z.string().min(1, 'City is required'),
});
type AddMenuProps = {
  triggerIcon?: React.ReactNode;
};
const AddMenu: React.FC<AddMenuProps> = ({ triggerIcon }) => {
  const defaultValues = {
    Employee_Code: '',
    First_Name: '',
    Last_Name: '',
    Gender: '',
    DOB: '',
    Personal_Email: '',
    Personal_Phone_Code: '',
    Personal_Phone: '',
    Country_AddEmp: '',
    State_AddEmp: '',
    City_AddEmp: '',
  };
  const AddNewEmployee = useForm<z.infer<typeof AddNewEmployeeSchema>>({
    resolver: zodResolver(AddNewEmployeeSchema),
    defaultValues, // ✅   Now it is correctly referenced
  });
  const AddNewEmployeeSubmit = async (
    data: z.infer<typeof AddNewEmployeeSchema>,
  ) => {
    console.log('Form Data Submitted:', data);
  };
  return (
    <>
      <Dialog>
        <DialogTrigger asChild>
          {triggerIcon || (
            <Text
              title="Add"
              className="add-icn wo-fts-filter-bts flex justify-content items-start"
            >
              <CommonImage
                src="/main/add-icn.webp"
                width={20}
                height={20}
                alt="Add"
                classname="add-icon"
              />
            </Text>
          )}
        </DialogTrigger>
        <DialogContent className="z-[9999] w-full max-w-7xl p-0 m-0 table-modal-settings modal-common-widget">
          <DialogTitle className="p-5 modal-header">
            Add New Employee
          </DialogTitle>
          <VisuallyHidden>
            <DialogTitle>Hidden Title</DialogTitle>
          </VisuallyHidden>
          <Form {...AddNewEmployee}>
            <form
              onSubmit={AddNewEmployee.handleSubmit(AddNewEmployeeSubmit)}
              className="space-y-6"
            >
              <Text className="main-scroll-widget">
                <Text className="flex flex-wrap p-2 form-mid mt-0">
                  <FormField
                    control={AddNewEmployee.control}
                    name="Employee_Code"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Employee Code
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none focus-within:shadow-none hover:shadow-none focus:shadow-none"
                            placeholder="Employee Code"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="First_Name"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          First Name
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="First Name"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Last_Name"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Last Name
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="Last Name"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Gender"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Gender
                        </FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select gender" />
                          </SelectTrigger>
                          <SelectContent className="z-[9999]">
                            {frameworksList.map((option) => (
                              <SelectItem
                                key={option.value}
                                value={option.value}
                              >
                                {option.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="DOB"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          DOB
                        </FormLabel>
                        <FormControl>
                          <Input
                            type="date"
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="DOB"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Personal_Email"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Personal Email
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="Personal Email"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Personal_Phone_Code"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Personal Phone Code
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="Personal Phone Code"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Personal_Phone"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Personal Phone
                        </FormLabel>
                        <FormControl>
                          <Input
                            className="rounded-full border-gray-600 shadow-none"
                            placeholder="Personal Phone"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="Country_AddEmp"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          Country
                        </FormLabel>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select Country" />
                          </SelectTrigger>
                          <SelectContent className="z-[9999]">
                            {countryList.map((country) => (
                              <SelectItem
                                key={country.value}
                                value={country.value}
                              >
                                {country.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="State_AddEmp"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          State
                        </FormLabel>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select State" />
                          </SelectTrigger>
                          <SelectContent className="z-[9999]">
                            {stateList.map((state) => (
                              <SelectItem key={state.value} value={state.value}>
                                {state.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={AddNewEmployee.control}
                    name="City_AddEmp"
                    render={({ field }) => (
                      <FormItem className="w-1/4 p-2">
                        <FormLabel className="no-error-styles font-bold">
                          City
                        </FormLabel>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select City" />
                          </SelectTrigger>
                          <SelectContent className="z-[9999]">
                            {cityList.map((city) => (
                              <SelectItem key={city.value} value={city.value}>
                                {city.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <Text className="w-full max-w-sm items-center w-1/4 p-2">
                    <Label className="py-1 font-bold" htmlFor="picture">
                      Picture
                    </Label>
                    <Input
                      id="picture"
                      type="file"
                      className="rounded-full border-gray-600 mt-3 shadow-none"
                    />
                  </Text>
                  <Text className="w-full w-full p-2">
                    <Label htmlFor="message" className="font-bold">
                      Your message
                    </Label>
                    <Textarea
                      className="py-1 mt-3 rounded-full p-3 pl-6 pr-6 border-gray-600"
                      placeholder="Type your message here."
                      id="message"
                    />
                  </Text>
                </Text>
              </Text>
              <Text className="modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2">
                <Button
                  type="button"
                  className="m-0 refresh-btn bg-transparent shadow primary-button-refresh"
                >
                  <CommonImage
                    src="/main/refresh-icn.webp"
                    width={15}
                    height={15}
                    alt="refresh"
                    classname="refresh-icon"
                  />
                </Button>
                <Button
                  type="submit"
                  className="m-0 filter-search-btn tracking-wider w-40 primary-button"
                >
                  Add
                </Button>
              </Text>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </>
  );
};
export default AddMenu;