'use client';
import { Labels, labels } from '@/app/constants/labels';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styles from './SignUp.module.css';
import { useRouter } from 'next/navigation';
import SpinnerLoader from '../../../atoms/SpinnerLoader';
import SelectBox from '../../../atoms/Form/SelectBox';
import TextField from '../../../atoms/Form/TextField';
import PasswordField from '../../../atoms/Form/PasswordField';
import RadioButton from '../../../atoms/Form/RadioButton/RadioButton';
import { registerMember } from '@/lib/news/authService';
import useAuth from '@/utils/useAuth';
import toast from 'react-hot-toast';
import { format } from 'path';
import { findValueByKey } from '@/utils';
import ReCAPTCHA from 'react-google-recaptcha';

const SignUpComponent = (params: any) => {
  const language = params.language || 'de';
  const countryList = params.countryList;
  const memberTypeList = params.memberTypeList;
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [salutation, setSalutation] = useState('mr');
  const [Fname, setFname] = useState('');
  const [Lname, setLname] = useState('');
  const [password, setPassword] = useState('');
  const [perror, setPError] = useState('');
  const [RTpassword, setRTPassword] = useState('');
  const [error, setError] = useState('');
  const formRef = useRef<HTMLFormElement>(null);
  const router = useRouter();
  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
  const { hasValidSession } = useAuth(setLoading);

  const today = new Date();
  const ymd = today.getFullYear().toString() +
            String(today.getMonth() + 1).padStart(2, '0') +
            String(today.getDate()).padStart(2, '0');
 
  function md5(str: string) {
    // Very basic MD5 (not production safe), better import real MD5 lib
    return window.btoa(unescape(encodeURIComponent(str))).substr(0, 10); 
  }
  const honeypotFieldName = `hp${ymd}_${md5("97a635b2667ada3fc5160fbf5a1196cf4f3756f")}`;


  useEffect(() => {
    // console.log({countryList,memberTypeList});
  }, [countryList, memberTypeList]);

  const onSubmitWithReCAPTCHA = async (event: React.FormEvent) => {
    event.preventDefault();
    if (recaptchaRef.current) {
      const token = await recaptchaRef.current.executeAsync();
      if (token) {
        handleSubmit();
      }
    }
    // apply to form data
  };

  const handleSubmit = async () => {
    if (!perror && formRef.current) {
      setLoading(true);
      setError('');
      const formData = new FormData(formRef.current);

      // Convert FormData to an object for easier logging
      const data: { [key: string]: FormDataEntryValue } = {};
      formData.forEach((value, key) => {
        if (key === 'country') {
          // FOR SAVING COUNTRY KEY
          const countryKey = typeof value === 'string' ? value : value?.name; // Extract string value from File object if necessary
          const countryValue = findValueByKey(countryKey, countryList);
          if (countryValue) {
            data[key] = countryValue;
          }
        } else if (key === 'type') {
          // FOR SAVING TYPE KEY
          const typeKey = typeof value === 'string' ? value : value?.name; // Extract string value from File object if necessary
          const typeValue = findValueByKey(typeKey, memberTypeList);
          if (typeValue) {
            data[key] = typeValue;
          }
        } else {
          data[key] = value;
        }
      });

      if(data[honeypotFieldName] !== ""){
        alert("Invalid Form Submission");
        setLoading(false);
      }

      if (data['password'] === data['confirm_password']) {
        const registerRes = registerMember(data, language);
        registerRes
          .catch((err) => {
            // console.log("Resistration Error: ",err);
            toast.error('Resistration Error:' + err.message, {
              position: 'top-right',
            });
          })
          .then((data) => {
            if (data.error === 0) {
              toast.success(data.message, { position: 'top-right' });
              router.push('/auth/thank-you');
            } else {
              setError(data.message);
              toast.error(data.message, { position: 'top-right' });
            }
            setLoading(false);
          });
      } else {
        setError("Re-Type Password didn't Matched!!");
        toast.error("Re-Type Password didn't Matched!!", {
          position: 'top-right',
        });
        setLoading(false);
      }
    }
  };

  const fields: Labels = {
    en: {
      firstName: 'First Name',
      lastName: 'Last Name',
      email: 'Email',
      password: 'Password',
      salutation: 'Salutation',
      country: 'Domicile',
      rewrite_password: 'Confirm password',
      Enter_Your_First_Name: 'Enter Your First Name',
      Enter_Your_Last_Name: 'Enter Your Last Name',
      Enter_Your_PASSWORD: 'Enter Your Password',
      Enter_Your_RETYPE: 'Re-Type Your Password',
      Enter_Your_Email_Address: 'Enter Your Email Address',
      Register: 'Register',
      Register_Here: "You don't have an account yet? Register here",
      Fill_in_the_field: 'Please fill in this field',
      SIGN_IN: 'Sign in',
      Email_validation: 'Please include an @ in the email address.',
    },
    de: {
      firstName: 'Vorname',
      lastName: 'Nachname',
      email: 'E-Mail',
      password: 'Passwort',
      salutation: 'Anrede',
      country: 'Domizil',
      rewrite_password: 'Passwort bestätigen',
      Enter_Your_First_Name: 'Geben Sie Ihren Vornamen ein',
      Enter_Your_Last_Name: 'Geben Sie Ihren Nachnamen ein',
      Enter_Your_PASSWORD: 'Geben Sie Ihr Passwort ein',
      Enter_Your_RETYPE: 'Geben Sie Ihr Passwort erneut ein',
      Enter_Your_Email_Address: 'Geben Sie Ihre E-Mailadresse ein',
      Register: 'Registrieren',
      Register_Here: 'Sie haben noch kein Konto? Hier registrieren',
      Fill_in_the_field: 'Bitte füllen Sie dieses Feld aus',
      SIGN_IN: 'Anmelden',
      Email_validation: 'Bitte fügen Sie ein @ in die E-Mail-Adresse ein.',
    },
    fr: {
      firstName: 'Prénom',
      lastName: 'Nom de famille',
      email: 'Courriel',
      password: 'Mot de passe',
      salutation: "Formule d'appel",
      country: 'Domicile',
      rewrite_password: 'Confirmer le mot de passe',
      Enter_Your_First_Name: 'Saisissez votre nom de famille',
      Enter_Your_Last_Name: 'Saisissez votre nom de famille',
      Enter_Your_Email_Address: 'Saisissez votre adresse e-mail',
      Enter_Your_PASSWORD: 'Enter Your Password',
      Enter_Your_RETYPE: 'Re-Type Your Password',
      Register: 'Enregistrer',
      Register_Here: "Vous n'avez pas de compte? S'inscrire ici",
      Fill_in_the_field: 'Merci de remplir ce champ',
      SIGN_IN: 'Se connecter',
      Email_validation: "Veuillez inclure un @ dans l'adresse e-mail.",
    },
    it: {
      firstName: 'Nome',
      lastName: 'Cognome',
      email: 'Email',
      password: 'Password',
      salutation: 'Saluto',
      country: 'Domicilio',
      rewrite_password: 'Confermare la password',
      Enter_Your_First_Name: 'Inserisci ill tuo nome',
      Enter_Your_Last_Name: 'Inserisci il tuo Cognome',
      Enter_Your_Email_Address: 'Il tuo indirizzo e-mail',
      Enter_Your_PASSWORD: 'Enter Your Password',
      Enter_Your_RETYPE: 'Re-Type Your Password',
      Register: 'Registrazione',
      Register_Here: 'Non ha ancora un account? Si registri qui',
      Fill_in_the_field: 'Si prega di compilare questo campo',
      SIGN_IN: 'Effettui il login',
      Email_validation: "Si prega di includere una @ nell'indirizzo e-mail.",
    },
  };

  const sortedCountryList = useMemo(() => {
    if (!countryList || countryList.length < 2) return countryList; // Handle edge cases

    const firstItem = countryList[0];
    const lastItem = countryList[countryList.length - 1];

    // Create a sorted copy of the middle elements
    const sortedMiddleItems = [...countryList.slice(1, -1)].sort((a, b) =>
      a.key.localeCompare(b.key)
    );

    return [firstItem, ...sortedMiddleItems, lastItem];
  }, [countryList]);

  useEffect(() => {}, [formRef]);
  useEffect(() => {}, [setLoading, loading, perror, setPError]);

  useEffect(() => {
    if (hasValidSession) {
      router.push('/');
    }
  }, [hasValidSession]);

  useEffect(() => {}, [countryList, memberTypeList]);

  return (
    <div className='cardSpace'>
      <form
        ref={formRef}
        className={styles.loginForm}
        onSubmit={onSubmitWithReCAPTCHA}
      >
        {/* onSubmit={handleSubmit} */}
        <h1 className='heading1'>{labels[language].SIGN_IN_CAA}</h1>
        <div className='bg-green-50 p-[30px] md:p-[30px] sm:p-[15px] rounded-[20px] sm:rounded-[10px]'>
          <h2 className='heading3 pb-[15px] md:pb-[10px] sm:pb-[5px]'>
            {labels[language].REGISTRETION}
          </h2>
          <span className='text-xl md:text-base sm:text-sm'>
            {fields[language].Register_Here}
          </span>
          <div className='pt-[10px] md:pt-[20px] sm:pt-[10px] pb-[20px] md:pb-[10px] sm:pb-[5px]'>
            <div className='flex justify-between items-center sm:flex-col'>
              <div className={`w-[100%] sm:w-full ${styles.signUpWrap}`}>
                <div className=''>
                  <div className='pb-[8px]'>
                    <span className='text-base font-medium leading-7'>
                      {fields[language].salutation}
                    </span>
                  </div>
                  <div className='flex mx-w-full items-center space-x-[17%] lg:space-x-[40px] flex-1'>
                    <RadioButton
                      id='mr'
                      name='salutation'
                      value='mr'
                      label={labels[language].MR}
                      checked={salutation === 'mr'}
                      onChange={(e: any) => {
                        setSalutation(e.target.value);
                      }}
                    />
                    <RadioButton
                      id='miss'
                      name='salutation'
                      value='miss'
                      label={labels[language].MISS}
                      checked={salutation === 'miss'}
                      onChange={(e: any) => {
                        setSalutation(e.target.value);
                      }}
                    />
                  </div>
                </div>
                <SelectBox
                  name='type'
                  label={labels[language]?.TYPE_OF_USER || 'Type Of User'}
                  options={memberTypeList}
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  required
                  title={fields[language]?.Fill_in_the_field}
                />
                <TextField
                  label={fields[language].firstName}
                  title={fields[language]?.Fill_in_the_field}
                  type='First Name'
                  name='firstName'
                  placeholder={fields[language].Enter_Your_First_Name}
                  value={Fname}
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  required
                  onChange={(e) => setFname(e.target.value)}
                />
                <TextField
                  label={fields[language].lastName}
                  type='Last Name'
                  name='lastName'
                  placeholder={fields[language].Enter_Your_Last_Name}
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  required
                  value={Lname}
                  onChange={(e) => setLname(e.target.value)}
                />
                <TextField
                  label={fields[language].email}
                  title={fields[language]?.Fill_in_the_field}
                  type='email'
                  name='email'
                  placeholder={fields[language].Enter_Your_Email_Address}
                  value={email}
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  emailValidationMessage={fields[language]?.Email_validation}
                  required
                  onChange={(e) => setEmail(e.target.value)}
                />
                <SelectBox
                  label={fields[language].country}
                  name='country'
                  options={sortedCountryList}
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  required
                  title={fields[language]?.Fill_in_the_field}
                />
                <PasswordField
                  label={fields[language].password}
                  title={fields[language]?.Fill_in_the_field}
                  type='password'
                  name='password'
                  placeholder={fields[language].Enter_Your_PASSWORD}
                  value={password}
                  required
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  minLength={6}
                  onChange={(e: any) => setPassword(e.target.value)}
                  language={language}
                  setError={setPError}
                />
                <PasswordField
                  label={fields[language].rewrite_password}
                  title={fields[language]?.Fill_in_the_field}
                  type='Re-Type Password'
                  name='confirm_password'
                  placeholder={fields[language].Enter_Your_RETYPE}
                  value={RTpassword}
                  required
                  requiredMessage={fields[language]?.Fill_in_the_field}
                  minLength={6}
                  onChange={(e: any) => setRTPassword(e.target.value)}
                  language={language}
                />

                <input
                  type="text"
                  name={honeypotFieldName}
                  value=""
                  style={{ opacity: '0' }}
                  autoComplete="off"
                  tabIndex={-1}
                />
              </div>
              <ReCAPTCHA
                ref={recaptchaRef}
                size='invisible'
                sitekey='6Le5Fr4qAAAAAKqKTbR2ueuHJrG3GzlBRa679O6z'
                badge='bottomright'
              />
            </div>
          </div>
          {error && <p className='error'>{error}</p>}
          <div className='mt-[0px] pb-[20px] md:pb-[10px] sm:pb-[5px]'>
            {loading ? (
              <SpinnerLoader />
            ) : (
              <button className='btn-primary' type='submit'>
                {fields[language].Register}
              </button>
            )}
          </div>
          <span className='text-base md:text-sm sm:text-xs'>
            {labels[language].ALREADY_HAVE_AN_ACCOUNT}{' '}
            <a href='/auth/login' className='text-green-500'>
              {fields[language].SIGN_IN}
            </a>
          </span>
        </div>
      </form>
    </div>
  );
};

export default SignUpComponent;