'use client';

import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';
import apis from '@/utils/apis';
import { destroyCookie, setCookie } from 'nookies';
import { useGlobalContext } from '@/context/Provider';
import { useRouter, useSearchParams } from 'next/navigation';
import Loader from '@/components/common/loader';
import { Suspense } from 'react';
import { COOKIES_USER_ACCESS_TOKEN } from '@/context/actionTypes';
import AuthLayout from '@/components/layout/layout';
import authBanner from '@/assets/images/AuthImages/auth.png';
import { Label } from '@/components/ui/label';
import countries from "@/utils/CountryCode.json";
import CountryPickerModal from '@/components/countrycode/page';
import { Input } from '@/components/ui/input';
import PartnerAuthLayout from '@/components/layout/PartnerAuthLayout';

const Login = () => {
  const { setUserInfo, Toast, userInfo, requestNotification } =
    useGlobalContext();
  const [loading, setLoading] = useState(false);
  const [state, setState] = useState<any>('');
  const [value, setValue] = useState<any>(countries?.[97])
  const [errMsg, setErrMsg] = useState('');
  const [visibleFields, setVisibleFields] = useState(1);
  const router = useRouter();
  const searchParams = useSearchParams();

  useEffect(() => {
    const handleAutoLogin = async () => {
      const urlToken = searchParams.get('token');
      const urlId = searchParams.get('id');

      if (!urlToken && !urlId) return;

      setLoading(true);
      try {
        let finalToken = urlToken;

        if (!finalToken && urlId) {
          const apiRes = await apis.Auth.autoLogin({ id: urlId });
          finalToken = apiRes?.data?.access_token || apiRes?.access_token || apiRes?.token;
        }

        if (finalToken) {
          apis.setToken(finalToken);
          setCookie(null, 'COOKIES_USER_ACCESS_TOKEN', finalToken, {
            path: '/'
          });
          sessionStorage.setItem('token', finalToken);

          const profileRes = await apis.Profile.getProfile();
          const profileData = profileRes?.data || profileRes;

          setUserInfo({
            ...profileData,
            access_token: finalToken
          });

          Toast.success('Logged in successfully!');

          router.replace('/dashboard');
        } else {
          Toast.error('Auto-login failed: No token returned');
        }
      } catch (error: any) {
        Toast.error(error?.message || error || 'Auto-login failed');
      } finally {
        setLoading(false);
      }
    };

    handleAutoLogin();
  }, [searchParams]);

  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 validatePhoneNumber = (phoneNumber: string) => {
    if (!phoneNumber) {
      setErrMsg('Phone number is required!');
      return false;
    }

    const minLength = value?.min_length || 6;
    const maxLength = value?.max_length || 15;
    const phoneLength = phoneNumber.length;

    if (phoneLength < minLength) {
      setErrMsg(`Phone number must be at least ${minLength} digits for ${value?.name}!`);
      return false;
    }

    if (phoneLength > maxLength) {
      setErrMsg(`Phone number must not exceed ${maxLength} digits for ${value?.name}!`);
      return false;
    }

    setErrMsg('');
    return true;
  };

  const handleSubmit = async () => {
    // return

    setUserInfo(null);
    apis.setToken('');
    destroyCookie(null, COOKIES_USER_ACCESS_TOKEN, {
      maxAge: 0,
      path: '/'
    });

    if (!validatePhoneNumber(state)) {
      return;
    }

    if (state?.length < 6) {
      setErrMsg('Enter a valid number !');
      return;
    }
    // router.push("/auth/verify/phone")
    try {
      let phoneNumber = state || '';
      let dialCode = value?.dial_code || '';

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

      let payload: any = {
        country_code: +dialCode,
        phone: phoneNumber,
        type: 'vendor'
      };

      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.login(payload);
      //   setUserInfo(apiRes)
      if (apiRes?.token) {
        sessionStorage.setItem('token', apiRes?.token)
        sessionStorage.setItem('phone', phoneNumber)
        sessionStorage.setItem('code', dialCode)
        apis.setToken(apiRes?.token);
        setCookie(null, 'COOKIES_USER_ACCESS_TOKEN', apiRes?.token, {
          path: '/'
        });
        setUserInfo({ ...userInfo, access_token: apiRes?.token });
        sessionStorage.removeItem('hasReloadedLoginPage')
        router.push('/auth/verify/phone');
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      
      setLoading(false);
    }
  };

  useEffect(() => {
    const hasReloaded = sessionStorage.getItem("hasReloadedLoginPage");
    if (!hasReloaded) {
      sessionStorage.setItem("hasReloadedLoginPage", "true");
      window.location.reload();
    }
  }, []);

  useEffect(() => {
    if (state) {
      validatePhoneNumber(state);
    }
  }, [value]);

  return (
    <PartnerAuthLayout
      badgeText="PARTNER PORTAL"
      heading="Enter Phone Number"
      subheading="We'll send an OTP to verify your account"
      metrics={[
        { value: '5 Mins', label: 'Quick Onboarding' },
        { value: '24/7', label: 'Partner Support' },
        { value: 'Flexible', label: 'Daily, Weekly & Monthly Payouts' }
      ]}
    >
      <div className="space-y-4">
        <div>
          <Label className="text-xs font-semibold uppercase text-slate-600 tracking-wider mb-1.5 block">
            Mobile Number <span className="text-[var(--primary-brand)]">*</span>
          </Label>
          <div className="flex flex-row w-full gap-2 items-center">
            <div className="shrink-0">
              <CountryPickerModal setValue={setValue} value={value} />
            </div>
            <Input
              placeholder="Enter your phone number"
              className="h-12 bg-slate-50/50 border-slate-200 focus:bg-white text-slate-900 text-sm font-semibold rounded-xl transition-all"
              value={state}
              onChange={(e: any) => {
                const phoneNumber = e.target.value.replace(/\D/g, '');
                setState(phoneNumber);
                if (errMsg) setErrMsg('');
              }}
              onBlur={() => {
                if (state) validatePhoneNumber(state);
              }}
              minLength={value?.min_length || 6}
              maxLength={value?.max_length || 15}
            />
          </div>
          {errMsg && (
            <span className="text-xs font-medium text-red-500 mt-1.5 block">
              {errMsg}
            </span>
          )}
        </div>

        <Button
          onClick={() => handleSubmit()}
          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"
          variant="theme"
        >
          <Loader loading={loading} />
          Continue to Login &rarr;
        </Button>

        <div className="pt-2 text-center text-xs text-slate-500 space-y-1">
          <p>
            By continuing, you agree to our{' '}
            <a
              href="https://readyeats.henceforthsolutions.com/terms-condition/"
              target="_blank"
              rel="noreferrer"
              className="font-bold text-slate-800 underline hover:text-[var(--primary-brand)]"
            >
              Terms &amp; Conditions
            </a>
          </p>
          <p>
            See how we protect your data in our{' '}
            <a
              href="https://readyeats.henceforthsolutions.com/vendor-policy/"
              target="_blank"
              rel="noreferrer"
              className="font-bold text-slate-800 underline hover:text-[var(--primary-brand)]"
            >
              Privacy Policy
            </a>
          </p>
        </div>
      </div>
    </PartnerAuthLayout>
  );
};

export default function LoginPage() {
  return (
    <Suspense fallback={<div className="flex h-screen w-screen items-center justify-center"><Loader loading={true} /></div>}>
      <AuthLayout
        title="Login or Sign up to ReadyEats "
        des="Access your account or create a new one."
        image={authBanner.src}
      >
        <Login />
      </AuthLayout>
    </Suspense>
  );
}