import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Users, FileText, AlertTriangle, Calendar, GraduationCap, TrendingUp, Scale, X, Plus, Paperclip, Trash2, Printer, Calculator, Shield, Info, Check } from 'lucide-react'
import api from '../lib/api'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
import { Input, Label, Select } from '../components/ui/Input'
import Modal from '../components/ui/Modal'
import Signal from '../components/ui/Signal'

type DetailTab = 'basic' | 'contract' | 'payslip' | 'overtime' | 'disciplinary' | 'attendance' | 'training' | 'performance' | 'termination' | 'attachment' | 'evidence'

export default function Roster() {
  const queryClient = useQueryClient()
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [search, setSearch] = useState('')
  const [showAddModal, setShowAddModal] = useState(false)

  const { data: employees, isLoading } = useQuery<any[]>({
    queryKey: ['roster'],
    queryFn: async () => {
      const res = await api.get('/roster') as any
      return res.data
    },
  })

  const addMutation = useMutation({
    mutationFn: (data: any) => api.post('/employees', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['roster'] })
      queryClient.invalidateQueries({ queryKey: ['dashboard'] })
      setShowAddModal(false)
    },
  })

  const filtered = employees?.filter((e: any) =>
    !search || e.name.includes(search) || e.department.includes(search)
  ) || []

  if (selectedId) {
    return <EmployeeProfile employeeId={selectedId} onBack={() => setSelectedId(null)} />
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold">花名册</h1>
        <div className="flex gap-2">
          <Input
            placeholder="搜索姓名/部门"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-48"
          />
          <Button onClick={() => setShowAddModal(true)}>
            <Plus className="w-4 h-4 mr-1" /> 添加员工
          </Button>
        </div>
      </div>

      {isLoading ? (
        <div className="text-center py-8 text-gray-400">加载中...</div>
      ) : filtered.length === 0 ? (
        <Card><div className="text-center py-8 text-gray-400">暂无员工</div></Card>
      ) : (
        <Card>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b text-gray-500">
                  <th className="py-2 px-3 text-left">姓名</th>
                  <th className="py-2 px-3 text-left">部门</th>
                  <th className="py-2 px-3 text-left">状态</th>
                  <th className="py-2 px-3 text-left">入职日期</th>
                  <th className="py-2 px-3 text-right">月薪</th>
                  <th className="py-2 px-3 text-left">合同状态</th>
                  <th className="py-2 px-3 text-center">违纪</th>
                  <th className="py-2 px-3 text-center">考勤</th>
                  <th className="py-2 px-3 text-center">培训</th>
                  <th className="py-2 px-3 text-center">绩效</th>
                  <th className="py-2 px-3 text-center">工资条</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((e: any) => (
                  <tr
                    key={e.id}
                    className="border-b last:border-0 cursor-pointer hover:bg-gray-50"
                    onClick={() => setSelectedId(e.id)}
                  >
                    <td className="py-2 px-3 font-medium">{e.name}</td>
                    <td className="py-2 px-3 text-gray-500">{e.department}</td>
                    <td className="py-2 px-3">
                      <span className={`px-2 py-0.5 rounded text-xs ${e.status === 'ACTIVE' ? 'bg-green-50 text-safe' : 'bg-gray-100 text-gray-500'}`}>
                        {e.status === 'ACTIVE' ? '在职' : '离职'}
                      </span>
                    </td>
                    <td className="py-2 px-3 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>
                    <td className="py-2 px-3 text-right">¥{e.monthlySalary.toLocaleString()}</td>
                    <td className="py-2 px-3">
                      <Signal level={e.latestContract?.riskLevel || 'safe'} label={e.latestContract ? (e.latestContract.contractType === 'FIXED' ? '固定期限' : e.latestContract.contractType === 'UNFIXED' ? '无固定期限' : '未签') : '无合同'} />
                    </td>
                    <td className="py-2 px-3 text-center">
                      {e.counts?.disciplinaryRecords ? (
                        <span className="text-danger font-medium">{e.counts.disciplinaryRecords}</span>
                      ) : <span className="text-gray-300">0</span>}
                    </td>
                    <td className="py-2 px-3 text-center text-gray-500">{e.counts?.attendanceRecords || 0}</td>
                    <td className="py-2 px-3 text-center text-gray-500">{e.counts?.trainingRecords || 0}</td>
                    <td className="py-2 px-3 text-center text-gray-500">{e.counts?.performanceRecords || 0}</td>
                    <td className="py-2 px-3 text-center text-gray-500">{e.counts?.payslips || 0}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {showAddModal && (
        <AddEmployeeModal
          onClose={() => setShowAddModal(false)}
          onSubmit={(data) => addMutation.mutate(data)}
          loading={addMutation.isPending}
          error={addMutation.error as any}
        />
      )}
    </div>
  )
}

function EmployeeProfile({ employeeId, onBack }: { employeeId: string; onBack: () => void }) {
  const [tab, setTab] = useState<DetailTab>('basic')
  const [showEvidence, setShowEvidence] = useState(false)

  const { data: profile, isLoading } = useQuery<any>({
    queryKey: ['roster-profile', employeeId],
    queryFn: async () => {
      const res = await api.get(`/roster/${employeeId}/profile`) as any
      return res.data
    },
  })

  const tabs: { key: DetailTab; label: string; icon: any }[] = [
    { key: 'basic', label: '基本信息', icon: Users },
    { key: 'contract', label: '劳动合同', icon: FileText },
    { key: 'payslip', label: '工资条', icon: FileText },
    { key: 'overtime', label: '加班记录', icon: Calendar },
    { key: 'disciplinary', label: '违纪记录', icon: AlertTriangle },
    { key: 'attendance', label: '考勤记录', icon: Calendar },
    { key: 'training', label: '培训签收', icon: GraduationCap },
    { key: 'performance', label: '绩效考核', icon: TrendingUp },
    { key: 'termination', label: '解聘记录', icon: FileText },
    { key: 'attachment', label: '附件管理', icon: Paperclip },
    { key: 'evidence', label: '仲裁证据链', icon: Scale },
  ]

  if (isLoading) return <div className="text-center py-8 text-gray-400">加载中...</div>
  if (!profile) return <div className="text-center py-8 text-gray-400">员工不存在</div>

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <button onClick={onBack} className="text-gray-400 hover:text-gray-600">
          <X className="w-5 h-5" />
        </button>
        <h1 className="text-lg font-semibold">{profile.name} - 完整档案</h1>
        <span className={`px-2 py-0.5 rounded text-xs ${profile.status === 'ACTIVE' ? 'bg-green-50 text-safe' : 'bg-gray-100 text-gray-500'}`}>
          {profile.status === 'ACTIVE' ? '在职' : '离职'}
        </span>
      </div>

      <div className="flex gap-1 border-b overflow-x-auto">
        {tabs.map((t) => {
          const Icon = t.icon
          return (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex items-center gap-1 ${
                tab === t.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Icon className="w-4 h-4" />
              {t.label}
            </button>
          )
        })}
      </div>

      {tab === 'basic' && <BasicInfo profile={profile} />}
      {tab === 'contract' && <ContractInfo employeeId={employeeId} contracts={profile.contracts} />}
      {tab === 'payslip' && <PayslipInfo payslips={profile.payslips} />}
      {tab === 'overtime' && <OvertimeInfo records={profile.overtimeRecords} />}
      {tab === 'disciplinary' && <DisciplinaryInfo employeeId={employeeId} records={profile.disciplinaryRecords} />}
      {tab === 'attendance' && <AttendanceInfo employeeId={employeeId} records={profile.attendanceRecords} />}
      {tab === 'training' && <TrainingInfo employeeId={employeeId} records={profile.trainingRecords} />}
      {tab === 'performance' && <PerformanceInfo employeeId={employeeId} records={profile.performanceRecords} />}
      {tab === 'termination' && <TerminationInfo employeeId={employeeId} profile={profile} records={profile.terminations} />}
      {tab === 'attachment' && <AttachmentInfo employeeId={employeeId} attachments={profile.attachments} />}
      {tab === 'evidence' && <EvidenceChain employeeId={employeeId} />}
    </div>
  )
}

function BasicInfo({ profile }: { profile: any }) {
  const fields = [
    { label: '姓名', value: profile.name },
    { label: '部门', value: profile.department },
    { label: '性别', value: profile.gender || '未填写' },
    { label: '手机号', value: profile.phone || '未填写' },
    { label: '入职日期', value: profile.hireDate?.toString().slice(0, 10) },
    { label: '月工资', value: `¥${profile.monthlySalary.toLocaleString()}` },
    { label: '紧急联系人', value: profile.emergencyContact || '未填写' },
    { label: '紧急联系电话', value: profile.emergencyPhone || '未填写' },
    { label: '住址', value: profile.address || '未填写' },
    { label: '开户行', value: profile.bankName || '未填写' },
    { label: '银行账号', value: profile.bankAccount || '未填写' },
    { label: '状态', value: profile.status === 'ACTIVE' ? '在职' : '离职' },
  ]
  const special = [
    { label: '孕期', value: profile.isPregnant },
    { label: '医疗期', value: profile.isInMedicalPeriod },
    { label: '工伤', value: profile.isWorkInjured },
  ]
  return (
    <Card>
      <div className="grid md:grid-cols-2 gap-4">
        {fields.map((f) => (
          <div key={f.label} className="flex justify-between border-b pb-2">
            <span className="text-gray-500">{f.label}</span>
            <span className="font-medium">{f.value}</span>
          </div>
        ))}
      </div>
      <div className="mt-4 flex gap-4">
        {special.map((s) => (
          <span key={s.label} className={`px-3 py-1 rounded text-sm ${s.value ? 'bg-red-50 text-danger' : 'bg-gray-50 text-gray-400'}`}>
            {s.label}：{s.value ? '是' : '否'}
          </span>
        ))}
      </div>
    </Card>
  )
}

function ContractInfo({ employeeId, contracts }: { employeeId: string; contracts: any[] }) {
  const queryClient = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ contractType: 'FIXED', signDate: '', startDate: '', endDate: '', contractYears: 3, probationMonths: 0, probationSalary: 0 })

  const addContractMutation = useMutation({
    mutationFn: (data: any) => api.post('/employees/contracts', { ...data, employeeId }),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); setShowForm(false) },
  })

  const typeMap: Record<string, string> = { FIXED: '固定期限', UNFIXED: '无固定期限', UNSIGNED: '未签订' }

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <h2 className="font-medium">劳动合同（{contracts?.length || 0}份）</h2>
        <Button size="sm" onClick={() => setShowForm(!showForm)}>新增合同</Button>
      </div>

      {showForm && (
        <Card>
          <div className="grid md:grid-cols-2 gap-4">
            <div><Label>合同类型</Label>
              <Select value={form.contractType} onChange={(e) => setForm({ ...form, contractType: e.target.value })}>
                <option value="FIXED">固定期限</option>
                <option value="UNFIXED">无固定期限</option>
                <option value="UNSIGNED">未签合同</option>
              </Select>
            </div>
            <div><Label>签订日期</Label><Input type="date" value={form.signDate} onChange={(e) => setForm({ ...form, signDate: e.target.value })} /></div>
            <div><Label>合同开始日期 *</Label><Input type="date" value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} /></div>
            {form.contractType === 'FIXED' && (
              <div><Label>合同结束日期</Label><Input type="date" value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} /></div>
            )}
            {form.contractType === 'FIXED' && (
              <>
                <div><Label>试用期(月)</Label><Input type="number" value={form.probationMonths} onChange={(e) => setForm({ ...form, probationMonths: parseInt(e.target.value) || 0 })} min={0} max={6} /></div>
                <div><Label>试用期工资</Label><Input type="number" value={form.probationSalary} onChange={(e) => setForm({ ...form, probationSalary: parseInt(e.target.value) || 0 })} /></div>
              </>
            )}
            <div className="md:col-span-2">
              <Button onClick={() => addContractMutation.mutate(form)} disabled={addContractMutation.isPending || !form.startDate}>
                {addContractMutation.isPending ? '保存中...' : '保存'}
              </Button>
            </div>
          </div>
        </Card>
      )}

      {!contracts?.length ? (
        <Card><div className="text-center py-8 text-gray-400">暂无合同记录</div></Card>
      ) : contracts.map((c) => (
        <Card key={c.id}>
          <div className="flex items-start justify-between">
            <div className="grid md:grid-cols-2 gap-4 flex-1">
              <div className="flex justify-between"><span className="text-gray-500">合同类型</span><span className="font-medium">{typeMap[c.contractType] || c.contractType}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">签订日期</span><span className="font-medium">{c.signDate ? c.signDate.toString().slice(0, 10) : '未签订'}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">合同开始</span><span className="font-medium">{c.startDate?.toString().slice(0, 10)}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">合同结束</span><span className="font-medium">{c.endDate ? c.endDate.toString().slice(0, 10) : '无固定期限'}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">合同期限</span><span className="font-medium">{c.contractYears}年</span></div>
              <div className="flex justify-between"><span className="text-gray-500">试用期</span><span className="font-medium">{c.probationMonths}个月（¥{c.probationSalary}）</span></div>
              <div className="flex justify-between"><span className="text-gray-500">签订方式</span><span className="font-medium">{c.signMethod === 'PAPER' ? '纸质' : '电子'}</span></div>
              <div className="flex justify-between"><span className="text-gray-500">续签次数</span><span className="font-medium">{c.renewalCount}</span></div>
            </div>
          </div>
        </Card>
      ))}
    </div>
  )
}

