import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Search, CheckCircle, XCircle } from 'lucide-react'
import { socialInsuranceApi } from '../../lib/api-services'
import { Input } from '../../components/ui/Input'
import { useDebouncedValue } from '../../hooks/useDebouncedValue'

const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })

export default function EmployeeEnrollmentTab() {
  const [keyword, setKeyword] = useState('')
  const debouncedSearch = useDebouncedValue(keyword, 300)

  const { data: list = [], isLoading } = useQuery<any[]>({
    queryKey: ['social-employee-enrollment', debouncedSearch],
    queryFn: () => socialInsuranceApi.employeeEnrollment(debouncedSearch || undefined),
  })

  const insuredCount = list.filter(e => e.socialInsStatus === 'INSURED').length
  const housingCount = list.filter(e => e.housingFundStatus === 'INSURED').length

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4 text-sm">
          <span className="text-gray-500">共 {list.length} 人</span>
          <span className="text-gray-500">社保参保 <span className="font-medium text-primary">{insuredCount}</span></span>
          <span className="text-gray-500">公积金参保 <span className="font-medium text-primary">{housingCount}</span></span>
        </div>
        <div className="relative w-48">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            placeholder="搜索员工姓名"
            className="pl-9"
          />
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b text-left text-xs text-gray-500">
              <th className="pb-2 pr-4 font-medium">姓名</th>
              <th className="pb-2 pr-4 font-medium">部门</th>
              <th className="pb-2 pr-4 font-medium">职务</th>
              <th className="pb-2 pr-4 font-medium">社保状态</th>
              <th className="pb-2 pr-4 font-medium">社保基数</th>
              <th className="pb-2 pr-4 font-medium">社保城市</th>
              <th className="pb-2 pr-4 font-medium">社保起缴</th>
              <th className="pb-2 pr-4 font-medium">公积金状态</th>
              <th className="pb-2 pr-4 font-medium">公积金基数</th>
              <th className="pb-2 pr-4 font-medium">公积金城市</th>
              <th className="pb-2 pr-4 font-medium">公积金起缴</th>
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr><td colSpan={11} className="py-8 text-center text-gray-400">加载中...</td></tr>
            ) : list.length === 0 ? (
              <tr><td colSpan={11} className="py-8 text-center text-gray-400">暂无员工参保信息</td></tr>
            ) : list.map((emp: any) => (
              <tr key={emp.id} className="border-b hover:bg-gray-50">
                <td className="py-2 pr-4 font-medium">{emp.name}</td>
                <td className="py-2 pr-4 text-gray-600">{emp.department || '-'}</td>
                <td className="py-2 pr-4 text-gray-600">{emp.position || '-'}</td>
                <td className="py-2 pr-4">
                  {emp.socialInsStatus === 'INSURED' ? (
                    <span className="inline-flex items-center gap-1 text-xs text-green-600">
                      <CheckCircle className="w-3.5 h-3.5" />已参保
                    </span>
                  ) : (
                    <span className="inline-flex items-center gap-1 text-xs text-gray-400">
                      <XCircle className="w-3.5 h-3.5" />未参保
                    </span>
                  )}
                </td>
                <td className="py-2 pr-4">{emp.socialInsBase ? `¥${fmt(emp.socialInsBase)}` : '-'}</td>
                <td className="py-2 pr-4 text-gray-600">{emp.socialInsCity || '-'}</td>
                <td className="py-2 pr-4 text-gray-500 text-xs">{emp.socialInsStart || '-'}</td>
                <td className="py-2 pr-4">
                  {emp.housingFundStatus === 'INSURED' ? (
                    <span className="inline-flex items-center gap-1 text-xs text-green-600">
                      <CheckCircle className="w-3.5 h-3.5" />已参保
                    </span>
                  ) : (
                    <span className="inline-flex items-center gap-1 text-xs text-gray-400">
                      <XCircle className="w-3.5 h-3.5" />未参保
                    </span>
                  )}
                </td>
                <td className="py-2 pr-4">{emp.housingFundBase ? `¥${fmt(emp.housingFundBase)}` : '-'}</td>
                <td className="py-2 pr-4 text-gray-600">{emp.housingFundCity || '-'}</td>
                <td className="py-2 pr-4 text-gray-500 text-xs">{emp.housingFundStart || '-'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
