Genarrative/src/components/auth/LoginScreen.tsx

import { Check, X } from 'lucide-react';
import { type ReactNode, useEffect, useState } from 'react';

import type { PlatformTheme } from '../../../packages/shared/src/contracts/runtime';
import type {
  AuthCaptchaChallenge,
  AuthLoginMethod,
} from '../../services/authService';
import { getStoredLastLoginPhone } from '../../services/authService';
import { LegalDocumentModal } from '../common/LegalDocumentModal';
import {
  getLegalDocument,
  type LegalDocumentId,
  persistLegalConsent,
  readStoredLegalConsent,
} from '../common/legalDocuments';
import { CaptchaChallengeField } from './CaptchaChallengeField';

type SmsScene = 'login' | 'reset_password';
type LoginTab = 'phone' | 'password';

type LoginScreenProps = {
  isOpen: boolean;
  platformTheme: PlatformTheme;
  availableLoginMethods: AuthLoginMethod[];
  sendingCode: boolean;
  loggingIn: boolean;
  wechatLoading: boolean;
  error: string;
  captchaChallenge: AuthCaptchaChallenge | null;
  onClose: () => void;
  onSendCode: (
    phone: string,
    scene: SmsScene,
    captcha?: {
      challengeId?: string;
      answer?: string;
    },
  ) => Promise<{
    cooldownSeconds: number;
    expiresInSeconds: number;
  }>;
  onPhoneSubmit: (phone: string, code: string) => Promise<void>;
  onPasswordSubmit: (phone: string, password: string) => Promise<void>;
  onResetPassword: (
    phone: string,
    code: string,
    newPassword: string,
  ) => Promise<void>;
  onStartWechatLogin: () => Promise<void>;
};