function AddEmployeeModal({ onClose, onSubmit, loading, error }: {
  onClose: () => void
  onSubmit: (data: any) => void
  loading: boolean
  error: any
}) {
  const [form, setForm] = useState({
    name: '', department: '', hireDate: '', monthlySalary: '',
    gender: '男' as '男' | '女', phone: '',
    isPregnant: false, isInMedicalPeriod: false, isWorkInjured: false,
    contractType: 'FIXED' as 'FIXED' | 'UNFIXED' | 'UNSIGNED',
    signDate: '', startDate: '', endDate: '',
    contractYears: 3, probationMonths: 0, probationSalary: 0,
  })

  const handleSubmit = () => {
    const data: any = {
      name: form.name, department: form.department,
      hireDate: new Date(form.hireDate).toISOString(),
      monthlySalary: form.monthlySalary, gender: form.gender,
      phone: form.phone || undefined,
      isPregnant: form.isPregnant, isInMedicalPeriod: form.isInMedicalPeriod, isWorkInjured: form.isWorkInjured,
    }
    if (form.contractType !== 'UNSIGNED' && form.startDate) {
      data.contract = {
        signDate: form.signDate ? new Date(form.signDate).toISOString() : null,
        startDate: new Date(form.startDate).toISOString(),
        endDate: form.endDate ? new Date(form.endDate).toISOString() : null,
        contractType: form.contractType, contractYears: form.contractYears,
        probationMonths: form.probationMonths, probationSalary: form.probationSalary,
      }
    }
    onSubmit(data)
  }

  return (
    <Modal open onClose={onClose} title="添加员工">
      <div className="space-y-4">
        {error && (
          <div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-sm">
            {error.response?.data?.error?.message || '操作失败'}
          </div>
        )}
        <div className="grid grid-cols-2 gap-3">
          <div><Label>姓名 *</Label><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="员工姓名" /></div>
          <div><Label>部门 *</Label><Input value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })} placeholder="如：技术部" /></div>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div><Label>入职日期 *</Label><Input type="date" value={form.hireDate} onChange={(e) => setForm({ ...form, hireDate: e.target.value })} /></div>
          <div><Label>月工资 *</Label><Input type="number" value={form.monthlySalary} onChange={(e) => setForm({ ...form, monthlySalary: e.target.value })} placeholder="元" /></div>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div><Label>性别</Label><Select value={form.gender} onChange={(e) => setForm({ ...form, gender: e.target.value as '男' | '女' })}><option value="男">男</option><option value="女">女</option></Select></div>
          <div><Label>手机号</Label><Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="选填" maxLength={11} /></div>
        </div>
        <div className="flex gap-4">
          <label className="flex items-center gap-1.5 text-sm"><input type="checkbox" checked={form.isPregnant} onChange={(e) => setForm({ ...form, isPregnant: e.target.checked })} />孕期/哺乳期</label>
          <label className="flex items-center gap-1.5 text-sm"><input type="checkbox" checked={form.isInMedicalPeriod} onChange={(e) => setForm({ ...form, isInMedicalPeriod: e.target.checked })} />医疗期</label>
          <label className="flex items-center gap-1.5 text-sm"><input type="checkbox" checked={form.isWorkInjured} onChange={(e) => setForm({ ...form, isWorkInjured: e.target.checked })} />工伤</label>
        </div>
        <div className="border-t pt-3">
          <Label>合同类型</Label>
          <Select value={form.contractType} onChange={(e) => setForm({ ...form, contractType: e.target.value as any })}>
            <option value="FIXED">固定期限</option><option value="UNFIXED">无固定期限</option><option value="UNSIGNED">未签合同</option>
          </Select>
        </div>
        {form.contractType !== 'UNSIGNED' && (
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <div><Label>签订日期</Label><Input type="date" value={form.signDate} onChange={(e) => setForm({ ...form, signDate: e.target.value })} /></div>
              <div><Label>合同开始日期 *</Label><Input type="date" value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} /></div>
            </div>
            {form.contractType === 'FIXED' && (
              <div className="grid grid-cols-3 gap-3">
                <div><Label>合同结束日期</Label><Input type="date" value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} /></div>
                <div><Label>试用期(月)</Label><Input type="number" value={form.probationMonths} onChange={(e) => setForm({ ...form, probationMonths: parseInt(e.target.value) || 0 })} min={0} max={6} /></div>
                <div><Label>试用期工资</Label><Input type="number" value={form.probationSalary} onChange={(e) => setForm({ ...form, probationSalary: parseInt(e.target.value) || 0 })} /></div>
              </div>
            )}
          </div>
        )}
        <div className="flex justify-end gap-2 pt-2">
          <Button variant="secondary" onClick={onClose}>取消</Button>
          <Button onClick={handleSubmit} disabled={loading || !form.name || !form.department || !form.hireDate || !form.monthlySalary}>{loading ? '保存中...' : '保存'}</Button>
        </div>
      </div>
    </Modal>
  )
}

