Genarrative/apps/ai-game-creator-shell/src/app/AuthenticatedClient.tsx

import {
  Component,
  type ErrorInfo,
  type FormEvent,
  type ReactNode,
  useEffect,
  useState,
} from 'react';

import type { AuthUser } from '../../../../packages/shared/src/contracts/auth';
import brandIcon from '../../../../packages/shared/src/icons/taonier-product-ip.png';
import {
  clearStoredAuthAccessToken,
  getClientAuthErrorMessage,
  getCurrentClientAuthUser,
  getStoredAuthAccessToken,
  isClientAuthRecoverableCheckError,
  loginClientWithPassword,
  loginClientWithPhoneCode,
  logoutClientAuthSession,
  normalizeAuthPhoneInput,
  sendClientPhoneLoginCode,
} from '../services/clientAuth';
import {
  type ClientServerPreset,
  type ClientServerSelection,
  getClientServerBaseUrl,
  getClientServerSelection,
  normalizeClientServerBaseUrl,
  setClientServerSelection,
} from '../services/clientHttp';
import {
  beginPlatformSessionClearTransition,
  beginPlatformSessionTransition,
  clearCommittedPlatformSession,
  commitAuthenticatedPlatformSession,
  currentPlatformSessionApiBaseUrl,
  currentPlatformSessionGeneration,
  refreshPlatformSessionForGeneration,
  subscribePlatformSessionRefresh,
} from '../services/platformSession';

type ClientRuntimeErrorBoundaryProps = {
  children: ReactNode;
  onLogout: () => void;
};

type ClientRuntimeErrorBoundaryState = {
  errorMessage: string;
};

export class ClientRuntimeErrorBoundary extends Component<
  ClientRuntimeErrorBoundaryProps,
  ClientRuntimeErrorBoundaryState
> {
  state: ClientRuntimeErrorBoundaryState = { errorMessage: '' };

  static getDerivedStateFromError(error: unknown) {
    return {
      errorMessage:
        error instanceof Error && error.message.trim()
          ? error.message
          : '登录后页面发生未知错误',
    };
  }

  componentDidCatch(error: unknown, errorInfo: ErrorInfo) {
    console.error('AGC authenticated client render failed', error, errorInfo);
  }

  render() {
    if (!this.state.errorMessage) {
      return this.props.children;
    }
    return (
      <main
        className="client-auth-shell platform-theme platform-theme--light"
        aria-label="客户端页面加载失败"
      >
        <section className="client-auth-panel">
          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
          <div>
            <h1>客户端页面加载失败</h1>
            <p className="client-auth-status">{this.state.errorMessage}</p>
          </div>
          <button type="button" onClick={this.props.onLogout}>
            返回登录
          </button>
        </section>
      </main>
    );
  }
}

