import {
  ArrowLeft,
  ArrowRight,
  Check,
  EnvelopeSimple,
  Key,
  LockKey,
  ShieldCheck,
  User,
} from "@phosphor-icons/react";
import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from "react";
import { Button } from "../button";
import { Card, CardBody, CardHeader } from "../card";
import { Alert } from "../feedback";
import { Center, Column, Row } from "../layout";
import { OtpInput } from "../inputs/otp-input";
import { DatePicker } from "../inputs/date-picker";
import { SegmentedControl } from "../selection/segmented-control";
import { PasswordInput } from "../inputs/password-input";
import { TextField } from "../text-field";
import { Text } from "../typography";
import { UhuruSignInWithDigitwhale } from "./uhuru-sign-in-with-digitwhale";

export type AuthPageFrameProps = {
  animation?: AuthAnimation;
  children: ReactNode;
  description?: string;
  eyebrow?: string;
  footer?: ReactNode;
  title: string;
  variant?: AuthPageVariant;
};

export type AuthAnimation = "none" | "fade" | "slide-up" | "scale";
export type AuthPageVariant = "default" | "minimal" | "quiet";
export type AuthPageFrameOptions = Omit<Partial<AuthPageFrameProps>, "children">;

export function AuthPageFrame({
  children,
  animation = "fade",
  description,
  eyebrow = "Digitwhale Innovations",
  footer,
  title,
  variant = "default",
}: AuthPageFrameProps) {
  return (
    <Center className={`uhuru-auth-page uhuru-auth-page--${variant} min-h-screen bg-[var(--uhuru-bg-base)] px-4 py-8 sm:px-8 sm:py-12`}>
      <Card className={`uhuru-auth-card uhuru-auth-card--${animation} w-full max-w-xl overflow-hidden shadow-[var(--uhuru-shadow-lg)]`}>
        <CardHeader
          className="px-6 py-7 sm:px-8 sm:py-8"
          description={description}
          eyebrow={eyebrow}
          title={title}
        />
        <CardBody className="gap-6 px-6 py-6 sm:gap-7 sm:px-8 sm:py-8">
          {children}
          {footer ? <div className="pt-1 text-center text-xs text-[var(--uhuru-text-tertiary)]">{footer}</div> : null}
        </CardBody>
      </Card>
    </Center>
  );
}

function AuthDivider({ label = "Or continue with" }: { label?: string }) {
  return (
    <div className="flex items-center gap-3 text-xs uppercase tracking-[0.14em] text-[var(--uhuru-text-tertiary)]">
      <span className="h-px flex-1 bg-[var(--uhuru-border-subtle)]" />
      <span>{label}</span>
      <span className="h-px flex-1 bg-[var(--uhuru-border-subtle)]" />
    </div>
  );
}

function AuthLink({ children, onClick }: { children: ReactNode; onClick?: () => void }) {
  return (
    <Button className="h-auto p-0 text-[var(--uhuru-accent-strong)]" onClick={onClick} tone="ghost">
      {children}
    </Button>
  );
}

export type LoginPageProps = {
  defaultEmail?: string;
  error?: string;
  frame?: AuthPageFrameOptions;
  loading?: boolean;
  onCreateAccount?: () => void;
  onDigitwhale?: () => void;
  onForgotPassword?: (email: string) => void;
  onPasskey?: () => void;
  onSubmit?: (data: { email: string; password: string }) => void;
};

