'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useAuth } from '@/contexts/AuthContext';
import {
  UserCircleIcon,
  Cog6ToothIcon,
  XCircleIcon,
  ArrowPathIcon,
  PlusIcon,
  XMarkIcon,
  UserIcon,
  PhotoIcon,
  HeartIcon,
  TrashIcon,
  PencilIcon,
  KeyIcon,
  EnvelopeIcon,
  CloudArrowUpIcon,
  EyeIcon,
  ArrowDownTrayIcon,
  ArrowLeftOnRectangleIcon
} from '@heroicons/react/24/outline';
import { 
  getMyTextures, 
  getFavoriteTextures, 
  toggleFavorite, 
  getProfiles,
  createProfile,
  updateProfile,
  deleteProfile,
  setActiveProfile,
  getUserProfile,
  updateUserProfile,
  uploadTexture,
  getTexture,
  generateAvatarUploadUrl,
  updateAvatarUrl,
  resetYggdrasilPassword,
  type Texture,
  type Profile
} from '@/lib/api';
import { messageManager } from '@/components/MessageNotification';

// 导入新的组件
import UserProfileCard from '@/components/profile/UserProfileCard';
import ProfileSidebar from '@/components/profile/ProfileSidebar';
import MySkinsTab from '@/components/profile/MySkinsTab';
import FavoritesTab from '@/components/profile/FavoritesTab';
import UploadSkinModal from '@/components/profile/UploadSkinModal';
import SkinViewer from '@/components/SkinViewer'; // Added SkinViewer import
import CharacterCard from '@/components/profile/CharacterCard'; // Added CharacterCard import

interface UserProfile {
  id: number;
  username: string;
  email: string;
  avatar?: string;
  points: number;
  role: string;
  status: number;
  last_login_at?: string;
  created_at: string;
  updated_at: string;
}