export function AuthenticatedClient({
  children,
}: {
  children: (session: { user: AuthUser; logout: () => void }) => ReactNode;
}) {
  const [authStatus, setAuthStatus] = useState<
    'checking' | 'authenticated' | 'unauthenticated'
  >('checking');
  const [authUser, setAuthUser] = useState<AuthUser | null>(null);
  const [loginMode, setLoginMode] = useState<'code' | 'password'>('code');
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [password, setPassword] = useState('');
  const [loginStatus, setLoginStatus] = useState('请登录后继续');
  const [loginBusy, setLoginBusy] = useState(false);
  const [codeBusy, setCodeBusy] = useState(false);
  const [codeCooldownSeconds, setCodeCooldownSeconds] = useState(0);
  const initialServerSelection = getClientServerSelection();
  const [serverSelection, setServerSelection] = useState<ClientServerSelection>(
    initialServerSelection,
  );
  const [customServerUrl, setCustomServerUrl] = useState(
    initialServerSelection.customBaseUrl,
  );

  function persistServerSelection() {
    try {
      const next = setClientServerSelection({
        preset: serverSelection.preset,
        customBaseUrl: customServerUrl,
      });
      setServerSelection(next);
      return next;
    } catch (error) {
      setLoginStatus(error instanceof Error ? error.message : String(error));
      return null;
    }
  }

  function handleServerPresetChange(preset: ClientServerPreset) {
    if (preset === 'custom') {
      setServerSelection((current) => ({ ...current, preset }));
      return;
    }
    const next = setClientServerSelection({
      preset,
      customBaseUrl: customServerUrl,
    });
    setServerSelection(next);
    setLoginStatus(`已选择 ${preset} 服务器`);
  }

  useEffect(() => {
    let disposed = false;
    async function hydrateAuth() {
      const hydrationGeneration = currentPlatformSessionGeneration();
      const hydrationApiBaseUrl = getClientServerBaseUrl();
      try {
        if (!getStoredAuthAccessToken()) {
          const refreshed = await refreshPlatformSessionForGeneration(
            hydrationGeneration,
            hydrationApiBaseUrl,
          );
          if (!refreshed) {
            return;
          }
        }
        const user = await getCurrentClientAuthUser(hydrationApiBaseUrl);
        if (disposed) {
          return;
        }
        if (user) {
          const committedGeneration = await commitAuthenticatedPlatformSession(
            user,
            hydrationGeneration,
            hydrationApiBaseUrl,
          );
          if (committedGeneration === null) {
            return;
          }
          if (disposed) {
            return;
          }
          setAuthUser(user);
          setAuthStatus('authenticated');
          return;
        }
        clearStoredAuthAccessToken();
        setAuthStatus('unauthenticated');
      } catch (error) {
        if (disposed) {
          return;
        }
        if (
          getStoredAuthAccessToken() &&
          isClientAuthRecoverableCheckError(error)
        ) {
          setLoginStatus(
            getClientAuthErrorMessage(error, '登录服务暂时不可用，请稍后重试'),
          );
          setAuthStatus('unauthenticated');
          return;
        }
        if (getStoredAuthAccessToken()) {
          try {
            const refreshed = await refreshPlatformSessionForGeneration(
              hydrationGeneration,
              hydrationApiBaseUrl,
            );
            if (!refreshed) {
              return;
            }
            const user = await getCurrentClientAuthUser(hydrationApiBaseUrl);
            if (disposed) {
              return;
            }
            if (user) {
              const committedGeneration =
                await commitAuthenticatedPlatformSession(
                  user,
                  hydrationGeneration,
                  hydrationApiBaseUrl,
                );
              if (committedGeneration === null) {
                return;
              }
              if (disposed) {
                return;
              }
              setAuthUser(user);
              setAuthStatus('authenticated');
              return;
            }
          } catch (retryError) {
            if (
              getStoredAuthAccessToken() &&
              isClientAuthRecoverableCheckError(retryError)
            ) {
              setLoginStatus(
                getClientAuthErrorMessage(
                  retryError,
                  '登录服务暂时不可用，请稍后重试',
                ),
              );
              setAuthStatus('unauthenticated');
              return;
            }
          }
        }
        clearStoredAuthAccessToken();
        setAuthStatus('unauthenticated');
      }
    }
    void hydrateAuth();
    return () => {
      disposed = true;
    };
  }, []);

  useEffect(
    () =>
      subscribePlatformSessionRefresh((result) => {
        if (result.status === 'refreshed') {
          setAuthUser((current) =>
            current?.id === result.user.id ? result.user : current,
          );
          return;
        }
        if (result.status === 'failed') {
          clearStoredAuthAccessToken();
          setAuthUser(null);
          setAuthStatus('unauthenticated');
          setLoginStatus('登录已失效，请重新登录');
        }
      }),
    [],
  );

  useEffect(() => {
    if (codeCooldownSeconds <= 0) {
      return;
    }
    const timer = window.setInterval(() => {
      setCodeCooldownSeconds((current) => Math.max(0, current - 1));
    }, 1000);
    return () => window.clearInterval(timer);
  }, [codeCooldownSeconds]);

  async function handleSendCode() {
    if (codeBusy || codeCooldownSeconds > 0) {
      return;
    }
    const persistedSelection = persistServerSelection();
    if (!persistedSelection) {
      return;
    }
    const apiBaseUrl = getClientServerBaseUrl(persistedSelection);
    const normalizedPhone = normalizeAuthPhoneInput(phone);
    if (!normalizedPhone) {
      setLoginStatus('请输入手机号');
      return;
    }
    setCodeBusy(true);
    setLoginStatus('正在发送验证码');
    try {
      const response = await sendClientPhoneLoginCode(
        normalizedPhone,
        apiBaseUrl,
      );
      setCodeCooldownSeconds(Math.max(0, Math.floor(response.cooldownSeconds)));
      setLoginStatus(`验证码已发送，${response.expiresInSeconds} 秒内有效`);
    } catch (error) {
      setLoginStatus(error instanceof Error ? error.message : String(error));
    } finally {
      setCodeBusy(false);
    }
  }

  async function handleLoginSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (loginBusy) {
      return;
    }
    const normalizedPhone = normalizeAuthPhoneInput(phone);
    if (!normalizedPhone) {
      setLoginStatus('请输入手机号');
      return;
    }
    if (loginMode === 'code' && !code.trim()) {
      setLoginStatus('请输入验证码');
      return;
    }
    if (loginMode === 'password' && !password.trim()) {
      setLoginStatus('请输入密码');
      return;
    }
    const persistedSelection = persistServerSelection();
    if (!persistedSelection) {
      return;
    }
    const loginApiBaseUrl = getClientServerBaseUrl(persistedSelection);
    setLoginBusy(true);
    setLoginStatus('正在登录');
    const loginGeneration = beginPlatformSessionTransition();
    try {
      const user =
        loginMode === 'code'
          ? await loginClientWithPhoneCode(
              normalizedPhone,
              code,
              loginApiBaseUrl,
            )
          : await loginClientWithPassword(
              normalizedPhone,
              password,
              loginApiBaseUrl,
            );
      const committedGeneration = await commitAuthenticatedPlatformSession(
        user,
        loginGeneration,
        loginApiBaseUrl,
      );
      if (committedGeneration === null) {
        return;
      }
      setAuthUser(user);
      setAuthStatus('authenticated');
      setCode('');
      setPassword('');
    } catch (error) {
      setLoginStatus(error instanceof Error ? error.message : String(error));
    } finally {
      setLoginBusy(false);
    }
  }

  async function logout() {
    const logoutApiBaseUrl = currentPlatformSessionApiBaseUrl();
    const logoutGeneration = beginPlatformSessionClearTransition();
    let nativeClearError: unknown = null;
    try {
      await logoutClientAuthSession(logoutApiBaseUrl);
    } catch {
      clearStoredAuthAccessToken();
    }
    try {
      await clearCommittedPlatformSession(logoutGeneration);
    } catch (error) {
      nativeClearError = error;
    }
    setAuthUser(null);
    setAuthStatus('unauthenticated');
    setLoginStatus(
      nativeClearError
        ? '已退出登录；本地运行时登录态同步失败，请重启客户端后再登录'
        : '已退出登录',
    );
  }

  if (authStatus === 'checking') {
    return (
      <main
        className="client-auth-shell platform-theme platform-theme--light"
        aria-label="登录状态检查"
      >
        <section className="client-auth-panel">
          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
          <h1>正在检查登录状态</h1>
        </section>
      </main>
    );
  }

  if (!authUser) {
    return (
      <main
        className="client-auth-shell platform-theme platform-theme--light"
        aria-label="登录"
      >
        <form className="client-auth-panel" onSubmit={handleLoginSubmit}>
          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
          <div>
            <h1>登录陶泥儿 GameAgent</h1>
            <p>登录后进入首页和本地项目工作区</p>
          </div>
          <label>
            服务器
            <select
              aria-label="服务器"
              disabled={loginBusy || codeBusy}
              value={serverSelection.preset}
              onChange={(event) =>
                handleServerPresetChange(
                  event.currentTarget.value as ClientServerPreset,
                )
              }
            >
              <option value="release">release</option>
              <option value="dev">dev</option>
              <option value="custom">custom</option>
            </select>
          </label>
          {serverSelection.preset === 'custom' ? (
            <label>
              自定义服务器地址
              <input
                aria-label="自定义服务器地址"
                disabled={loginBusy || codeBusy}
                inputMode="url"
                placeholder="https://example.com"
                value={customServerUrl}
                onChange={(event) =>
                  setCustomServerUrl(event.currentTarget.value)
                }
                onBlur={() => {
                  if (customServerUrl.trim()) {
                    try {
                      normalizeClientServerBaseUrl(customServerUrl);
                      persistServerSelection();
                    } catch (error) {
                      setLoginStatus(
                        error instanceof Error ? error.message : String(error),
                      );
                    }
                  }
                }}
              />
            </label>
          ) : null}
          <div className="client-auth-tabs" role="group" aria-label="登录方式">
            <button
              type="button"
              className={loginMode === 'code' ? 'is-active' : ''}
              onClick={() => setLoginMode('code')}
            >
              验证码登录
            </button>
            <button
              type="button"
              className={loginMode === 'password' ? 'is-active' : ''}
              onClick={() => setLoginMode('password')}
            >
              密码登录
            </button>
          </div>
          <label>
            手机号
            <input
              autoComplete="tel"
              inputMode="tel"
              value={phone}
              onChange={(event) => setPhone(event.currentTarget.value)}
            />
          </label>
          {loginMode === 'code' ? (
            <div className="client-auth-code-row">
              <label>
                验证码
                <input
                  autoComplete="one-time-code"
                  inputMode="numeric"
                  value={code}
                  onChange={(event) => setCode(event.currentTarget.value)}
                />
              </label>
              <button
                type="button"
                onClick={handleSendCode}
                disabled={codeBusy || codeCooldownSeconds > 0}
              >
                {codeBusy
                  ? '发送中'
                  : codeCooldownSeconds > 0
                    ? `${codeCooldownSeconds}s`
                    : '获取验证码'}
              </button>
            </div>
          ) : (
            <label>
              密码
              <input
                autoComplete="current-password"
                type="password"
                value={password}
                onChange={(event) => setPassword(event.currentTarget.value)}
              />
            </label>
          )}
          <button type="submit" disabled={loginBusy}>
            {loginBusy ? '登录中' : '登录'}
          </button>
          <p className="client-auth-status">{loginStatus}</p>
        </form>
      </main>
    );
  }

  return (
    <ClientRuntimeErrorBoundary onLogout={logout}>
      {children({ user: authUser, logout })}
    </ClientRuntimeErrorBoundary>
  );
}