export function LoginPage({
  defaultEmail = "",
  error,
  frame,
  loading = false,
  onCreateAccount,
  onDigitwhale,
  onForgotPassword,
  onPasskey,
  onSubmit,
}: LoginPageProps) {
  const [email, setEmail] = useState(defaultEmail);
  const [password, setPassword] = useState("");

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    onSubmit?.({ email, password });
  }

  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? "Sign in to continue to your Uhuru workspace."}
      title={frame?.title ?? "Welcome back"}
      footer={
        <span>
          New to Uhuru? <AuthLink onClick={onCreateAccount}>Create an account</AuthLink>
        </span>
      }
    >
      <form className="flex flex-col gap-5" onSubmit={submit}>
        {error ? <Alert title="Unable to sign in" tone="error">{error}</Alert> : null}
        <TextField
          autoComplete="email"
          label="Email address"
          onChange={(event) => setEmail(event.target.value)}
          placeholder="you@example.com"
          prefixIcon={<EnvelopeSimple aria-hidden="true" size={18} />}
          required
          type="email"
          value={email}
        />
        <Column gap="sm" mainAxisSize="min">
          <PasswordInput
            autoComplete="current-password"
            label="Password"
            onChange={(event) => setPassword(event.target.value)}
            placeholder="Enter your password"
            prefixIcon={<LockKey aria-hidden="true" size={18} />}
            required
            value={password}
          />
          <div className="flex justify-end">
            <AuthLink onClick={() => onForgotPassword?.(email)}>Forgot password?</AuthLink>
          </div>
        </Column>
        <Button className="w-full" loading={loading} size="large" type="submit">
          Sign in
        </Button>
      </form>
      {onPasskey || onDigitwhale ? <AuthDivider /> : null}
      {onPasskey ? (
        <Button className="w-full" leadingIcon={<Key aria-hidden="true" size={18} />} onClick={onPasskey} tone="secondary">
          Use a passkey
        </Button>
      ) : null}
      {onDigitwhale ? (
        <UhuruSignInWithDigitwhale className="w-full" onClick={onDigitwhale} />
      ) : null}
    </AuthPageFrame>
  );
}

export type ForgotPasswordPageProps = {
  defaultEmail?: string;
  error?: string;
  frame?: AuthPageFrameOptions;
  loading?: boolean;
  onBack?: () => void;
  onSubmit?: (email: string) => void;
  submitted?: boolean;
};

export function ForgotPasswordPage({
  defaultEmail = "",
  error,
  frame,
  loading = false,
  onBack,
  onSubmit,
  submitted = false,
}: ForgotPasswordPageProps) {
  const [email, setEmail] = useState(defaultEmail);

  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? "We will send a secure link to reset your password."}
      title={frame?.title ?? "Forgot password"}
    >
      <Column gap="md" mainAxisSize="min">
        {error ? <Alert title="Could not send reset link" tone="error">{error}</Alert> : null}
        {submitted ? (
          <Alert title="Check your inbox" tone="success">
            If an account exists for {email}, a password reset link is on its way.
          </Alert>
        ) : (
          <form className="flex flex-col gap-5" onSubmit={(event) => { event.preventDefault(); onSubmit?.(email); }}>
            <TextField
              autoComplete="email"
              label="Email address"
              onChange={(event) => setEmail(event.target.value)}
              placeholder="you@example.com"
              prefixIcon={<EnvelopeSimple aria-hidden="true" size={18} />}
              required
              type="email"
              value={email}
            />
            <Button loading={loading} size="large" type="submit">Send reset link</Button>
          </form>
        )}
        <Button leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={onBack} tone="ghost">
          Back to sign in
        </Button>
      </Column>
    </AuthPageFrame>
  );
}

export type OtpVerificationPageProps = {
  channel?: string;
  error?: string;
  frame?: AuthPageFrameOptions;
  length?: number;
  loading?: boolean;
  onBack?: () => void;
  onResend?: () => void;
  onSubmit?: (code: string) => void;
  value?: string;
};

export function OtpVerificationPage({
  channel = "your email address",
  error,
  frame,
  length = 6,
  loading = false,
  onBack,
  onResend,
  onSubmit,
  value: controlledValue,
}: OtpVerificationPageProps) {
  const [internalValue, setInternalValue] = useState(controlledValue ?? "");
  const value = controlledValue ?? internalValue;

  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? `Enter the ${length}-digit code we sent to ${channel}.`}
      title={frame?.title ?? "Verify your identity"}
    >
      <Column gap="lg" mainAxisSize="min">
        {error ? <Alert title="Verification failed" tone="error">{error}</Alert> : null}
        <OtpInput
          label="Verification code"
          length={length}
          onChange={setInternalValue}
          value={value}
        />
        <Button className="w-full" disabled={value.length !== length} loading={loading} onClick={() => onSubmit?.(value)} size="large">
          Verify code
        </Button>
        <Row gap="sm" mainAxisAlignment="center">
          <Text size="sm" tone="secondary">Did not receive it?</Text>
          <AuthLink onClick={onResend}>Resend code</AuthLink>
        </Row>
        <Button leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={onBack} tone="ghost">
          Use a different method
        </Button>
      </Column>
    </AuthPageFrame>
  );
}

