import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { FC, useState } from 'react'
import { Network } from '@/network'
import './index.css'

interface SignInStatus {
  todaySignedIn: boolean
  continuousDays: number
  totalDays: number
}

/**
 * 个人中心页面
 */
const ProfilePage: FC = () => {
  const [signInStatus, setSignInStatus] = useState<SignInStatus>({
    todaySignedIn: false,
    continuousDays: 0,
    totalDays: 0
  })

  // 页面显示时获取签到统计
  useDidShow(async () => {
    await fetchSignInStatus()
  })

  // 获取签到状态
  const fetchSignInStatus = async () => {
    try {
      const res = await Network.request({
        url: '/api/signin/status',
        method: 'GET'
      })
      console.log('签到状态:', res.data)
      if (res.data?.code === 200 && res.data?.data) {
        setSignInStatus(res.data.data)
      }
    } catch (error) {
      console.error('获取签到状态失败:', error)
    }
  }

  return (
    <View className="min-h-screen bg-gray-900 px-4 py-6">
      {/* 用户信息卡片 */}
      <View className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6 mb-6">
        <View className="flex flex-row items-center gap-4 mb-4">
          <View className="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
            <Text className="text-white text-2xl">👤</Text>
          </View>
          <View className="flex-1">
            <Text className="block text-white text-xl font-bold">微博用户</Text>
            <Text className="block text-blue-200 text-sm mt-1">ID: default_user</Text>
          </View>
        </View>
      </View>

      {/* 签到统计 */}
      <View className="mb-6">
        <Text className="block text-white text-lg font-bold mb-4">签到统计</Text>
        <View className="flex flex-row gap-3">
          <View className="flex-1 bg-gray-800 rounded-2xl p-4">
            <Text className="block text-gray-400 text-xs">连续签到</Text>
            <Text className="block text-white text-3xl font-bold mt-1">{signInStatus.continuousDays}</Text>
            <Text className="block text-gray-400 text-xs mt-1">天</Text>
          </View>
          <View className="flex-1 bg-gray-800 rounded-2xl p-4">
            <Text className="block text-gray-400 text-xs">累计签到</Text>
            <Text className="block text-white text-3xl font-bold mt-1">{signInStatus.totalDays}</Text>
            <Text className="block text-gray-400 text-xs mt-1">天</Text>
          </View>
        </View>
      </View>

      {/* 今日状态 */}
      <View className="bg-gray-800 rounded-2xl p-4 mb-6">
        <View className="flex flex-row items-center justify-between">
          <View>
            <Text className="block text-white text-base font-semibold">今日签到</Text>
            <Text className="block text-gray-400 text-sm mt-1">
              {signInStatus.todaySignedIn ? '已完成' : '未完成'}
            </Text>
          </View>
          <View
            className={`w-12 h-12 rounded-full flex items-center justify-center ${
              signInStatus.todaySignedIn ? 'bg-green-500' : 'bg-gray-700'
            }`}
          >
            <Text className="text-white text-xl">{signInStatus.todaySignedIn ? '✓' : '○'}</Text>
          </View>
        </View>
      </View>

      {/* 提示信息 */}
      <View className="bg-gray-800 rounded-2xl p-4">
        <Text className="block text-gray-400 text-sm leading-relaxed">
          温馨提示：每天签到可以点亮一颗星星，连续签到让星空更加璀璨。坚持签到，养成好习惯！
        </Text>
      </View>
    </View>
  )
}

export default ProfilePage