import { type MouseEvent, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import clsx from 'clsx';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { KeenIcon } from '@/components';
import { toAbsoluteUrl } from '@/utils';
import { useAuthContext } from '@/auth';
import { useLayout } from '@/providers';
import { Alert } from '@/components';
import moment from 'moment';
import { Helmet } from 'react-helmet';

const loginSchema = Yup.object().shape({
  username: Yup.string().required('Username is required'),
  password: Yup.string()
    .min(3, 'Minimum 3 symbols')
    .max(50, 'Maximum 50 symbols')
    .required('Password is required'),
  remember: Yup.boolean()
});

const initialValues = {
  username: '',
  password: '',
  remember: false
};

const Login = () => {
  const [loading, setLoading] = useState(false);
  const { login } = useAuthContext();
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || '/';
  const [showPassword, setShowPassword] = useState(false);
  const { currentLayout } = useLayout();

  const formik = useFormik({
    initialValues,
    validationSchema: loginSchema,
    onSubmit: async (values, { setStatus, setSubmitting }) => {
      setLoading(true);

      try {
        if (!login) throw new Error('JWTProvider is required for this form.');
        await login(values.username, values.password);

        if (values.remember) {
          localStorage.setItem('username', values.username);
        } else {
          localStorage.removeItem('username');
        }

        navigate(from, { replace: true });
      } catch (error: any) {
        if (error.response && error.response.data) {
          setStatus(error.response.data.message);
        } else {
          setStatus('The login details are incorrect');
        }

        setSubmitting(false);
      }
      setLoading(false);
    }
  });

  const togglePassword = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    setShowPassword(!showPassword);
  };

  const handleKeyPress = (e: { key: string }) => {
    if (e.key === 'Enter') {
      formik.handleSubmit();
    }
  };

  return (
    <>
      <Helmet>
        <title>TPAY | Sign In</title>
      </Helmet>
      <div className="card max-w-[390px] w-full">
        <form
          className="card-body flex flex-col gap-5 p-10"
          onSubmit={formik.handleSubmit}
          noValidate
        >
          <div className="text-center">
            <h3 className="text-lg font-semibold text-gray-900 leading-none ">Sign in</h3>
          </div>
          {formik.status && <Alert variant="danger">{formik.status}</Alert>}
          <div className="flex flex-col gap-1">
            <label className="form-label text-gray-900 ps-2.5">Login</label>
            <label className="input">
              <input
                placeholder="Enter username"
                autoComplete="off"
                {...formik.getFieldProps('username')}
                className={clsx('form-control', {
                  'is-invalid': formik.touched.username && formik.errors.username
                })}
                onKeyPress={handleKeyPress}
              />
            </label>
            {formik.touched.username && formik.errors.username && (
              <span role="alert" className="text-danger text-xs mt-1">
                {formik.errors.username}
              </span>
            )}
          </div>

          <div className="flex flex-col gap-1">
            <div className="flex items-center justify-between gap-1">
              <label className="form-label text-gray-900 ps-2.5">Password</label>
            </div>
            <label className="input">
              <input
                type={showPassword ? 'text' : 'password'}
                placeholder="Enter Password"
                autoComplete="off"
                {...formik.getFieldProps('password')}
                className={clsx('form-control', {
                  'is-invalid': formik.touched.password && formik.errors.password
                })}
                onKeyPress={handleKeyPress}
              />
              <button className="btn btn-icon" onClick={togglePassword} type="button">
                <KeenIcon icon="eye" className={clsx('text-gray-500', { hidden: showPassword })} />
                <KeenIcon
                  icon="eye-slash"
                  className={clsx('text-gray-500', { hidden: !showPassword })}
                />
              </button>
            </label>
            {formik.touched.password && formik.errors.password && (
              <span role="alert" className="text-danger text-xs mt-1">
                {formik.errors.password}
              </span>
            )}
          </div>

          <div className="flex items-center justify-between gap-1">
            <label className="checkbox-group">
              <input
                className="checkbox checkbox-sm"
                type="checkbox"
                {...formik.getFieldProps('remember')}
              />
              <span className="checkbox-label">Remember me</span>
            </label>
            <Link
              to={
                currentLayout?.name === 'auth-branded'
                  ? '/auth/reset-password'
                  : '/auth/classic/reset-password'
              }
              className="text-2sm link shrink-0"
            >
              Forgot Password?
            </Link>
          </div>

          <button
            type="submit"
            className="btn btn-primary flex justify-center grow"
            disabled={loading || formik.isSubmitting}
          >
            {loading ? 'Please wait...' : 'Sign In'}
          </button>
          <div>
            <p className="text-2sm text-center" style={{ fontSize: '12px', letterSpacing: 0.25 }}>
              Copyright {moment().year()} &copy; Telkomcel All rights reserved.
            </p>
          </div>
        </form>
      </div>
    </>
  );
};

export { Login };
