(function initPortfolioLogin(global) {
  const {
    EMAIL_REGEX,
    INVALID_CREDENTIALS_MESSAGE,
    LOGIN_TECHNICAL_ERROR_CODE,
    VALIDATION_CODES
  } = global.PortfolioAppConfig;

  const {
    getValidationMessage,
    clearSessionStorage
  } = global.PortfolioApp;

  const {
    hashPasswordWithServerParameters
  } = global.PortfolioHashing || {};

  const sharedComponents = global.PortfolioSharedComponents || {};
  const BlockingScreenLoader = sharedComponents.BlockingScreenLoader;

  function persistAuthToken(token) {
    if (typeof token !== 'string' || !token) {
      return;
    }

    try {
      window.sessionStorage.setItem('portfolio-auth-token', token);
    } catch (storageError) {
      // Ignore storage failures and continue redirecting.
    }
  }

  function validateLoginFields(values) {
    const errors = {};
    const email = (values.email || '').trim();
    const password = values.password || '';

    if (!email) {
      errors.email = 'Email is required.';
    } else if (!EMAIL_REGEX.test(email)) {
      errors.email = 'Enter a valid email address.';
    }

    if (!password) {
      errors.password = 'Password is required.';
    }

    return errors;
  }

  function decodeAutoLoginParams(encodedValue) {
    if (typeof encodedValue !== 'string' || !encodedValue.trim()) {
      return null;
    }

    try {
      const normalized = encodedValue.trim().replace(/-/g, '+').replace(/_/g, '/');
      const padded = normalized + '='.repeat((4 - (normalized.length % 4)) % 4);
      const decodedJson = window.atob(padded);
      const parsed = JSON.parse(decodedJson);

      if (!parsed || typeof parsed !== 'object') {
        return null;
      }

      const email = typeof parsed.email === 'string' ? parsed.email.trim() : '';
      const password = typeof parsed.password === 'string' ? parsed.password : '';
      const defaultRoute = typeof parsed.defaultRoute === 'string' ? parsed.defaultRoute.trim() : '';

      if (!email || !password || !defaultRoute || !defaultRoute.startsWith('/')) {
        return null;
      }

      return {
        email,
        password,
        defaultRoute
      };
    } catch (error) {
      return null;
    }
  }

  async function requestHashParams(email) {
    const response = await fetch('/api/auth/hashparams', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email })
    });

    return response;
  }

  function LoginPage({ route, navigate }) {
    const [formValues, setFormValues] = React.useState({ email: '', password: '' });
    const [errors, setErrors] = React.useState({});
    const [status, setStatus] = React.useState(null);
    const [notice, setNotice] = React.useState(null);
    const [isSubmitting, setIsSubmitting] = React.useState(false);
    const attemptedAutoLoginRef = React.useRef(null);

    React.useEffect(() => {
      setFormValues({ email: '', password: '' });
      setErrors({});
      setStatus(null);
    }, [route.view]);

    React.useEffect(() => {
      const accountSettings = global.PortfolioAccountSettings || {};
      const message = typeof accountSettings.readPasswordChangedMessage === 'function'
        ? accountSettings.readPasswordChangedMessage()
        : '';
      if (message) {
        setNotice(message);
      }
    }, []);

    React.useEffect(() => {
      const encodedParams = typeof route.autoLoginParams === 'string' ? route.autoLoginParams : '';
      if (!encodedParams || attemptedAutoLoginRef.current === encodedParams) {
        return;
      }

      attemptedAutoLoginRef.current = encodedParams;
      const params = decodeAutoLoginParams(encodedParams);
      if (!params) {
        setStatus({ type: 'error', message: 'An error has occurred.' });
        return;
      }

      clearSessionStorage();
      setIsSubmitting(true);
      setErrors({});
      setStatus({ type: 'success', message: 'Auto Login. Please wait.' });

      (async () => {
        try {
          const hashParamsResponse = await requestHashParams(params.email);
          if (!hashParamsResponse.ok) {
            throw new Error('Auto login hash params request failed.');
          }

          const hashParamsPayload = await hashParamsResponse.json();
          const passwordHash = await hashPasswordWithServerParameters(params.password, hashParamsPayload.passwordHashParams);

          const loginResponse = await fetch('/api/auth/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              email: params.email,
              passwordHash,
              autoLogin: true
            })
          });

          if (!loginResponse.ok) {
            throw new Error('Auto login request failed.');
          }

          const loginPayload = await loginResponse.json().catch(() => ({}));
          if (!loginPayload || typeof loginPayload.token !== 'string' || !loginPayload.token) {
            throw new Error('Auto login token missing.');
          }

          persistAuthToken(loginPayload.token);
          window.location.assign(params.defaultRoute);
        } catch (error) {
          setStatus({ type: 'error', message: 'An error has occurred.' });
        } finally {
          setIsSubmitting(false);
        }
      })();
    }, [route.autoLoginParams]);

    const handleChange = (event) => {
      const { name, value } = event.target;
      setFormValues((current) => {
        const nextValues = Object.assign({}, current);
        nextValues[name] = value;
        return nextValues;
      });

      if (errors[name]) {
        setErrors((current) => {
          const nextErrors = Object.assign({}, current);
          nextErrors[name] = undefined;
          return nextErrors;
        });
      }

      if (status) {
        setStatus(null);
      }
    };

    const handleSubmit = async (event) => {
      event.preventDefault();
      setStatus(null);
      setNotice(null);

      const disableClientValidation = Boolean(window.disableClientValidation);
      const nextErrors = disableClientValidation ? {} : validateLoginFields(formValues);
      setErrors(nextErrors);
      if (!disableClientValidation && Object.keys(nextErrors).length > 0) {
        const code = nextErrors.email ? VALIDATION_CODES.email : VALIDATION_CODES.passwordHash;
        setStatus({ type: 'error', message: getValidationMessage('A Validation Issue occurred.', code) });
        return;
      }

      clearSessionStorage();
      setIsSubmitting(true);

      try {
        const email = formValues.email.trim();
        const hashParamsResponse = await requestHashParams(email);

        if (hashParamsResponse.status === 401) {
          setStatus({ type: 'error', message: INVALID_CREDENTIALS_MESSAGE });
          return;
        }

        if (hashParamsResponse.status === 500) {
          const payload = await hashParamsResponse.json().catch(() => ({}));
          setStatus({
            type: 'error',
            message: getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : LOGIN_TECHNICAL_ERROR_CODE)
          });
          return;
        }

        if (hashParamsResponse.status === 422) {
          const payload = await hashParamsResponse.json().catch(() => ({}));
          setStatus({
            type: 'error',
            message: getValidationMessage(payload.message || 'A Validation Issue occurred.', payload.code != null ? payload.code : VALIDATION_CODES.email)
          });
          return;
        }

        if (!hashParamsResponse.ok) {
          throw new Error('Hash params request failed.');
        }

        const hashParamsPayload = await hashParamsResponse.json();
        const passwordHash = await hashPasswordWithServerParameters(formValues.password, hashParamsPayload.passwordHashParams);

        const loginResponse = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, passwordHash })
        });

        if (loginResponse.status === 401) {
          setStatus({ type: 'error', message: INVALID_CREDENTIALS_MESSAGE });
          return;
        }

        if (loginResponse.status === 500) {
          const payload = await loginResponse.json().catch(() => ({}));
          setStatus({
            type: 'error',
            message: getValidationMessage('A Technical Error occurred.', payload.code != null ? payload.code : LOGIN_TECHNICAL_ERROR_CODE)
          });
          return;
        }

        if (loginResponse.status === 422) {
          const payload = await loginResponse.json().catch(() => ({}));
          setStatus({
            type: 'error',
            message: getValidationMessage(payload.message || 'A Validation Issue occurred.', payload.code != null ? payload.code : VALIDATION_CODES.email)
          });
          return;
        }

        if (!loginResponse.ok) {
          throw new Error('Login request failed.');
        }

        const loginPayload = await loginResponse.json();
        persistAuthToken(loginPayload && loginPayload.token);
        window.location.assign('/portfolios');
      } catch (error) {
        setStatus({ type: 'error', message: getValidationMessage('A Technical Error occurred.', LOGIN_TECHNICAL_ERROR_CODE) });
      } finally {
        setIsSubmitting(false);
      }
    };

    return (
      <div className="content auth-shell">
        {typeof BlockingScreenLoader === 'function' ? (
          <BlockingScreenLoader
            isActive={isSubmitting}
            title="Login in Progress"
            message="Please wait."
          />
        ) : null}

        <section className="auth-card">
          <div className="auth-header">
            <div>
              <h2 style={{ margin: 0 }}>Log in</h2>
              <p className="muted" style={{ margin: '0.3rem 0 0' }}>Welcome back to your portfolio manager.</p>
            </div>
            <button className="secondary-btn" onClick={() => navigate('/')}>Back to Overview</button>
          </div>

          <form className="form-grid" style={{ marginTop: '1rem' }} onSubmit={handleSubmit}>
            {notice && (
              <div className="status-message success" role="status">
                <span>{notice}</span>
              </div>
            )}
            {(!status || status.type !== 'success') && (
              <div className={`field ${errors.email ? 'invalid' : ''}`}>
                <label htmlFor="email">Email</label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  value={formValues.email}
                  onChange={handleChange}
                  placeholder="you@company.com"
                  autoComplete="username"
                />
                {errors.email && <span className="error-message">{errors.email}</span>}
              </div>
            )}
            {(!status || status.type !== 'success') && (
              <div className={`field ${errors.password ? 'invalid' : ''}`}>
                <label htmlFor="password">Password</label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  value={formValues.password}
                  onChange={handleChange}
                  placeholder="Enter your password"
                  autoComplete="current-password"
                />
                {errors.password && <span className="error-message">{errors.password}</span>}
              </div>
            )}

            {status && (
              <div className={`status-message ${status.type}`} role="status">
                <span>{status.message}</span>
              </div>
            )}

            {(!status || status.type !== 'success') && (
              <div className="hero-actions upload-hero-actions">
                <button className="primary-btn" type="submit" disabled={isSubmitting}>{isSubmitting ? 'Working...' : 'Login'}</button>
              </div>
            )}
          </form>
        </section>

      </div>
    );
  }

  global.PortfolioLogin = {
    LoginPage
  };
})(window);