/**
 * 员工特殊状态台账页面
 * 管理三期（孕期/产期/哺乳期）、工伤、医疗期等特殊状态的跟踪和提醒
 */
import { useEffect, useState } from 'react'
import { usePageSize } from '../hooks/usePageSize'
import { Link } from 'react-router-dom'
import { Search, Plus, Edit2, Trash2, AlertTriangle, Clock, Baby, HeartPulse, Activity, X, Eye } from 'lucide-react'
import { toast } from 'sonner'
import { specialStatusApi, employeeApi } from '../lib/api-services'
import { Input, Select, Label } from '../components/ui/Input'
import Button from '../components/ui/Button'
import PageGuide from '../components/ui/PageGuide'
import QueryError from '../components/ui/QueryError'

interface SpecialStatus {
  id: string
  type: string
  status: string
  startDate: string | null
  endDate: string | null
  actualEndDate: string | null
  expectedDueDate: string | null
  maternityLeaveStart: string | null
  maternityLeaveEnd: string | null
  nursingEndDate: string | null
  injuryDate: string | null
  injuryDescription: string | null
  certificationDate: string | null
  certificationNo: string | null
  disabilityLevel: number | null
  assessmentDate: string | null
  medicalMonths: number | null
  medicalPeriodEnd: string | null
  description: string | null
  attachments: any[] | null
  timeline: any[] | null
  reminderDate: string | null
  alertLevel: 'red' | 'yellow' | 'green'
  employee: {
    id: string; name: string; department: string; phone: string; gender: string; status: string; idCardNumber?: string | null
  }
}

interface Stats {
  total: number
  active: number
  pending: number
  redAlert: number
  yellowAlert: number
  byType: { type: string; label: string; count: number }[]
}

const TYPE_LABELS: Record<string, string> = {
  PREGNANCY: '三期',
  WORK_INJURY: '工伤',
  MEDICAL_PERIOD: '医疗期',
  OTHER: '其他',
}

const TYPE_ICONS: Record<string, typeof Baby> = {
  PREGNANCY: Baby,
  WORK_INJURY: Activity,
  MEDICAL_PERIOD: HeartPulse,
  OTHER: AlertTriangle,
}

const TYPE_COLORS: Record<string, string> = {
  PREGNANCY: 'bg-pink-50 text-pink-700 border-pink-200',
  WORK_INJURY: 'bg-red-50 text-red-700 border-red-200',
  MEDICAL_PERIOD: 'bg-orange-50 text-orange-700 border-orange-200',
  OTHER: 'bg-gray-50 text-gray-700 border-gray-200',
}

const STATUS_LABELS: Record<string, string> = {
  ACTIVE: '进行中',
  PENDING: '待处理',
  RESOLVED: '已结束',
}

const STATUS_COLORS: Record<string, string> = {
  ACTIVE: 'bg-emerald-50 text-emerald-700',
  PENDING: 'bg-amber-50 text-amber-700',
  RESOLVED: 'bg-gray-100 text-gray-500',
}

const ALERT_STYLES: Record<string, { border: string; badge: string; text: string; bg: string; dot: string }> = {
  red: { border: 'border-l-4 border-l-red-500', badge: 'bg-red-100 text-red-700', text: 'text-red-600', bg: 'bg-red-50', dot: 'bg-red-500' },
  yellow: { border: 'border-l-4 border-l-amber-500', badge: 'bg-amber-100 text-amber-700', text: 'text-amber-600', bg: 'bg-amber-50', dot: 'bg-amber-500' },
  green: { border: 'border-l-4 border-l-emerald-500', badge: 'bg-emerald-100 text-emerald-700', text: 'text-emerald-600', bg: 'bg-emerald-50', dot: 'bg-emerald-500' },
}

