mini-starter/mini/src/pages/profile/index.tsx

import { useState } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { TabBarLayout } from '@/layouts/tab-bar-layout'
import { useAuth } from '@/utils/auth'
import { cn } from '@/utils/cn'
import { Button } from '@/components/ui/button'
import { Navbar } from '@/components/ui/navbar'
import { AvatarUpload } from '@/components/ui/avatar-upload'
import { type UploadResult } from '@/utils/minio'
import './index.css'

const ProfilePage: React.FC = () => {
  const { user: userProfile, logout, isLoading: loading, updateUser } = useAuth()
  const [updatingAvatar, setUpdatingAvatar] = useState(false)

  const handleLogout = async () => {
    try {
      Taro.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            Taro.showLoading({ title: '退出中...' })
            await logout()
            Taro.hideLoading()
            Taro.showToast({
              title: '已退出登录',
              icon: 'success',
              duration: 1500
            })
            setTimeout(() => {
              Taro.reLaunch({ url: '/pages/index/index' })
            }, 1500)
          }
        }
      })
    } catch (error) {
      Taro.hideLoading()
      Taro.showToast({
        title: '退出失败，请重试',
        icon: 'none'
      })
    }
  }

  const handleAvatarUpload = async (result: UploadResult) => {
    try {
      setUpdatingAvatar(true)
      Taro.showLoading({ title: '更新头像...' })
      
      // 这里应该调用更新用户头像的API
      // 假设有一个更新用户信息的API
      console.log('头像上传成功:', result)
      
      // 更新本地用户数据
      if (userProfile) {
        const updatedUser = {
          ...userProfile,
          avatarFileId: result.fileId
        }
        updateUser(updatedUser)
      }
        
        Taro.hideLoading()
        Taro.showToast({
          title: '头像更新成功',
          icon: 'success'
        })
    } catch (error) {
      console.error('更新头像失败:', error)
      Taro.hideLoading()
      Taro.showToast({
        title: '更新头像失败',
        icon: 'none'
      })
    } finally {
      setUpdatingAvatar(false)
    }
  }

  const handleAvatarUploadError = (error: Error) => {
    console.error('头像上传失败:', error)
    Taro.showToast({
      title: '上传失败，请重试',
      icon: 'none'
    })
  }

  const handleEditProfile = () => {
    Taro.showToast({
      title: '功能开发中...',
      icon: 'none'
    })
  }

  const handleSettings = () => {
    Taro.showToast({
      title: '功能开发中...',
      icon: 'none'
    })
  }

  const menuItems = [
    {
      icon: 'i-heroicons-user-circle-20-solid',
      title: '编辑资料',
      onClick: handleEditProfile,
      color: 'text-blue-500'
    },
    {
      icon: 'i-heroicons-cog-6-tooth-20-solid',
      title: '设置',
      onClick: handleSettings,
      color: 'text-gray-500'
    },
    {
      icon: 'i-heroicons-shield-check-20-solid',
      title: '隐私政策',
      onClick: () => Taro.showToast({ title: '功能开发中...', icon: 'none' }),
      color: 'text-green-500'
    },
    {
      icon: 'i-heroicons-question-mark-circle-20-solid',
      title: '帮助与反馈',
      onClick: () => Taro.showToast({ title: '功能开发中...', icon: 'none' }),
      color: 'text-purple-500'
    }
  ]

  if (loading) {
    return (
      <TabBarLayout activeKey="profile">
        <View className="flex-1 flex items-center justify-center">
          <View className="i-heroicons-arrow-path-20-solid animate-spin w-8 h-8 text-blue-500" />
        </View>
      </TabBarLayout>
    )
  }

  if (!userProfile) {
    return (
      <TabBarLayout activeKey="profile">
        <Navbar
          title="个人中心"
          leftIcon=""
        />
        <View className="flex-1 flex flex-col items-center justify-center">
          <View className="flex flex-col items-center">
            <View className="i-heroicons-exclamation-circle-20-solid w-12 h-12 text-gray-400 mx-auto mb-4" />
            <Text className="text-gray-600 mb-4">请先登录</Text>
            <Button
              variant="default"
              size="lg"
              onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}
            >
              去登录
            </Button>
          </View>
        </View>
      </TabBarLayout>
    )
  }

  return (
    <TabBarLayout activeKey="profile">
      <Navbar
        title="个人中心"
        rightIcon="i-heroicons-cog-6-tooth-20-solid"
        onClickRight={handleSettings}
        leftIcon=""
      />
      <ScrollView className="flex-1 bg-gray-50">
        {/* 用户信息卡片 */}
        <View className="bg-white rounded-b-3xl shadow-sm pb-8">
          <View className="flex flex-col items-center pt-8 pb-6">
            <View className="relative">
              <AvatarUpload
                currentAvatar={userProfile.avatarFile?.fullUrl}
                onUploadSuccess={handleAvatarUpload}
                onUploadError={handleAvatarUploadError}
                size={96}
                editable={!updatingAvatar}
              />
            </View>
            <Text className="text-xl font-bold text-gray-900 mt-4">{userProfile.username}</Text>
            {userProfile.email && (
              <Text className="text-sm text-gray-600 mt-1">{userProfile.email}</Text>
            )}
            <View className="flex items-center mt-2">
              <View className="i-heroicons-calendar-20-solid w-4 h-4 text-gray-400 mr-1" />
              <Text className="text-xs text-gray-500">
                注册于 {new Date(userProfile.createdAt).toLocaleDateString('zh-CN')}
              </Text>
            </View>
          </View>

          {/* 统计信息 */}
          <View className="px-6">
            <View className="grid grid-cols-3 gap-4 text-center">
              <View className="bg-gray-50 rounded-xl p-4">
                <Text className="text-2xl font-bold text-blue-500">0</Text>
                <Text className="text-xs text-gray-600 mt-1">收藏</Text>
              </View>
              <View className="bg-gray-50 rounded-xl p-4">
                <Text className="text-2xl font-bold text-green-500">0</Text>
                <Text className="text-xs text-gray-600 mt-1">点赞</Text>
              </View>
              <View className="bg-gray-50 rounded-xl p-4">
                <Text className="text-2xl font-bold text-purple-500">0</Text>
                <Text className="text-xs text-gray-600 mt-1">关注</Text>
              </View>
            </View>
          </View>
        </View>

        {/* 功能菜单 */}
        <View className="px-4 pt-6">
          <View className="bg-white rounded-2xl shadow-sm overflow-hidden">
            {menuItems.map((item, index) => (
              <View
                key={index}
                className="flex items-center px-4 py-4 active:bg-gray-50 transition-colors duration-150"
                onClick={item.onClick}
              >
                <View className={cn("w-6 h-6 mr-3", item.color, item.icon)} />
                <Text className="flex-1 text-gray-800">{item.title}</Text>
                <View className="i-heroicons-chevron-right-20-solid w-5 h-5 text-gray-400" />
              </View>
            ))}
          </View>
        </View>

        {/* 账号信息 */}
        <View className="px-4 pt-6">
          <View className="bg-white rounded-2xl shadow-sm p-4">
            <Text className="text-sm font-medium text-gray-700 mb-3">账号信息</Text>
            <View className="space-y-3">
              <View className="flex justify-between items-center">
                <Text className="text-sm text-gray-600">用户ID</Text>
                <Text className="text-sm text-gray-900 font-mono">{userProfile.id}</Text>
              </View>
              {userProfile.updatedAt && (
                <View className="flex justify-between items-center">
                  <Text className="text-sm text-gray-600">最近登录</Text>
                  <Text className="text-sm text-gray-900">
                    {new Date(userProfile.updatedAt).toLocaleString('zh-CN')}
                  </Text>
                </View>
              )}
            </View>
          </View>
        </View>

        {/* 退出登录按钮 */}
        <View className="px-4 pt-6 pb-8">
          <Button
            variant="destructive"
            size="lg"
            className="w-full"
            onClick={handleLogout}
          >
            <View className="flex items-center justify-center">
              <View className="i-heroicons-arrow-left-on-rectangle-20-solid w-5 h-5 mr-2" />
              退出登录
            </View>
          </Button>
        </View>

        {/* 版本信息 */}
        <View className="pb-8">
          <Text className="text-center text-xs text-gray-400">
            v1.0.0 - 小程序版
          </Text>
        </View>
      </ScrollView>
    </TabBarLayout>
  )
}

export default ProfilePage