export type PasskeyPageProps = {
  error?: string;
  frame?: AuthPageFrameOptions;
  loading?: boolean;
  onBack?: () => void;
  onUsePassword?: () => void;
  onSubmit?: () => void;
};

export function PasskeyPage({ error, frame, loading = false, onBack, onSubmit, onUsePassword }: PasskeyPageProps) {
  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? "Use a passkey stored on this device or in your password manager."}
      title={frame?.title ?? "Sign in with a passkey"}
    >
      <Column gap="md" mainAxisSize="min">
        <div className="flex flex-col items-center gap-4 rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] px-6 py-8 text-center">
          <span className="grid h-14 w-14 place-items-center rounded-full bg-[var(--uhuru-surface-default)] text-[var(--uhuru-accent-strong)] shadow-[var(--uhuru-shadow-sm)]">
            <Key aria-hidden="true" size={28} weight="duotone" />
          </span>
          <Column gap="xs" mainAxisSize="min">
            <Text className="font-medium">Fast, private, and phishing-resistant</Text>
            <Text size="sm" tone="secondary">Your biometric or device PIN stays on your device.</Text>
          </Column>
        </div>
        {error ? <Alert title="Passkey sign-in failed" tone="error">{error}</Alert> : null}
        <Button className="w-full" loading={loading} onClick={onSubmit} size="large" leadingIcon={<ShieldCheck aria-hidden="true" size={18} />}>
          Continue with passkey
        </Button>
        <Row gap="sm" mainAxisAlignment="center">
          <Text size="sm" tone="secondary">Prefer a password?</Text>
          <AuthLink onClick={onUsePassword}>Sign in another way</AuthLink>
        </Row>
        <Button leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={onBack} tone="ghost">
          Back
        </Button>
      </Column>
    </AuthPageFrame>
  );
}

export type AccountCreationData = {
  dateOfBirth: string;
  email: string;
  firstName: string;
  lastName: string;
  password: string;
  phone: string;
};

export type CreateAccountPageProps = {
  defaultValues?: Partial<AccountCreationData>;
  error?: string;
  frame?: AuthPageFrameOptions;
  loading?: boolean;
  onBack?: () => void;
  onSubmit?: (data: AccountCreationData) => void;
};

const accountSteps = ["Your name", "Account details", "Personal details"];

