import React from 'react'
import { View, Text } from '@tarojs/components'
import { maskIdCard } from '../utils/maskUtils'

/**
 * 个人基本信息响应类型（从RPC推断）
 */
export interface PersonalInfoResponse {
  name: string
  gender: string
  idCard: string
  disabilityId: string
  disabilityType: string
  disabilityLevel: string
  phone: string
  province: string
  city: string
  district: string | null
  detailedAddress: string | null
  birthDate: string | null
  idAddress: string
  idValidDate: string | null
  disabilityValidDate: string | null
  canDirectContact: number
  isMarried: number | null
  nation: string | null
  jobStatus: number
  specificDisability: string | null
}

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

/**
 * 个人基本信息卡片组件
 * 显示：姓名、性别、年龄、身份证号、残疾证号、残疾类型、联系电话、联系地址
 */
const PersonalBasicInfo: React.FC<PersonalBasicInfoProps> = ({ personalInfo, loading }) => {
  if (loading) {
    return (
      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
        <View className="h-5 bg-gray-200 rounded w-24 mb-4 animate-pulse" />
        <View className="space-y-3">
          {[1, 2, 3, 4, 5].map((i) => (
            <View key={i} className="h-4 bg-gray-200 rounded animate-pulse" />
          ))}
        </View>
      </View>
    )
  }

  if (!personalInfo) {
    return (
      <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
        <Text className="text-gray-500 text-sm">暂无个人信息</Text>
      </View>
    )
  }

  // 计算年龄
  const calculateAge = (birthDate: string | null): number => {
    if (!birthDate) return 0
    const birth = new Date(birthDate)
    const today = new Date()
    let age = today.getFullYear() - birth.getFullYear()
    const monthDiff = today.getMonth() - birth.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }
    return age
  }

  // 组合完整地址
  const fullAddress = [
    personalInfo.province,
    personalInfo.city,
    personalInfo.district,
    personalInfo.detailedAddress
  ].filter(Boolean).join('')

  const age = calculateAge(personalInfo.birthDate)

  return (
    <View className="bg-white rounded-lg p-4 mb-3 flex flex-col">
      <Text className="text-base font-semibold text-gray-800 mb-4">个人基本信息</Text>

      {/* 垂直布局的信息列表 */}
      <View className="flex flex-col space-y-3">
        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">姓名</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">{personalInfo.name || '--'}</Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">性别</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">{personalInfo.gender || '--'}</Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">年龄</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">{age > 0 ? `${age}岁` : '--'}</Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">身份证号</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">
            {maskIdCard(personalInfo.idCard)}
          </Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">残疾证号</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">
            {maskIdCard(personalInfo.disabilityId)}
          </Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">残疾类型</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">
            {personalInfo.disabilityType || '--'}
          </Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">残疾等级</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">
            {personalInfo.disabilityLevel || '--'}
          </Text>
        </View>

        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-500 w-24">联系电话</Text>
          <Text className="text-sm text-gray-800 flex-1 text-right">{personalInfo.phone || '--'}</Text>
        </View>

        <View className="flex flex-col">
          <Text className="text-sm text-gray-500 mb-1">联系地址</Text>
          <Text className="text-sm text-gray-800 text-right">{fullAddress || '--'}</Text>
        </View>
      </View>
    </View>
  )
}

export default PersonalBasicInfo
