import { X } from 'lucide-react';
import { 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 { CaptchaChallengeField } from './CaptchaChallengeField';

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

type LoginScreenProps = {
  isOpen: boolean;
  platformTheme: PlatformTheme;
  availableLoginMethods: AuthLoginMethod[];
  sendingCode: boolean;
  loggingIn: boolean;
  wechatLoading: boolean;
  error: string;
  captchaChallenge: AuthCaptchaChallenge | null;
  initialMode?: 'login' | 'register';
  initialInviteCode?: string;
  onClose: () => void;
  onSendCode: (
    phone: string,
    scene: SmsScene,
    captcha?: {
      challengeId?: string;
      answer?: string;
    },
  ) => Promise<{
    cooldownSeconds: number;
    expiresInSeconds: number;
  }>;
  onPhoneSubmit: (
    phone: string,
    code: string,
    inviteCode?: 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,
  initialMode = 'login',
  initialInviteCode = '',
  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 [inviteCode, setInviteCode] = useState(initialInviteCode);
  const [captchaAnswer, setCaptchaAnswer] = useState('');
  const [cooldownSeconds, setCooldownSeconds] = useState(0);
  const [resetCooldownSeconds, setResetCooldownSeconds] = useState(0);
  const [hint, setHint] = useState('');
  const passwordLoginEnabled = availableLoginMethods.includes('password');
  const phoneLoginEnabled = availableLoginMethods.includes('phone');
  const wechatLoginEnabled = availableLoginMethods.includes('wechat');
  const [activeLoginTab, setActiveLoginTab] = useState<LoginTab>('phone');

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

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

  useEffect(() => {
    if (
      (activeLoginTab === 'phone' || activeLoginTab === 'register') &&
      !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;

  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-3' : 'grid-cols-2'
                }`}
                role="tablist"
                aria-label="登录方式"
              >
                <LoginTabButton
                  active={activeLoginTab === 'phone'}
                  onClick={() => setActiveLoginTab('phone')}
                >
                  短信登录
                </LoginTabButton>
                {passwordLoginEnabled ? (
                  <LoginTabButton
                    active={activeLoginTab === 'password'}
                    onClick={() => setActiveLoginTab('password')}
                  >
                    密码登录
                  </LoginTabButton>
                ) : null}
                <LoginTabButton
                  active={activeLoginTab === 'register'}
                  onClick={() => setActiveLoginTab('register')}
                >
                  注册
                </LoginTabButton>
              </div>
            ) : null}

            {passwordLoginEnabled && activeLoginTab === 'password' ? (
              <form
                className="flex flex-col gap-4"
                onSubmit={(event) => {
                  event.preventDefault();
                  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}

                <div className="flex flex-col gap-2">
                  <button
                    type="submit"
                    disabled={
                      submitDisabled || !phone.trim() || !password.trim()
                    }
                    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}
                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}

            {phoneLoginEnabled && activeLoginTab === 'register' ? (
              <PhoneCodeForm
                phone={phone}
                code={code}
                inviteCode={inviteCode}
                captchaAnswer={captchaAnswer}
                captchaChallenge={captchaChallenge}
                cooldownSeconds={cooldownSeconds}
                sendingCode={sendingCode}
                loggingIn={loggingIn}
                error={error}
                hint={hint}
                submitLabel="注册"
                enabled={phoneLoginEnabled}
                showPhoneField
                showInviteCodeField
                onPhoneChange={setPhone}
                onCodeChange={setCode}
                onInviteCodeChange={setInviteCode}
                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, inviteCode)}
              />
            ) : 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>
  );
}

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,
  inviteCode = '',
  captchaAnswer,
  captchaChallenge,
  cooldownSeconds,
  sendingCode,
  loggingIn,
  error,
  hint,
  submitLabel,
  enabled,
  showPhoneField,
  showInviteCodeField = false,
  onPhoneChange,
  onCodeChange,
  onInviteCodeChange,
  onCaptchaAnswerChange,
  onSendCode,
  onSubmit,
}: {
  phone: string;
  code: string;
  inviteCode?: string;
  captchaAnswer: string;
  captchaChallenge: AuthCaptchaChallenge | null;
  cooldownSeconds: number;
  sendingCode: boolean;
  loggingIn: boolean;
  error: string;
  hint: string;
  submitLabel: string;
  enabled: boolean;
  showPhoneField: boolean;
  showInviteCodeField?: boolean;
  onPhoneChange: (value: string) => void;
  onCodeChange: (value: string) => void;
  onInviteCodeChange?: (value: string) => void;
  onCaptchaAnswerChange: (value: string) => void;
  onSendCode: () => Promise<void>;
  onSubmit: () => Promise<void>;
}) {
  if (!enabled) {
    return null;
  }

  return (
    <form
      className="flex flex-col gap-4"
      onSubmit={(event) => {
        event.preventDefault();
        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}

      {showInviteCodeField ? (
        <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">
          <span>邀请码</span>
          <input
            className="platform-input"
            autoComplete="off"
            value={inviteCode}
            onChange={(event) => onInviteCodeChange?.(event.target.value)}
            placeholder="邀请码"
          />
        </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}

      <button
        type="submit"
        disabled={loggingIn || !phone.trim() || !code.trim()}
        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>
  );
}