const TYPE_ICON_BG: Record<string, string> = {
  PREGNANCY: 'bg-pink-100 text-pink-600',
  WORK_INJURY: 'bg-red-100 text-red-600',
  MEDICAL_PERIOD: 'bg-orange-100 text-orange-600',
  OTHER: 'bg-gray-100 text-gray-600',
}

function formatDate(d: string | null): string {
  if (!d) return '-'
  return new Date(d).toLocaleDateString('zh-CN')
}

function daysUntil(d: string | null): number | null {
  if (!d) return null
  const diff = new Date(d).getTime() - Date.now()
  return Math.ceil(diff / (1000 * 60 * 60 * 24))
}

export default function SpecialStatus() {
  const [list, setList] = useState<SpecialStatus[]>([])
  const [total, setTotal] = useState(0)
  const pageSize = usePageSize()
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState('')
  const [typeFilter, setTypeFilter] = useState('')
  const [statusFilter, setStatusFilter] = useState('')
  const [loading, setLoading] = useState(true)
  const [fetchError, setFetchError] = useState<any>(null)
  const [stats, setStats] = useState<Stats | null>(null)
  const [editOpen, setEditOpen] = useState(false)
  const [editing, setEditing] = useState<SpecialStatus | null>(null)
  const [deleteTarget, setDeleteTarget] = useState<SpecialStatus | null>(null)
  const [employees, setEmployees] = useState<any[]>([])
  const [form, setForm] = useState<any>(getDefaultForm())

  function getDefaultForm() {
    return {
      employeeId: '',
      type: 'PREGNANCY',
      status: 'ACTIVE',
      startDate: '',
      endDate: '',
      actualEndDate: '',
      expectedDueDate: '',
      injuryDate: '',
      injuryDescription: '',
      certificationDate: '',
      certificationNo: '',
      disabilityLevel: '',
      assessmentDate: '',
      medicalMonths: '',
      description: '',
      reminderDate: '',
    }
  }

  const fetchList = async () => {
    setLoading(true)
    setFetchError(null)
    try {
      const params: any = { page, pageSize }
      if (search) params.search = search
      if (typeFilter) params.type = typeFilter
      if (statusFilter) params.status = statusFilter
      const res = await specialStatusApi.list({ page, pageSize, search: search || undefined, type: typeFilter || undefined, status: statusFilter || undefined } as any) as any
      setList(res.list)
      setTotal(res.total)
    } catch (err: any) {
      setFetchError(err)
    } finally {
      setLoading(false)
    }
  }

  const fetchStats = async () => {
    try {
      const res = await specialStatusApi.stats() as any
      setStats(res)
    } catch {
      // 忽略
    }
  }

  const fetchEmployees = async () => {
    try {
      const res = await employeeApi.allLite() as any
      setEmployees(res || [])
    } catch {
      // 忽略
    }
  }

  useEffect(() => { fetchList(); fetchStats() }, [page, typeFilter, statusFilter])
  useEffect(() => { setPage(1) }, [search, typeFilter, statusFilter])

  const handleOpenCreate = () => {
    setEditing(null)
    setForm(getDefaultForm())
    setEditOpen(true)
    fetchEmployees()
  }

  const handleOpenEdit = (item: SpecialStatus) => {
    setEditing(item)
    setForm({
      employeeId: item.employee.id,
      type: item.type,
      status: item.status,
      startDate: item.startDate ? item.startDate.split('T')[0] : '',
      endDate: item.endDate ? item.endDate.split('T')[0] : '',
      actualEndDate: item.actualEndDate ? item.actualEndDate.split('T')[0] : '',
      expectedDueDate: item.expectedDueDate ? item.expectedDueDate.split('T')[0] : '',
      injuryDate: item.injuryDate ? item.injuryDate.split('T')[0] : '',
      injuryDescription: item.injuryDescription || '',
      certificationDate: item.certificationDate ? item.certificationDate.split('T')[0] : '',
      certificationNo: item.certificationNo || '',
      disabilityLevel: item.disabilityLevel || '',
      assessmentDate: item.assessmentDate ? item.assessmentDate.split('T')[0] : '',
      medicalMonths: item.medicalMonths || '',
      description: item.description || '',
      reminderDate: item.reminderDate ? item.reminderDate.split('T')[0] : '',
    })
    setEditOpen(true)
    fetchEmployees()
  }

  const handleSave = async () => {
    if (!form.employeeId) { toast.error('请选择员工'); return }
    try {
      const data: any = { ...form }
      // 空字符串转 null
      Object.keys(data).forEach((k) => {
        if (data[k] === '') data[k] = null
      })
      if (data.disabilityLevel) data.disabilityLevel = parseInt(data.disabilityLevel)
      if (data.medicalMonths) data.medicalMonths = parseInt(data.medicalMonths)

      if (editing) {
        await specialStatusApi.update(editing.id, data)
      } else {
        await specialStatusApi.create(data)
      }
      setEditOpen(false)
      fetchList()
      fetchStats()
    } catch (err: any) {
      toast.error(err.response?.data?.error?.message || '保存失败')
    }
  }

  const handleDelete = async () => {
    if (!deleteTarget) return
    try {
      await specialStatusApi.remove(deleteTarget.id)
      setDeleteTarget(null)
      fetchList()
      fetchStats()
    } catch (err: any) {
      toast.error(err.response?.data?.error?.message || '删除失败')
    }
  }

  const totalPages = Math.ceil(total / pageSize)

  return (
    <div className="space-y-6">
      <PageGuide>
        特殊状态台账用于跟踪三期（孕期/产期/哺乳期）、工伤、医疗期等特殊员工状态。系统自动计算状态剩余天数并发送到期提醒。可按类型、状态筛选查看，及时关注即将到期的特殊员工。
      </PageGuide>
      {/* 标题 */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">特殊状态台账</h1>
        <p className="text-sm text-gray-500 mt-1">三期/工伤/医疗期等特殊员工状态跟踪与提醒</p>
      </div>

      {/* 统计卡片 */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          <div className="bg-white border border-gray-200 rounded-xl p-3.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
              <AlertTriangle className="w-4 h-4 text-gray-500" />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-gray-500">总记录</div>
              <div className="text-xl font-bold text-gray-900 leading-tight">{stats.total}</div>
            </div>
          </div>
          <div className="bg-white border border-gray-200 rounded-xl p-3.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
              <Activity className="w-4 h-4 text-emerald-600" />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-gray-500">进行中</div>
              <div className="text-xl font-bold text-emerald-600 leading-tight">{stats.active}</div>
            </div>
          </div>
          <div className="bg-white border border-gray-200 rounded-xl p-3.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
              <Clock className="w-4 h-4 text-amber-600" />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-gray-500">待处理</div>
              <div className="text-xl font-bold text-amber-600 leading-tight">{stats.pending}</div>
            </div>
          </div>
          <div className="bg-white border border-red-200 rounded-xl p-3.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
              <AlertTriangle className="w-4 h-4 text-red-600" />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-gray-500">紧急提醒</div>
              <div className="text-xl font-bold text-red-600 leading-tight">{stats.redAlert}</div>
            </div>
          </div>
          <div className="bg-white border border-amber-200 rounded-xl p-3.5 flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
              <Clock className="w-4 h-4 text-amber-500" />
            </div>
            <div className="min-w-0">
              <div className="text-xs text-gray-500">即将到期</div>
              <div className="text-xl font-bold text-amber-600 leading-tight">{stats.yellowAlert}</div>
            </div>
          </div>
          <div className="bg-white border border-gray-200 rounded-xl p-3.5">
            <div className="text-xs text-gray-500 mb-1.5">类型分布</div>
            <div className="flex flex-wrap gap-1.5">
              {stats.byType.map((t) => (
                <span key={t.type} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-gray-50 text-gray-600">
                  {t.label}<b className="text-gray-900">{t.count}</b>
                </span>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 筛选栏 */}
      <div className="flex gap-2 items-center overflow-hidden">
        <div className="relative flex-1 min-w-0">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            placeholder="搜索员工姓名、手机号..."
            className="pl-10"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && fetchList()}
          />
        </div>
        <Select className="!w-28 shrink-0" value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)}>
          <option value="">全部类型</option>
          <option value="PREGNANCY">三期</option>
          <option value="WORK_INJURY">工伤</option>
          <option value="MEDICAL_PERIOD">医疗期</option>
          <option value="OTHER">其他</option>
        </Select>
        <Select className="!w-28 shrink-0" value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
          <option value="">全部状态</option>
          <option value="ACTIVE">进行中</option>
          <option value="PENDING">待处理</option>
          <option value="RESOLVED">已结束</option>
        </Select>
        <Button variant="secondary" onClick={fetchList}>搜索</Button>
        <Button onClick={handleOpenCreate}><Plus className="w-4 h-4 mr-1" />新增</Button>
      </div>

      {/* 列表 */}
      {loading ? (
        <div className="text-center py-12 text-gray-400">加载中...</div>
      ) : fetchError ? (
        <QueryError error={fetchError} onRetry={fetchList} />
      ) : list.length === 0 ? (
        <div className="text-center py-12 text-gray-400">
          <AlertTriangle className="w-12 h-12 mx-auto mb-3 text-gray-300" />
          暂无特殊状态记录
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {list.map((item) => {
              const Icon = TYPE_ICONS[item.type] || AlertTriangle
              const alert = ALERT_STYLES[item.alertLevel] || ALERT_STYLES.green
              const reminderDays = daysUntil(item.reminderDate)
              const isOverdue = reminderDays !== null && reminderDays < 0
              return (
                <div key={item.id} className={`bg-white border ${alert.border} border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow group`}>
                  {/* 头部：类型图标 + 状态 + 操作 */}
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-2.5">
                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${TYPE_ICON_BG[item.type] || TYPE_ICON_BG.OTHER}`}>
                        <Icon className="w-4 h-4" />
                      </div>
                      <div className="flex flex-col gap-1">
                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border w-fit ${TYPE_COLORS[item.type] || TYPE_COLORS.OTHER}`}>
                          {TYPE_LABELS[item.type] || item.type}
                        </span>
                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium w-fit ${STATUS_COLORS[item.status] || STATUS_COLORS.RESOLVED}`}>
                          {STATUS_LABELS[item.status] || item.status}
                        </span>
                      </div>
                    </div>
                    <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                      <Link to={`/roster?employeeId=${item.employee.id}`} className="p-1.5 rounded-md text-gray-400 hover:text-primary hover:bg-gray-100" title="查看员工详情">
                        <Eye className="w-3.5 h-3.5" />
                      </Link>
                      <button onClick={() => handleOpenEdit(item)} className="p-1.5 rounded-md text-gray-400 hover:text-primary hover:bg-gray-100" title="编辑">
                        <Edit2 className="w-3.5 h-3.5" />
                      </button>
                      <button onClick={() => setDeleteTarget(item)} className="p-1.5 rounded-md text-gray-400 hover:text-red-500 hover:bg-gray-100" title="删除">
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>

                  {/* 员工信息 */}
                  <div className="mb-3 pb-3 border-b border-gray-100">
                    <div className="flex items-center gap-2">
                      <Link to={`/roster?employeeId=${item.employee.id}`} className="font-medium text-gray-900 hover:text-primary hover:underline">{item.employee.name}</Link>
                      {item.employee.idCardNumber && <span className="text-xs text-gray-400 font-mono">{item.employee.idCardNumber}</span>}
                      {item.employee.status === 'RESIGNED' && (
                        <span className="text-xs text-gray-400 px-1.5 py-0.5 rounded bg-gray-100">已离职</span>
                      )}
                    </div>
                    <div className="text-xs text-gray-500 mt-0.5">{item.employee.department}</div>
                  </div>

                  {/* 关键日期 */}
                  <div className="space-y-2">
                    {item.type === 'PREGNANCY' && (
                      <div className="grid grid-cols-2 gap-x-3 gap-y-2">
                        {item.expectedDueDate && <Field label="预产期" value={formatDate(item.expectedDueDate)} accent="pink" />}
                        {item.maternityLeaveStart && <Field label="产假开始" value={formatDate(item.maternityLeaveStart)} />}
                        {item.maternityLeaveEnd && <Field label="产假结束" value={formatDate(item.maternityLeaveEnd)} />}
                        {item.nursingEndDate && <Field label="哺乳期截止" value={formatDate(item.nursingEndDate)} />}
                      </div>
                    )}
                    {item.type === 'WORK_INJURY' && (
                      <div className="space-y-2">
                        {item.injuryDate && <Field label="受伤日期" value={formatDate(item.injuryDate)} accent="red" />}
                        {item.injuryDescription && <Field label="伤情描述" value={item.injuryDescription} fullWidth />}
                        {item.certificationDate ? (
                          <Field label="认定日期" value={formatDate(item.certificationDate)} />
                        ) : (
                          <Field label="认定日期" value="待认定" valueClass="text-amber-600" />
                        )}
                        <div className="grid grid-cols-2 gap-x-3 gap-y-2">
                          {item.assessmentDate && <Field label="鉴定日期" value={formatDate(item.assessmentDate)} />}
                          {item.disabilityLevel && <Field label="伤残等级" value={`${item.disabilityLevel}级`} />}
                        </div>
                      </div>
                    )}
                    {item.type === 'MEDICAL_PERIOD' && (
                      <div className="grid grid-cols-2 gap-x-3 gap-y-2">
                        {item.startDate && <Field label="开始日期" value={formatDate(item.startDate)} accent="orange" />}
                        {item.medicalMonths && <Field label="医疗期" value={`${item.medicalMonths}个月`} />}
                        {item.medicalPeriodEnd && <Field label="截止日期" value={formatDate(item.medicalPeriodEnd)} />}
                      </div>
                    )}
                    {item.type === 'OTHER' && (
                      <div className="grid grid-cols-2 gap-x-3 gap-y-2">
                        {item.startDate && <Field label="开始日期" value={formatDate(item.startDate)} />}
                        {item.endDate && <Field label="预计结束" value={formatDate(item.endDate)} />}
                      </div>
                    )}
                  </div>

                  {/* 提醒 */}
                  {item.status === 'ACTIVE' && reminderDays !== null && (
                    <div className={`mt-3 pt-3 border-t border-gray-100 flex items-center gap-2 text-xs ${alert.text}`}>
                      <div className={`w-2 h-2 rounded-full ${alert.dot} ${isOverdue ? 'animate-pulse' : ''}`} />
                      {isOverdue ? `已过期 ${Math.abs(reminderDays)} 天` : reminderDays === 0 ? '今天到期' : `距提醒日还有 ${reminderDays} 天`}
                    </div>
                  )}
                  {item.description && (
                    <div className="mt-2 text-xs text-gray-400 line-clamp-2">{item.description}</div>
                  )}
                </div>
              )
            })}
          </div>

          {/* 分页 */}
          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-2 pt-4">
              <Button variant="secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>上一页</Button>
              <span className="text-sm text-gray-500">{page} / {totalPages}</span>
              <Button variant="secondary" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>下一页</Button>
            </div>
          )}
        </>
      )}

      {/* 新增/编辑弹窗 */}
      {editOpen && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setEditOpen(false)}>
          <div className="bg-white border border-gray-200 rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900">{editing ? '编辑特殊状态' : '新增特殊状态'}</h2>
              <button onClick={() => setEditOpen(false)} className="text-gray-400 hover:text-gray-600"><X className="w-5 h-5" /></button>
            </div>

            <div className="space-y-3">
              {/* 员工选择 */}
              <div>
                <Label>员工</Label>
                <Select value={form.employeeId} onChange={(e) => {
                  const emp = employees.find(em => em.id === e.target.value)
                  // 选择员工后，若当前类型为三期但员工为男性，自动切换为其他类型
                  const newType = emp?.gender === '男' && form.type === 'PREGNANCY' ? 'WORK_INJURY' : form.type
                  setForm({ ...form, employeeId: e.target.value, type: newType })
                }} disabled={!!editing}>
                  <option value="">请选择员工</option>
                  {employees.map((emp) => (
                    <option key={emp.id} value={emp.id}>{emp.name}{emp.idCardNumber ? `（${emp.idCardNumber}）` : ''} - {emp.department}</option>
                  ))}
                </Select>
              </div>

              {/* 类型 + 状态 */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>类型</Label>
                  <Select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
                    {/* 三期仅适用于女性员工，男职工不显示该选项 */}
                    {(() => {
                      const selectedEmp = employees.find(em => em.id === form.employeeId)
                      const isMale = selectedEmp?.gender === '男'
                      return isMale ? null : <option value="PREGNANCY">三期</option>
                    })()}
                    <option value="WORK_INJURY">工伤</option>
                    <option value="MEDICAL_PERIOD">医疗期</option>
                    <option value="OTHER">其他</option>
                  </Select>
                  {(() => {
                    const selectedEmp = employees.find(em => em.id === form.employeeId)
                    if (selectedEmp?.gender === '男') {
                      return <p className="text-xs text-gray-400 mt-1">三期仅适用于女性员工</p>
                    }
                    return null
                  })()}
                </div>
                <div>
                  <Label>状态</Label>
                  <Select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                    <option value="ACTIVE">进行中</option>
                    <option value="PENDING">待处理</option>
                    <option value="RESOLVED">已结束</option>
                  </Select>
                </div>
              </div>

              {/* 三期专用字段 */}
              {form.type === 'PREGNANCY' && (
                <div className="border-t border-gray-100 pt-3 space-y-3">
                  <h3 className="text-xs text-primary font-medium">三期信息</h3>
                  <div>
                    <Label>预产期</Label>
                    <Input type="date" value={form.expectedDueDate} onChange={(e) => setForm({ ...form, expectedDueDate: e.target.value })} />
                    <p className="text-xs text-gray-400 mt-1">填写预产期后，系统将自动计算产假起止和哺乳期截止日期</p>
                  </div>
                </div>
              )}

              {/* 工伤专用字段 */}
              {form.type === 'WORK_INJURY' && (
                <div className="border-t border-gray-100 pt-3 space-y-3">
                  <h3 className="text-xs text-primary font-medium">工伤信息</h3>
                  <div>
                    <Label>受伤日期</Label>
                    <Input type="date" value={form.injuryDate} onChange={(e) => setForm({ ...form, injuryDate: e.target.value })} />
                  </div>
                  <div>
                    <Label>伤情描述</Label>
                    <Input value={form.injuryDescription} onChange={(e) => setForm({ ...form, injuryDescription: e.target.value })} placeholder="简要描述伤情" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label>认定日期</Label>
                      <Input type="date" value={form.certificationDate} onChange={(e) => setForm({ ...form, certificationDate: e.target.value })} />
                    </div>
                    <div>
                      <Label>认定书编号</Label>
                      <Input value={form.certificationNo} onChange={(e) => setForm({ ...form, certificationNo: e.target.value })} />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label>伤残等级（1-10）</Label>
                      <Input type="number" min={1} max={10} value={form.disabilityLevel} onChange={(e) => setForm({ ...form, disabilityLevel: e.target.value })} placeholder="未鉴定则留空" />
                    </div>
                    <div>
                      <Label>鉴定日期</Label>
                      <Input type="date" value={form.assessmentDate} onChange={(e) => setForm({ ...form, assessmentDate: e.target.value })} />
                    </div>
                  </div>
                </div>
              )}

              {/* 医疗期专用字段 */}
              {form.type === 'MEDICAL_PERIOD' && (
                <div className="border-t border-gray-100 pt-3 space-y-3">
                  <h3 className="text-xs text-primary font-medium">医疗期信息</h3>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label>开始日期</Label>
                      <Input type="date" value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} />
                    </div>
                    <div>
                      <Label>医疗期月数</Label>
                      <Input type="number" value={form.medicalMonths} onChange={(e) => setForm({ ...form, medicalMonths: e.target.value })} placeholder="如3/6/9/12/24" />
                    </div>
                  </div>
                  <p className="text-xs text-gray-400">填写开始日期和月数后，系统将自动计算截止日期</p>
                </div>
              )}

              {/* 其他类型 */}
              {form.type === 'OTHER' && (
                <div className="border-t border-gray-100 pt-3 space-y-3">
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <Label>开始日期</Label>
                      <Input type="date" value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} />
                    </div>
                    <div>
                      <Label>预计结束日期</Label>
                      <Input type="date" value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} />
                    </div>
                  </div>
                </div>
              )}

              {/* 通用字段 */}
              <div className="border-t border-gray-100 pt-3 space-y-3">
                {form.status === 'RESOLVED' && (
                  <div>
                    <Label>实际结束日期</Label>
                    <Input type="date" value={form.actualEndDate} onChange={(e) => setForm({ ...form, actualEndDate: e.target.value })} />
                  </div>
                )}
                <div>
                  <Label>提醒日期</Label>
                  <Input type="date" value={form.reminderDate} onChange={(e) => setForm({ ...form, reminderDate: e.target.value })} />
                  <p className="text-xs text-gray-400 mt-1">系统将在此日期前7天和30天分别发出提醒</p>
                </div>
                <div>
                  <Label>备注</Label>
                  <Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="补充说明" />
                </div>
              </div>

              {/* 操作按钮 */}
              <div className="flex gap-2 pt-3">
                <Button className="flex-1" onClick={handleSave}>保存</Button>
                <Button variant="secondary" onClick={() => setEditOpen(false)}>取消</Button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 删除确认 */}
      {deleteTarget && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setDeleteTarget(null)}>
          <div className="bg-white border border-gray-200 rounded-lg p-6 w-full max-w-sm" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
                <Trash2 className="w-5 h-5 text-red-500" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">确认删除</h3>
                <p className="text-sm text-gray-500">删除后无法恢复</p>
              </div>
            </div>
            <p className="text-sm text-gray-600 mb-4">
              确定要删除 <b>{deleteTarget.employee.name}{deleteTarget.employee.idCardNumber ? `（${deleteTarget.employee.idCardNumber}）` : ''}</b> 的 <b>{TYPE_LABELS[deleteTarget.type]}</b> 记录吗？
            </p>
            <div className="flex gap-2">
              <Button className="flex-1 bg-red-500 hover:bg-red-600" onClick={handleDelete}>删除</Button>
              <Button variant="secondary" onClick={() => setDeleteTarget(null)}>取消</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

/** 信息字段组件 */
function Field({ label, value, valueClass, accent, fullWidth }: { label: string; value: string; valueClass?: string; accent?: 'pink' | 'red' | 'orange'; fullWidth?: boolean }) {
  const accentColor = accent === 'pink' ? 'text-pink-600' : accent === 'red' ? 'text-red-600' : accent === 'orange' ? 'text-orange-600' : 'text-gray-400'
  return (
    <div className={fullWidth ? 'col-span-2' : ''}>
      <div className="text-[11px] text-gray-400 mb-0.5">{label}</div>
      <div className={`text-xs font-medium ${valueClass || 'text-gray-900'}`}>{value}</div>
    </div>
  )
}