export default function ProfilePage() {
  const [activeTab, setActiveTab] = useState<'characters' | 'skins' | 'favorites' | 'settings'>('characters');
  const [profiles, setProfiles] = useState<Profile[]>([]);
  const [mySkins, setMySkins] = useState<Texture[]>([]);
  const [favoriteSkins, setFavoriteSkins] = useState<Texture[]>([]);
  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isUploading, setIsUploading] = useState(false);
  const [showCreateCharacter, setShowCreateCharacter] = useState(false);
  const [showUploadSkin, setShowUploadSkin] = useState(false);
  const [newCharacterName, setNewCharacterName] = useState('');
  const [newSkinData, setNewSkinData] = useState({
    name: '',
    description: '',
    type: 'SKIN' as 'SKIN' | 'CAPE',
    is_public: false,
    is_slim: false
  });
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [editingProfile, setEditingProfile] = useState<string | null>(null);
  const [editProfileName, setEditProfileName] = useState('');
  const [uploadProgress, setUploadProgress] = useState(0);
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
  const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const [profileSkins, setProfileSkins] = useState<Record<string, { url: string; isSlim: boolean }>>({});
  const [showSkinSelector, setShowSkinSelector] = useState<string | null>(null);
  const [yggdrasilPassword, setYggdrasilPassword] = useState<string>('');
  const [showYggdrasilPassword, setShowYggdrasilPassword] = useState<boolean>(false);
  const [isResettingYggdrasilPassword, setIsResettingYggdrasilPassword] = useState<boolean>(false);
  
  const { user, isAuthenticated, logout } = useAuth();

  // 加载用户数据
  useEffect(() => {
    if (isAuthenticated) {
      loadUserData();
    }
  }, [isAuthenticated]);

  const loadUserData = async () => {
    setIsLoading(true);
    setError(null);
    try {
      // 加载用户信息
      const userResponse = await getUserProfile();
      if (userResponse.code === 200) {
        setUserProfile(userResponse.data);
      } else {
        throw new Error(userResponse.message || '获取用户信息失败');
      }

      // 加载用户档案
      const profilesResponse = await getProfiles();
      if (profilesResponse.code === 200) {
        setProfiles(profilesResponse.data);
        
        // 加载每个角色的皮肤信息
        const skinPromises = profilesResponse.data
          .filter(profile => profile.skin_id)
          .map(async (profile) => {
            try {
              const skinResponse = await getTexture(profile.skin_id!);
              if (skinResponse.code === 200 && skinResponse.data) {
                return {
                  uuid: profile.uuid,
                  url: skinResponse.data.url,
                  isSlim: skinResponse.data.is_slim
                };
              }
            } catch (error) {
              console.error(`加载角色 ${profile.uuid} 的皮肤失败:`, error);
            }
            return null;
          });
        
        const skinResults = await Promise.all(skinPromises);
        const skinMap: Record<string, { url: string; isSlim: boolean }> = {};
        skinResults.forEach((result) => {
          if (result) {
            skinMap[result.uuid] = { url: result.url, isSlim: result.isSlim };
          }
        });
        setProfileSkins(skinMap);
      } else {
        throw new Error(profilesResponse.message || '获取角色列表失败');
      }

      // 加载用户皮肤
      const mySkinsResponse = await getMyTextures({ page: 1, page_size: 50 });
      if (mySkinsResponse.code === 200) {
        setMySkins(mySkinsResponse.data.list || []);
      } else {
        throw new Error(mySkinsResponse.message || '获取皮肤列表失败');
      }

      // 加载收藏的皮肤
      const favoritesResponse = await getFavoriteTextures({ page: 1, page_size: 50 });
      if (favoritesResponse.code === 200) {
        setFavoriteSkins(favoritesResponse.data.list || []);
      } else {
        throw new Error(favoritesResponse.message || '获取收藏列表失败');
      }
    } catch (error) {
      console.error('加载用户数据失败:', error);
      setError(error instanceof Error ? error.message : '加载数据失败，请稍后重试');
    } finally {
      setIsLoading(false);
    }
  };

  const handleToggleSkinVisibility = async (skinId: number) => {
    try {
      const skin = mySkins.find(s => s.id === skinId);
      if (!skin) return;
      
      // TODO: 添加更新皮肤API调用
      setMySkins(prev => prev.map(skin => 
        skin.id === skinId ? { ...skin, is_public: !skin.is_public } : skin
      ));
    } catch (error) {
      console.error('切换皮肤可见性失败:', error);
    }
  };

  const handleDeleteSkin = async (skinId: number) => {
    if (!confirm('确定要删除这个皮肤吗？')) return;
    
    setMySkins(prev => prev.filter(skin => skin.id !== skinId));
  };

  const handleToggleFavorite = async (skinId: number) => {
    try {
      const response = await toggleFavorite(skinId);
      if (response.code === 200) {
        // 重新加载收藏数据
        const favoritesResponse = await getFavoriteTextures({ page: 1, page_size: 50 });
        if (favoritesResponse.code === 200) {
          setFavoriteSkins(favoritesResponse.data.list || []);
        }
      }
    } catch (error) {
      console.error('切换收藏状态失败:', error);
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleUploadSkin = async (file: File, data: { name: string; description: string; type: 'SKIN' | 'CAPE'; is_public: boolean; is_slim: boolean }) => {
    if (!file || !data.name.trim()) {
      messageManager.warning('请选择皮肤文件并输入皮肤名称', { duration: 3000 });
      return;
    }
    
    setIsUploading(true);
    setUploadProgress(0);
    
    try {
      // 使用直接上传接口
      const progressInterval = setInterval(() => {
        setUploadProgress(prev => Math.min(prev + 10, 80));
      }, 200);
      
      const response = await uploadTexture(file, {
        name: data.name.trim(),
        description: data.description.trim(),
        type: data.type,
        is_public: data.is_public,
        is_slim: data.is_slim
      });
      
      clearInterval(progressInterval);
      setUploadProgress(100);
      
      if (response.code === 200) {
        // 重新加载皮肤数据
        const mySkinsResponse = await getMyTextures({ page: 1, page_size: 50 });
        if (mySkinsResponse.code === 200) {
          setMySkins(mySkinsResponse.data.list || []);
        }
        
        // 重置表单
        setSelectedFile(null);
        setNewSkinData({
          name: '',
          description: '',
          type: 'SKIN',
          is_public: false,
          is_slim: false
        });
        setShowUploadSkin(false);
        messageManager.success('皮肤上传成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '上传皮肤失败');
      }
      
    } catch (error) {
      console.error('上传皮肤失败:', error);
      messageManager.error(error instanceof Error ? error.message : '上传皮肤失败，请稍后重试', { duration: 3000 });
    } finally {
      setIsUploading(false);
      setUploadProgress(0);
    }
  };

  const handleAvatarFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      messageManager.warning('请选择图片文件', { duration: 3000 });
      return;
    }

    // 检查文件大小 (2MB)
    if (file.size > 2 * 1024 * 1024) {
      messageManager.warning('文件大小不能超过2MB', { duration: 3000 });
      return;
    }
    setAvatarFile(file);
  };

  const handleUploadAvatar = async () => {
    if (!avatarFile) return;
    
    setIsUploadingAvatar(true);
    setAvatarUploadProgress(0);
    
    try {
      // 获取上传URL
      const uploadUrlResponse = await generateAvatarUploadUrl(avatarFile.name);
      if (uploadUrlResponse.code !== 200) {
        throw new Error(uploadUrlResponse.message || '获取上传URL失败');
      }
      
      const { post_url, form_data, avatar_url } = uploadUrlResponse.data;
      
      // 模拟上传进度
      const progressInterval = setInterval(() => {
        setAvatarUploadProgress(prev => Math.min(prev + 20, 80));
      }, 200);
      
      // 上传文件到预签名URL
      const formData = new FormData();
      Object.entries(form_data).forEach(([key, value]) => {
        formData.append(key, value as string);
      });
      formData.append('file', avatarFile);
      
      const uploadResponse = await fetch(post_url, {
        method: 'POST',
        body: formData,
      });
      
      if (!uploadResponse.ok) {
        throw new Error('文件上传失败');
      }
      
      clearInterval(progressInterval);
      setAvatarUploadProgress(100);
      
      // 更新用户头像URL
      const response = await updateAvatarUrl(avatar_url);
      if (response.code === 200) {
        setUserProfile(prev => prev ? { ...prev, avatar: avatar_url } : null);
        messageManager.success('头像上传成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '更新头像URL失败');
      }
      
    } catch (error) {
      console.error('头像上传失败:', error);
      messageManager.error(error instanceof Error ? error.message : '头像上传失败，请稍后重试', { duration: 3000 });
    } finally {
      setIsUploadingAvatar(false);
      setAvatarUploadProgress(0);
      setAvatarFile(null);
    }
  };

  const handleDeleteAvatar = async () => {
    if (!confirm('确定要删除头像吗？')) return;
    
    try {
      const response = await updateUserProfile({ avatar: '' });
      if (response.code === 200) {
        setUserProfile(response.data);
        messageManager.success('头像删除成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '删除头像失败');
      }
    } catch (error) {
      console.error('删除头像失败:', error);
      messageManager.error(error instanceof Error ? error.message : '删除头像失败，请稍后重试', { duration: 3000 });
    } finally {
      setAvatarFile(null);
    }
  };

  const handleResetYggdrasilPassword = async () => {
    if (!confirm('确定要重置Yggdrasil密码吗？这将生成一个新的密码。')) return;
    
    setIsResettingYggdrasilPassword(true);
    
    try {
      const response = await resetYggdrasilPassword();
      if (response.code === 200) {
        messageManager.success('Yggdrasil密码重置成功！请妥善保管新密码。', { duration: 5000 });
      } else {
        throw new Error(response.message || '重置Yggdrasil密码失败');
      }
    } catch (error) {
      console.error('重置Yggdrasil密码失败:', error);
      messageManager.error(error instanceof Error ? error.message : '重置Yggdrasil密码失败，请稍后重试', { duration: 3000 });
    } finally {
      setIsResettingYggdrasilPassword(false);
    }
  };

  const handleCreateCharacter = async () => {
    if (!newCharacterName.trim()) {
      messageManager.warning('请输入角色名称', { duration: 3000 });
      return;
    }
    
    try {
      const response = await createProfile(newCharacterName.trim());
      if (response.code === 200) {
        setProfiles(prev => [...prev, response.data]);
        setNewCharacterName('');
        messageManager.success('角色创建成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '创建角色失败');
      }
    } catch (error) {
      console.error('创建角色失败:', error);
      messageManager.error(error instanceof Error ? error.message : '创建角色失败，请稍后重试', { duration: 3000 });
    } finally {
    }
  };

  const handleDeleteCharacter = async (uuid: string) => {
    const character = profiles.find(p => p.uuid === uuid);
    if (!character) return;
    
    if (!confirm(`确定要删除角色 "${character.name}" 吗？此操作不可恢复。`)) return;
    
    try {
      const response = await deleteProfile(uuid);
      if (response.code === 200) {
        setProfiles(prev => prev.filter(profile => profile.uuid !== uuid));
        messageManager.success('角色删除成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '删除角色失败');
      }
    } catch (error) {
      console.error('删除角色失败:', error);
      messageManager.error(error instanceof Error ? error.message : '删除角色失败，请稍后重试', { duration: 3000 });
    } finally {
    }
  };

  const handleSetActiveCharacter = async (uuid: string) => {
    try {
      const response = await setActiveProfile(uuid);
      if (response.code === 200) {
        setProfiles(prev => prev.map(profile => ({
          ...profile,
          is_active: profile.uuid === uuid
        })));
        messageManager.success('角色切换成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '设置活跃角色失败');
      }
    } catch (error) {
      console.error('设置活跃角色失败:', error);
      messageManager.error(error instanceof Error ? error.message : '设置活跃角色失败，请稍后重试', { duration: 3000 });
    } finally {
    }
  };

  const handleEditCharacter = async () => {
    if (!editProfileName.trim()) {
      messageManager.warning('请输入角色名称', { duration: 3000 });
      return;
    }
    
    try {
      const response = await updateProfile(editingProfile!, { name: editProfileName.trim() });
      if (response.code === 200) {
        setProfiles(prev => prev.map(profile => 
          profile.uuid === editingProfile ? response.data : profile
        ));
        setEditingProfile(null);
        setEditProfileName('');
        messageManager.success('角色编辑成功！', { duration: 3000 });
      } else {
        throw new Error(response.message || '编辑角色失败');
      }
    } catch (error) {
      console.error('编辑角色失败:', error);
      messageManager.error(error instanceof Error ? error.message : '编辑角色失败，请稍后重试', { duration: 3000 });
    }
  };

  const onEdit = (uuid: string, currentName: string) => {
    setEditingProfile(uuid);
    setEditProfileName(currentName);
  };

  const onCancelEdit = () => {
    setEditingProfile(null);
    setEditProfileName('');
  };

  // 渲染内容区域
  const renderContent = () => {
    switch (activeTab) {
      case 'characters':
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="space-y-6"
          >
            <div className="flex justify-between items-center">
              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">角色管理</h1>
              <motion.button 
                onClick={() => setShowCreateCharacter(true)}
                className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <PlusIcon className="w-5 h-5" />
                <span>创建角色</span>
              </motion.button>
            </div>

            {/* Create Character Modal */}
            <AnimatePresence>
              {showCreateCharacter && (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
                >
                  <motion.div
                    initial={{ scale: 0.9, y: 20 }}
                    animate={{ scale: 1, y: 0 }}
                    exit={{ scale: 0.9, y: 20 }}
                    className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-md mx-4"
                  >
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-xl font-bold text-gray-900 dark:text-white">创建新角色</h3>
                      <button
                        onClick={() => setShowCreateCharacter(false)}
                        className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                      >
                        <XMarkIcon className="w-6 h-6" />
                      </button>
                    </div>
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          角色名称
                        </label>
                        <input
                          type="text"
                          value={newCharacterName}
                          onChange={(e) => setNewCharacterName(e.target.value)}
                          className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                          placeholder="请输入角色名称"
                        />
                      </div>
                      <div className="flex space-x-3">
                        <button
                          onClick={() => setShowCreateCharacter(false)}
                          className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                          取消
                        </button>
                        <button
                          onClick={handleCreateCharacter}
                          disabled={!newCharacterName.trim()}
                          className="flex-1 px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl hover:from-orange-600 hover:to-amber-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                        >
                          创建
                        </button>
                      </div>
                    </div>
                  </motion.div>
                </motion.div>
              )}
            </AnimatePresence>

            {profiles.length === 0 ? (
              <div className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-12 text-center">
                <UserIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">暂无角色</h3>
                <p className="text-gray-600 dark:text-gray-400">创建你的第一个Minecraft角色吧！</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {profiles.map((profile) => (
                  <CharacterCard
                    key={profile.uuid}
                    profile={profile}
                    skinUrl={profileSkins[profile.uuid]?.url}
                    isSlim={profileSkins[profile.uuid]?.isSlim}
                    isEditing={editingProfile === profile.uuid}
                    editName={editProfileName}
                    onEdit={onEdit}
                    onSave={handleEditCharacter}
                    onCancel={onCancelEdit}
                    onDelete={handleDeleteCharacter}
                    onSetActive={handleSetActiveCharacter}
                    onSelectSkin={setShowSkinSelector}
                    onEditNameChange={setEditProfileName}
                  />
                ))}
              </div>
            )}
          </motion.div>
        );
      case 'skins':
        return (
          <MySkinsTab
            skins={mySkins}
            onUploadClick={() => setShowUploadSkin(true)}
            onToggleVisibility={handleToggleSkinVisibility}
            onDelete={handleDeleteSkin}
          />
        );
      case 'favorites':
        return (
          <FavoritesTab
            skins={favoriteSkins}
            onToggleFavorite={handleToggleFavorite}
          />
        );
      case 'settings':
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="space-y-6"
          >
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">账户设置</h1>
            
            <div className="space-y-6">
              {/* Avatar Settings */}
              <motion.div 
                className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-6 border border-white/20 dark:border-gray-700/50 shadow-lg"
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2 }}
              >
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
                  <PhotoIcon className="w-5 h-5" />
                  <span>头像设置</span>
                </h3>
                <div className="flex items-center space-x-6">
                  <div className="relative">
                    {userProfile?.avatar ? (
                      <img 
                        src={userProfile.avatar} 
                        alt={userProfile.username}
                        className="w-20 h-20 rounded-full border-4 border-orange-500 shadow-lg"
                      />
                    ) : (
                      <div className="w-20 h-20 bg-gradient-to-br from-orange-400 to-amber-500 rounded-full flex items-center justify-center shadow-lg">
                        <UserCircleIcon className="w-10 h-10 text-white" />
                      </div>
                    )}
                    <motion.button
                      className="absolute -bottom-2 -right-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white p-2 rounded-full shadow-lg"
                      whileHover={{ scale: 1.1 }}
                      whileTap={{ scale: 0.9 }}
                      onClick={() => document.getElementById('avatar-upload')?.click()}
                    >
                      <PencilIcon className="w-4 h-4" />
                    </motion.button>
                    <input
                      type="file"
                      id="avatar-upload"
                      accept="image/*"
                      onChange={handleAvatarFileSelect}
                      className="hidden"
                    />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
                      支持 JPG、PNG 格式，最大 2MB
                    </p>
                    {avatarFile && (
                      <div className="mb-3">
                        <p className="text-sm text-green-600 dark:text-green-400">
                          已选择: {avatarFile.name}
                        </p>
                      </div>
                    )}
                    {isUploadingAvatar && (
                      <div className="mb-3">
                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                          <div 
                            className="bg-gradient-to-r from-orange-500 to-amber-500 h-2 rounded-full transition-all duration-300"
                            style={{ width: `${avatarUploadProgress}%` }}
                          />
                        </div>
                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                          上传中... {avatarUploadProgress}%
                        </p>
                      </div>
                    )}
                    <div className="flex space-x-3">
                      <motion.button 
                        onClick={handleUploadAvatar}
                        disabled={!avatarFile || isUploadingAvatar}
                        className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        <CloudArrowUpIcon className="w-4 h-4" />
                        <span>{isUploadingAvatar ? '上传中...' : '上传头像'}</span>
                      </motion.button>
                      {userProfile?.avatar && (
                        <motion.button 
                          onClick={handleDeleteAvatar}
                          disabled={isUploadingAvatar}
                          className="border border-red-500 text-red-500 hover:bg-red-500 hover:text-white px-4 py-2 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                          whileHover={{ scale: 1.05 }}
                          whileTap={{ scale: 0.95 }}
                        >
                          删除头像
                        </motion.button>
                      )}
                    </div>
                  </div>
                </div>
              </motion.div>

              {/* Yggdrasil Settings */}
              <motion.div 
                className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-6 border border-white/20 dark:border-gray-700/50 shadow-lg"
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2 }}
              >
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
                  <KeyIcon className="w-5 h-5" />
                  <span>Yggdrasil 设置</span>
                </h3>
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Yggdrasil 密码
                    </label>
                    <div className="flex gap-2">
                      <input
                        type={showYggdrasilPassword ? 'text' : 'password'}
                        value={yggdrasilPassword || '••••••••'}
                        readOnly
                        className="flex-1 px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-200"
                      />
                      <motion.button 
                        onClick={() => setShowYggdrasilPassword(!showYggdrasilPassword)}
                        className="bg-gradient-to-r from-gray-500 to-gray-600 text-white px-4 py-2 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        {showYggdrasilPassword ? '隐藏' : '显示'}
                      </motion.button>
                      <motion.button 
                        onClick={handleResetYggdrasilPassword}
                        disabled={isResettingYggdrasilPassword}
                        className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                      >
                        {isResettingYggdrasilPassword ? '重置中...' : '重置密码'}
                      </motion.button>
                    </div>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      此密码用于Minecraft客户端连接，请妥善保管
                    </p>
                  </div>
                </div>
              </motion.div>

              {/* Basic Info */}
              <motion.div 
                className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-6 border border-white/20 dark:border-gray-700/50 shadow-lg"
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2 }}
              >
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
                  <UserIcon className="w-5 h-5" />
                  <span>基本信息</span>
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      用户名
                    </label>
                    <input
                      type="text"
                      value={userProfile?.username || ''}
                      readOnly
                      className="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-200"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      邮箱地址
                    </label>
                    <input
                      type="email"
                      value={userProfile?.email || ''}
                      readOnly
                      className="w-full px-4 py-3 bg-white/50 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-200"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      注册时间
                    </label>
                    <input
                      type="text"
                      value={userProfile ? new Date(userProfile.created_at).toLocaleDateString() : ''}
                      readOnly
                      className="w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                      最后登录
                    </label>
                    <input
                      type="text"
                      value={userProfile?.last_login_at ? new Date(userProfile.last_login_at).toLocaleString() : '从未登录'}
                      readOnly
                      className="w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400"
                    />
                  </div>
                </div>
              </motion.div>

              {/* Account Actions */}
              <motion.div 
                className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-6 border border-white/20 dark:border-gray-700/50 shadow-lg"
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2 }}
              >
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
                  <Cog6ToothIcon className="w-5 h-5" />
                  <span>账户操作</span>
                </h3>
                <div className="space-y-3">
                  <motion.button 
                    className="w-full flex items-center justify-between p-3 border border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white rounded-xl transition-all duration-200"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <span>更换邮箱地址</span>
                    <EnvelopeIcon className="w-5 h-5" />
                  </motion.button>
                  <motion.button 
                    onClick={logout}
                    className="w-full flex items-center justify-between p-3 border border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-xl transition-all duration-200"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <span>退出登录</span>
                    <ArrowLeftOnRectangleIcon className="w-5 h-5" />
                  </motion.button>
                </div>
              </motion.div>
            </div>
          </motion.div>
        );
      default:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
            className="space-y-6"
          >
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              账户设置
            </h1>
            <div className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-lg rounded-2xl p-12 text-center">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">功能开发中</h3>
              <p className="text-gray-600 dark:text-gray-400">该功能正在开发中，敬请期待！</p>
            </div>
          </motion.div>
        );
    }
  };

  // 渲染皮肤选择器模态框
  const renderSkinSelector = () => {
    if (!showSkinSelector) return null;
    
    const currentProfile = profiles.find(p => p.uuid === showSkinSelector);
    const availableSkins = mySkins.filter(skin => skin.type === 'SKIN');
    
    return (
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
        >
          <motion.div
            initial={{ scale: 0.9, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.9, y: 20 }}
            className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-4xl mx-4 max-h-[80vh] overflow-y-auto"
          >
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white">
                为角色 "{currentProfile?.name}" 选择皮肤
              </h3>
              <button
                onClick={() => setShowSkinSelector(null)}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
              >
                <XMarkIcon className="w-6 h-6" />
              </button>
            </div>
            
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
              <motion.div
                className="aspect-square bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center cursor-pointer border-2 border-dashed border-gray-300 dark:border-gray-600"
                whileHover={{ scale: 1.02 }}
                onClick={() => {
                  // 移除皮肤
                  if (currentProfile) {
                    updateProfile(currentProfile.uuid, { skin_id: undefined });
                    setProfiles(prev => prev.map(p => 
                      p.uuid === currentProfile.uuid ? { ...p, skin_id: undefined } : p
                    ));
                    setProfileSkins(prev => {
                      const newSkins = { ...prev };
                      delete newSkins[currentProfile.uuid];
                      return newSkins;
                    });
                    setShowSkinSelector(null);
                  }
                }}
              >
                <div className="text-center">
                  <XMarkIcon className="w-8 h-8 text-gray-400 mx-auto mb-2" />
                  <p className="text-sm text-gray-500 dark:text-gray-400">移除皮肤</p>
                </div>
              </motion.div>
              
              {availableSkins.map((skin) => (
                <motion.div
                  key={skin.id}
                  className="aspect-square bg-gradient-to-br from-orange-100 to-amber-100 dark:from-gray-700 dark:to-gray-600 rounded-xl overflow-hidden cursor-pointer relative group"
                  whileHover={{ scale: 1.02 }}
                  onClick={() => {
                    // 分配皮肤给角色
                    if (currentProfile) {
                      updateProfile(currentProfile.uuid, { skin_id: skin.id });
                      setProfiles(prev => prev.map(p => 
                        p.uuid === currentProfile.uuid ? { ...p, skin_id: skin.id } : p
                      ));
                      setProfileSkins(prev => ({
                        ...prev,
                        [currentProfile.uuid]: { url: skin.url, isSlim: skin.is_slim }
                      }));
                      setShowSkinSelector(null);
                    }
                  }}
                >
                  <SkinViewer
                    skinUrl={skin.url}
                    isSlim={skin.is_slim}
                    width={200}
                    height={200}
                    className="w-full h-full"
                    autoRotate={false}
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-2 text-center">
                    {skin.name}
                  </div>
                </motion.div>
              ))}
            </div>
            
            {availableSkins.length === 0 && (
              <div className="text-center py-8">
                <PhotoIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-600 dark:text-gray-400">暂无可用皮肤，请先上传皮肤</p>
              </div>
            )}
          </motion.div>
        </motion.div>
      </AnimatePresence>
    );
  };

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="text-center">
          <motion.div
            initial={{ scale: 0, rotate: -180 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ duration: 0.6, type: "spring" }}
            className="mb-8"
          >
            <div className="w-24 h-24 bg-gradient-to-br from-orange-400 via-amber-500 to-orange-600 rounded-3xl flex items-center justify-center shadow-2xl mx-auto">
              <UserCircleIcon className="w-12 h-12 text-white" />
            </div>
          </motion.div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">请先登录</h2>
          <p className="text-gray-600 dark:text-gray-400 text-lg">登录后即可查看个人资料</p>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="text-center">
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
            className="mb-8"
          >
            <div className="w-16 h-16 bg-gradient-to-br from-orange-400 via-amber-500 to-orange-600 rounded-full flex items-center justify-center shadow-xl mx-auto">
              <Cog6ToothIcon className="w-8 h-8 text-white" />
            </div>
          </motion.div>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">加载中...</h2>
          <p className="text-gray-600 dark:text-gray-400">正在加载您的个人资料</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="text-center">
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ duration: 0.6, type: "spring" }}
            className="mb-8"
          >
            <div className="w-24 h-24 bg-gradient-to-br from-red-400 via-red-500 to-red-600 rounded-full flex items-center justify-center shadow-2xl mx-auto">
              <XCircleIcon className="w-12 h-12 text-white" />
            </div>
          </motion.div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">加载失败</h2>
          <p className="text-gray-600 dark:text-gray-400 text-lg mb-6">{error}</p>
          <motion.button
            onClick={loadUserData}
            className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-6 py-3 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200 mx-auto"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <ArrowPathIcon className="w-5 h-5" />
            <span>重新加载</span>
          </motion.button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      {/* Animated Background */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-orange-400/20 to-amber-400/20 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-tr from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
      </div>

      <div className="relative">
        <div className="flex min-h-screen">
          {/* Left Sidebar - 使用CSS自定义属性考虑navbar高度 */}
          <motion.div 
            initial={{ x: -100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="w-80 bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-r border-gray-200/50 dark:border-gray-700/50 p-6 fixed left-0 h-screen flex flex-col"
            style={{ 
              position: 'fixed', 
              left: 0, 
              top: 'var(--navbar-height, 64px)', 
              height: 'calc(100vh - var(--navbar-height, 64px))', 
              width: '320px' 
            }}
          >
            {/* User Profile Card */}
            <UserProfileCard
              username={userProfile?.username}
              email={userProfile?.email}
              avatar={userProfile?.avatar}
              skinCount={mySkins.length}
              favoriteCount={favoriteSkins.length}
              points={userProfile?.points || 0}
            />

            {/* Profile Sidebar Component */}
            <ProfileSidebar
              activeTab={activeTab}
              onTabChange={(tab: string) => setActiveTab(tab as 'characters' | 'skins' | 'favorites' | 'settings')}
              skinCount={mySkins.length}
              favoriteCount={favoriteSkins.length}
              profilesCount={profiles.length}
              onLogout={logout}
            />
          </motion.div>

          {/* Right Content Area - 考虑左侧fixed侧栏的空间 */}
          <motion.div 
            initial={{ x: 100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.5, ease: "easeOut", delay: 0.1 }}
            className="flex-1 p-8 overflow-y-auto ml-80"
            style={{ marginLeft: '320px', minHeight: '100vh' }}
          >
            <AnimatePresence mode="wait">
              {renderContent()}
            </AnimatePresence>
          </motion.div>
        </div>
      </div>

      {/* Upload Skin Modal */}
      <UploadSkinModal
        isOpen={showUploadSkin}
        onClose={() => setShowUploadSkin(false)}
        onUpload={async (file, data) => {
          setSelectedFile(file);
          setNewSkinData(data);
          await handleUploadSkin(file, data);
        }}
        isUploading={isUploading}
        uploadProgress={uploadProgress}
      />

      {/* Skin Selector Modal */}
      {renderSkinSelector()}
    </div>
  );
}