import React from 'react'
import { View, Text } from '@tarojs/components'
import { PersonalInfoResponse } from './PersonalBasicInfo'

interface UserInfoHeaderProps {
  personalInfo: PersonalInfoResponse | null
  loading: boolean
}

/**
 * 就业状态映射
 */
const jobStatusMap: Record<number, string> = {
  0: '待业',
  1: '在职'
}

/**
 * 顶部用户信息区域组件
 * 渐变背景,显示用户头像、姓名和状态
 */
const UserInfoHeader: React.FC<UserInfoHeaderProps> = ({ personalInfo, loading }) => {
  if (loading) {
    return (
      <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5 mb-3">
        <View className="flex justify-between items-start">
          <View className="flex items-center">
            <View className="w-16 h-16 rounded-full border-2 border-white mr-4 bg-blue-400 flex items-center justify-center animate-pulse" />
            <View>
              <View className="h-6 bg-white/30 rounded w-20 mb-2" />
              <View className="h-4 bg-white/20 rounded w-32" />
            </View>
          </View>
        </View>
      </View>
    )
  }

  // 提取姓名首字作为头像占位符 (即使personalInfo为null也渲染)
  const nameInitial = personalInfo?.name ? personalInfo.name.charAt(0) : '?'
  const displayName = personalInfo?.name || '未知用户'

  // 组合用户状态: "残疾类型 · 等级 · 就业状态"
  const userStatus = [
    personalInfo?.disabilityType,
    personalInfo?.disabilityLevel,
    personalInfo?.jobStatus !== undefined ? jobStatusMap[personalInfo.jobStatus] : undefined
  ].filter(Boolean).join(' · ') || '状态未知'

  return (
    <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5 mb-3">
      <View className="flex justify-between items-start">
        {/* 左侧: 头像和用户信息 */}
        <View className="flex items-center">
          {/* 用户头像 - 圆形,带白色边框,使用姓名首字 */}
          <View className="w-16 h-16 rounded-full border-2 border-white mr-4 bg-blue-600 flex items-center justify-center">
            <Text className="text-white text-xl font-bold">{nameInitial}</Text>
          </View>

          {/* 用户信息 */}
          <View>
            <Text className="text-xl font-bold text-white block mb-1">
              {displayName}
            </Text>
            <Text className="text-sm text-white opacity-80">
              {userStatus}
            </Text>
          </View>
        </View>

        {/* 右上角: 相机按钮 (暂不实现点击功能) */}
        <View className="bg-white/20 rounded-full p-2">
          <View className="i-heroicons-camera-20-solid w-5 h-5 text-white" />
        </View>
      </View>
    </View>
  )
}

export default UserInfoHeader
