'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { useEffect, useRef, useState } from 'react';
import { Camera } from 'lucide-react';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { useRouter } from 'next/navigation';
import Loader from '@/components/common/loader';
import AuthLayout from '@/components/layout/layout';
import { Checkbox } from '@/components/ui/checkbox';
import authBanner from '@/assets/images/AuthImages/address.png';
import countries from '@/utils/CountryCode.json';
import { Label } from '@/components/ui/label';
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot
} from '@/components/ui/input-otp';
import { jwtDecode } from 'jwt-decode';
import CountryPickerModal from '@/components/countrycode/page';

const categoryLabels: any = {
  veg: "Veg",
  non_veg: "Non Veg",
  egg: "Egg",
  jain: "Jain"
};


const formSchema = z.object({
  owner_name: z.string().min(3, 'Owner name is required'),
  avg_prepare: z.union([
    z.number().positive('Time must be greater than 0'),
    z.string().regex(/^\d+$/, 'Time must be a valid number')
  ]),
  email: z
    .string()
    .min(3, 'Email is required')
    .email('Invalid email'),
  phone_number: z.string().optional(),
  category: z.array(z.string()).min(1, { message: 'Category is required' }),
  referral_code: z.string().optional()
});

type LoginForm = z.infer<typeof formSchema>;