function AttachmentInfo({ employeeId, attachments }: { employeeId: string; attachments: any[] }) {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [fileType, setFileType] = useState<'ID_CARD' | 'BANK_CARD' | 'CONTRACT_SCAN' | 'EDUCATION' | 'OTHER'>('ID_CARD')

  const addAttachmentMutation = useMutation({
    mutationFn: (data: any) => api.post('/attachments', data),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile', employeeId] }),
  })

  const deleteAttachmentMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/attachments/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile', employeeId] }),
  })

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = (event) => {
      const fileUrl = event.target?.result as string
      addAttachmentMutation.mutate({ employeeId, fileName: file.name, fileType, fileUrl, fileSize: file.size })
    }
    reader.readAsDataURL(file)
  }

  const fileTypeLabels: Record<string, string> = { ID_CARD: '身份证', BANK_CARD: '银行卡', CONTRACT_SCAN: '合同扫描件', EDUCATION: '学历证书', OTHER: '其他' }

  return (
    <div className="space-y-3">
      <h2 className="font-medium">附件管理（{attachments?.length || 0}个）</h2>
      <Card>
        <div className="flex gap-2 mb-3">
          <Select value={fileType} onChange={(e) => setFileType(e.target.value as any)} className="text-sm">
            <option value="ID_CARD">身份证</option><option value="BANK_CARD">银行卡</option><option value="CONTRACT_SCAN">合同扫描件</option><option value="EDUCATION">学历证书</option><option value="OTHER">其他</option>
          </Select>
          <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileUpload} />
          <Button size="sm" variant="secondary" onClick={() => fileInputRef.current?.click()} disabled={addAttachmentMutation.isPending}>
            {addAttachmentMutation.isPending ? '上传中...' : '上传附件'}
          </Button>
        </div>
        {attachments?.length ? (
          <div className="space-y-2">
            {attachments.map((att) => (
              <div key={att.id} className="flex items-center justify-between bg-gray-50 rounded p-2 text-sm">
                <div className="flex items-center gap-2 min-w-0">
                  <Paperclip className="w-4 h-4 text-gray-400 shrink-0" />
                  <div className="min-w-0">
                    <div className="truncate">{att.fileName}</div>
                    <div className="text-xs text-gray-400">{fileTypeLabels[att.fileType] || att.fileType} · {new Date(att.createdAt).toLocaleDateString('zh-CN')}</div>
                  </div>
                </div>
                <button onClick={() => deleteAttachmentMutation.mutate(att.id)} className="text-gray-400 hover:text-danger shrink-0 ml-2"><Trash2 className="w-4 h-4" /></button>
              </div>
            ))}
          </div>
        ) : <div className="text-gray-400 text-sm text-center py-4">暂无附件</div>}
      </Card>
    </div>
  )
}