export function CreateAccountPage({
  defaultValues,
  error,
  frame,
  loading = false,
  onBack,
  onSubmit,
}: CreateAccountPageProps) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState<AccountCreationData>({
    dateOfBirth: defaultValues?.dateOfBirth ?? "",
    email: defaultValues?.email ?? "",
    firstName: defaultValues?.firstName ?? "",
    lastName: defaultValues?.lastName ?? "",
    password: defaultValues?.password ?? "",
    phone: defaultValues?.phone ?? "",
  });

  function update(field: keyof AccountCreationData, value: string) {
    setData((current) => ({ ...current, [field]: value }));
  }

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (step < accountSteps.length - 1) {
      setStep((current) => current + 1);
      return;
    }
    onSubmit?.(data);
  }

  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? "Create your account in a few focused steps."}
      title={frame?.title ?? "Create your account"}
      footer={
        <span>
          Already have an account? <AuthLink onClick={onBack}>Sign in</AuthLink>
        </span>
      }
    >
      <Column gap="lg" mainAxisSize="min">
        <div className="grid grid-cols-3 gap-2" aria-label="Account creation progress">
          {accountSteps.map((label, index) => (
            <div className="flex min-w-0 flex-col gap-2" key={label}>
              <div className={`h-1 rounded-full ${index <= step ? "bg-[var(--uhuru-accent-strong)]" : "bg-[var(--uhuru-border-subtle)]"}`} />
              <span className={`truncate text-xs ${index === step ? "font-medium text-[var(--uhuru-text-primary)]" : "text-[var(--uhuru-text-tertiary)]"}`}>{label}</span>
            </div>
          ))}
        </div>
        {error ? <Alert title="Could not create account" tone="error">{error}</Alert> : null}
        <form className="flex flex-col gap-5" onSubmit={submit}>
          {step === 0 ? (
            <Column gap="md" mainAxisSize="min">
              <TextField autoComplete="given-name" label="First name" onChange={(event) => update("firstName", event.target.value)} prefixIcon={<User aria-hidden="true" size={18} />} required value={data.firstName} />
              <TextField autoComplete="family-name" label="Last name" onChange={(event) => update("lastName", event.target.value)} required value={data.lastName} />
            </Column>
          ) : null}
          {step === 1 ? (
            <Column gap="md" mainAxisSize="min">
              <TextField autoComplete="email" label="Email address" onChange={(event) => update("email", event.target.value)} prefixIcon={<EnvelopeSimple aria-hidden="true" size={18} />} required type="email" value={data.email} />
              <PasswordInput autoComplete="new-password" label="Password" onChange={(event) => update("password", event.target.value)} prefixIcon={<LockKey aria-hidden="true" size={18} />} minLength={8} required value={data.password} />
            </Column>
          ) : null}
          {step === 2 ? (
            <Column gap="md" mainAxisSize="min">
              <DatePicker autoComplete="bday" label="Date of birth" onChange={(event) => update("dateOfBirth", event.target.value)} required value={data.dateOfBirth} />
              <TextField autoComplete="tel" label="Phone number" onChange={(event) => update("phone", event.target.value)} placeholder="+1 555 123 4567" required type="tel" value={data.phone} />
            </Column>
          ) : null}
          <Row gap="sm" mainAxisAlignment="spaceBetween">
            <Button disabled={step === 0} leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={() => setStep((current) => current - 1)} tone="ghost">Back</Button>
            <Button loading={loading} type="submit" trailingIcon={step === accountSteps.length - 1 ? <Check aria-hidden="true" size={18} /> : <ArrowRight aria-hidden="true" size={18} />}>
              {step === accountSteps.length - 1 ? "Create account" : "Continue"}
            </Button>
          </Row>
        </form>
      </Column>
    </AuthPageFrame>
  );
}

export type AuthTwoFactorMethod = "recovery-key" | "authenticator" | "email-otp";

export type TwoFactorPageProps = {
  availableMethods?: AuthTwoFactorMethod[];
  channel?: string;
  defaultMethod?: AuthTwoFactorMethod;
  error?: string;
  frame?: AuthPageFrameOptions;
  loading?: boolean;
  method?: AuthTwoFactorMethod;
  onBack?: () => void;
  onMethodChange?: (method: AuthTwoFactorMethod) => void;
  onResend?: () => void;
  onSubmit?: (data: { method: AuthTwoFactorMethod; value: string }) => void;
  value?: string;
};

const defaultTwoFactorMethods: AuthTwoFactorMethod[] = ["authenticator", "email-otp", "recovery-key"];
const twoFactorLabels: Record<AuthTwoFactorMethod, string> = {
  authenticator: "Authenticator",
  "email-otp": "Email code",
  "recovery-key": "Recovery key",
};

