import React, { useEffect, useState } from 'react'
import { View, Text, Input, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
import { PageContainer } from '@d8d/mini-shared-ui-components/components/page-container'
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
import { enterpriseDisabilityClient } from '../../api'
import { useAuth, useRequireAuth } from '@d8d/mini-enterprise-auth-ui/hooks'
import { WorkStatus } from '@d8d/allin-enums/enums/work-status.enum'

export interface TalentManagementProps {
  // 组件属性定义（目前为空）
}

// 企业专用人才列表项类型 - 匹配CompanyPersonListItemSchema
interface CompanyPersonListItem {
  personId: number
  name: string
  gender: string
  idCard: string
  disabilityType: string
  disabilityLevel: string
  phone: string | null
  birthDate: string | null
  salaryDetail: number | null
  jobStatus: string
  workStatus?: WorkStatus  // 新增：工作状态枚举值
  workStatusLabel?: string // 新增：工作状态中文标签
  latestJoinDate: string | null
  orderName: string | null
}

// 中文状态到WorkStatus枚举的映射
const CHINESE_STATUS_TO_ENUM: Record<string, WorkStatus> = {
  '在职': WorkStatus.WORKING,
  '待入职': WorkStatus.PRE_WORKING,
  '离职': WorkStatus.RESIGNED,
  '未就业': WorkStatus.NOT_WORKING
}

// WorkStatus枚举到中文状态的映射
const ENUM_TO_CHINESE_STATUS: Record<WorkStatus, string> = {
  [WorkStatus.WORKING]: '在职',
  [WorkStatus.PRE_WORKING]: '待入职',
  [WorkStatus.RESIGNED]: '离职',
  [WorkStatus.NOT_WORKING]: '未就业'
}


const TalentManagement: React.FC<TalentManagementProps> = () => {
  const { user: _user } = useAuth()
  const { isLoggedIn } = useRequireAuth()
  const queryClient = useQueryClient()

  // 搜索和筛选状态
  const [searchText, setSearchText] = useState('')
  const [activeStatus, setActiveStatus] = useState<'全部' | '在职' | '待入职' | '离职'>('全部')
  const [activeDisabilityType, setActiveDisabilityType] = useState<string>('')
  const [page, setPage] = useState(1)
  const limit = 20

  // 搜索参数防抖
  const [debouncedSearchText, setDebouncedSearchText] = useState('')
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearchText(searchText)
      setPage(1) // 搜索时重置到第一页
    }, 500)
    return () => clearTimeout(timer)
  }, [searchText])

  // 构建查询参数（企业专用API使用camelCase参数名）
  const queryParams = {
    search: debouncedSearchText || undefined,
    jobStatus: activeStatus !== '全部' ? CHINESE_STATUS_TO_ENUM[activeStatus] : undefined,
    disabilityType: activeDisabilityType || undefined,
    page,
    limit
  }

  // 获取人才列表数据（使用企业专用API）
  const { data: talentList, isLoading, error, refetch } = useQuery({
    queryKey: ['talentList', queryParams],
    queryFn: async () => {
      const response = await enterpriseDisabilityClient.index.$get({
        query: queryParams
      })
      if (response.status !== 200) {
        throw new Error('获取人才列表失败')
      }
      const result = await response.json()
      // API返回结构：{ data: [...], pagination: { total, page, limit, totalPages } }
      const data = result?.data || []
      const pagination = result?.pagination || { total: 0, page: 1, limit: 20, totalPages: 0 }
      // 转换为扁平结构以便使用
      return {
        data,
        total: pagination.total,
        page: pagination.page,
        limit: pagination.limit,
        totalPages: pagination.totalPages
      }
    },
    enabled: isLoggedIn, // 只有登录后才获取数据
    refetchOnWindowFocus: false
  })

  // 下拉刷新
  const [refreshing, setRefreshing] = useState(false)
  const onRefresh = async () => {
    setRefreshing(true)
    try {
      await queryClient.invalidateQueries({ queryKey: ['talentList'] })
      await refetch()
    } finally {
      setTimeout(() => setRefreshing(false), 1000)
    }
  }

  // 页面加载时设置标题
  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: '人才管理'
    })
  }, [])

  // 状态标签列表
  const statusTags: Array<'全部' | '在职' | '待入职' | '离职'> = ['全部', '在职', '待入职', '离职']
  const disabilityTypeTags = ['肢体残疾', '听力残疾', '视力残疾', '言语残疾', '智力残疾', '精神残疾']

  // 处理状态筛选点击
  const handleStatusClick = (status: '全部' | '在职' | '待入职' | '离职') => {
    setActiveStatus(status)
    setPage(1)
  }

  // 处理残疾类型筛选点击
  const handleDisabilityTypeClick = (type: string) => {
    setActiveDisabilityType(activeDisabilityType === type ? '' : type)
    setPage(1)
  }

  // 处理搜索输入
  const handleSearchChange = (e: any) => {
    setSearchText(e.detail.value)
  }

  // 分页处理
  const handlePrevPage = () => {
    if (page > 1) {
      setPage(page - 1)
    }
  }

  const handleNextPage = () => {
    if (talentList && page < Math.ceil(talentList.total / limit)) {
      setPage(page + 1)
    }
  }

  // 处理人才卡片点击跳转
  const handleTalentClick = (talentId: number) => {
    Taro.navigateTo({
      url: `/pages/yongren/talent/detail/index?id=${talentId}`
    })
  }

  // 获取头像颜色
  const getAvatarColor = (id: number) => {
    const colors = ['blue', 'green', 'purple', 'orange', 'red', 'teal']
    const index = id % colors.length
    return colors[index]
  }

  // 计算年龄基于出生日期
  const calculateAge = (birthDate: string | null): string => {
    if (!birthDate) return '未知岁'
    try {
      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}岁`
    } catch (error) {
      return '未知岁'
    }
  }

  // 格式化薪资显示
  const formatSalary = (salaryDetail: number | null): string => {
    if (!salaryDetail || salaryDetail <= 0) return '待定'
    return `¥${salaryDetail.toLocaleString()}`
  }

  return (
    <YongrenTabBarLayout activeKey="talent">
      <PageContainer padding={false} className="pb-0">
        <ScrollView
          className="h-[calc(100vh-120px)] overflow-y-auto px-4 pb-4 pt-0"
          scrollY
          refresherEnabled
          refresherTriggered={refreshing}
          onRefresherRefresh={onRefresh}
        >
          {/* 导航栏 */}
          <Navbar
            title="人才管理"
            leftIcon=""
            leftText=""
            onClickLeft={() => {}}
            backgroundColor="bg-white"
            border={true}
            fixed={true}
            placeholder={true}
          />
          {/* 搜索和筛选区域 - 对照原型第434-447行 */}
          <View className="p-4 border-b border-gray-200">
            <View className="flex items-center bg-gray-100 rounded-lg px-4 py-2 mb-3">
              <Text className="i-heroicons-magnifying-glass-20-solid text-gray-400 mr-2" />
              <Input
                type="text"
                placeholder="搜索姓名、残疾证号..."
                className="w-full bg-transparent outline-none text-sm"
                value={searchText}
                onInput={handleSearchChange}
              />
            </View>
            <ScrollView className="flex space-x-2 pb-2" scrollX>
              {statusTags.map((status) => (
                <View
                  key={status}
                  className={`text-xs px-3 py-1 rounded-full whitespace-nowrap ${
                    activeStatus === status
                      ? 'bg-blue-100 text-blue-800'
                      : 'bg-gray-100 text-gray-800'
                  }`}
                  onClick={() => handleStatusClick(status)}
                >
                  {status}
                </View>
              ))}
            </ScrollView>
            <ScrollView className="flex space-x-2 mt-2" scrollX>
              {disabilityTypeTags.map((type) => (
                <View
                  key={type}
                  className={`text-xs px-3 py-1 rounded-full whitespace-nowrap ${
                    activeDisabilityType === type
                      ? 'bg-blue-100 text-blue-800'
                      : 'bg-gray-100 text-gray-800'
                  }`}
                  onClick={() => handleDisabilityTypeClick(type)}
                >
                  {type}
                </View>
              ))}
            </ScrollView>
          </View>

          {/* 人才列表区域 - 对照原型第451-560行 */}
          <View className="p-4">
            <View className="flex justify-between items-center mb-4">
              <Text className="font-semibold text-gray-700">
                全部人才 ({talentList?.total || 0})
              </Text>
              <View className="flex space-x-2">
                <View className="text-gray-500">
                  <Text className="i-heroicons-funnel-20-solid" />
                </View>
                <View className="text-gray-500">
                  <Text className="i-heroicons-arrows-up-down-20-solid" />
                </View>
              </View>
            </View>

            {isLoading ? (
              // 加载状态
              <View className="space-y-3">
                {[1, 2, 3].map((i) => (
                  <View key={i} className="bg-white p-4 rounded-lg animate-pulse flex items-center">
                    <View className="w-10 h-10 bg-gray-200 rounded-full" />
                    <View className="flex-1 ml-3">
                      <View className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
                      <View className="h-3 bg-gray-200 rounded w-1/2" />
                      <View className="flex justify-between mt-2">
                        <View className="h-3 bg-gray-200 rounded w-1/4" />
                        <View className="h-3 bg-gray-200 rounded w-1/4" />
                      </View>
                    </View>
                  </View>
                ))}
              </View>
            ) : error ? (
              // 错误状态
              <View className="bg-white p-4 rounded-lg text-center">
                <Text className="text-red-500 text-sm">加载失败: {(error as Error).message}</Text>
                <View
                  className="mt-2 bg-blue-500 text-white text-xs px-3 py-1 rounded-full inline-block"
                  onClick={() => refetch()}
                >
                  重试
                </View>
              </View>
            ) : talentList && talentList.data.length > 0 ? (
              // 人才列表
              <View className="space-y-3">
                {talentList.data.map((talent) => (
                  <View
                    key={talent.personId}
                    className="card bg-white p-4 flex items-center cursor-pointer active:bg-gray-50"
                    onClick={() => handleTalentClick(talent.personId)}
                  >
                    <View className={`name-avatar ${getAvatarColor(talent.personId)} w-10 h-10 rounded-full flex items-center justify-center`}>
                      <Text className="text-white font-semibold">
                        {talent.name.charAt(0)}
                      </Text>
                    </View>
                    <View className="flex-1 ml-3">
                      <View className="flex justify-between items-start">
                        <View>
                          <Text className="font-semibold text-gray-800">{talent.name}</Text>
                          <Text className="text-xs text-gray-500">
                            {talent.disabilityType || '未指定'} · {talent.disabilityLevel || '未分级'} · {talent.gender} · {calculateAge(talent.birthDate)}
                          </Text>
                        </View>
                        <Text className={`text-xs px-2 py-1 rounded-full ${
                          talent.jobStatus === '在职'
                            ? 'bg-green-100 text-green-800'
                            : talent.jobStatus === '待入职'
                            ? 'bg-yellow-100 text-yellow-800'
                            : 'bg-gray-100 text-gray-800'
                        }`}>
                          {talent.jobStatus}
                        </Text>
                      </View>
                      <View className="mt-2 flex justify-between text-xs text-gray-500">
                        <Text>入职: {talent.latestJoinDate ? new Date(talent.latestJoinDate).toLocaleDateString() : '未入职'}</Text>
                        <Text>薪资: {formatSalary(talent.salaryDetail)}</Text>
                      </View>
                    </View>
                  </View>
                ))}

                {/* 分页控件 */}
                {talentList.total > limit && (
                  <View className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200">
                    <View
                      className={`text-xs px-3 py-1 rounded ${page === 1 ? 'text-gray-400' : 'text-blue-600'}`}
                      onClick={handlePrevPage}
                    >
                      上一页
                    </View>
                    <Text className="text-xs text-gray-600">
                      第 {page} 页 / 共 {Math.ceil(talentList.total / limit)} 页
                    </Text>
                    <View
                      className={`text-xs px-3 py-1 rounded ${
                        talentList && page >= Math.ceil(talentList.total / limit)
                          ? 'text-gray-400'
                          : 'text-blue-600'
                      }`}
                      onClick={handleNextPage}
                    >
                      下一页
                    </View>
                  </View>
                )}
              </View>
            ) : (
              // 空状态
              <View className="bg-white p-4 rounded-lg text-center">
                <Text className="text-gray-500 text-sm">暂无人才数据</Text>
                {debouncedSearchText && (
                  <Text className="text-gray-400 text-xs mt-1">
                    尝试调整搜索条件
                  </Text>
                )}
              </View>
            )}
          </View>
        </ScrollView>
      </PageContainer>
    </YongrenTabBarLayout>
  )
}

export default TalentManagement