function PayslipInfo({ payslips }: { payslips: any[] }) {
  if (!payslips?.length) return <Card><div className="text-center py-8 text-gray-400">暂无工资条记录</div></Card>
  return (
    <Card>
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b text-gray-500">
            <th className="py-2 text-left">月份</th>
            <th className="py-2 text-right">基本工资</th>
            <th className="py-2 text-right">加班费</th>
            <th className="py-2 text-right">津贴</th>
            <th className="py-2 text-right">扣款</th>
            <th className="py-2 text-right">应发合计</th>
            <th className="py-2 text-center">确认状态</th>
          </tr>
        </thead>
        <tbody>
          {payslips.map((p) => (
            <tr key={p.id} className="border-b last:border-0">
              <td className="py-2">{p.month}</td>
              <td className="py-2 text-right">¥{p.baseSalary.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
              <td className="py-2 text-right">¥{p.overtimePay.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
              <td className="py-2 text-right">¥{p.allowance.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
              <td className="py-2 text-right">{p.deduction > 0 ? '-¥' : '¥'}{p.deduction.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
              <td className="py-2 text-right font-bold">¥{p.totalPay.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
              <td className="py-2 text-center">
                {p.confirmedAt ? <span className="text-safe text-xs">已确认</span> : <span className="text-warning text-xs">未确认</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  )
}

function OvertimeInfo({ records }: { records: any[] }) {
  if (!records?.length) return <Card><div className="text-center py-8 text-gray-400">暂无加班记录</div></Card>
  return (
    <Card>
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b text-gray-500">
            <th className="py-2 text-left">月份</th>
            <th className="py-2 text-right">工作日(h)</th>
            <th className="py-2 text-right">休息日(h)</th>
            <th className="py-2 text-right">节假日(h)</th>
            <th className="py-2 text-right">加班费</th>
          </tr>
        </thead>
        <tbody>
          {records.map((o) => (
            <tr key={o.id} className="border-b last:border-0">
              <td className="py-2">{o.month}</td>
              <td className="py-2 text-right">{o.weekdayHours}</td>
              <td className="py-2 text-right">{o.weekendHours}</td>
              <td className="py-2 text-right">{o.holidayHours}</td>
              <td className="py-2 text-right font-medium">¥{o.totalPay.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  )
}

function TerminationInfo({ employeeId, profile, records }: { employeeId: string; profile: any; records: any[] }) {
  const [printRecord, setPrintRecord] = useState<any | null>(null)

  const reasonMap: Record<string, string> = {
    NEGOTIATED: '协商解除', FAULT: '员工过错', NONFAULT: '非过错解除',
    LAYOFF: '经济性裁员', EXPIRED: '合同到期', ILLEGAL: '违法解除',
  }
  const legalBasisMap: Record<string, string> = {
    NEGOTIATED: '《劳动合同法》第36条', FAULT: '《劳动合同法》第39条',
    NONFAULT: '《劳动合同法》第40条', LAYOFF: '《劳动合同法》第41条',
    EXPIRED: '《劳动合同法》第44条、第46条', ILLEGAL: '《劳动合同法》第87条',
  }

  const { data: evidenceChain } = useQuery<any>({
    queryKey: ['evidence-chain', employeeId],
    queryFn: async () => {
      const res = await api.get(`/roster/${employeeId}/evidence-chain`) as any
      return res.data
    },
    enabled: !!printRecord,
  })

  if (!records?.length) return <Card><div className="text-center py-8 text-gray-400">暂无解聘记录</div></Card>

  if (printRecord) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <button onClick={() => setPrintRecord(null)} className="text-gray-400 hover:text-gray-600 flex items-center gap-1 text-sm">
            <X className="w-4 h-4" />返回列表
          </button>
          <Button variant="secondary" size="sm" onClick={() => window.print()}>
            <Printer className="w-4 h-4 mr-1" />打印材料
          </Button>
        </div>

        {/* 1. 解聘通知书 */}
        <div className="border rounded-lg p-6 space-y-4 print:shadow-none">
          <div className="text-center">
            <h2 className="text-lg font-bold">解除劳动合同通知书</h2>
          </div>
          <div className="text-sm text-gray-700 space-y-3">
            <p><strong>{profile.name}</strong> 先生/女士：</p>
            <p>
              您于 <strong>{profile.hireDate?.toString().slice(0, 10)}</strong> 入职我公司{profile.department}部门。
              因 <strong>{reasonMap[printRecord.reason] || printRecord.reason}</strong> 原因，公司决定于 <strong>{printRecord.terminationDate?.toString().slice(0, 10)}</strong> 起解除与您的劳动合同。
            </p>
            <p>解除依据：{legalBasisMap[printRecord.reason] || ''}</p>
            <p>经济补偿金：<strong>¥{printRecord.compensation.toLocaleString(undefined, { maximumFractionDigits: 2 })}</strong></p>
            {printRecord.remark && <p>备注：{printRecord.remark}</p>}
            <p>请于解除日期前办理工作交接手续，结清相关费用。</p>
            <div className="text-right mt-6 space-y-1">
              <p>公司（盖章）</p>
              <p className="text-gray-400">{printRecord.terminationDate?.toString().slice(0, 10)}</p>
            </div>
          </div>
        </div>

        {/* 2. 费用结算明细 */}
        <div className="border rounded-lg p-4 space-y-2">
          <h3 className="font-medium flex items-center gap-2"><Calculator className="w-4 h-4" />费用结算明细</h3>
          <div className="text-sm space-y-1">
            <div className="flex justify-between"><span>员工</span><span>{profile.name}（{profile.department}）</span></div>
            <div className="flex justify-between"><span>入职日期</span><span>{profile.hireDate?.toString().slice(0, 10)}</span></div>
            <div className="flex justify-between"><span>月工资</span><span>¥{profile.monthlySalary.toLocaleString()}/月</span></div>
            <div className="flex justify-between"><span>解聘日期</span><span>{printRecord.terminationDate?.toString().slice(0, 10)}</span></div>
            <div className="flex justify-between"><span>解聘原因</span><span>{reasonMap[printRecord.reason] || printRecord.reason}</span></div>
            <div className="flex justify-between border-t pt-2 font-bold text-danger"><span>经济补偿金</span><span>¥{printRecord.compensation.toLocaleString(undefined, { maximumFractionDigits: 2 })}</span></div>
          </div>
        </div>

        {/* 3. 合规检查清单 */}
        {printRecord.checklist && Object.keys(printRecord.checklist).length > 0 && (
          <div className="border rounded-lg p-4 space-y-2">
            <h3 className="font-medium flex items-center gap-2"><Shield className="w-4 h-4" />合规检查清单</h3>
            <div className="text-sm space-y-1">
              {Object.entries(printRecord.checklist).map(([key, passed]: [string, any]) => (
                <div key={key} className="flex items-center gap-2">
                  <span className={passed ? 'text-safe' : 'text-danger'}>{passed ? '✓' : '✗'}</span>
                  <span className={passed ? '' : 'text-gray-500'}>{key}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 4. 风险评估 */}
        {printRecord.riskLevel && printRecord.riskLevel !== 'SAFE' && (
          <div className="border rounded-lg p-4 space-y-2">
            <h3 className="font-medium flex items-center gap-2"><AlertTriangle className="w-4 h-4" />风险评估</h3>
            <div className="text-sm">
              <div className={`px-3 py-2 rounded-md ${printRecord.riskLevel === 'DANGER' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-800'}`}>
                风险等级：{printRecord.riskLevel === 'DANGER' ? '高风险' : '注意'}
              </div>
            </div>
          </div>
        )}

        {/* 5. 仲裁证据链 */}
        <div className="border rounded-lg p-4 space-y-3">
          <h3 className="font-medium flex items-center gap-2"><FileText className="w-4 h-4" />仲裁证据链</h3>
          {evidenceChain ? (
            <>
              <div className="text-xs text-gray-500">
                共 {evidenceChain.summary?.total || 0} 条证据，
                已签确认 {evidenceChain.summary?.signed || 0} 条，
                未签 {evidenceChain.summary?.unsigned || 0} 条
              </div>
              {(() => {
                const grouped = (evidenceChain.evidence || []).reduce((acc: Record<string, any[]>, e: any) => {
                  (acc[e.category] = acc[e.category] || []).push(e)
                  return acc
                }, {})
                return Object.entries(grouped).map(([category, items]) => (
                  <div key={category} className="space-y-1">
                    <div className="text-sm font-medium text-gray-700">{category}</div>
                    {(items as any[]).map((e: any, i: number) => (
                      <div key={i} className="text-xs text-gray-600 pl-4 border-l-2 border-gray-200 ml-1">
                        <div className="flex items-center gap-2">
                          <span>{e.title}</span>
                          {e.acknowledged === true && <span className="text-safe">✓已签</span>}
                          {e.acknowledged === false && <span className="text-danger">✗未签</span>}
                        </div>
                        <div className="text-gray-400">{e.description}</div>
                      </div>
                    ))}
                  </div>
                ))
              })()}
            </>
          ) : (
            <div className="text-sm text-gray-400">加载证据链中...</div>
          )}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {records.map((t) => (
        <Card key={t.id}>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="flex justify-between"><span className="text-gray-500">解聘日期</span><span className="font-medium">{t.terminationDate?.toString().slice(0, 10)}</span></div>
            <div className="flex justify-between"><span className="text-gray-500">解聘原因</span><span className="font-medium">{reasonMap[t.reason] || t.reason}</span></div>
            <div className="flex justify-between"><span className="text-gray-500">经济补偿金</span><span className="font-medium">¥{t.compensation.toLocaleString()}</span></div>
            <div className="flex justify-between"><span className="text-gray-500">风险等级</span><span className="font-medium">{t.riskLevel === 'SAFE' ? '安全' : t.riskLevel === 'WARNING' ? '注意' : '高风险'}</span></div>
            {t.remark && <div className="md:col-span-2"><span className="text-gray-500">备注：</span><span>{t.remark}</span></div>}
            <div className="md:col-span-2 flex justify-end">
              <Button variant="secondary" size="sm" onClick={() => setPrintRecord(t)}>
                <Printer className="w-4 h-4 mr-1" />打印解聘材料
              </Button>
            </div>
          </div>
        </Card>
      ))}
    </div>
  )
}

// ========== 违纪记录管理 ==========

function DisciplinaryInfo({ employeeId, records }: { employeeId: string; records: any[] }) {
  const queryClient = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ violationDate: '', violationType: 'LATE', description: '', severity: 'WARNING', action: 'ORAL_WARNING', actionDetail: '', employeeAck: false, ackDate: '', ackMethod: 'SIGN', witness: '' })

  const createMutation = useMutation({
    mutationFn: (data: any) => api.post(`/roster/${employeeId}/disciplinary`, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); setShowForm(false) },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/roster/${employeeId}/disciplinary/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile'] }),
  })

  const typeMap: Record<string, string> = { LATE: '迟到', ABSENT: '旷工', INSUBORDINATION: '不服从管理', MISCONDUCT: '违纪', VIOLATE_POLICY: '违反规章制度', OTHER: '其他' }
  const actionMap: Record<string, string> = { ORAL_WARNING: '口头警告', WRITTEN_WARNING: '书面警告', DEDUCTION: '扣款', DEMOTION: '降职', TERMINATION: '解除劳动合同' }
  const severityMap: Record<string, string> = { WARNING: '警告', SERIOUS: '严重', SEVERE: '重度' }

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <h2 className="font-medium">违纪记录（{records?.length || 0}条）</h2>
        <Button size="sm" onClick={() => setShowForm(!showForm)}>新增违纪记录</Button>
      </div>

      {showForm && (
        <Card>
          <div className="grid md:grid-cols-2 gap-4">
            <div><Label>违纪日期</Label><Input type="date" value={form.violationDate} onChange={(e) => setForm({ ...form, violationDate: e.target.value })} /></div>
            <div><Label>违纪类型</Label>
              <Select value={form.violationType} onChange={(e) => setForm({ ...form, violationType: e.target.value })}>
                {Object.entries(typeMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            <div className="md:col-span-2"><Label>违纪事实描述</Label><Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="详细描述违纪事实" /></div>
            <div><Label>严重程度</Label>
              <Select value={form.severity} onChange={(e) => setForm({ ...form, severity: e.target.value })}>
                {Object.entries(severityMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            <div><Label>处理结果</Label>
              <Select value={form.action} onChange={(e) => setForm({ ...form, action: e.target.value })}>
                {Object.entries(actionMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            <div><Label>处理详情</Label><Input value={form.actionDetail} onChange={(e) => setForm({ ...form, actionDetail: e.target.value })} placeholder="扣款金额/降职说明等" /></div>
            <div><Label>见证人</Label><Input value={form.witness} onChange={(e) => setForm({ ...form, witness: e.target.value })} /></div>
            <div className="flex items-center gap-2 pt-6">
              <input type="checkbox" id="empAck" checked={form.employeeAck} onChange={(e) => setForm({ ...form, employeeAck: e.target.checked })} />
              <label htmlFor="empAck" className="text-sm">员工已签字确认</label>
            </div>
            {form.employeeAck && <div><Label>确认日期</Label><Input type="date" value={form.ackDate} onChange={(e) => setForm({ ...form, ackDate: e.target.value })} /></div>}
            <div className="md:col-span-2">
              <Button onClick={() => createMutation.mutate(form)} disabled={createMutation.isPending || !form.violationDate || !form.description}>
                {createMutation.isPending ? '保存中...' : '保存'}
              </Button>
            </div>
          </div>
        </Card>
      )}

      {records?.length === 0 ? (
        <Card><div className="text-center py-8 text-gray-400">暂无违纪记录</div></Card>
      ) : records?.map((r) => (
        <Card key={r.id}>
          <div className="flex justify-between items-start">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{r.violationDate?.toString().slice(0, 10)}</span>
                <span className="px-2 py-0.5 rounded bg-red-50 text-danger text-xs">{typeMap[r.violationType] || r.violationType}</span>
                <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-600 text-xs">{severityMap[r.severity] || r.severity}</span>
              </div>
              <div className="text-sm text-gray-600">{r.description}</div>
              <div className="text-sm"><span className="text-gray-500">处理：</span>{actionMap[r.action] || r.action}{r.actionDetail ? `（${r.actionDetail}）` : ''}</div>
              <div className="flex gap-3 text-xs text-gray-400">
                {r.employeeAck ? <span className="text-safe">✓ 员工已签字（{r.ackDate?.toString().slice(0, 10)}）</span> : <span className="text-warning">⚠ 员工未签字</span>}
                {r.witness && <span>见证人：{r.witness}</span>}
              </div>
            </div>
            <button onClick={() => deleteMutation.mutate(r.id)} className="text-xs text-gray-400 hover:text-danger">删除</button>
          </div>
        </Card>
      ))}
    </div>
  )
}

// ========== 考勤记录管理 ==========

function AttendanceInfo({ employeeId, records }: { employeeId: string; records: any[] }) {
  const queryClient = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ date: '', checkInTime: '', checkOutTime: '', status: 'NORMAL', lateMinutes: 0, earlyMinutes: 0, workHours: 8, overtimeHours: 0, remark: '' })

  const createMutation = useMutation({
    mutationFn: (data: any) => api.post(`/roster/${employeeId}/attendance`, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); setShowForm(false) },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/roster/${employeeId}/attendance/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile'] }),
  })

  const statusMap: Record<string, string> = { NORMAL: '正常', LATE: '迟到', EARLY_LEAVE: '早退', ABSENT: '旷工', LEAVE: '请假', BUSINESS_TRIP: '出差' }
  const statusColor: Record<string, string> = { NORMAL: 'bg-green-50 text-safe', LATE: 'bg-amber-50 text-warning', EARLY_LEAVE: 'bg-amber-50 text-warning', ABSENT: 'bg-red-50 text-danger', LEAVE: 'bg-blue-50 text-blue-600', BUSINESS_TRIP: 'bg-blue-50 text-blue-600' }

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <h2 className="font-medium">考勤记录（{records?.length || 0}条）</h2>
        <Button size="sm" onClick={() => setShowForm(!showForm)}>新增考勤记录</Button>
      </div>

      {showForm && (
        <Card>
          <div className="grid md:grid-cols-2 gap-4">
            <div><Label>日期</Label><Input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} /></div>
            <div><Label>考勤状态</Label>
              <Select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                {Object.entries(statusMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            <div><Label>签到时间</Label><Input type="time" value={form.checkInTime} onChange={(e) => setForm({ ...form, checkInTime: e.target.value })} /></div>
            <div><Label>签退时间</Label><Input type="time" value={form.checkOutTime} onChange={(e) => setForm({ ...form, checkOutTime: e.target.value })} /></div>
            <div><Label>迟到（分钟）</Label><Input type="number" value={form.lateMinutes} onChange={(e) => setForm({ ...form, lateMinutes: Number(e.target.value) })} /></div>
            <div><Label>早退（分钟）</Label><Input type="number" value={form.earlyMinutes} onChange={(e) => setForm({ ...form, earlyMinutes: Number(e.target.value) })} /></div>
            <div><Label>工时（小时）</Label><Input type="number" step="0.5" value={form.workHours} onChange={(e) => setForm({ ...form, workHours: Number(e.target.value) })} /></div>
            <div><Label>加班（小时）</Label><Input type="number" step="0.5" value={form.overtimeHours} onChange={(e) => setForm({ ...form, overtimeHours: Number(e.target.value) })} /></div>
            <div className="md:col-span-2"><Label>备注</Label><Input value={form.remark} onChange={(e) => setForm({ ...form, remark: e.target.value })} /></div>
            <div className="md:col-span-2"><Button onClick={() => createMutation.mutate(form)} disabled={createMutation.isPending || !form.date}>{createMutation.isPending ? '保存中...' : '保存'}</Button></div>
          </div>
        </Card>
      )}

      {records?.length === 0 ? (
        <Card><div className="text-center py-8 text-gray-400">暂无考勤记录</div></Card>
      ) : (
        <Card>
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b text-gray-500">
                <th className="py-2 text-left">日期</th>
                <th className="py-2 text-left">签到</th>
                <th className="py-2 text-left">签退</th>
                <th className="py-2 text-center">状态</th>
                <th className="py-2 text-right">工时</th>
                <th className="py-2 text-right">加班</th>
                <th className="py-2"></th>
              </tr>
            </thead>
            <tbody>
              {records?.map((a) => (
                <tr key={a.id} className="border-b last:border-0">
                  <td className="py-2">{a.date?.toString().slice(0, 10)}</td>
                  <td className="py-2 text-gray-500">{a.checkInTime || '-'}</td>
                  <td className="py-2 text-gray-500">{a.checkOutTime || '-'}</td>
                  <td className="py-2 text-center"><span className={`px-2 py-0.5 rounded text-xs ${statusColor[a.status] || 'bg-gray-100'}`}>{statusMap[a.status] || a.status}</span></td>
                  <td className="py-2 text-right">{a.workHours}h</td>
                  <td className="py-2 text-right">{a.overtimeHours > 0 ? `${a.overtimeHours}h` : '-'}</td>
                  <td className="py-2"><button onClick={() => deleteMutation.mutate(a.id)} className="text-xs text-gray-400 hover:text-danger">删除</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  )
}

// ========== 培训签收记录管理 ==========

function TrainingInfo({ employeeId, records }: { employeeId: string; records: any[] }) {
  const queryClient = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ trainingDate: '', topic: '', content: '', trainer: '', duration: 1, ackStatus: 'PENDING', ackDate: '', remark: '' })

  const createMutation = useMutation({
    mutationFn: (data: any) => api.post(`/roster/${employeeId}/training`, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); setShowForm(false) },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/roster/${employeeId}/training/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile'] }),
  })

  const ackMap: Record<string, string> = { PENDING: '待签收', SIGNED: '已签收', REFUSED: '拒绝签收' }
  const ackColor: Record<string, string> = { PENDING: 'bg-amber-50 text-warning', SIGNED: 'bg-green-50 text-safe', REFUSED: 'bg-red-50 text-danger' }

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <h2 className="font-medium">培训签收记录（{records?.length || 0}条）</h2>
        <Button size="sm" onClick={() => setShowForm(!showForm)}>新增培训记录</Button>
      </div>

      {showForm && (
        <Card>
          <div className="grid md:grid-cols-2 gap-4">
            <div><Label>培训日期</Label><Input type="date" value={form.trainingDate} onChange={(e) => setForm({ ...form, trainingDate: e.target.value })} /></div>
            <div><Label>培训主题/制度名称</Label><Input value={form.topic} onChange={(e) => setForm({ ...form, topic: e.target.value })} placeholder="如《员工手册》培训" /></div>
            <div className="md:col-span-2"><Label>培训内容摘要</Label><Input value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} /></div>
            <div><Label>培训人</Label><Input value={form.trainer} onChange={(e) => setForm({ ...form, trainer: e.target.value })} /></div>
            <div><Label>时长（小时）</Label><Input type="number" step="0.5" value={form.duration} onChange={(e) => setForm({ ...form, duration: Number(e.target.value) })} /></div>
            <div><Label>签收状态</Label>
              <Select value={form.ackStatus} onChange={(e) => setForm({ ...form, ackStatus: e.target.value })}>
                {Object.entries(ackMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            {form.ackStatus === 'SIGNED' && <div><Label>签收日期</Label><Input type="date" value={form.ackDate} onChange={(e) => setForm({ ...form, ackDate: e.target.value })} /></div>}
            <div className="md:col-span-2"><Label>备注</Label><Input value={form.remark} onChange={(e) => setForm({ ...form, remark: e.target.value })} /></div>
            <div className="md:col-span-2"><Button onClick={() => createMutation.mutate(form)} disabled={createMutation.isPending || !form.trainingDate || !form.topic}>{createMutation.isPending ? '保存中...' : '保存'}</Button></div>
          </div>
        </Card>
      )}

      {records?.length === 0 ? (
        <Card><div className="text-center py-8 text-gray-400">暂无培训签收记录</div></Card>
      ) : records?.map((r) => (
        <Card key={r.id}>
          <div className="flex justify-between items-start">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{r.trainingDate?.toString().slice(0, 10)}</span>
                <span className="font-medium">{r.topic}</span>
                <span className={`px-2 py-0.5 rounded text-xs ${ackColor[r.ackStatus] || 'bg-gray-100'}`}>{ackMap[r.ackStatus] || r.ackStatus}</span>
              </div>
              {r.content && <div className="text-sm text-gray-600">{r.content}</div>}
              <div className="flex gap-3 text-xs text-gray-400">
                <span>时长：{r.duration}h</span>
                {r.trainer && <span>培训人：{r.trainer}</span>}
                {r.ackDate && <span>签收日期：{r.ackDate.toString().slice(0, 10)}</span>}
              </div>
            </div>
            <button onClick={() => deleteMutation.mutate(r.id)} className="text-xs text-gray-400 hover:text-danger">删除</button>
          </div>
        </Card>
      ))}
    </div>
  )
}

// ========== 绩效记录管理 ==========

function PerformanceInfo({ employeeId, records }: { employeeId: string; records: any[] }) {
  const queryClient = useQueryClient()
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ period: '', score: 80, grade: 'B', result: 'QUALIFIED', summary: '', improvementPlan: '', employeeAck: false, ackDate: '', reviewer: '' })

  const createMutation = useMutation({
    mutationFn: (data: any) => api.post(`/roster/${employeeId}/performance`, data),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); setShowForm(false) },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/roster/${employeeId}/performance/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile'] }),
  })

  const resultMap: Record<string, string> = { EXCELLENT: '优秀', QUALIFIED: '合格', NEED_IMPROVE: '需改进', UNQUALIFIED: '不胜任' }
  const resultColor: Record<string, string> = { EXCELLENT: 'bg-green-50 text-safe', QUALIFIED: 'bg-blue-50 text-blue-600', NEED_IMPROVE: 'bg-amber-50 text-warning', UNQUALIFIED: 'bg-red-50 text-danger' }

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <h2 className="font-medium">绩效考核记录（{records?.length || 0}条）</h2>
        <Button size="sm" onClick={() => setShowForm(!showForm)}>新增绩效记录</Button>
      </div>

      {showForm && (
        <Card>
          <div className="grid md:grid-cols-2 gap-4">
            <div><Label>考核周期</Label><Input value={form.period} onChange={(e) => setForm({ ...form, period: e.target.value })} placeholder="如 2026-07 或 2026-Q3" /></div>
            <div><Label>考核得分</Label><Input type="number" value={form.score} onChange={(e) => setForm({ ...form, score: Number(e.target.value) })} /></div>
            <div><Label>等级</Label>
              <Select value={form.grade} onChange={(e) => setForm({ ...form, grade: e.target.value })}>
                <option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option>
              </Select>
            </div>
            <div><Label>考核结果</Label>
              <Select value={form.result} onChange={(e) => setForm({ ...form, result: e.target.value })}>
                {Object.entries(resultMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </Select>
            </div>
            <div className="md:col-span-2"><Label>考核评语</Label><Input value={form.summary} onChange={(e) => setForm({ ...form, summary: e.target.value })} /></div>
            <div className="md:col-span-2"><Label>改进计划（不胜任时填写）</Label><Input value={form.improvementPlan} onChange={(e) => setForm({ ...form, improvementPlan: e.target.value })} placeholder="如：调岗至XX岗位，培训XX技能" /></div>
            <div><Label>考核人</Label><Input value={form.reviewer} onChange={(e) => setForm({ ...form, reviewer: e.target.value })} /></div>
            <div className="flex items-center gap-2 pt-6">
              <input type="checkbox" id="perfAck" checked={form.employeeAck} onChange={(e) => setForm({ ...form, employeeAck: e.target.checked })} />
              <label htmlFor="perfAck" className="text-sm">员工已签字确认</label>
            </div>
            {form.employeeAck && <div><Label>确认日期</Label><Input type="date" value={form.ackDate} onChange={(e) => setForm({ ...form, ackDate: e.target.value })} /></div>}
            <div className="md:col-span-2"><Button onClick={() => createMutation.mutate(form)} disabled={createMutation.isPending || !form.period}>{createMutation.isPending ? '保存中...' : '保存'}</Button></div>
          </div>
        </Card>
      )}

      {records?.length === 0 ? (
        <Card><div className="text-center py-8 text-gray-400">暂无绩效记录</div></Card>
      ) : records?.map((r) => (
        <Card key={r.id}>
          <div className="flex justify-between items-start">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{r.period}</span>
                <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-600 text-xs">得分：{r.score}（{r.grade}）</span>
                <span className={`px-2 py-0.5 rounded text-xs ${resultColor[r.result] || 'bg-gray-100'}`}>{resultMap[r.result] || r.result}</span>
              </div>
              {r.summary && <div className="text-sm text-gray-600">{r.summary}</div>}
              {r.improvementPlan && <div className="text-sm text-warning">改进计划：{r.improvementPlan}</div>}
              <div className="flex gap-3 text-xs text-gray-400">
                {r.employeeAck ? <span className="text-safe">✓ 员工已签字（{r.ackDate?.toString().slice(0, 10)}）</span> : <span className="text-warning">⚠ 员工未签字</span>}
                {r.reviewer && <span>考核人：{r.reviewer}</span>}
              </div>
            </div>
            <button onClick={() => deleteMutation.mutate(r.id)} className="text-xs text-gray-400 hover:text-danger">删除</button>
          </div>
        </Card>
      ))}
    </div>
  )
}

// ========== 仲裁证据链 ==========

function EvidenceChain({ employeeId }: { employeeId: string }) {
  const { data, isLoading } = useQuery<any>({
    queryKey: ['evidence-chain', employeeId],
    queryFn: async () => {
      const res = await api.get(`/roster/${employeeId}/evidence-chain`) as any
      return res.data
    },
  })

  if (isLoading) return <div className="text-center py-8 text-gray-400">生成证据链中...</div>
  if (!data) return <div className="text-center py-8 text-gray-400">无数据</div>

  const categoryColor: Record<string, string> = {
    '劳动关系': 'bg-blue-50 text-blue-700 border-blue-200',
    '薪酬发放': 'bg-green-50 text-green-700 border-green-200',
    '考勤记录': 'bg-amber-50 text-amber-700 border-amber-200',
    '违纪处理': 'bg-red-50 text-red-700 border-red-200',
    '培训签收': 'bg-purple-50 text-purple-700 border-purple-200',
    '绩效考核': 'bg-indigo-50 text-indigo-700 border-indigo-200',
    '解聘记录': 'bg-gray-100 text-gray-700 border-gray-300',
  }

  const handleExport = () => {
    const text = generateEvidenceText(data)
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `仲裁证据链_${data.employee.name}_${new Date().toISOString().slice(0, 10)}.txt`
    a.click()
    URL.revokeObjectURL(url)
  }

  return (
    <div className="space-y-4">
      <Card>
        <div className="flex items-center justify-between">
          <div>
            <h2 className="font-medium flex items-center gap-2"><Scale className="w-5 h-5" />仲裁证据链</h2>
            <div className="text-sm text-gray-500 mt-1">
              {data.employee.name} · {data.employee.department} · 入职{data.employee.hireDate}
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-sm text-center">
              <div className="text-gray-500">证据总数</div>
              <div className="text-xl font-bold">{data.summary.total}</div>
            </div>
            <div className="text-sm text-center">
              <div className="text-gray-500">已签字</div>
              <div className="text-xl font-bold text-safe">{data.summary.signed}</div>
            </div>
            <div className="text-sm text-center">
              <div className="text-gray-500">未签字</div>
              <div className="text-xl font-bold text-warning">{data.summary.unsigned}</div>
            </div>
            <Button onClick={handleExport}>导出证据链</Button>
          </div>
        </div>
      </Card>

      <div className="space-y-2">
        {data.evidence.map((e: any, i: number) => (
          <Card key={i}>
            <div className="flex items-start gap-3">
              <span className={`px-2 py-0.5 rounded border text-xs shrink-0 ${categoryColor[e.category] || 'bg-gray-50 text-gray-600 border-gray-200'}`}>
                {e.category}
              </span>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-sm">{e.title}</span>
                  <span className="text-xs text-gray-400">{e.date}</span>
                  {e.acknowledged === true && <span className="text-xs text-safe">✓ 已签字</span>}
                  {e.acknowledged === false && <span className="text-xs text-warning">⚠ 未签字</span>}
                </div>
                <div className="text-sm text-gray-600 mt-1">{e.description}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}

function generateEvidenceText(data: any): string {
  const lines: string[] = []
  lines.push('========================================')
  lines.push('  劳动仲裁证据链')
  lines.push('========================================')
  lines.push('')
  lines.push(`员工姓名：${data.employee.name}`)
  lines.push(`部门：${data.employee.department}`)
  lines.push(`入职日期：${data.employee.hireDate}`)
  lines.push(`状态：${data.employee.status === 'ACTIVE' ? '在职' : '离职'}`)
  lines.push('')
  lines.push(`证据总数：${data.summary.total} 条`)
  lines.push(`已签字：${data.summary.signed} 条`)
  lines.push(`未签字：${data.summary.unsigned} 条`)
  lines.push('')
  lines.push('----------------------------------------')
  lines.push('')

  let currentCategory = ''
  data.evidence.forEach((e: any, i: number) => {
    if (e.category !== currentCategory) {
      currentCategory = e.category
      lines.push(`【${currentCategory}】`)
      lines.push('')
    }
    lines.push(`${i + 1}. ${e.title}（${e.date}）`)
    lines.push(`   ${e.description}`)
    if (e.acknowledged === true) lines.push('   [已签字确认]')
    if (e.acknowledged === false) lines.push('   [未签字]')
    lines.push('')
  })

  lines.push('----------------------------------------')
  lines.push(`导出时间：${new Date().toLocaleString('zh-CN')}`)
  return lines.join('\n')
}