'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';

import PartnerAuthLayout from '@/components/layout/PartnerAuthLayout';

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('/dashboard');
        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');
      }
    } 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 (
    <PartnerAuthLayout
      badgeText="OTP VERIFICATION"
      heading="Enter Verification Code"
      subheading="Please enter the 4-digit code sent to your phone"
      metrics={[
        { value: '100%', label: 'Safe & Secure' },
        { value: 'Instant', label: 'Verification' },
        { value: '24/7', label: 'Partner Support' }
      ]}
    >
      <Form {...verificationForm}>
        <form onSubmit={verificationForm.handleSubmit(onSubmit)} className="space-y-5">
          <FormField
            name="otp"
            control={verificationForm.control}
            render={({ field }) => (
              <FormItem className="w-full">
                <FormControl className="w-full">
                  <InputOTP
                    className="w-full"
                    containerClassName="flex items-center justify-center gap-3 sm:gap-4 mx-auto"
                    maxLength={4}
                    value={field.value}
                    onChange={field.onChange}
                  >
                    {[...Array(4)].map((_, index) => (
                      <InputOTPGroup key={index}>
                        <InputOTPSlot
                          index={index}
                          className="h-14 w-14 rounded-xl border border-slate-200 bg-slate-50/50 text-xl font-bold text-slate-900 focus:bg-white focus:border-[var(--primary-brand)] transition-all"
                        />
                      </InputOTPGroup>
                    ))}
                  </InputOTP>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button
            type="submit"
            variant="theme"
            className="h-12 w-full bg-[var(--primary-brand)] hover:bg-[var(--primary-brand)]/90 text-white font-bold text-base rounded-xl shadow-md hover:shadow-lg transition-all"
          >
            <Loader loading={loading} />
            Verify &amp; Continue &rarr;
          </Button>

          <div className="flex w-full flex-col items-center justify-center text-xs text-slate-500 pt-2">
            {isResendDisabled ? (
              <p className="text-xs text-slate-500">
                Didn’t receive the OTP? Retry in{' '}
                <span className="font-bold text-slate-800">
                  00:{countdown.toString().padStart(2, '0')}
                </span>
              </p>
            ) : (
              <div className="flex items-center gap-1.5 text-xs text-slate-600">
                <span>Didn’t receive the OTP?</span>
                <button
                  type="button"
                  className="h-auto p-0 font-bold text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 hover:underline border-0 bg-transparent shadow-none cursor-pointer disabled:opacity-50"
                  disabled={isSending}
                  onClick={resendOtp}
                >
                  {isSending ? 'Sending...' : 'Resend OTP'}
                </button>
              </div>
            )}
          </div>
        </form>
      </Form>
    </PartnerAuthLayout>
  );
};

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>
  );
}