"use client";
/**
 * Auth 屏
 *
 * 
 */
import { useEffect, useSyncExternalStore } from "react";

import { MobileShell } from "@/app/_components/core";
import { useAuthState } from "@/stores/auth/auth-context";
import { isAuthenticatedUser } from "@/router/navigation-resolver";
import { ROUTES } from "@/router/routes";
import { useAppNavigator } from "@/router/use-app-navigator";

import { AuthBackground, AuthPanel } from "./components";
import { Logger } from "@/utils/logger";

const log = new Logger("AppAuthAuthScreen");

export function AuthScreen() {
  const state = useAuthState();
  const navigator = useAppNavigator();
  const redirectTo = useSyncExternalStore(
    subscribeLocationSnapshot,
    readRedirectFromLocation,
    () => null,
  );
  const safeRedirectTo = getSafeRedirectPath(redirectTo) ?? ROUTES.chat;

  // 真实用户登录成功 → 跳转；User hydrate 由根级 <UserAuthSync /> 监听 loginStatus 变化处理。
  // 游客态不触发跳转，避免自动游客登录打断 auth 页面。
  useEffect(() => {
    const shouldRedirect = isAuthenticatedUser(state.loginStatus);
    log.debug("[auth-screen] useEffect (loginStatus)", {
      loginStatus: state.loginStatus,
      willRedirect: shouldRedirect,
    });

    if (shouldRedirect) {
      log.debug("[auth-screen] useEffect → navigator.replace", {
        redirectTo: safeRedirectTo,
      });
      navigator.replace(safeRedirectTo);
    }
  }, [
    state.loginStatus,
    navigator,
    safeRedirectTo,
  ]);

  return (
    <MobileShell>
      <div className="relative flex min-h-(--app-viewport-height,100dvh) w-full flex-1 flex-col overflow-hidden bg-[#fbf1f2]">
        <AuthBackground />
        <div
          className="relative z-2 flex flex-auto flex-col justify-center"
          style={{
            padding:
              "calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-top, 0px)) calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-right, 0px)) calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-bottom, 0px)) calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-left, 0px))",
          }}
        >
          <AuthPanel />
        </div>
      </div>
    </MobileShell>
  );
}

function getSafeRedirectPath(redirectTo: string | null | undefined): string | null {
  if (!redirectTo) return null;
  if (!redirectTo.startsWith("/") || redirectTo.startsWith("//")) return null;
  return redirectTo;
}

function readRedirectFromLocation(): string | null {
  if (typeof window === "undefined") return null;
  return new URLSearchParams(window.location.search).get("redirect");
}

function subscribeLocationSnapshot(): () => void {
  return () => {};
}