export function TwoFactorPage({
  availableMethods = defaultTwoFactorMethods,
  channel = "your email address",
  defaultMethod,
  error,
  frame,
  loading = false,
  method: controlledMethod,
  onBack,
  onMethodChange,
  onResend,
  onSubmit,
  value: controlledValue,
}: TwoFactorPageProps) {
  const methods = availableMethods.filter((candidate, index) => availableMethods.indexOf(candidate) === index);
  const initialMethod = defaultMethod && methods.includes(defaultMethod) ? defaultMethod : methods[0] ?? "authenticator";
  const [internalMethod, setInternalMethod] = useState<AuthTwoFactorMethod>(initialMethod);
  const [internalValue, setInternalValue] = useState("");
  const selectedMethod = controlledMethod && methods.includes(controlledMethod) ? controlledMethod : internalMethod;
  const value = controlledValue ?? internalValue;
  const isOtp = selectedMethod === "authenticator" || selectedMethod === "email-otp";

  function changeMethod(next: string) {
    const nextMethod = next as AuthTwoFactorMethod;
    if (!methods.includes(nextMethod)) return;
    setInternalMethod(nextMethod);
    setInternalValue("");
    onMethodChange?.(nextMethod);
  }

  return (
    <AuthPageFrame
      {...frame}
      description={frame?.description ?? "Choose an available verification method to finish signing in."}
      title={frame?.title ?? "Two-step verification"}
    >
      <Column gap="md" mainAxisSize="min">
        {error ? <Alert title="Verification failed" tone="error">{error}</Alert> : null}
        {methods.length > 1 ? (
          <SegmentedControl
            items={methods.map((candidate) => ({ label: twoFactorLabels[candidate], value: candidate }))}
            onValueChange={changeMethod}
            value={selectedMethod}
          />
        ) : null}
        {selectedMethod === "recovery-key" ? (
          <TextField
            autoComplete="off"
            label="Recovery key"
            onChange={(event) => setInternalValue(event.target.value)}
            placeholder="Enter your recovery key"
            prefixIcon={<Key aria-hidden="true" size={18} />}
            value={value}
          />
        ) : (
          <Column gap="sm" mainAxisSize="min">
            <OtpInput
              label={selectedMethod === "email-otp" ? `Code sent to ${channel}` : "Authenticator code"}
              length={6}
              onChange={setInternalValue}
              value={value}
            />
            {selectedMethod === "email-otp" ? (
              <div className="flex justify-end"><AuthLink onClick={onResend}>Resend code</AuthLink></div>
            ) : null}
          </Column>
        )}
        <Button
          className="w-full"
          disabled={!value || (isOtp && value.length !== 6)}
          loading={loading}
          onClick={() => onSubmit?.({ method: selectedMethod, value })}
          size="large"
        >
          Verify and continue
        </Button>
        <Button leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={onBack} tone="ghost">
          Use a different method
        </Button>
      </Column>
    </AuthPageFrame>
  );
}

export type AuthFlowScreen = "login" | "forgot-password" | "otp" | "passkey" | "two-factor" | "create-account";

export type AuthFlowRoutes = Partial<Record<AuthFlowScreen, string>>;

export const defaultAuthFlowRoutes: Record<AuthFlowScreen, string> = {
  login: "/login",
  "forgot-password": "/forgot-password",
  otp: "/verify-code",
  passkey: "/passkey",
  "two-factor": "/two-factor",
  "create-account": "/create-account",
};

export const defaultAuthFlowViews: AuthFlowScreen[] = [
  "login",
  "otp",
];

export type AuthFlowNavigation = {
  back: () => void;
  go: (screen: AuthFlowScreen) => void;
  screen: AuthFlowScreen;
};

export type AuthFlowPageRenderer = (
  screen: AuthFlowScreen,
  navigation: AuthFlowNavigation,
) => ReactNode | undefined;

export type AuthFlowTransition = AuthFlowScreen | void;

type AuthFlowLoginProps = Omit<LoginPageProps, "onCreateAccount" | "onForgotPassword" | "onPasskey">;

