/* eslint-disable @next/next/no-img-element */
import Password from '@/components/Form/Password';
import PreLoginLayout from '@/components/Layouts/PreLoginLayout';
import { useLoginMutation } from '@/lib/redux/services/auth.api';
import { loginSchema } from '@/lib/validations';
import style from '@/styles/modules/prelogin/prelogin-layout.module.scss';
import { yupResolver } from '@hookform/resolvers/yup';
import cookies from 'js-cookie';
import { signIn } from 'next-auth/react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ReactNode, useState } from 'react';
import { Spinner } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import toast from 'react-hot-toast';

export default function AdminLogin() {
  const router = useRouter();
  const [rememberMe, setRemember] = useState<boolean | any>(false);
  const [login, { isLoading }] = useLoginMutation();
   const deviceToken = cookies?.get('webToken');
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ resolver: yupResolver(loginSchema) });

  const handleSigninSubmit = async (data: any) => {
    try {
      // Handle remember me cookies
      if (rememberMe) {
        cookies.set('email', data.email, { expires: 7 });
        cookies.set('password', data.password, { expires: 7 });
      } else {
        cookies.remove('email');
        cookies.remove('password');
      }

      // Call login API
      const res = await login({
        email: data.email,
        password: data.password,
        devicetoken: deviceToken
      }).unwrap();

      if (!res.status) {
        toast.error(res?.data?.message || 'Login failed');
        return;
      }

      // Set session with next-auth
      await signIn('credentials', {
        redirect: false,
        accessToken: res?.data?.token,
        user: JSON.stringify(res?.data),
      });

      // After successful login
      if (res?.data?.isCreateProfile === true) {
        toast.success('Login successful');
        router.push('/admin/admin-campaign');
      } else {
        toast.success('First complete your profile');
        router.push('/auth/admin-auth/admin-create-profile');
      }
    } catch (err: any) {
      console.error(err);
      toast.error(err?.data?.message || 'Something went wrong');
    }
  };

  return (
    <>
      <PreLoginLayout>
        <form className="prelogin form-wrapper" onSubmit={handleSubmit(handleSigninSubmit)}>
          <h1 className={style.form_title}>Welcome Back!</h1>
          <p className={style.form_para}>Please use your email and password to login</p>
          {/* EMAIL */}
          <div className="form-group">
            <div className="icon-field">
              <label htmlFor="">Email address</label>
              <input
                type="email"
                {...register('email')}
                className="form-control"
                placeholder="Example@domain.com"
                id="email"
                name="email"
              />
              <img src={'/images/Message.svg'} alt="" className="icon" />
              {/* <FontAwesomeIcon icon={envelope} /> */}
            </div>
          </div>
          {errors.email && (
            <h6
              style={{
                textAlign: 'left',
                marginBottom: '12px',
                marginTop: '0px',
              }}
            >
              {errors.email.message as ReactNode}
            </h6>
          )}

          {/* PASSWORD */}

          <Password
            id="txtPassword"
            name="txtPassword"
            resolver={{ ...register('password') }}
            label="Password"
            placeholder="Enter Password"
          />
          {errors.password && (
            <h6
              style={{
                textAlign: 'left',
                marginBottom: '12px',
                marginTop: '0px',
              }}
            >
              {errors.password.message as ReactNode}
            </h6>
          )}

          {/* FORGOT PASSWORD & REMEMBER RADIO */}
          <div className={`form-group ${style.forgotWrapper}`}>
            <div className="form-check checkbox">
              <input
                type="checkbox"
                name="chkRemember"
                id="chkRemember"
                className="form-check-input"
                value={rememberMe}
                onChange={() => setRemember(!rememberMe)}
              />
              <span className="form-check-checkmark"></span>
              <label htmlFor="chkRemember" className="form-check-label">
                Remember Me
              </label>
            </div>
            {/* <Link href={'./forgot-password'} className="forgot">
              Forgot Password?
            </Link> */}
          </div>
          <div className="form-group">
            <button
              className=" w-100 btn btn-primary mt-4"
              type="submit"
              disabled={isLoading}
              // onClick={() =>  router.push('/admin/admin-campaign')}
            >
              {isLoading ? <Spinner size="sm" /> : 'Login'}
            </button>
          </div>
        </form>
      </PreLoginLayout>
    </>
  );
}

// function ProductCard(props: any) {

//   const[ chat, setChat] = useState(true)
//   const [type , setType] =  useState(`user`)
//   const router = useRouter()
//   return (
//     <Modal
//       {...props}
//       size="md"
//       aria-labelledby="contained-modal-title-vcenter"
//       centered
//       className="affilaite-modal"
//     >
//       <Modal.Header>
//       </Modal.Header>

//       <Modal.Body>
//           <div className="report">
//            <img src={"/images/question.svg"} alt="" />
//            <h4 className="text-center mb-3 mt-5">
//               Change password
//             </h4>
//              <p>Are you sure you want to change your password? </p>
//            <div className="card-btn">
//                    <button type="button" className="w-50 btn btn-primary mt-3 payment" onClick={() => router.push("/auth/admin-auth/admin-create-profile")} >No</button>
//                    <button type="button" className="w-50 btn btn-primary mt-3  gift-cart" onClick={() => router.push("/auth/admin-auth/change-password")}>Yes</button>
//              </div>

//          </div>

//       </Modal.Body>

//     </Modal>
//   );
// }