Tolan/frontend/src/pages/VerificationCodePage.tsx

import { useEffect, useState, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { message } from 'antd';
import { setStorage, STORAGE_KEYS, getUserId, getVisitedRoutes } from '@/utils/storage';
import { updateUserUIState, sendCode } from '@/utils/api';
import { px2vmin, px2vw, px2vh } from '@/utils/viewport';
import { getOssUrl } from '@/utils/oss';

const giftProgressBar = getOssUrl('gift-progress-bar.png');
const sendCodeNo = getOssUrl('send-code-no.png');
const sendCodeImage = getOssUrl('send-code.png');
const backButton = getOssUrl('backbutn.png');
const focusGradient =
  'linear-gradient(90deg, #FFC900 11%, #13A6FF 32%, #806EFF 50%, #FF8EEC 66%, #FE4F51 89%)';

interface LocationState {
  loginType?: 'phone' | 'email';
  areaCode?: string;
  phoneNumber?: string;
  email?: string;
}

export const VerificationCodePage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const state = location.state as LocationState | null;

  // 根据传入的数据初始化状态
  const [areaCode, setAreaCode] = useState(state?.areaCode || '+86');
  const [phoneNumber, setPhoneNumber] = useState(state?.phoneNumber || '');
  const [email, setEmail] = useState(state?.email || '');
  const [isAreaCodeFocused, setIsAreaCodeFocused] = useState(false);
  const [isPhoneFocused, setIsPhoneFocused] = useState(false);
  const [isEmailFocused, setIsEmailFocused] = useState(false);
  const [selectedLoginType] = useState<'phone' | 'qq' | 'email'>(
    state?.loginType || 'phone'
  );
  const areaCodeRef = useRef<HTMLInputElement>(null);
  const phoneRef = useRef<HTMLInputElement>(null);
  const emailRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 记录用户当前所在页面
    setStorage(STORAGE_KEYS.CURRENT_PAGE, 'verification-code');

    const visited = getVisitedRoutes();
    const userId = getUserId();
    if (userId) {
      updateUserUIState(userId, {
        current_page: 'verification-code',
        visited_routes: visited,
      }).catch(() => {
        // 同步失败不影响前端流程
      });
    }
  }, []);

  const handleBack = () => {
    navigate('/first-login', {
      state: {
        loginType: selectedLoginType,
        areaCode,
        phoneNumber,
        email,
      },
    });
  };

  // 处理发送验证码按钮点击
  const handleSendCode = async () => {
    // 验证输入
    if (selectedLoginType === 'phone' && !phoneNumber) {
      message.error('请输入手机号码');
      return;
    }
    if (selectedLoginType === 'email' && !email) {
      message.error('请输入邮箱地址');
      return;
    }

    try {
      // 确定发送类型
      const sendType = selectedLoginType === 'email' ? 'email' : 'domestic_sms';
      
      // 发送验证码
      const response = await sendCode({
        area_code: selectedLoginType === 'phone' ? areaCode : undefined,
        phone: selectedLoginType === 'phone' ? phoneNumber : undefined,
        email: selectedLoginType === 'email' ? email : undefined,
        send_type: sendType,
      });

      if (response.success) {
        message.success('验证码已发送');
        // 跳转到验证码输入页面
        navigate('/verification-input', {
          state: {
            loginType: selectedLoginType,
            areaCode,
            phoneNumber,
            email,
          },
        });
      } else {
        message.error('发送验证码失败，请重试');
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '发送验证码失败';
      message.error(errorMessage);
    }
  };

  return (
    <div>
      {/* 顶部返回按钮 */}
      <button
        type="button"
        onClick={handleBack}
        style={{
          position: 'absolute',
          left: px2vmin(16),
          top: px2vmin(56),
          width: px2vmin(48),
          height: px2vmin(48),
          padding: 0,
          border: 'none',
          background: 'none',
          zIndex: 10,
          cursor: 'pointer',
        }}
        aria-label="Back"
      >
        <img
          src={backButton}
          alt="Back"
          style={{
            width: '100%',
            height: '100%',
            display: 'block',
            pointerEvents: 'none',
          }}
        />
      </button>
      {/* 顶部进度条图片 */}
      <img
        src={giftProgressBar}
        alt="gift progress bar"
        style={{
          position: 'absolute',
          left: '50%',
          top: px2vmin(61),
          width: px2vmin(195),
          transform: 'translateX(-50%)',
        }}
      />
      {/* 中部 GIF 动画图片 */}
      <img
        src="https://lyrria-pro.oss-cn-beijing.aliyuncs.com/03-Cheer.gif"
        alt="cheer animation"
        style={{
          position: 'absolute',
          left: '50%',
          top: px2vmin(132),
          height: px2vmin(184),
          transform: 'translateX(-50%)',
        }}
      />
      {/* 输入框 */}
      <div
        className="absolute"
        style={{
          top: px2vmin(326),
          left: '50%',
          transform: 'translateX(-50%)',
          width: px2vmin(312),
          display: 'flex',
          gap: 0,
        }}
      >
        {/* 手机登录：区号 + 手机号 */}
        {selectedLoginType === 'phone' && (
          <>
            {/* 区号输入框 */}
            <div style={{ width: px2vmin(80), position: 'relative' }}>
              <div
                className="relative overflow-visible"
                style={{
                  height: px2vmin(56),
                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
                  borderTopLeftRadius: '12PX',
                  borderBottomLeftRadius: '2PX',
                  borderTopRightRadius: 0,
                  borderBottomRightRadius: 0,
                  boxShadow:
                    '0PX 1PX 0PX 0PX rgba(255, 255, 255, 0.18), inset 0PX 0PX 0PX 1PX rgba(0, 0, 0, 0.65), inset 0PX 4PX 8PX rgba(0, 0, 0, 0.55)',
                }}
              >
                <input
                  ref={areaCodeRef}
                  type="text"
                  className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)] text-center"
                  style={{
                    fontSize: px2vmin(16),
                    paddingLeft: px2vw(8),
                    paddingRight: px2vw(8),
                  }}
                  placeholder="+86"
                  value={areaCode}
                  onChange={(e) => {
                    let value = e.target.value;
                    // 确保始终以 + 开头
                    if (value && !value.startsWith('+')) {
                      value = '+' + value;
                    }
                    setAreaCode(value);
                  }}
                  onFocus={() => setIsAreaCodeFocused(true)}
                  onBlur={() => setIsAreaCodeFocused(false)}
                />
                {/* 右侧白色竖线 */}
                <div
                  style={{
                    position: 'absolute',
                    right: 0,
                    top: px2vmin(12),
                    bottom: px2vmin(12),
                    width: '1PX',
                    background: 'rgba(255, 255, 255, 1)',
                  }}
                ></div>
              </div>
              <div
                className="w-full transition-opacity duration-300"
                style={{
                  height: '2PX',
                  background: isAreaCodeFocused || isPhoneFocused
                    ? focusGradient
                    : 'var(--Schemes-Primary, rgba(103, 80, 164, 1))',
                }}
              ></div>
            </div>
            {/* 手机号输入框 */}
            <div style={{ flex: 1, position: 'relative' }}>
              <div
                className="relative overflow-visible"
                style={{
                  height: px2vmin(56),
                  background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
                  borderTopRightRadius: '12PX',
                  borderBottomRightRadius: '2PX',
                  borderTopLeftRadius: 0,
                  borderBottomLeftRadius: 0,
                  boxShadow:
                    '0PX 1PX 0PX 0PX rgba(255, 255, 255, 0.18), inset 0PX 0PX 0PX 1PX rgba(0, 0, 0, 0.65), inset 0PX 4PX 8PX rgba(0, 0, 0, 0.55)',
                }}
              >
                <input
                  ref={phoneRef}
                  type="text"
                  className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                  style={{
                    fontSize: px2vmin(16),
                    paddingLeft: px2vw(24),
                    paddingRight: px2vmin(24),
                  }}
                  placeholder="请输入手机号码"
                  value={phoneNumber}
                  onChange={(e) => setPhoneNumber(e.target.value)}
                  onFocus={() => setIsPhoneFocused(true)}
                  onBlur={() => setIsPhoneFocused(false)}
                />
                {phoneNumber && (
                  <button
                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                    style={{
                      right: px2vw(12),
                      width: px2vw(20),
                      height: px2vh(20),
                    }}
                    onClick={() => setPhoneNumber('')}
                    aria-label="清除"
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                      <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                      <path
                        d="M8 8L16 16M16 8L8 16"
                        stroke="rgba(191, 157, 248, 1)"
                        strokeWidth="2.5"
                        strokeLinecap="round"
                      />
                    </svg>
                  </button>
                )}
              </div>
              <div
                className="w-full transition-opacity duration-300"
                style={{
                  height: '2PX',
                  background: isAreaCodeFocused || isPhoneFocused
                    ? focusGradient
                    : 'var(--Schemes-Primary, rgba(103, 80, 164, 1))',
                }}
              ></div>
            </div>
          </>
        )}
        {/* 邮箱登录：邮箱输入框 */}
        {selectedLoginType === 'email' && (
          <div style={{ width: '100%', position: 'relative' }}>
            <div
              className="relative overflow-visible"
              style={{
                height: px2vmin(56),
                background: 'linear-gradient(180deg, #26232F 0%, #18151F 100%)',
                borderTopLeftRadius: '12PX',
                borderTopRightRadius: '12PX',
                borderBottomLeftRadius: '2PX',
                borderBottomRightRadius: '2PX',
                boxShadow:
                  '0PX 1PX 0PX 0PX rgba(255, 255, 255, 0.18), inset 0PX 0PX 0PX 1PX rgba(0, 0, 0, 0.65), inset 0PX 4PX 8PX rgba(0, 0, 0, 0.55)',
              }}
            >
              <input
                ref={emailRef}
                type="text"
                className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                style={{
                  fontSize: px2vmin(16),
                  paddingLeft: px2vw(24),
                  paddingRight: px2vmin(24),
                }}
                placeholder="请输入邮箱地址"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                onFocus={() => setIsEmailFocused(true)}
                onBlur={() => setIsEmailFocused(false)}
              />
              {email && (
                <button
                  className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                  style={{
                    right: px2vw(12),
                    width: px2vw(20),
                    height: px2vh(20),
                  }}
                  onClick={() => setEmail('')}
                  aria-label="清除"
                >
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="11" stroke="rgba(191, 157, 248, 1)" strokeWidth="2.5" fill="none" />
                    <path
                      d="M8 8L16 16M16 8L8 16"
                      stroke="rgba(191, 157, 248, 1)"
                      strokeWidth="2.5"
                      strokeLinecap="round"
                    />
                  </svg>
                </button>
              )}
            </div>
            <div
              className="w-full transition-opacity duration-300"
              style={{
                height: '2PX',
                background: isEmailFocused ? focusGradient : 'var(--Schemes-Primary, rgba(103, 80, 164, 1))',
              }}
            ></div>
          </div>
        )}
        {/* QQ登录：文字提示 */}
        {selectedLoginType === 'qq' && (
          <div
            style={{
              width: '100%',
              textAlign: 'center',
              color: '#FFFFFF',
              fontSize: px2vmin(24),
              fontWeight: 'bold',
            }}
          >
            QQ登录
          </div>
        )}
      </div>
      {/* 发送验证码按钮 */}
      <button
        type="button"
        onClick={handleSendCode}
        style={{
          position: 'absolute',
          left: '50%',
          top: px2vmin(436),
          width: px2vmin(279),
          transform: 'translateX(-50%)',
          border: 'none',
          padding: 0,
          background: 'none',
          cursor: (selectedLoginType === 'phone' && phoneNumber) || (selectedLoginType === 'email' && email) ? 'pointer' : 'not-allowed',
        }}
      >
        <img
          src={
            (selectedLoginType === 'phone' && phoneNumber) ||
            (selectedLoginType === 'email' && email)
              ? sendCodeImage
              : sendCodeNo
          }
          alt="send code"
          style={{
            width: '100%',
            display: 'block',
          }}
        />
      </button>
    </div>
  );
};