Tolan/frontend/src/pages/ProfilePage.tsx

import { useEffect, useState, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { px2vmin, px2vmax, px2vw } from '@/utils/viewport';
import {
  getUserInfo,
  updateUsername,
  updateBotName,
  getUserUIState,
  updateUserUIState,
  // 统一的 API 工具：包含 userId/token 头部和与 ws 一致的 base URL 推导
  getApiBaseUrl,
  getApiHeaders,
} from '@/utils/api';
import {
  getUserId,
  getStorage,
  setStorage,
  STORAGE_KEYS,
  setCurrentAvatarId as setAvatarIdToStorage,
  setCurrentBackgroundImageId as setBackgroundImageIdToStorage,
  getCurrentBackgroundImageId,
  clearUserSessionAndRedirectToBegin,
} from '@/utils/storage';
import { getOssUrl } from '@/utils/oss';
import { MissionEnergyStoneModal } from '@/components/MissionEnergyStoneModal';
import { UserAgreementModal } from '@/components/UserAgreementModal';
import { PrivacyPolicyModal } from '@/components/PrivacyPolicyModal';

const closeBtn = getOssUrl('close-btn.png');
const editIcon = getOssUrl('mode_edit_outline.png');
const conversationEnergyStoneCount = getOssUrl('conversion-energy-stone-count.png');
const lumiNoCap = getOssUrl('Lumi-no-cap.png');
const lumiCap = getOssUrl('Lumi-cap.png');
const arrowRight = getOssUrl('arrow_right.png');
const headCap = getOssUrl('head-cap.png');
const bgHappyNewYear = getOssUrl('bg-happynewyear-s.png');
const starBg = getOssUrl('star-bg.png');
const rocketIcon = getOssUrl('Rocket.gif');
const XIconImage = getOssUrl('x-icon.png');
const primaryDefaultButton = getOssUrl('primary-default.png');
const secondaryDefaultButton = getOssUrl('secondary-default.png');


export const ProfilePage = () => {
  const { t } = useTranslation('profile');
  const { t: tCommon } = useTranslation('common');
  const navigate = useNavigate();
  const [username, setUsername] = useState<string>('');
  const [botName, setBotName] = useState<string>('');
  const [, setMissionStoneCount] = useState<number>(0);
  const [conversationStoneCount, setConversationStoneCount] = useState<number>(0);
  const [hasCap, setHasCap] = useState<boolean>(false);
  const [hasBackgroundReward, setHasBackgroundReward] = useState<boolean>(false);
  const [currentAvatarId, setCurrentAvatarId] = useState<string | null>(null);
  const [currentBackgroundImageId, setCurrentBackgroundImageId] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [userLevel, setUserLevel] = useState<number>(0);
  const [totalSpeechDurationMs, setTotalSpeechDurationMs] = useState<number>(0);
  const [showUsernameModal, setShowUsernameModal] = useState<boolean>(false);
  const [showBotNameModal, setShowBotNameModal] = useState<boolean>(false);
  const [tempUsername, setTempUsername] = useState<string>('');
  const [tempBotName, setTempBotName] = useState<string>('');
  const [isUsernameFocused, setIsUsernameFocused] = useState<boolean>(false);
  const [isBotNameFocused, setIsBotNameFocused] = useState<boolean>(false);
  const usernameInputRef = useRef<HTMLInputElement>(null);
  const botNameInputRef = useRef<HTMLInputElement>(null);
  const [showEnergyStoneModal, setShowEnergyStoneModal] = useState<boolean>(false);
  const [energyStoneModalType, setEnergyStoneModalType] = useState<'mission' | 'conversation'>('mission');
  const [showFeedbackModal, setShowFeedbackModal] = useState<boolean>(false);
  const [feedbackText, setFeedbackText] = useState<string>('');
  const [isSubmittingFeedback, setIsSubmittingFeedback] = useState<boolean>(false);
  const [showAgreementModal, setShowAgreementModal] = useState<boolean>(false);
  const [showPrivacyPolicyModal, setShowPrivacyPolicyModal] = useState<boolean>(false);
  
  // const cancelBtnImage = getOssUrl('cancel.png'); // Unused - replaced by primary buttons
  // const changeBtnImage = getOssUrl('change.png'); // Unused - replaced by primary buttons
  // const changeBtnActiveImage = getOssUrl('change-a.png'); // Unused - replaced by primary buttons
  // const sendBtnImage = getOssUrl('send.png'); // Unused - replaced by primary buttons
  // const sendBtnActiveImage = getOssUrl('send-a.png'); // Unused - replaced by primary buttons

  // 获取能量石数量
  const fetchEnergyStoneCounts = useCallback(
    async (userId: string) => {
      try {
        const apiBaseUrl = getApiBaseUrl();
        const request = async () =>
          fetch(`${apiBaseUrl}/api/users/${userId}/energy-stones/count`, {
            method: 'GET',
            headers: getApiHeaders(),
          });

        let response = await request();
        if (response.status === 401) {
          // 会话失效：清空本地状态并统一跳转到 /begin
          console.warn(
            '[ProfilePage] 请求能量石数量接口返回 401，认为会话失效，准备清空本地并跳转 /begin',
            {
              userId,
            }
          );
          clearUserSessionAndRedirectToBegin();
          return;
        }

        if (response.ok) {
          const data = await response.json();
          if (data.success && data.data) {
            setMissionStoneCount(data.data.mission_count || 0);
            setConversationStoneCount(data.data.conversation_count || 0);
          }
        }
      } catch (error) {
        console.error('[ProfilePage] 获取能量石数量失败:', error);
      }
    },
    []
  );

  // 获取用户头像信息
  const fetchUserAvatars = useCallback(
    async (userId: string) => {
      try {
        const apiBaseUrl = getApiBaseUrl();
        const request = async () =>
          fetch(`${apiBaseUrl}/api/users/${userId}/avatars`, {
            method: 'GET',
            headers: getApiHeaders(),
          });

        let response = await request();
        if (response.status === 401) {
          clearUserSessionAndRedirectToBegin();
          return;
        }

        if (response.ok) {
          const data = await response.json();
          if (data.success && data.data) {
            const avatarIds = data.data.avatar_ids || [];
            // 检查是否有注册赠送的形象（带帽子）
            const hasRegisteredCap = avatarIds.includes('avatar_registered_cap');
            setHasCap(hasRegisteredCap);
          }
        }
      } catch (error) {
        console.error('[ProfilePage] 获取用户头像信息失败:', error);
      }
    },
    []
  );

  // 获取用户背景图片信息
  const fetchUserBackgroundImages = useCallback(
    async (userId: string) => {
      try {
        const apiBaseUrl = getApiBaseUrl();
        const request = async () =>
          fetch(`${apiBaseUrl}/api/users/${userId}/background-images`, {
            method: 'GET',
            headers: getApiHeaders(),
          });

        let response = await request();
        if (response.status === 401) {
          clearUserSessionAndRedirectToBegin();
          return;
        }

        if (response.ok) {
          const data = await response.json();
          if (data.success && data.data) {
            const imageIds = data.data.image_ids || [];
            const hasNewYearBackground = imageIds.some((id: string) => 
              id.toLowerCase().includes('newyear') || 
              id.toLowerCase().includes('happynewyear') ||
              id.toLowerCase().includes('new_year')
            );
            setHasBackgroundReward(hasNewYearBackground);
          }
        }
      } catch (error) {
        console.error('[ProfilePage] 获取用户背景图片信息失败:', error);
      }
    },
    []
  );

  // 加载用户信息
  useEffect(() => {
    const loadUserData = async () => {
      const userId = getUserId();
      if (!userId) {
        navigate('/email-login');
        return;
      }

      try {
        // 获取用户基本信息（401 时由各接口内部的 401 分支负责处理会话失效）
        const userInfo = await getUserInfo(userId);
        if (userInfo.success && userInfo.data) {
          setUsername(userInfo.data.username || '');
          setBotName(userInfo.data.bot_name || getStorage(STORAGE_KEYS.LUMI_NAME) || 'Lumi');
          setUserLevel(userInfo.data.user_level || 0);
          // 同步当前背景图片状态（用于正确展示选中边框）
          const backgroundIdFromUser = userInfo.data.current_background_image_id || getCurrentBackgroundImageId();
          if (backgroundIdFromUser) {
            setCurrentBackgroundImageId(backgroundIdFromUser);
            // 存一份到 localStorage，保持与后端一致
            setBackgroundImageIdToStorage(backgroundIdFromUser);
          }
          setTotalSpeechDurationMs(userInfo.data.total_speech_duration_ms || 0);
        }

        // 获取用户 UI 状态（包含 current_avatar_id）
        const uiState = await getUserUIState(userId);
        if (uiState.success && uiState.data) {
          setCurrentAvatarId(uiState.data.current_avatar_id || null);
        }

        // 获取能量石数量
        await fetchEnergyStoneCounts(userId);

        // 获取用户头像信息
        await fetchUserAvatars(userId);

        // 获取用户背景图片信息
        await fetchUserBackgroundImages(userId);
      } catch (error) {
        console.error('加载用户数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    loadUserData();
  }, [navigate, fetchEnergyStoneCounts, fetchUserAvatars, fetchUserBackgroundImages]);

  // 防止弹窗打开时背景滚动
  useEffect(() => {
    if (showUsernameModal || showBotNameModal || showEnergyStoneModal || showFeedbackModal || showAgreementModal || showPrivacyPolicyModal) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }

    return () => {
      document.body.style.overflow = '';
    };
  }, [showUsernameModal, showBotNameModal, showEnergyStoneModal, showFeedbackModal, showAgreementModal, showPrivacyPolicyModal]);

  const handleClose = useCallback(() => {
    navigate(-1);
  }, [navigate]);

  const handleHeadClick = useCallback(async () => {
    const userId = getUserId();
    if (!userId) return;

    if (!hasCap) {
      navigate('/first-login');
      return;
    }

    // 已拥有情况下，切换头像
    const newAvatarId = currentAvatarId === 'avatar_registered_cap' 
      ? 'avatar_default' 
      : 'avatar_registered_cap';
    
    try {
      const result = await updateUserUIState(userId, { current_avatar_id: newAvatarId });
      if (result.success) {
        setCurrentAvatarId(newAvatarId); // 更新 React state
        setAvatarIdToStorage(newAvatarId); // 同步到 localStorage
      }
    } catch (error) {
      console.error('切换头像失败:', error);
    }
  }, [hasCap, currentAvatarId, navigate]);

  // 打开编辑用户名弹窗
  const handleEditUsername = useCallback(() => {
    setTempUsername(username);
    setShowUsernameModal(true);
    setTimeout(() => {
      usernameInputRef.current?.focus();
    }, 0);
  }, [username]);

  // 检查用户名是否改变（且非空）
  const isUsernameChanged = tempUsername.trim() !== username.trim();

  // 保存用户名
  const handleSaveUsername = useCallback(async () => {
    const userId = getUserId();
    if (!userId || !tempUsername.trim()) {
      setShowUsernameModal(false);
      return;
    }

    try {
      const result = await updateUsername(userId, tempUsername.trim());
      if (result.success) {
        setUsername(tempUsername.trim());
        setShowUsernameModal(false);
      }
    } catch (error) {
      console.error('保存用户名失败:', error);
      setShowUsernameModal(false);
    }
  }, [tempUsername]);

  // 关闭编辑用户名弹窗
  const handleCloseUsernameModal = useCallback(() => {
    setShowUsernameModal(false);
    setTempUsername('');
  }, []);

  // 打开编辑 Lumi 名字弹窗
  const handleEditBotName = useCallback(() => {
    setTempBotName(botName);
    setShowBotNameModal(true);
    setTimeout(() => {
      botNameInputRef.current?.focus();
    }, 0);
  }, [botName]);

  // 检查 Lumi 名字是否改变（且非空）
  const isBotNameChanged = tempBotName.trim() !== botName.trim();

  // 保存 Lumi 名字
  const handleSaveBotName = useCallback(async () => {
    const userId = getUserId();
    if (!userId || !tempBotName.trim()) {
      setShowBotNameModal(false);
      return;
    }

    try {
      const result = await updateBotName(userId, tempBotName.trim());
      if (result.success) {
        setBotName(tempBotName.trim());
        setShowBotNameModal(false);
        // 同时更新 localStorage
        setStorage(STORAGE_KEYS.LUMI_NAME, tempBotName.trim());
      }
    } catch (error) {
      console.error('保存 Lumi 名字失败:', error);
      setShowBotNameModal(false);
    }
  }, [tempBotName]);

  // 关闭编辑 Lumi 名字弹窗
  const handleCloseBotNameModal = useCallback(() => {
    setShowBotNameModal(false);
    setTempBotName('');
  }, []);

  // 处理能量石点击
  const handleEnergyStoneClick = useCallback((stoneType: 'mission' | 'conversation') => {
    setEnergyStoneModalType(stoneType);
    setShowEnergyStoneModal(true);
  }, []);

  // 关闭能量石弹窗
  const handleCloseEnergyStoneModal = useCallback(() => {
    setShowEnergyStoneModal(false);
  }, []);

  // 打开反馈弹窗
  const handleOpenFeedbackModal = useCallback(() => {
    setShowFeedbackModal(true);
    setFeedbackText('');
  }, []);

  // 关闭反馈弹窗
  const handleCloseFeedbackModal = useCallback(() => {
    setShowFeedbackModal(false);
    setFeedbackText('');
  }, []);

  // 提交反馈
  const handleSubmitFeedback = useCallback(async () => {
    const userId = getUserId();
    if (!userId || !feedbackText.trim()) {
      return;
    }

    setIsSubmittingFeedback(true);
    try {
      const apiBaseUrl = getApiBaseUrl();
      const response = await fetch(`${apiBaseUrl}/api/users/${userId}/feedback`, {
        method: 'POST',
        headers: getApiHeaders(),
        body: JSON.stringify({ content: feedbackText.trim() }),
      });

      if (response.ok) {
        setShowFeedbackModal(false);
        setFeedbackText('');
        // 可以添加成功提示
      } else {
        console.error('提交反馈失败:', response.statusText);
      }
    } catch (error) {
      console.error('提交反馈异常:', error);
    } finally {
      setIsSubmittingFeedback(false);
    }
  }, [feedbackText]);

  // 计算升级所需时间和当前进度
  const getLevelProgress = useCallback(() => {
    const level = userLevel;
    const totalSeconds = Math.floor(totalSpeechDurationMs / 1000);

    // 定义各等级升级需要的时长（秒）
    const requiredTimesByLevel = [10, 30, 60, 120, 240, 240];
    
    // 获取当前等级升级需要的时长
    const requiredTime = requiredTimesByLevel[level] || 240;
    
    // 当前已沟通的时长（秒）= 总时长
    const currentTime = Math.max(0, totalSeconds);
    
    // 进度百分比 = 当前已沟通时长 / 升级需要的时长
    const progress = Math.min(100, (currentTime / requiredTime) * 100);

    return {
      currentTime,
      requiredTime,
      progress,
      displayText: `${currentTime}/${requiredTime}`,
    };
  }, [userLevel, totalSpeechDurationMs]);

  if (loading) {
    return (
      <div
        style={{
          width: '100vw',
          height: '100vh',
          backgroundColor: '#1A1821',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#fff',
        }}
      >
        {tCommon('message.loading')}
      </div>
    );
  }

  return (
    <>
      <style>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        .profile-modal-input::placeholder {
          color: rgba(245, 243, 240, 0.45);
        }
        .feedback-textarea::placeholder {
          color: rgba(245, 243, 240, 0.45);
        }
      `}</style>
    <div
      style={{
        height: '100vh',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* 关闭按钮 */}
      <img
        src={closeBtn}
        alt="Close"
        onClick={handleClose}
        style={{
          width: px2vmin(30),
          height: px2vmin(30),
          position: 'absolute',
          top: px2vmin(62),
          right: px2vmin(27),
          cursor: 'pointer',
          zIndex: 100,
        }}
      />

      {/* 用户名字和编辑图标 */}
      <div
        style={{
          position: 'absolute',
          top: px2vmin(90),
          left: '50%',
          transform: 'translateX(-50%)',
          display: 'flex',
          alignItems: 'center',
          gap: px2vmin(8),
          zIndex: 10,
        }}
      >
        <span
          style={{
            fontSize: px2vmin(18),
            color: '#fff',
            fontWeight: 500,
          }}
        >
          {username || tCommon('userDefault')}
        </span>
        <img
          src={editIcon}
          alt="Edit"
          onClick={handleEditUsername}
          style={{
            width: px2vmin(20),
            height: px2vmin(20),
            cursor: 'pointer',
          }}
        />
      </div>

      {/* 用户等级显示区域 */}
      <div
        style={{
          position: 'absolute',
          top: px2vmin(166),
          left: '50%',
          transform: 'translateX(-50%)',
          width: px2vmin(343),
          height: px2vmin(38),
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-start',
          zIndex: 10,
        }}
      >
        {/* 对话能量石：放在等级行左侧 */}
        <div
          onClick={() => handleEnergyStoneClick('conversation')}
          style={{
            position: 'relative',
            width: px2vmin(70),
            height: px2vmin(32),
            cursor: 'pointer',
            flexShrink: 0,
          }}
        >
          <img
            src={conversationEnergyStoneCount}
            alt="Conversation Energy Stone"
            style={{
              width: '100%',
              height: '100%',
            }}
          />
          <span
            style={{
              position: 'absolute',
              top: '50%',
              left: '60%',
              transform: 'translate(-50%, -50%)',
              fontSize: px2vmin(10),
              color: '#000',
              fontWeight: 500,
            }}
          >
            {conversationStoneCount}
          </span>
        </div>

        {/* 等级和进度内容区域，与对话能量石间隔 16 */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flex: 1,
            marginLeft: px2vmin(16),
          }}
        >
          {/* 第一个五角星 - 当前等级 */}
          <div
            style={{
              position: 'relative',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <img
              src={starBg}
              alt="Star"
              style={{
                width: px2vmin(32),
                height: px2vmin(32),
              }}
            />
            <span
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                fontSize: px2vmin(10),
                color: '#000',
                fontWeight: 600,
              }}
            >
              {userLevel}
            </span>
          </div>

          {/* 进度条区域 */}
          <div
            style={{
              position: 'relative',
              flex: 1,
              marginLeft: px2vmin(8),
              marginRight: px2vmin(8),
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {/* 进度条 - 与五角星居中对齐 */}
            <div
              style={{
                width: px2vmin(166),
                height: px2vmin(12),
                backgroundColor: 'rgba(255, 255, 255, 0.2)',
                borderRadius: px2vmin(6),
                overflow: 'hidden',
                position: 'relative',
              }}
            >
              <div
                style={{
                  width: `${getLevelProgress().progress}%`,
                  height: '100%',
                  backgroundColor: '#BF9DF8',
                  borderRadius: px2vmin(6),
                  transition: 'width 0.3s ease',
                }}
              />
            </div>
            {/* 进度文字 - 绝对定位在进度条上方 */}
            <span
              style={{
                position: 'absolute',
                top: px2vmin(-16),
                left: '50%',
                transform: 'translateX(-50%)',
                fontSize: px2vmin(10),
                color: '#fff',
                lineHeight: 1,
                whiteSpace: 'nowrap',
              }}
            >
              {getLevelProgress().displayText}
            </span>
          </div>

          {/* 第三个元素 - 下一等级或火箭 */}
          <div
            style={{
              position: 'relative',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {userLevel >= 5 ? (
              <img
                src={rocketIcon}
                alt="Rocket"
                style={{
                  width: px2vmin(32),
                  height: px2vmin(32),
                }}
              />
            ) : (
              <>
                <img
                  src={starBg}
                  alt="Star"
                  style={{
                    width: px2vmin(32),
                    height: px2vmin(32),
                  }}
                />
                <span
                  style={{
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    fontSize: px2vmin(10),
                    color: '#000',
                    fontWeight: 600,
                  }}
                >
                  {userLevel + 1}
                </span>
              </>
            )}
          </div>
        </div>
      </div>

      {/* 区域A */}
      <div
        style={{
          position: 'absolute',
          top: px2vmin(256),
          left: '50%',
          transform: 'translateX(-50%)',
          width: px2vmin(343),
          height: px2vmin(240),
          backgroundColor: '#4A4459',
          borderRadius: px2vmin(28),
          zIndex: 10,
        }}
      >
        {/* Lumi 头像 */}
        <img
          src={currentAvatarId === 'avatar_registered_cap' ? lumiCap : lumiNoCap}
          alt="Lumi"
          style={{
            width: px2vmin(180),
            height: px2vmin(180),
            position: 'absolute',
            left: 0,
            top: px2vmax(-56),
          }}
        />

        {/* Lumi名字和编辑图标 */}
        <div
          style={{
            position: 'absolute',
            left: px2vmin(200),
            marginRight: px2vmin(10),
            top: px2vmin(36),
            display: 'flex',
            alignItems: 'center',
            gap: px2vmin(8),
          }}
        >
          <span
            style={{
              fontSize: px2vmin(18),
              color: '#fff',
              fontWeight: 500,
            }}
          >
            {botName}
          </span>
          <img
            src={editIcon}
            alt="Edit"
            onClick={handleEditBotName}
            style={{
              width: px2vmin(20),
              height: px2vmin(20),
              cursor: 'pointer',
            }}
          />
        </div>

        {/* 区域B */}
        <div
          style={{
            position: 'absolute',
            left: '50%',
            transform: 'translateX(-50%)',
            top: px2vmin(108),
            width: px2vmin(311),
            height: px2vmin(116),
            display: 'flex',
            gap: px2vmin(15),
          }}
        >
          {/* 区域C */}
          <div
            style={{
              width: px2vmin(148),
              height: px2vmin(116),
              backgroundColor: 'rgba(245,243,240, 0.1)',
              borderRadius: px2vmin(15),
              position: 'relative',
            }}
          >
            {/* 112*92 容器 */}
            <div
              style={{
                position: 'absolute',
                top: px2vmin(12),
                left: '50%',
                transform: 'translateX(-50%)',
                width: px2vmin(112),
                height: px2vmin(92),
              }}
            >
              {/* 108*70 边框区域 */}
              <div
                onClick={handleHeadClick}
                style={{
                  width: px2vmin(108),
                  height: px2vmin(70),
                  border: `2px solid ${
                    hasCap && currentAvatarId === 'avatar_registered_cap' 
                      ? '#BF9DF8' 
                      : 'rgba(245,243,240, 0.3)'
                  }`,
                  borderRadius: px2vmin(12),
                  marginLeft: '50%',
                  transform: 'translateX(-50%)',
                  position: 'relative',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: hasCap ? 'pointer' : 'pointer',
                }}
              >
                <img
                  src={headCap}
                  alt="Head Cap"
                  style={{
                    width: px2vmin(70),
                    height: px2vmin(70),
                  }}
                />
              </div>
              {/* Head 文字 */}
              <div
                style={{
                  marginTop: px2vmin(8),
                  textAlign: 'center',
                  fontSize: px2vmin(14),
                  color: '#fff',
                }}
              >
                {t('head')}
              </div>
            </div>
          </div>

          {/* 区域D */}
          <div
            style={{
              width: px2vmin(148),
              height: px2vmin(116),
              backgroundColor: 'rgba(245,243,240, 0.1)',
              borderRadius: px2vmin(15),
              position: 'relative',
            }}
          >
            {/* 112*92 容器 */}
            <div
              style={{
                position: 'absolute',
                top: px2vmin(12),
                left: '50%',
                transform: 'translateX(-50%)',
                width: px2vmin(112),
                height: px2vmin(92),
              }}
            >
              {/* 108*70 边框区域（暂不支持点击/分享，仅展示） */}
              <div
                style={{
                  width: px2vmin(108),
                  height: px2vmin(70),
                  border: `2px solid ${
                    hasBackgroundReward && currentBackgroundImageId === 'happynewyear' 
                      ? '#BF9DF8' 
                      : 'rgba(245,243,240, 0.3)'
                  }`,
                  borderRadius: px2vmin(12),
                  marginLeft: '50%',
                  transform: 'translateX(-50%)',
                  position: 'relative',
                  overflow: 'hidden',
                  cursor: 'default',
                }}
              >
                <img
                  src={bgHappyNewYear}
                  alt="Background"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover',
                  }}
                />
                {/* 暂不支持分享：不再显示礼物图标和可点击蒙层 */}
              </div>
              {/* Background 文字 */}
              <div
                style={{
                  marginTop: px2vmin(8),
                  textAlign: 'center',
                  fontSize: px2vmin(14),
                  color: '#fff',
                }}
              >
                {t('background')}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 区域E */}
      <div
        style={{
          position: 'absolute',
          top: px2vmin(534),
          left: '50%',
          transform: 'translateX(-50%)',
          width: px2vmin(343),
          height: px2vmin(178),
          zIndex: 10,
        }}
      >
        {/* 意见反馈 & 帮助 */}
        <div
          onClick={handleOpenFeedbackModal}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: px2vmin(59),
            borderTop: '1px solid #34313D',
            // marginLeft: px2vmin(10),
            // marginRight: px2vmin(10),
            cursor: 'pointer',
          }}
        >
          <span
            style={{
              fontSize: px2vmin(16),
              color: '#fff',
              marginLeft: px2vmin(10),
            }}
          >
            {t('feedbackAndHelp')}
          </span>
          <img
            src={arrowRight}
            alt="Arrow"
            style={{
              width: px2vmin(24),
              height: px2vmin(24),
              marginRight: '10px',
            }}
          />
        </div>

        {/* 使用协议 */}
        <div
          onClick={() => setShowAgreementModal(true)}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: px2vmin(59),
            borderTop: '1px solid #34313D',
            // marginLeft: px2vmin(10),
            // marginRight: px2vmin(10),
            cursor: 'pointer',
          }}
        >
          <span
            style={{
              fontSize: px2vmin(16),
              color: '#fff',
              marginLeft: px2vmin(10),
            }}
          >
            {t('userAgreement')}
          </span>
          <img
            src={arrowRight}
            alt="Arrow"
            style={{
              width: px2vmin(24),
              height: px2vmin(24),
              marginRight: '10px',
            }}
          />
        </div>

        {/* 隐私政策 */}
        <div
          onClick={() => setShowPrivacyPolicyModal(true)}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: px2vmin(59),
            borderTop: '1px solid #34313D',
            // marginLeft: px2vmin(10),
            // marginRight: px2vmin(10),
            cursor: 'pointer',
          }}
        >
          <span
            style={{
              fontSize: px2vmin(16),
              color: '#fff',
              marginLeft: px2vmin(10),
            }}
          >
            {t('privacyPolicy')}
          </span>
          <img
            src={arrowRight}
            alt="Arrow"
            style={{
              width: px2vmin(24),
              height: px2vmin(24),
              marginRight: '10px',
            }}
          />
        </div>
      </div>

      {/* 编辑用户名弹窗 */}
      {showUsernameModal && (
        <>
          {/* 遮罩层 */}
          <div
            onClick={handleCloseUsernameModal}
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 9998,
              animation: 'fadeIn 0.3s ease-out',
            }}
          />

          {/* 弹窗内容 */}
          <div
            style={{
              position: 'fixed',
              bottom: 0,
              left: '50%',
              transform: 'translateX(-50%)',
              width: px2vw(375),
              backgroundColor: '#34313D',
              borderTopLeftRadius: px2vmin(32),
              borderTopRightRadius: px2vmin(32),
              zIndex: 9999,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              paddingTop: px2vmin(12),
              paddingBottom: px2vmin(32),
              paddingLeft: px2vmin(32),
              paddingRight: px2vmin(32),
            }}
          >
            {/* 顶部拖拽指示条 */}
            <div
              style={{
                width: px2vmin(32),
                height: px2vmin(4),
                backgroundColor: '#79747E',
                borderRadius: px2vmin(4),
              }}
            />

            {/* 文字标签 */}
            <div
              style={{
                width: '100%',
                fontSize: px2vmin(14),
                color: '#fff',
                fontWeight: 'bold',
                marginTop: px2vmin(24),
                marginBottom: px2vmin(16),
                textAlign: 'left',
              }}
            >
              {t('changeMyName')}
            </div>

            {/* 输入框容器（与 email-login 一致：12PX 圆角 + 聚焦边框 #BF9DF8） */}
            <div
              style={{
                width: '100%',
                height: px2vmin(56),
                position: 'relative',
                marginBottom: px2vmin(32),
              }}
            >
              <div
                className="relative overflow-visible"
                style={{
                  height: '100%',
                  background: 'rgba(0,0,0,0.1)',
                  borderRadius: '12PX',
                  border: isUsernameFocused ? '1PX solid #BF9DF8' : '1PX solid transparent',
                  boxShadow: isUsernameFocused
                    ? 'none'
                    : 'rgba(255, 255, 255, 0.18) 0px 1px 0px 0px, rgba(0, 0, 0, 0.65) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 4px 8px inset',
                }}
              >
                <input
                  ref={usernameInputRef}
                  type="text"
                  value={tempUsername}
                  onChange={(e) => setTempUsername(e.target.value)}
                  onFocus={() => setIsUsernameFocused(true)}
                  onBlur={() => setIsUsernameFocused(false)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleSaveUsername();
                    } else if (e.key === 'Escape') {
                      handleCloseUsernameModal();
                    }
                  }}
                  placeholder={t('placeholderUsername')}
                  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: px2vmin(24),
                    paddingRight: px2vmin(24),
                  }}
                />
                {tempUsername ? (
                  <button
                    type="button"
                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
                    style={{
                      right: px2vmin(12),
                      width: px2vmin(24),
                      height: px2vmin(24),
                      background: 'transparent',
                      border: 'none',
                      cursor: 'pointer',
                      opacity: isUsernameFocused ? 1 : 0.6,
                      zIndex: 1,
                    }}
                    onClick={() => setTempUsername('')}
                    onMouseDown={(e) => e.preventDefault()}
                    aria-label={tCommon('a11y.clear')}
                  >
                    <img
                      src={XIconImage}
                      alt={tCommon('a11y.clear')}
                      style={{
                        width: px2vmin(24),
                        height: px2vmin(24),
                        objectFit: 'contain',
                      }}
                      draggable={false}
                    />
                  </button>
                ) : null}
              </div>
            </div>

            {/* 按钮组 */}
            <div
              style={{
                display: 'flex',
                gap: px2vmin(43),
                justifyContent: 'center',
                width: '100%',
              }}
            >
              <button
                onClick={handleCloseUsernameModal}
                style={{
                  width: px2vmin(80),
                  height: px2vmin(42),
                  backgroundImage: `url(${secondaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: 'pointer',
                  padding: 0,
                  borderRadius: px2vmin(20),
                }}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {tCommon('button.cancel')}
                </span>
              </button>
              <button
                onClick={handleSaveUsername}
                style={{
                  width: px2vmin(84),
                  height: px2vmin(42),
                  backgroundImage: `url(${primaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: isUsernameChanged && tempUsername.trim() ? 'pointer' : 'default',
                  padding: 0,
                  opacity: isUsernameChanged && tempUsername.trim() ? 1 : 0.6,
                  borderRadius: px2vmin(20),
                }}
                disabled={!isUsernameChanged || !tempUsername.trim()}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {t('change')}
                </span>
              </button>
            </div>
          </div>
        </>
      )}

      {/* 编辑 Lumi 名字弹窗 */}
      {showBotNameModal && (
        <>
          {/* 遮罩层 */}
          <div
            onClick={handleCloseBotNameModal}
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 9998,
              animation: 'fadeIn 0.3s ease-out',
            }}
          />

          {/* 弹窗内容 */}
          <div
            style={{
              position: 'fixed',
              bottom: 0,
              left: '50%',
              transform: 'translateX(-50%)',
              width: px2vw(375),
              backgroundColor: '#34313D',
              borderTopLeftRadius: px2vmin(32),
              borderTopRightRadius: px2vmin(32),
              zIndex: 9999,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              paddingTop: px2vmin(12),
              paddingBottom: px2vmin(32),
              paddingLeft: px2vmin(32),
              paddingRight: px2vmin(32),
            }}
          >
            {/* 顶部拖拽指示条 */}
            <div
              style={{
                width: px2vmin(32),
                height: px2vmin(4),
                backgroundColor: '#79747E',
                borderRadius: px2vmin(4),
              }}
            />

            {/* 文字标签 */}
            <div
              style={{
                width: '100%',
                fontSize: px2vmin(14),
                color: '#fff',
                marginTop: px2vmin(24),
                marginBottom: px2vmin(16),
                textAlign: 'left',
              }}
            >
              {t('changeLumiName')}
            </div>

            {/* 输入框容器（与 email-login 一致：12PX 圆角 + 聚焦边框 #BF9DF8） */}
            <div
              style={{
                width: '100%',
                height: px2vmin(56),
                position: 'relative',
                marginBottom: px2vmin(32),
              }}
            >
              <div
                className="relative overflow-visible"
                style={{
                  height: '100%',
                  background: 'rgba(0,0,0,0.1)',
                  borderRadius: '12PX',
                  border: isBotNameFocused ? '1PX solid #BF9DF8' : '1PX solid transparent',
                  boxShadow: isBotNameFocused
                    ? 'none'
                    : 'rgba(255, 255, 255, 0.18) 0px 1px 0px 0px, rgba(0, 0, 0, 0.65) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 4px 8px inset',
                }}
              >
                <input
                  ref={botNameInputRef}
                  type="text"
                  value={tempBotName}
                  onChange={(e) => setTempBotName(e.target.value)}
                  onFocus={() => setIsBotNameFocused(true)}
                  onBlur={() => setIsBotNameFocused(false)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleSaveBotName();
                    } else if (e.key === 'Escape') {
                      handleCloseBotNameModal();
                    }
                  }}
                  placeholder={t('placeholderLumiName')}
                  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: px2vmin(24),
                    paddingRight: px2vmin(24),
                  }}
                />
                {tempBotName ? (
                  <button
                    type="button"
                    className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity touch-manipulation"
                    style={{
                      right: px2vmin(12),
                      width: px2vmin(24),
                      height: px2vmin(24),
                      background: 'transparent',
                      border: 'none',
                      cursor: 'pointer',
                      opacity: isBotNameFocused ? 1 : 0.6,
                      zIndex: 1,
                    }}
                    onClick={() => setTempBotName('')}
                    onMouseDown={(e) => e.preventDefault()}
                    aria-label={tCommon('a11y.clear')}
                  >
                    <img
                      src={XIconImage}
                      alt={tCommon('a11y.clear')}
                      style={{
                        width: px2vmin(24),
                        height: px2vmin(24),
                        objectFit: 'contain',
                      }}
                      draggable={false}
                    />
                  </button>
                ) : null}
              </div>
            </div>

            {/* 按钮组 */}
            <div
              style={{
                display: 'flex',
                gap: px2vmin(43),
                justifyContent: 'center',
                width: '100%',
              }}
            >
              <button
                onClick={handleCloseBotNameModal}
                style={{
                  width: px2vmin(80),
                  height: px2vmin(42),
                  backgroundImage: `url(${secondaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: 'pointer',
                  padding: 0,
                  borderRadius: px2vmin(20),
                }}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {tCommon('button.cancel')}
                </span>
              </button>
              <button
                onClick={handleSaveBotName}
                style={{
                  width: px2vmin(84),
                  height: px2vmin(42),
                  backgroundImage: `url(${primaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: isBotNameChanged && tempBotName.trim() ? 'pointer' : 'default',
                  padding: 0,
                  opacity: isBotNameChanged && tempBotName.trim() ? 1 : 0.6,
                  borderRadius: px2vmin(20),
                }}
                disabled={!isBotNameChanged || !tempBotName.trim()}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {t('change')}
                </span>
              </button>
            </div>
          </div>
        </>
      )}

      {/* 能量石弹窗 */}
      <MissionEnergyStoneModal
        visible={showEnergyStoneModal}
        onClose={handleCloseEnergyStoneModal}
        stoneType={energyStoneModalType}
      />

      {/* 意见反馈弹窗 */}
      {showFeedbackModal && (
        <>
          {/* 遮罩层 */}
          <div
            onClick={handleCloseFeedbackModal}
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 9998,
              animation: 'fadeIn 0.3s ease-out',
            }}
          />

          {/* 弹窗内容 */}
          <div
            style={{
              position: 'fixed',
              bottom: 0,
              left: '50%',
              transform: 'translateX(-50%)',
              width: px2vw(375),
              height: px2vmin(420),
              backgroundColor: '#34313D',
              borderTopLeftRadius: px2vmin(32),
              borderTopRightRadius: px2vmin(32),
              zIndex: 9999,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              paddingTop: px2vmin(12),
              paddingBottom: px2vmin(32),
              paddingLeft: px2vmin(32),
              paddingRight: px2vmin(32),
            }}
          >
            {/* 顶部拖拽指示条 */}
            <div
              style={{
                width: px2vmin(32),
                height: px2vmin(4),
                backgroundColor: '#79747E',
                borderRadius: px2vmin(4),
              }}
            />

            {/* 文字标签 */}
            <div
              style={{
                width: px2vmin(311),
                fontSize: px2vmin(14),
                color: '#fff',
                fontWeight: 'bold',
                marginTop: px2vmin(24),
                marginBottom: px2vmin(16),
                textAlign: 'left',
                alignSelf: 'center',
              }}
            >
              {t('feedbackAndHelp')}
            </div>

            {/* 输入区域 */}
            <div
              style={{
                width: px2vmin(311),
                height: px2vmin(224),
                marginBottom: px2vmin(32),
                alignSelf: 'center',
              }}
            >
              <textarea
                value={feedbackText}
                onChange={(e) => setFeedbackText(e.target.value)}
                placeholder={tCommon('feedbackPlaceholder')}
                className="feedback-textarea"
                style={{
                  width: '100%',
                  height: '100%',
                  backgroundColor: 'rgba(245, 243, 240, 0.1)',
                  border: 'none',
                  borderRadius: px2vmin(12),
                  padding: px2vmin(16),
                  fontSize: px2vmin(14),
                  color: 'rgba(245, 243, 240, 0.7)',
                  fontFamily: 'inherit',
                  resize: 'none',
                  outline: 'none',
                }}
              />
            </div>

            {/* 按钮组 */}
            <div
              style={{
                display: 'flex',
                gap: px2vmin(43),
                justifyContent: 'center',
                width: '100%',
              }}
            >
              <button
                onClick={handleCloseFeedbackModal}
                disabled={isSubmittingFeedback}
                style={{
                  width: px2vmin(85),
                  height: px2vmin(44),
                  backgroundImage: `url(${secondaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: isSubmittingFeedback ? 'default' : 'pointer',
                  padding: 0,
                  opacity: isSubmittingFeedback ? 0.6 : 1,
                  borderRadius: px2vmin(20),
                }}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {tCommon('button.cancel')}
                </span>
              </button>
              <button
                onClick={handleSubmitFeedback}
                disabled={!feedbackText.trim() || isSubmittingFeedback}
                style={{
                  width: px2vmin(72),
                  height: px2vmin(44),
                  backgroundImage: `url(${primaryDefaultButton})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  border: 'none',
                  cursor: feedbackText.trim() && !isSubmittingFeedback ? 'pointer' : 'default',
                  padding: 0,
                  opacity: feedbackText.trim() && !isSubmittingFeedback ? 1 : 0.6,
                  borderRadius: px2vmin(20),
                }}
              >
                <span
                  style={{
                    display: 'inline-block',
                    fontSize: px2vmin(16),
                    color: '#FFFFFF',
                    fontWeight: 500,
                  }}
                >
                  {tCommon('button.send')}
                </span>
              </button>
            </div>
          </div>
        </>
      )}

      {/* 用户协议弹窗 */}
      <UserAgreementModal
        visible={showAgreementModal}
        onClose={() => setShowAgreementModal(false)}
      />

      {/* 隐私政策弹窗 */}
      <PrivacyPolicyModal
        visible={showPrivacyPolicyModal}
        onClose={() => setShowPrivacyPolicyModal(false)}
      />
    </div>
    </>
  );
};