export type AuthFlowProps = AuthFlowLoginProps & {
  /** The first page shown by the coordinator. `initialScreen` remains supported as an alias. */
  initialPage?: AuthFlowScreen;
  initialScreen?: AuthFlowScreen;
  /** Enabled routable screens. A route for a disabled screen renders an error. */
  views?: AuthFlowScreen[];
  /** Compatibility alias for `views`. */
  enabledViews?: AuthFlowScreen[];
  /** Override the default paths for each auth screen. */
  routes?: AuthFlowRoutes;
  /** Controlled browser/router path. Defaults to window.location.pathname. */
  currentPath?: string;
  /** Called when AuthFlow navigates to a screen. */
  onRouteChange?: (path: string, screen: AuthFlowScreen) => void;
  /** Props for each built-in page. Navigation callbacks are managed by AuthFlow. */
  login?: AuthFlowLoginProps;
  forgotPassword?: Omit<ForgotPasswordPageProps, "onBack">;
  otp?: Omit<OtpVerificationPageProps, "onBack">;
  passkey?: Omit<PasskeyPageProps, "onBack" | "onUsePassword">;
  twoFactor?: Omit<TwoFactorPageProps, "onBack">;
  createAccount?: Omit<CreateAccountPageProps, "onBack">;
  /** Shared visual configuration applied to every built-in page. */
  frame?: AuthPageFrameOptions;
  onCreateAccount?: (data: AccountCreationData) => void;
  onForgotPassword?: (email: string) => void;
  onLoginSubmit?: (data: { email: string; password: string }, navigation: AuthFlowNavigation) => AuthFlowTransition;
  onRecoverySubmit?: (email: string, navigation: AuthFlowNavigation) => AuthFlowTransition;
  onOtpSubmit?: (code: string) => void;
  onPasskey?: () => void;
  onTwoFactorSubmit?: (data: { method: AuthTwoFactorMethod; value: string }, navigation: AuthFlowNavigation) => AuthFlowTransition;
  onScreenChange?: (screen: AuthFlowScreen) => void;
  /** Return custom UI for a screen, or undefined to use the built-in screen. */
  renderPage?: AuthFlowPageRenderer;
};

export function AuthRouteError({
  message = "This authentication page is not configured for the current route.",
  onBack,
}: {
  message?: string;
  onBack?: () => void;
}) {
  return (
    <AuthPageFrame description="Update the auth flow views or route configuration before continuing." title="Authentication page unavailable">
      <Alert title="Route is not available" tone="error">{message}</Alert>
      {onBack ? <Button leadingIcon={<ArrowLeft aria-hidden="true" size={18} />} onClick={onBack} tone="ghost">Back to sign in</Button> : null}
    </AuthPageFrame>
  );
}

function screenForPath(path: string, routes: Record<AuthFlowScreen, string>) {
  return (Object.keys(routes) as AuthFlowScreen[]).find((candidate) => routes[candidate] === path);
}