const Login = () => {
  const { Toast, userInfo, setUserInfo } = useGlobalContext();
  const [loading, setLoading] = useState(false);
  const [image, setImage] = useState('');
  const [value, setValue] = useState<any>(countries?.[97]);
  const [state, setState] = useState<any>('');
  const [otpModal, setOtpModal] = useState({
    phone: false,
    email: false
  });
  const [verified, setVerified] = useState({
    phone: false,
    email: false
  });
  const [errMsg, setErrMsg] = useState('');

  const router = useRouter();

  const form = useForm<LoginForm>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      phone_number: undefined,
      referral_code: ''
    }
  });

  const [otp, setOtp] = useState({
    phone: '',
    email: ''
  });
  const token: any = sessionStorage.getItem('token');
  const res: any = sessionStorage.getItem('restaurant');
  const decodedToken: any = jwtDecode(token);

  useEffect(() => {
    if (!token) {
      router.replace(`/auth/login`);
    }
  }, []);

  useEffect(() => {
    if (decodedToken.country_code === value?.dial_code) {
      setVerified({ ...verified, phone: true });
    } else {
      setVerified({ ...verified, phone: false });
    }
  }, [value]);

  useEffect(() => {
    if (res === 'complete') {
      setImage(userInfo?.image || '');

      form.setValue(
        'avg_prepare',
        userInfo?.restaurant_id?.average_preparing_time || ''
      );
      form.setValue('owner_name', userInfo?.name || '');
      form.setValue('email', userInfo?.email || '');
      setState(userInfo?.restaurant_id?.restaurant_phone);
      const matchedCountry = countries.find(
        (country) =>
          country?.dial_code ===
          (userInfo?.restaurant_id?.country_code ||
            `+${userInfo?.restaurant_id?.country_code}`)
      );
      setValue(matchedCountry);
      setVerified({ email: true, phone: true });
      form.setValue(
        'phone_number',
        (userInfo?.country_code || '') + (userInfo?.phone || '')
      );
      form.setValue('category', userInfo?.restaurant_id?.food_type || '');
      form.setValue('referral_code', userInfo?.restaurant_id?.referral_code || '');
    } else {
      setState(decodedToken.phone);
      const matchedCountry = countries.find(
        (country) =>
          country.dial_code ===
          (decodedToken.country_code || `+${decodedToken.country_code}`)
      );
      setValue(matchedCountry);
      setVerified({ ...verified, phone: true });
    }
  }, []);


  const onSubmit = async (data: LoginForm) => {
    if (!verified.phone) {
      Toast.error('Please verify phone number!');
      return;
    }
    if (!verified.email) {
      Toast.error('Please verify email!');
      return;
    }

    try {
      let phoneNumber = state || '';
      let dialCode = value?.dial_code || '';

      if (phoneNumber.startsWith(dialCode)) {
        phoneNumber = phoneNumber.slice(dialCode.length);
      }

      let payload: any = {
        restaurant_phone: phoneNumber,
        country_code: dialCode,
        food_type: data?.category,
        average_preparing_time: Number(data?.avg_prepare),
        owner_name: data?.owner_name,
        email: data?.email,
        referral_code: data?.referral_code || '',
        ...(image && { image })
      };

      setLoading(true);

      const apiRes =
        res === 'complete'
          ? await apis.restaurant.update(userInfo?.restaurant_id?._id, payload)
          : await apis.restaurant.add(payload);

      if (apiRes?.data) {
        sessionStorage.setItem('resId', apiRes?.data?._id);
        sessionStorage.setItem('homeCooked', 'complete');
        setUserInfo((prev: any) => ({
          ...prev,
          email: apiRes?.data?.email || prev?.email,
          name: apiRes?.data?.owner_name || prev?.name,
          restaurant_id: {
            ...(prev?.restaurant_id || {}),
            ...apiRes.data,
          },
        }));
        router.replace('/auth/complete-profile');
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };


  const phoneVerify = async (e: any, mobile: any) => {
    e.preventDefault();
    if (verified.phone) {
      Toast.error('Phone number already verified!');
      return;
    }
    if (mobile.length < 1) {
      Toast.error('Enter Phone Number!');
    }

    try {
      let phoneNumber = state || '';
      let dialCode = value?.dial_code || '';

      if (phoneNumber.startsWith(dialCode)) {
        phoneNumber = phoneNumber.slice(dialCode.length);
      }
      let payload = {
        country_code: dialCode,
        phone: phoneNumber
      };
      const apiRes = await apis.Auth.verifyPhoneEmail(payload);
      setOtpModal({ ...otpModal, phone: true });
      sessionStorage.setItem('otpTokenPhone', apiRes?.token);
    } catch (error) {
      Toast.error(error);
    }
  };

  const emailVerify = async (e: any, mail: string) => {
    e.preventDefault();
    if (mail?.length < 1) {
      Toast.error('Enter valid  email!');
      return;
    }
    if (verified.email) {
      Toast.error('Email already verified!');
      return;
    }
    try {
      let payload = {
        email: mail
      };
      const apiRes = await apis.Auth.verifyPhoneEmail(payload);
      sessionStorage.setItem('otpTokenEmail', apiRes?.token);
      setOtpModal({ ...otpModal, email: true });
    } catch (error) {
      Toast.error(error);
    }
  };

  const emailOtpVerified = async (e: any) => {
    e.preventDefault();
    try {
      let payload = {
        otp: otp.email
      };
      const apiRes = await apis.Auth.VerifyE(payload);
      if (apiRes) {
        sessionStorage.removeItem('otpTokenEmail');
        setOtpModal({ ...otpModal, email: false });
        setVerified({ ...verified, email: true });
      }
    } catch (error) {
      Toast.error(error);
    }
  };

  const phoneOtpVerified = async (e: any) => {
    e.preventDefault();
    try {
      let payload = {
        otp: otp.phone
      };
      const apiRes = await apis.Auth.VerifyP(payload);
      if (apiRes) {
        sessionStorage.removeItem('otpTokenPhone');
        setOtpModal({ ...otpModal, phone: false });
        setVerified({ ...verified, phone: true });
      }
    } catch (error) {
      Toast.error(error);
    }
  };

  useEffect(() => {
  }, [form.formState.errors]);



  const handlePhoneChange = (e: any) => {
    const phoneNumber = e.target.value.replace(/\D/g, '');
    setState(phoneNumber);
    if (
      phoneNumber === decodedToken.phone &&
      decodedToken.country_code === value?.dial_code
    ) {
      setVerified({ ...verified, phone: true });
    } else {
      setVerified({ ...verified, phone: false });
    }
  };

  return (
    <>
      <section className="no-scrollbar h-[80vh] w-full overflow-y-auto">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
            <div className="space-y-1">
              <FormField
                name="owner_name"
                control={form.control}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-black">Owner Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Owner Name"
                        {...field}
                        className={`h-[48px] ${form.formState.errors.email ? 'error-border' : ''
                          } bg-white`}
                        onChange={(e) => {
                          const sanitizedValue = e.target.value.replace(
                            /^\s+/,
                            ''
                          );
                          field.onChange(sanitizedValue);
                        }}
                        maxLength={30}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            <div className="space-y-1">
              <FormField
                name="email"
                control={form.control}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-black">Email address</FormLabel>
                    <FormControl>
                      <div
                        className={`flex flex-row  bg-white ${form.formState.errors.email ? 'error-border' : ''
                          }`}
                      >
                        <Input
                          placeholder="Email address"
                          {...field}
                          className={`h-[48px] border-none  bg-white`}
                          onChange={(e) => {
                            const sanitizedValue = e.target.value.replace(
                              /^\s+/,
                              ''
                            );
                            field.onChange(sanitizedValue);
                            if (sanitizedValue === userInfo?.email) {
                              setVerified({ ...verified, email: true });
                            } else {
                              setVerified({ ...verified, email: false });
                            }
                          }}
                          maxLength={30}
                        />
                        <button
                          className="flex h-[48px] items-center justify-center p-2 text-[14px] font-[600] text-[var(--primary-brand)]"
                          onClick={(e: any) => emailVerify(e, field.value)}
                        >
                          {verified.email ? 'Verified' : 'Verify'}
                        </button>
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            {otpModal.email && (
              <div className="flex flex-row gap-4 space-y-1">
                <InputOTP
                  className="w-full"
                  maxLength={4}
                  value={otp.email}
                  onChange={(value: string) => setOtp({ ...otp, email: value })}
                >
                  {[...Array(4)].map((_, index) => (
                    <InputOTPGroup key={index}>
                      <InputOTPSlot
                        index={index}
                        className="h-11 w-14 rounded-md border border-gray-300 bg-white text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </InputOTPGroup>
                  ))}
                </InputOTP>
                <Button
                  // type="submit"
                  onClick={(e: any) => emailOtpVerified(e)}
                  className="theme-background h-11 w-full text-white"
                >
                  {/* <Loader loading={loading} /> */}
                  Verify
                </Button>
              </div>
            )}

            <div className="space-y-1">
              <FormField
                name="referral_code"
                control={form.control}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-black">Referral Code</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Referral Code"
                        {...field}
                        className="h-[48px] bg-white"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <div className="h-[80px] space-y-1">
              <Label className="text-black">
                Contact Number<span className="ml-1">*</span>
              </Label>
              <div
                className="flex flex-row rounded-md bg-white"
                style={{ border: '1px solid #eee' }}
              >
                <CountryPickerModal setValue={setValue} value={value} />
                <Input
                  placeholder="Enter your phone number"
                  className={` $ h-[48px] w-3/4 border-none bg-white`}
                  value={state}
                  onChange={(e: any) => handlePhoneChange(e)}
                />
                <button
                  className="flex h-[48px] items-center justify-center p-2 text-[14px] font-[600] text-[var(--primary-brand)]"
                  onClick={(e: any) => phoneVerify(e, state)}
                >
                  {verified.phone ? 'Verified' : 'Verify'}
                </button>
              </div>

              <span className="text-[12px] font-[400] text-red-600">
                {errMsg}
              </span>
            </div>
            {otpModal.phone && (
              <div className="flex flex-row gap-4 space-y-1">
                <InputOTP
                  className="w-full"
                  maxLength={4}
                  value={otp.phone}
                  onChange={(value: string) => setOtp({ ...otp, phone: value })}
                >
                  {[...Array(4)].map((_, index) => (
                    <InputOTPGroup key={index}>
                      <InputOTPSlot
                        index={index}
                        className="h-11 w-14 rounded-md border border-gray-300 bg-white text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </InputOTPGroup>
                  ))}
                </InputOTP>
                <Button
                  // type="submit"
                  onClick={(e: any) => phoneOtpVerified(e)}
                  className="theme-background h-11 w-full text-white"
                >
                  {/* <Loader loading={loading} /> */}
                  Verify
                </Button>
              </div>
            )}
            <div className="space-y-1">
              <FormField
                name="avg_prepare"
                control={form.control}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-black">
                      Average Preparation time(in minutes)
                    </FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Enter average preparation time"
                        {...field}
                        className={`h-[48px] ${form.formState.errors.avg_prepare
                          ? 'error-border'
                          : ''
                          } bg-white`}
                        onChange={(e) => {
                          // Remove non-numeric characters
                          const sanitizedValue = e.target.value.replace(
                            /\D/g,
                            ''
                          );
                          field.onChange(sanitizedValue);
                        }}
                        maxLength={3}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>


            <div className="space-y-1">
              <FormField
                name="category"
                control={form.control}
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="text-black">
                      What kind of food does this restaurant serve?
                    </FormLabel>
                    <FormControl>
                      <div className="mt-3 flex items-center gap-2 ">
                        {['veg', 'non_veg', 'egg', 'jain'].map((category) => (
                          <div key={category} className="flex items-center space-x-2">
                            <Checkbox
                              id={category}
                              checked={field.value?.includes(category)}
                              onCheckedChange={(checked) => {
                                const newValue = checked
                                  ? [...(field.value || []), category]
                                  : field.value?.filter((item: string) => item !== category);

                                field.onChange(newValue);
                                sessionStorage.setItem('category', JSON.stringify(newValue));
                              }}
                            />
                            <label
                              htmlFor={category}
                              className="text-sm leading-none text-gray-500 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                            >
                              {categoryLabels[category]}
                            </label>
                          </div>
                        ))}
                      </div>

                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <Button
              className="w-full"
              variant={'theme'}
              //   onClick={() => router.push('/auth/restaurant/location')}
              type="submit"
            >
              <Loader loading={loading} />
              Next
            </Button>
          </form>
        </Form>
      </section>
    </>
  );
};

export default function FormOne() {
  return (
    <AuthLayout
      title="Enter your home-cooked Details"
      des="To get started, please provide the essential details of your home-cooked meals."
      image={authBanner.src}
    >
      <Login />
    </AuthLayout>
  );
}