export function LoginScreen({
  isOpen,
  platformTheme,
  availableLoginMethods,
  sendingCode,
  loggingIn,
  wechatLoading,
  error,
  captchaChallenge,
  onClose,
  onSendCode,
  onPhoneSubmit,
  onPasswordSubmit,
  onResetPassword,
  onStartWechatLogin,
}: LoginScreenProps) {
  const [isResetPanelOpen, setIsResetPanelOpen] = useState(false);
  const [phone, setPhone] = useState(() => getStoredLastLoginPhone());
  const [password, setPassword] = useState('');
  const [code, setCode] = useState('');
  const [resetPhone, setResetPhone] = useState('');
  const [resetCode, setResetCode] = useState('');
  const [resetPasswordValue, setResetPasswordValue] = useState('');
  const [captchaAnswer, setCaptchaAnswer] = useState('');
  const [cooldownSeconds, setCooldownSeconds] = useState(0);
  const [resetCooldownSeconds, setResetCooldownSeconds] = useState(0);
  const [hint, setHint] = useState('');
  const [legalConsentChecked, setLegalConsentChecked] = useState(false);
  const [activeLegalDocumentId, setActiveLegalDocumentId] =
    useState<LegalDocumentId | null>(null);
  const passwordLoginEnabled = true;
  const phoneLoginEnabled = true;
  const wechatLoginEnabled = availableLoginMethods.includes('wechat');
  const [activeLoginTab, setActiveLoginTab] = useState<LoginTab>('phone');

  useEffect(() => {
    if (!isOpen) {
      return;
    }

    // 每次重新打开弹窗都丢弃上一次未完成的表单草稿，只保留最近成功登录手机号回填。
    setIsResetPanelOpen(false);
    setPhone(getStoredLastLoginPhone());
    setPassword('');
    setCode('');
    setResetPhone('');
    setResetCode('');
    setResetPasswordValue('');
    setCaptchaAnswer('');
    setCooldownSeconds(0);
    setResetCooldownSeconds(0);
    setHint('');
    setLegalConsentChecked(readStoredLegalConsent());
    setActiveLegalDocumentId(null);
    setActiveLoginTab(phoneLoginEnabled ? 'phone' : 'password');
  }, [isOpen, phoneLoginEnabled]);

  useEffect(() => {
    if (
      activeLoginTab === 'phone' &&
      !phoneLoginEnabled &&
      passwordLoginEnabled
    ) {
      setActiveLoginTab('password');
      return;
    }

    if (
      activeLoginTab === 'password' &&
      !passwordLoginEnabled &&
      phoneLoginEnabled
    ) {
      setActiveLoginTab('phone');
    }
  }, [activeLoginTab, passwordLoginEnabled, phoneLoginEnabled]);

  useEffect(() => {
    if (cooldownSeconds <= 0) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setCooldownSeconds((current) => Math.max(0, current - 1));
    }, 1000);

    return () => window.clearTimeout(timeoutId);
  }, [cooldownSeconds]);

  useEffect(() => {
    if (resetCooldownSeconds <= 0) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setResetCooldownSeconds((current) => Math.max(0, current - 1));
    }, 1000);

    return () => window.clearTimeout(timeoutId);
  }, [resetCooldownSeconds]);

  if (!isOpen) {
    return null;
  }

  const submitDisabled = loggingIn || sendingCode;
  const activeLegalDocument = activeLegalDocumentId
    ? getLegalDocument(activeLegalDocumentId)
    : null;
  const toggleLegalConsent = () => {
    setLegalConsentChecked((current) => {
      const nextChecked = !current;
      if (nextChecked) {
        persistLegalConsent();
      }
      return nextChecked;
    });
  };
  const legalConsentRow = (
    <LegalConsentRow
      checked={legalConsentChecked}
      onToggle={toggleLegalConsent}
      onOpenDocument={setActiveLegalDocumentId}
    />
  );

  return (
    <>
      <div
        className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[120] flex items-end justify-center px-3 py-4 text-[var(--platform-text-strong)] backdrop-blur-sm sm:items-center sm:p-4`}
        onClick={onClose}
      >
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="auth-login-dialog-title"
          className="platform-auth-card w-full max-w-md overflow-hidden rounded-[2rem]"
          onClick={(event) => event.stopPropagation()}
        >
          <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
            <div
              id="auth-login-dialog-title"
              className="text-lg font-semibold text-[var(--platform-text-strong)]"
            >
              {isResetPanelOpen ? '重置密码' : '账号入口'}
            </div>
            <button
              type="button"
              onClick={onClose}
              className="platform-icon-button p-2"
              aria-label="关闭登录弹窗"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

          {isResetPanelOpen ? (
            <PasswordResetPanel
              phone={resetPhone}
              code={resetCode}
              password={resetPasswordValue}
              sendingCode={sendingCode}
              loggingIn={loggingIn}
              cooldownSeconds={resetCooldownSeconds}
              error={error}
              onPhoneChange={setResetPhone}
              onCodeChange={setResetCode}
              onPasswordChange={setResetPasswordValue}
              onBack={() => setIsResetPanelOpen(false)}
              onSendCode={async () => {
                const result = await onSendCode(resetPhone, 'reset_password');
                setResetCooldownSeconds(result.cooldownSeconds);
              }}
              onSubmit={() =>
                onResetPassword(resetPhone, resetCode, resetPasswordValue)
              }
            />
          ) : (
            <div className="flex flex-col gap-5 px-5 py-5">
              {phoneLoginEnabled ? (
                <div
                  className={`grid gap-2 ${
                    passwordLoginEnabled ? 'grid-cols-2' : 'grid-cols-1'
                  }`}
                  role="tablist"
                  aria-label="登录方式"
                >
                  <LoginTabButton
                    active={activeLoginTab === 'phone'}
                    onClick={() => setActiveLoginTab('phone')}
                  >
                    短信登录
                  </LoginTabButton>
                  {passwordLoginEnabled ? (
                    <LoginTabButton
                      active={activeLoginTab === 'password'}
                      onClick={() => setActiveLoginTab('password')}
                    >
                      密码登录
                    </LoginTabButton>
                  ) : null}
                </div>
              ) : null}

            {passwordLoginEnabled && activeLoginTab === 'password' ? (
              <form
                className="flex flex-col gap-4"
                onSubmit={(event) => {
                  event.preventDefault();
                  if (
                    submitDisabled ||
                    !phone.trim() ||
                    !password.trim() ||
                    !legalConsentChecked
                  ) {
                    return;
                  }
                  void onPasswordSubmit(phone, password);
                }}
              >
                <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
                  <span>手机号</span>
                  <input
                    className="platform-input"
                    autoComplete="tel"
                    inputMode="numeric"
                    value={phone}
                    onChange={(event) => setPhone(event.target.value)}
                    placeholder="13800000000"
                  />
                </label>
                <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
                  <span>密码</span>
                  <input
                    className="platform-input"
                    autoComplete="current-password"
                    type="password"
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    placeholder="输入密码"
                  />
                </label>

                {error ? <ErrorBanner message={error} /> : null}
                {legalConsentRow}

                <div className="flex flex-col gap-2">
                  <button
                    type="submit"
                    disabled={
                      submitDisabled ||
                      !phone.trim() ||
                      !password.trim() ||
                      !legalConsentChecked
                    }
                    className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
                  >
                    {loggingIn ? '登录中' : '登录'}
                  </button>
                  <button
                    type="button"
                    className="self-end text-sm text-[var(--platform-accent)]"
                    onClick={() => setIsResetPanelOpen(true)}
                  >
                    忘记密码
                  </button>
                </div>

                {wechatLoginEnabled ? (
                  <WechatButton
                    loading={wechatLoading}
                    disabled={submitDisabled}
                    onClick={onStartWechatLogin}
                  />
                ) : null}
              </form>
            ) : null}

            {phoneLoginEnabled && activeLoginTab === 'phone' ? (
              <PhoneCodeForm
                phone={phone}
                code={code}
                captchaAnswer={captchaAnswer}
                captchaChallenge={captchaChallenge}
                cooldownSeconds={cooldownSeconds}
                sendingCode={sendingCode}
                loggingIn={loggingIn}
                error={error}
                hint={hint}
                submitLabel="登录"
                enabled={phoneLoginEnabled}
                legalConsentChecked={legalConsentChecked}
                legalConsentNode={legalConsentRow}
                showPhoneField
                onPhoneChange={setPhone}
                onCodeChange={setCode}
                onCaptchaAnswerChange={setCaptchaAnswer}
                onSendCode={async () => {
                  setHint('');
                  const result = await onSendCode(phone, 'login', {
                    challengeId: captchaChallenge?.challengeId,
                    answer: captchaAnswer,
                  });
                  setCooldownSeconds(result.cooldownSeconds);
                  setHint(
                    `短信请求已提交，验证码有效期约 ${Math.max(1, Math.round(result.expiresInSeconds / 60))} 分钟。`,
                  );
                  setCaptchaAnswer('');
                }}
                onSubmit={() => onPhoneSubmit(phone, code)}
              />
            ) : null}

            {!passwordLoginEnabled &&
            !phoneLoginEnabled &&
            !wechatLoginEnabled ? (
              <div className="platform-subpanel rounded-2xl px-4 py-4 text-sm text-[var(--platform-text-base)]">
                当前登录入口暂不可用。
              </div>
            ) : null}
            </div>
          )}
        </div>
      </div>
      <LegalDocumentModal
        document={activeLegalDocument}
        open={Boolean(activeLegalDocument)}
        platformTheme={platformTheme}
        onClose={() => setActiveLegalDocumentId(null)}
      />
    </>
  );
}

function LegalConsentRow({
  checked,
  onToggle,
  onOpenDocument,
}: {
  checked: boolean;
  onToggle: () => void;
  onOpenDocument: (documentId: LegalDocumentId) => void;
}) {
  const openDocument = (documentId: LegalDocumentId) => {
    onOpenDocument(documentId);
  };

  return (
    <div className="flex items-start gap-2.5 text-xs leading-5 text-[var(--platform-text-base)]">
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        aria-label="同意法律协议"
        onClick={onToggle}
        className={`mt-0.5 flex h-5 w-9 shrink-0 items-center rounded-full border p-0.5 transition ${
          checked
            ? 'justify-end border-[var(--platform-button-primary-border)] [background:var(--platform-profile-action-fill)]'
            : 'justify-start border-[var(--platform-subpanel-border)] [background:var(--platform-button-secondary-fill)]'
        }`}
      >
        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-[var(--platform-button-primary-text)] text-[var(--platform-cool-text)] shadow-sm">
          {checked ? <Check className="h-3 w-3" /> : null}
        </span>
      </button>
      <div>
        我已阅读并同意
        <LegalLink
          label="《用户协议》"
          onClick={() => openDocument('user-agreement')}
        />
        <LegalLink
          label="《隐私政策》"
          onClick={() => openDocument('privacy-policy')}
        />
        和
        <LegalLink
          label="《免责声明》"
          onClick={() => openDocument('disclaimer')}
        />
      </div>
    </div>
  );
}

function LegalLink({
  label,
  onClick,
}: {
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      className="mx-0.5 align-baseline font-semibold text-[var(--platform-cool-text)] underline-offset-2 hover:underline"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

function LoginTabButton({
  active,
  children,
  onClick,
}: {
  active: boolean;
  children: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      role="tab"
      aria-selected={active}
      className={`relative h-12 text-base font-semibold transition-colors sm:text-lg ${
        active
          ? 'text-[var(--platform-text-strong)]'
          : 'text-[var(--platform-text-muted)]'
      }`}
      onClick={onClick}
    >
      <span>{children}</span>
      {active ? (
        <span className="absolute bottom-1 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full bg-[var(--platform-accent)]" />
      ) : null}
    </button>
  );
}

function PhoneCodeForm({
  phone,
  code,
  captchaAnswer,
  captchaChallenge,
  cooldownSeconds,
  sendingCode,
  loggingIn,
  error,
  hint,
  submitLabel,
  enabled,
  legalConsentChecked,
  legalConsentNode,
  showPhoneField,
  onPhoneChange,
  onCodeChange,
  onCaptchaAnswerChange,
  onSendCode,
  onSubmit,
}: {
  phone: string;
  code: string;
  captchaAnswer: string;
  captchaChallenge: AuthCaptchaChallenge | null;
  cooldownSeconds: number;
  sendingCode: boolean;
  loggingIn: boolean;
  error: string;
  hint: string;
  submitLabel: string;
  enabled: boolean;
  legalConsentChecked: boolean;
  legalConsentNode: ReactNode;
  showPhoneField: boolean;
  onPhoneChange: (value: string) => void;
  onCodeChange: (value: string) => void;
  onCaptchaAnswerChange: (value: string) => void;
  onSendCode: () => Promise<void>;
  onSubmit: () => Promise<void>;
}) {
  if (!enabled) {
    return null;
  }

  const submitBlocked =
    loggingIn || !phone.trim() || !code.trim() || !legalConsentChecked;

  return (
    <form
      className="flex flex-col gap-4"
      onSubmit={(event) => {
        event.preventDefault();
        if (submitBlocked) {
          return;
        }
        void onSubmit();
      }}
    >
      {showPhoneField ? (
        <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
          <span>手机号</span>
          <input
            className="platform-input"
            autoComplete="tel"
            inputMode="numeric"
            value={phone}
            onChange={(event) => onPhoneChange(event.target.value)}
            placeholder="13800000000"
          />
        </label>
      ) : null}

      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
        <span>验证码</span>
        <div className="flex gap-3">
          <input
            className="platform-input min-w-0 flex-1"
            inputMode="numeric"
            value={code}
            onChange={(event) => onCodeChange(event.target.value)}
            placeholder="输入验证码"
          />
          <button
            type="button"
            disabled={sendingCode || cooldownSeconds > 0 || !phone.trim()}
            className="platform-button platform-button--secondary h-12 shrink-0 px-4 text-sm disabled:cursor-not-allowed disabled:opacity-55"
            onClick={() => void onSendCode()}
          >
            {sendingCode
              ? '发送中'
              : cooldownSeconds > 0
                ? `${cooldownSeconds}s`
                : '获取验证码'}
          </button>
        </div>
      </label>

      <CaptchaChallengeField
        challenge={captchaChallenge}
        answer={captchaAnswer}
        onAnswerChange={onCaptchaAnswerChange}
      />

      {hint ? <SuccessBanner message={hint} /> : null}
      {error ? <ErrorBanner message={error} /> : null}
      {legalConsentNode}

      <button
        type="submit"
        disabled={submitBlocked}
        className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
      >
        {loggingIn ? '处理中' : submitLabel}
      </button>
    </form>
  );
}

function PasswordResetPanel({
  phone,
  code,
  password,
  sendingCode,
  loggingIn,
  cooldownSeconds,
  error,
  onPhoneChange,
  onCodeChange,
  onPasswordChange,
  onBack,
  onSendCode,
  onSubmit,
}: {
  phone: string;
  code: string;
  password: string;
  sendingCode: boolean;
  loggingIn: boolean;
  cooldownSeconds: number;
  error: string;
  onPhoneChange: (value: string) => void;
  onCodeChange: (value: string) => void;
  onPasswordChange: (value: string) => void;
  onBack: () => void;
  onSendCode: () => Promise<void>;
  onSubmit: () => Promise<void>;
}) {
  return (
    <form
      className="flex flex-col gap-4 px-5 py-5"
      onSubmit={(event) => {
        event.preventDefault();
        void onSubmit();
      }}
    >
      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
        <span>手机号</span>
        <input
          className="platform-input"
          autoComplete="tel"
          inputMode="numeric"
          value={phone}
          onChange={(event) => onPhoneChange(event.target.value)}
          placeholder="13800000000"
        />
      </label>
      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
        <span>验证码</span>
        <div className="flex gap-3">
          <input
            className="platform-input min-w-0 flex-1"
            inputMode="numeric"
            value={code}
            onChange={(event) => onCodeChange(event.target.value)}
            placeholder="输入验证码"
          />
          <button
            type="button"
            disabled={sendingCode || cooldownSeconds > 0 || !phone.trim()}
            className="platform-button platform-button--secondary h-12 shrink-0 px-4 text-sm disabled:cursor-not-allowed disabled:opacity-55"
            onClick={() => void onSendCode()}
          >
            {sendingCode
              ? '发送中'
              : cooldownSeconds > 0
                ? `${cooldownSeconds}s`
                : '获取验证码'}
          </button>
        </div>
      </label>
      <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
        <span>新密码</span>
        <input
          className="platform-input"
          autoComplete="new-password"
          type="password"
          value={password}
          onChange={(event) => onPasswordChange(event.target.value)}
          placeholder="设置新密码"
        />
      </label>

      {error ? <ErrorBanner message={error} /> : null}

      <div className="grid grid-cols-2 gap-3">
        <button
          type="button"
          className="platform-button platform-button--secondary h-12 px-4 text-base"
          onClick={onBack}
        >
          返回
        </button>
        <button
          type="submit"
          disabled={
            loggingIn || !phone.trim() || !code.trim() || !password.trim()
          }
          className="platform-button platform-button--primary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
        >
          {loggingIn ? '处理中' : '重置密码'}
        </button>
      </div>
    </form>
  );
}

function WechatButton({
  loading,
  disabled,
  onClick,
}: {
  loading: boolean;
  disabled: boolean;
  onClick: () => Promise<void>;
}) {
  return (
    <button
      type="button"
      disabled={loading || disabled}
      className="platform-button platform-button--secondary h-12 px-4 text-base disabled:cursor-not-allowed disabled:opacity-60"
      onClick={() => void onClick()}
    >
      {loading ? '跳转中' : '微信登录'}
    </button>
  );
}

function ErrorBanner({ message }: { message: string }) {
  return (
    <div className="platform-banner platform-banner--danger text-sm">
      {message}
    </div>
  );
}

function SuccessBanner({ message }: { message: string }) {
  return (
    <div className="platform-banner platform-banner--success text-sm">
      {message}
    </div>
  );
}