import { css } from "@emotion/react";
import { useEffect, useRef } from "react";
import { useSearchParams } from "react-router";

import { Alert, Flex, View } from "@phoenix/components";

import { getAuthErrorMessage, getAuthSuccessMessage } from "./authErrors";
import { AuthLayout } from "./AuthLayout";
import { LDAPLoginForm } from "./LDAPLoginForm";
import { LoginForm } from "./LoginForm";
import { OAuth2Login } from "./OAuth2Login";
import { PhoenixLogo } from "./PhoenixLogo";

const separatorCSS = css`
  text-align: center;
  margin-top: var(--global-dimension-size-200);
  margin-bottom: var(--global-dimension-size-200);
  color: var(--global-text-color-700);
`;

const oAuthLoginButtonListCSS = css`
  display: flex;
  flex-direction: column;
  gap: var(--global-dimension-size-100);
  flex-wrap: wrap;
  justify-content: center;
`;

export function LoginPage() {
  const showLoginForm = !window.Config.basicAuthDisabled;
  const showLDAPForm = window.Config.ldapEnabled;
  const oAuth2Idps = window.Config.oAuth2Idps;
  const hasOAuth2Idps = oAuth2Idps.length > 0;
  const [searchParams, setSearchParams] = useSearchParams();
  const returnUrl = searchParams.get("returnUrl");
  const successCode = searchParams.get("message");
  const errorCode = searchParams.get("error");
  // Validate and get safe messages (prevents XSS/phishing via query params)
  const successMessage = getAuthSuccessMessage(successCode);
  const errorMessage = getAuthErrorMessage(errorCode);
  // The name of the idp to trigger
  const triggerIdp = searchParams.get("trigger");

  // Refs for each idp form
  const formRefs = useRef<Record<string, HTMLFormElement | null>>({});

  useEffect(() => {
    if (triggerIdp && hasOAuth2Idps) {
      const idp = oAuth2Idps.find(
        (idp) => idp.name.toLowerCase() === triggerIdp.toLowerCase()
      );
      if (idp && formRefs.current[idp.name]) {
        formRefs.current[idp.name]?.submit();
      }
    }
    // Only run on mount or when triggerIdp changes
  }, [triggerIdp, hasOAuth2Idps, oAuth2Idps]);

  return (
    <AuthLayout>
      <Flex direction="column" gap="size-200" alignItems="center">
        <View paddingBottom="size-200">
          <PhoenixLogo />
        </View>
      </Flex>
      {successMessage && (
        <View paddingBottom="size-100">
          <Alert variant="success">{successMessage}</Alert>
        </View>
      )}
      {errorMessage && (
        <View paddingBottom="size-100">
          <Alert variant="danger">{errorMessage}</Alert>
        </View>
      )}
      {showLoginForm && (
        <LoginForm
          initialError={null}
          onSubmit={() => {
            setSearchParams((prevSearchParams) => {
              // Clear message and error
              const newSearchParams = new URLSearchParams(prevSearchParams);
              newSearchParams.delete("message");
              newSearchParams.delete("error");
              return newSearchParams;
            });
          }}
        />
      )}
      {showLDAPForm && (
        <>
          {showLoginForm ? <div css={separatorCSS}>or</div> : null}
          <LDAPLoginForm
            initialError={null}
            onSubmit={() => {
              setSearchParams((prevSearchParams) => {
                // Clear message and error
                const newSearchParams = new URLSearchParams(prevSearchParams);
                newSearchParams.delete("message");
                newSearchParams.delete("error");
                return newSearchParams;
              });
            }}
          />
        </>
      )}
      {(showLoginForm || showLDAPForm) && hasOAuth2Idps ? (
        <div css={separatorCSS}>or</div>
      ) : null}
      {hasOAuth2Idps && (
        <>
          <ul css={oAuthLoginButtonListCSS}>
            {oAuth2Idps.map((idp) => (
              <li key={idp.name}>
                <OAuth2Login
                  key={idp.name}
                  idpName={idp.name}
                  idpDisplayName={idp.displayName}
                  returnUrl={returnUrl}
                  ref={(el: HTMLFormElement | null) => {
                    formRefs.current[idp.name] = el;
                  }}
                />
              </li>
            ))}
          </ul>
        </>
      )}
    </AuthLayout>
  );
}
