'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,
  FormMessage
} from '@/components/ui/form';
import { useEffect, useState } from 'react';
import apis from '@/utils/apis';
import { destroyCookie } from 'nookies';
import { useGlobalContext } from '@/context/Provider';
import { useRouter, useSearchParams } from 'next/navigation';
import Loader from '@/components/common/loader';
import { COOKIES_USER_ACCESS_TOKEN } from '@/context/actionTypes';
import AuthLayout from '@/components/layout/layout';
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot
} from '@/components/ui/input-otp';
import authBanner from '@/assets/images/AuthImages/phone.png';

const verificationSchema = z.object({
  otp: z.string().length(4, 'Please enter the complete verification code')
});
type VerificationValues = z.infer<typeof verificationSchema>;

const Login = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const queryParams = Object.fromEntries(searchParams.entries());
  const { setUserInfo, Toast, requestNotification } = useGlobalContext();
  const [loading, setLoading] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const verificationForm = useForm<VerificationValues>({
    resolver: zodResolver(verificationSchema),
    defaultValues: {
      otp: ''
      // marketingConsent: false,
      // termsAccepted: false,
    }
  });

  function getDeviceType() {
    const userAgent = navigator.userAgent.toLowerCase();
    const width = window.screen.width;
    const height = window.screen.height;
    if (/mobile/i.test(userAgent)) {
      return 'mobile';
    } else if (/tablet/i.test(userAgent)) {
      return 'tablet';
    } else if (width > 1024 && height <= 800) {
      return 'laptop';
    } else {
      return 'computer';
    }
  }

  const onSubmit = async (data: any) => {
    setUserInfo(null);
    apis.setToken('');
    destroyCookie(null, COOKIES_USER_ACCESS_TOKEN, {
      maxAge: 0,
      path: '/'
    });
    try {
      let payload: any = {
        ...data,
        device_type: 'WEB'
      };
      setLoading(true);
      const fcm_token = await requestNotification();
      if (fcm_token) {
        payload['fcm_token'] = fcm_token;
      }
      const system_type = getDeviceType();
      if (system_type) {
        payload['system_type'] = system_type;
      }
      const apiRes = await apis.Auth.verifyOtp(payload);
      Toast.success('Phone Number verified successfully!');

      if (apiRes?.data?.restaurant_id?.verification === 'APPROVED') {
        apis.setToken(apiRes?.data?.access_token);
        router.replace('/home');
        sessionStorage.setItem('token', apiRes?.access_token);
        setUserInfo({
          ...apiRes?.data,
          access_token: apiRes?.access_token
        });
      } else if (apiRes?.data?.restaurant_id?.verification === 'SUBMITTED') {
        router.replace(`/auth/restaurant/under-review`);
        sessionStorage.removeItem('phone');
        sessionStorage.removeItem('code');
      } else if (apiRes?.data?.restaurant_id?.verification === null) {
        router.replace('/auth/complete-profile');
        sessionStorage.setItem('token', apiRes?.access_token);
        sessionStorage.removeItem('phone');
        sessionStorage.removeItem('code');
        if (apiRes?.data?.is_timing_added) {
          sessionStorage.setItem('restaurant', 'complete');
          sessionStorage.setItem('resId', apiRes?.data?.restaurant_id?._id);
        } else if (apiRes?.data?.is_bank_added) {
          sessionStorage.setItem('restaurant', 'complete');
          sessionStorage.setItem('food', 'complete');
          sessionStorage.setItem('bank', 'complete');
          sessionStorage.setItem('resId', apiRes?.data?.restaurant_id?._id);
        } else if (apiRes?.data?.is_menu_added) {
          sessionStorage.setItem('restaurant', 'complete');
          sessionStorage.setItem('food', 'complete');
          sessionStorage.setItem('resId', apiRes?.data?.restaurant_id?._id);
        }
      } else {
        router.replace('/auth/complete-profile');
        sessionStorage.setItem('token', apiRes?.access_token);
        sessionStorage.removeItem('phone');
        sessionStorage.removeItem('code');
      }
      // if (apiRes?.data?.restaurant_id?.verification ) {
      //   router.replace('/auth/complete-profile');
      //   sessionStorage.setItem('token', apiRes?.access_token);
      //   sessionStorage.removeItem('phone')
      // } else {
      //   apis.setToken(apiRes?.data?.access_token);
      //   router.replace('/home');
      //   sessionStorage.setItem('token', apiRes?.access_token);
      //   setUserInfo({
      //     ...apiRes?.data,
      //     access_token: apiRes?.access_token
      //   });
      // }
    } catch (error) {
      verificationForm.setValue('otp', '');
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };

  const [countdown, setCountdown] = useState(29);
  const [isResendDisabled, setIsResendDisabled] = useState(true);
  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (isResendDisabled && countdown > 0) {
      timer = setInterval(() => {
        setCountdown((prev) => prev - 1);
      }, 1000);
    } else if (countdown === 0) {
      setIsResendDisabled(false);
    }
    return () => clearInterval(timer);
  }, [countdown, isResendDisabled]);

  const resendOtp = async () => {
    if (isSending || isResendDisabled) return;
    setIsSending(true)
    const phone: any = sessionStorage.getItem('phone');
    const code: any = sessionStorage.getItem('code');
    let payload: any = {
      country_code: +code,
      phone: phone,
      type: 'vendor'
    };
    try {
      setCountdown(29);
      const apiRes = await apis.Auth.login(payload);
      sessionStorage.setItem('token', apiRes?.token)
      setIsResendDisabled(true);
      Toast.success("Otp sent!");
    } catch (error) {
      Toast.error(error);
    } finally {
      setIsSending(false);
    }
  };

  return (
    <>
      <section className="w-full ">
        <Form {...verificationForm}>
          <form onSubmit={verificationForm.handleSubmit(onSubmit)} className="">
            <FormField
              name="otp"
              control={verificationForm.control}
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormControl className="w-full">
                    <InputOTP
                      className="w-full"
                      maxLength={4}
                      value={field.value}
                      onChange={field.onChange}
                    >
                      {[...Array(4)].map((_, index) => (
                        <InputOTPGroup key={index}>
                          <InputOTPSlot
                            index={index}
                            className="h-14 w-14 rounded-md border border-gray-300 bg-white text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                          />
                        </InputOTPGroup>
                      ))}
                    </InputOTP>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="mt-4 p-0">
              <Button
                type="submit"
                variant={'theme'}
                className="h-11 w-full"
              >
                <Loader loading={loading} />
                Verify
              </Button>
            </div>
            <div className="mt-0 flex w-full flex-col items-center justify-start">
              <span className="mb-2 mt-3">
                {isResendDisabled ? (
                  `Didn’t receive the OTP? Retry in 00:${countdown
                    .toString()
                    .padStart(2, '0')}`
                ) : (
                  <Button
                    type="button"
                    variant="link"
                    className="theme-color m-0 flex items-center border-0 bg-white p-0 font-semibold text-black shadow-none"
                    disabled={isResendDisabled}
                    onClick={resendOtp}
                  >
                    Resend Otp
                  </Button>
                )}
              </span>
            </div>
          </form>
        </Form>
      </section>
    </>
  );
};

export default function LoginPage() {
  const phone: any = sessionStorage.getItem('phone');
  const code: any = sessionStorage.getItem('code');
  return (
    <AuthLayout
      title="Verify your Phone number"
      des={
        <span>
          {`Please input the 4-digit code that has been sent to you via phone no`}
          <span className="font-bold text-black"> {code?.startsWith('+') ? '' : '+'}{code + phone || ''}.</span>
        </span>
      }
      image={authBanner.src}
    >
      <Login />
    </AuthLayout>
  );
}