export function AuthFlow({
  createAccount,
  forgotPassword,
  initialPage,
  initialScreen,
  frame,
  currentPath,
  enabledViews,
  login,
  onScreenChange,
  onRouteChange,
  otp,
  passkey,
  twoFactor,
  renderPage,
  routes: routeOverrides,
  views,
  ...props
}: AuthFlowProps) {
  const routes = useMemo(() => ({ ...defaultAuthFlowRoutes, ...routeOverrides }), [routeOverrides]);
  const configuredViews = views ?? enabledViews ?? defaultAuthFlowViews;
  const initialRoutePath = typeof window === "undefined" ? undefined : window.location.pathname;
  const routeScreen = screenForPath(currentPath ?? initialRoutePath ?? "", routes);
  const initialResolvedScreen = routeScreen ?? initialPage ?? initialScreen ?? "login";
  const [screen, setScreen] = useState<AuthFlowScreen>(initialResolvedScreen);
  const [routeError, setRouteError] = useState<string | undefined>(() => {
    if (currentPath && !routeScreen) return `No authentication view is registered for ${currentPath}.`;
    if (routeScreen && !configuredViews.includes(routeScreen)) return `The ${routeScreen} view is not enabled in AuthFlow.views.`;
    if (!configuredViews.includes(initialResolvedScreen)) return `The ${initialResolvedScreen} view is not enabled in AuthFlow.views.`;
    return undefined;
  });

  useEffect(() => {
    if (currentPath !== undefined) {
      const nextScreen = screenForPath(currentPath, routes);
      if (!nextScreen) {
        setRouteError(`No authentication view is registered for ${currentPath}.`);
      } else if (!configuredViews.includes(nextScreen)) {
        setRouteError(`The ${nextScreen} view is not enabled in AuthFlow.views.`);
      } else {
        setRouteError(undefined);
        setScreen(nextScreen);
        onScreenChange?.(nextScreen);
      }
      return;
    }
    function handlePopState() {
      const nextPath = window.location.pathname;
      const nextScreen = screenForPath(nextPath, routes);
      if (!nextScreen) {
        setRouteError(`No authentication view is registered for ${nextPath}.`);
        return;
      }
      if (!configuredViews.includes(nextScreen)) {
        setRouteError(`The ${nextScreen} view is not enabled in AuthFlow.views.`);
        return;
      }
      setRouteError(undefined);
      setScreen(nextScreen);
      onScreenChange?.(nextScreen);
    }
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  }, [configuredViews, currentPath, onScreenChange, routes]);

  const go = (next: AuthFlowScreen) => {
    if (!configuredViews.includes(next)) {
      setRouteError(`The ${next} view is not enabled in AuthFlow.views.`);
      return;
    }
    const nextPath = routes[next];
    setRouteError(undefined);
    setScreen(next);
    if (currentPath === undefined && typeof window !== "undefined" && window.location.pathname !== nextPath) {
      window.history.pushState({}, "", nextPath);
    }
    onRouteChange?.(nextPath, next);
    onScreenChange?.(next);
  };
  const navigation: AuthFlowNavigation = {
    back: () => go("login"),
    go,
    screen,
  };

  if (routeError) {
    return <AuthRouteError message={routeError} onBack={configuredViews.includes("login") ? () => go("login") : undefined} />;
  }

  if (!configuredViews.includes(screen)) {
    return <AuthRouteError message={`The ${screen} view is not enabled in AuthFlow.views.`} onBack={configuredViews.includes("login") ? () => go("login") : undefined} />;
  }

  const customPage = renderPage?.(screen, navigation);

  if (customPage !== undefined) {
    return customPage;
  }

  if (screen === "forgot-password") {
    return (
      <ForgotPasswordPage
        {...forgotPassword}
        frame={{ ...frame, ...forgotPassword?.frame }}
        onBack={navigation.back}
        onSubmit={(email) => {
          (forgotPassword?.onSubmit ?? props.onForgotPassword)?.(email);
          const next = props.onRecoverySubmit?.(email, navigation);
          if (next) go(next);
        }}
      />
    );
  }
  if (screen === "otp") {
    return <OtpVerificationPage {...otp} frame={{ ...frame, ...otp?.frame }} onBack={navigation.back} onSubmit={otp?.onSubmit ?? props.onOtpSubmit} />;
  }
  if (screen === "passkey") {
    return <PasskeyPage {...passkey} frame={{ ...frame, ...passkey?.frame }} onBack={navigation.back} onSubmit={passkey?.onSubmit ?? props.onPasskey} onUsePassword={navigation.back} />;
  }
  if (screen === "two-factor") {
    return (
      <TwoFactorPage
        {...twoFactor}
        frame={{ ...frame, ...twoFactor?.frame }}
        onBack={navigation.back}
        onSubmit={(data) => {
          twoFactor?.onSubmit?.(data);
          const next = props.onTwoFactorSubmit?.(data, navigation);
          if (next) go(next);
        }}
      />
    );
  }
  if (screen === "create-account") {
    return <CreateAccountPage {...createAccount} frame={{ ...frame, ...createAccount?.frame }} onBack={navigation.back} onSubmit={createAccount?.onSubmit ?? props.onCreateAccount} />;
  }

  return (
    <LoginPage
      {...props}
      {...login}
      frame={{ ...frame, ...login?.frame }}
      onCreateAccount={() => go("create-account")}
      onForgotPassword={() => go("forgot-password")}
      onPasskey={() => go("passkey")}
      onSubmit={(data) => {
        (login?.onSubmit ?? props.onSubmit)?.(data);
        const next = props.onLoginSubmit?.(data, navigation);
        if (next) go(next);
      }}
    />
  );
}