import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { usePageSize } from '../hooks/usePageSize'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import {
  UserPlus, LogIn, FileSignature, Edit, CheckCircle, RefreshCw,
  Repeat, Pause, FileText, XCircle, UserX, FileMinus, Briefcase,
  Loader2, ChevronRight, Trash2, Send, X, Eye, Search, Download, Users,
} from 'lucide-react'
import { workProcessApi, templatesApi, employeeApi } from '../lib/api-services'
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 Pagination from '../components/ui/Pagination'
import PageGuide from '../components/ui/PageGuide'
import QueryError from '../components/ui/QueryError'

const PROCESS_ICONS: Record<string, any> = {
  HIRE: UserPlus, ONBOARD: LogIn, CUSTOM_CONTRACT: FileSignature,
  INFO_SUBMIT: Edit, CONFIRM: CheckCircle, CHANGE: RefreshCw,
  RENEW: Repeat, SUSPEND: Pause, INCOME_CERT: FileText,
  TERMINATE: XCircle, RESCIND: UserX, LEAVING_CERT: FileMinus,
  FLEXIBLE: Briefcase,
}

const PROCESS_TYPES: Record<string, { label: string; description: string }> = {
  HIRE: { label: '员工录用', description: '录用新员工并起草劳动合同' },
  ONBOARD: { label: '员工入职', description: '办理员工入职手续' },
  CUSTOM_CONTRACT: { label: '自定义合同签署', description: '自定义合同内容并签署' },
  INFO_SUBMIT: { label: '员工信息提交', description: '提交员工信息变更' },
  CONFIRM: { label: '员工转正', description: '试用期员工转正' },
  CHANGE: { label: '合同变更', description: '变更合同内容' },
  RENEW: { label: '合同续签', description: '到期合同续签' },
  SUSPEND: { label: '合同中止', description: '中止履行合同' },
  INCOME_CERT: { label: '开具收入证明', description: '为员工开具收入证明' },
  TERMINATE: { label: '合同终止', description: '合同到期终止' },
  RESCIND: { label: '合同解除', description: '协商或单方解除合同' },
  LEAVING_CERT: { label: '开具离职证明', description: '为离职员工开具证明' },
  FLEXIBLE: { label: '灵活用工', description: '灵活用工协议签署' },
}

const STATUS_CONFIG: Record<string, { label: string; color: string }> = {
  DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-600' },
  PENDING_APPROVAL: { label: '待审批', color: 'bg-amber-50 text-amber-700' },
  APPROVED: { label: '已审批', color: 'bg-blue-50 text-blue-700' },
  REJECTED: { label: '已驳回', color: 'bg-red-50 text-red-700' },
  EXECUTING: { label: '执行中', color: 'bg-purple-50 text-purple-700' },
  COMPLETED: { label: '已完成', color: 'bg-green-50 text-safe' },
  CANCELLED: { label: '已撤销', color: 'bg-gray-100 text-gray-400' },
}

// 各流程类型的表单字段配置
const FORM_FIELDS: Record<string, { key: string; label: string; type: 'text' | 'date' | 'number' | 'select' | 'textarea' | 'enterprise-template' | 'employee-select' | 'contract-select'; options?: string[] }[]> = {
  HIRE: [
    { key: 'name', label: '员工姓名', type: 'text' },
    { key: 'department', label: '部门', type: 'text' },
    { key: 'hireDate', label: '入职日期', type: 'date' },
    { key: 'monthlySalary', label: '月薪', type: 'number' },
    { key: 'phone', label: '手机号', type: 'text' },
    { key: 'idCardNumber', label: '身份证号', type: 'text' },
    { key: 'gender', label: '性别', type: 'select', options: ['男', '女'] },
    { key: 'contractStartDate', label: '合同开始日期', type: 'date' },
    { key: 'contractEndDate', label: '合同结束日期', type: 'date' },
  ],
  ONBOARD: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'hireDate', label: '入职日期', type: 'date' },
  ],
  CUSTOM_CONTRACT: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'contractStartDate', label: '合同开始日期', type: 'date' },
    { key: 'contractEndDate', label: '合同结束日期', type: 'date' },
    { key: 'contractType', label: '合同类型', type: 'select', options: ['FIXED', 'UNFIXED', 'INTERNSHIP'] },
  ],
  INFO_SUBMIT: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'department', label: '部门', type: 'text' },
    { key: 'phone', label: '手机号', type: 'text' },
    { key: 'address', label: '地址', type: 'text' },
    { key: 'emergencyContact', label: '紧急联系人', type: 'text' },
    { key: 'emergencyPhone', label: '紧急联系电话', type: 'text' },
  ],
  CONFIRM: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'confirmDate', label: '转正日期', type: 'date' },
    { key: 'regularSalary', label: '转正薪资', type: 'number' },
  ],
  CHANGE: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'contractId', label: '选择合同', type: 'contract-select' },
    { key: 'newEndDate', label: '新到期日期', type: 'date' },
  ],
  RENEW: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'oldContractId', label: '原合同ID', type: 'text' },
    { key: 'newStartDate', label: '新合同开始日期', type: 'date' },
    { key: 'newEndDate', label: '新合同结束日期', type: 'date' },
    { key: 'newSalary', label: '新薪资', type: 'number' },
  ],
  SUSPEND: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'contractId', label: '选择合同', type: 'contract-select' },
    { key: 'suspendDate', label: '中止日期', type: 'date' },
  ],
  INCOME_CERT: [
    { key: 'enterpriseTemplateId', label: '关联企业模板（选填）', type: 'enterprise-template' },
    { key: 'employeeName', label: '员工姓名', type: 'text' },
    { key: 'idCardNumber', label: '身份证号', type: 'text' },
    { key: 'position', label: '职务', type: 'text' },
    { key: 'monthlyIncome', label: '月收入', type: 'text' },
    { key: 'purpose', label: '用途', type: 'text' },
  ],
  TERMINATE: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'contractId', label: '合同ID', type: 'text' },
    { key: 'terminateDate', label: '终止日期', type: 'date' },
    { key: 'reason', label: '终止原因', type: 'select', options: ['EXPIRED', 'NEGOTIATED', 'FAULT', 'NONFAULT', 'LAYOFF'] },
    { key: 'compensation', label: '经济补偿金', type: 'number' },
  ],
  RESCIND: [
    { key: 'employeeId', label: '选择员工', type: 'employee-select' },
    { key: 'contractId', label: '合同ID', type: 'text' },
    { key: 'rescindDate', label: '解除日期', type: 'date' },
    { key: 'reason', label: '解除原因', type: 'select', options: ['NEGOTIATED', 'FAULT', 'NONFAULT', 'LAYOFF'] },
    { key: 'compensation', label: '经济补偿金', type: 'number' },
  ],
  LEAVING_CERT: [
    { key: 'enterpriseTemplateId', label: '关联企业模板（选填）', type: 'enterprise-template' },
    { key: 'employeeName', label: '员工姓名', type: 'text' },
    { key: 'idCardNumber', label: '身份证号', type: 'text' },
    { key: 'position', label: '职务', type: 'text' },
    { key: 'hireDate', label: '入职日期', type: 'date' },
    { key: 'leaveDate', label: '离职日期', type: 'date' },
  ],
  FLEXIBLE: [
    { key: 'name', label: '姓名', type: 'text' },
    { key: 'phone', label: '手机号', type: 'text' },
    { key: 'idCardNumber', label: '身份证号', type: 'text' },
    { key: 'department', label: '部门', type: 'text' },
    { key: 'agreementStartDate', label: '协议开始日期', type: 'date' },
    { key: 'agreementEndDate', label: '协议结束日期', type: 'date' },
    { key: 'payMethod', label: '计酬方式', type: 'text' },
  ],
}

// 字段 key → 中文 label 映射（用于展示已保存的表单数据）
const FIELD_LABEL_MAP: Record<string, string> = Object.values(FORM_FIELDS).flat().reduce((acc, f) => {
  acc[f.key] = f.label
  return acc
}, {} as Record<string, string>)

export default function WorkProcess() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const [showCreate, setShowCreate] = useState(false)
  const [selectedType, setSelectedType] = useState<string>('')
  const [formData, setFormData] = useState<Record<string, any>>({})
  const [filterType, setFilterType] = useState('')
  const [filterStatus, setFilterStatus] = useState('')
  const [detailId, setDetailId] = useState<string | null>(null)
  const [previewContent, setPreviewContent] = useState<string | null>(null)
  const [showBatch, setShowBatch] = useState(false)
  const [batchType, setBatchType] = useState<string>('INCOME_CERT')
  const [batchEmployees, setBatchEmployees] = useState<string[]>([])
  const [batchSearch, setBatchSearch] = useState('')
  const pageSize = usePageSize()
  const [page, setPage] = useState(1)

  const { data: listData, isLoading, isError, error, refetch } = useQuery({
    queryKey: ['work-processes', filterType, filterStatus, page, pageSize],
    queryFn: async () => {
      const params: any = { page, pageSize }
      if (filterType) params.type = filterType
      if (filterStatus) params.status = filterStatus
      return await workProcessApi.list({ page, pageSize, type: filterType || undefined, status: filterStatus || undefined } as any)
    },
  })

  const createMutation = useMutation({
    mutationFn: async (data: any) => {
      return await workProcessApi.create(data)
    },
    onSuccess: () => {
      toast.success('已创建草稿，可在列表中查看详情并提交', {
        action: { label: '去提交', onClick: () => {} },
      })
      queryClient.invalidateQueries({ queryKey: ['work-processes'] })
      setShowCreate(false)
      setFormData({})
      setSelectedType('')
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '创建失败'),
  })

  const submitMutation = useMutation({
    mutationFn: async (id: string) => {
      return await workProcessApi.submit(id)
    },
    onSuccess: () => {
      toast.success('已提交并执行', {
        action: { label: '查看文书', onClick: () => navigate('/evidence') },
      })
      toast.info('文书已生成，可在「证据管理」中查看和下载', { duration: 5000 })
      queryClient.invalidateQueries({ queryKey: ['work-processes'] })
      setDetailId(null)
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '提交失败'),
  })

  const cancelMutation = useMutation({
    mutationFn: async (id: string) => {
      return await workProcessApi.cancel(id)
    },
    onSuccess: () => {
      toast.success('已撤销')
      queryClient.invalidateQueries({ queryKey: ['work-processes'] })
      setDetailId(null)
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '撤销失败'),
  })

  const deleteMutation = useMutation({
    mutationFn: async (id: string) => {
      await workProcessApi.remove(id)
    },
    onSuccess: () => {
      toast.success('已删除')
      queryClient.invalidateQueries({ queryKey: ['work-processes'] })
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '删除失败'),
  })

  const previewMutation = useMutation({
    mutationFn: async (id: string) => {
      return await workProcessApi.preview(id)
    },
    onSuccess: (data) => {
      setPreviewContent(data.content)
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '预览失败'),
  })

  const handleCreate = () => {
    if (!selectedType) {
      toast.error('请选择流程类型')
      return
    }
    createMutation.mutate({
      type: selectedType,
      title: PROCESS_TYPES[selectedType].label,
      employeeId: formData.employeeId || undefined,
      formData,
      status: 'DRAFT',
    })
  }

  const handleCreateAndSubmit = () => {
    if (!selectedType) {
      toast.error('请选择流程类型')
      return
    }
    createMutation.mutate(
      { type: selectedType, title: PROCESS_TYPES[selectedType].label, employeeId: formData.employeeId || undefined, formData, status: 'DRAFT' },
      {
        onSuccess: (data: any) => {
          const newId = data?.id
          if (newId) {
            submitMutation.mutate(newId)
          } else {
            toast.success('草稿已创建，请手动提交')
            queryClient.invalidateQueries({ queryKey: ['work-processes'] })
          }
          setShowCreate(false)
          setFormData({})
          setSelectedType('')
        },
      }
    )
  }

  const handleFieldChange = (key: string, value: any) => {
    setFormData(prev => ({ ...prev, [key]: value }))
  }

  const handleBatchSubmit = () => {
    if (batchEmployees.length === 0) {
      toast.error('请至少选择一名员工')
      return
    }
    let success = 0
    let failed = 0
    Promise.all(
      batchEmployees.map(async (empId) => {
        try {
          const emp = allEmployees.find((e: any) => e.id === empId)
          if (!emp) return
          const data: any = {
            type: batchType,
            title: PROCESS_TYPES[batchType].label,
            employeeId: empId,
            formData: {
              employeeName: emp.name,
              idCardNumber: emp.idCardNumber || '',
              position: emp.position || '',
            },
            status: 'DRAFT',
          }
          const res: any = await workProcessApi.create(data)
          if (res?.id) {
            await workProcessApi.submit(res.id)
            success++
          }
        } catch {
          failed++
        }
      })
    ).then(() => {
      toast.success(`批量开具完成：成功 ${success} 个${failed > 0 ? '，失败 ' + failed + ' 个' : ''}`)
      queryClient.invalidateQueries({ queryKey: ['work-processes'] })
      setShowBatch(false)
      setBatchEmployees([])
      setBatchSearch('')
    })
  }

  const { data: allEmployees = [] } = useQuery<any[]>({
    queryKey: ['employee-list-batch'],
    queryFn: async () => {
      return await employeeApi.allLite()
    },
  })

  const filteredEmployees = allEmployees.filter((e: any) => {
    if (!batchSearch) return true
    return e.name.includes(batchSearch) || (e.department || '').includes(batchSearch)
  })

  const items = listData?.items || []
  const total = listData?.total || 0

  return (
    <div className="space-y-4">
      <PageGuide>
        用工办理用于管理员工入职、转正、调岗、离职等全生命周期手续。选择办理类型后填写相关信息并提交，系统自动生成对应文书并更新员工档案。支持批量办理和流程跟踪。关联：入职登记后请前往「花名册」查看档案；离职办理后请前往「离职管理」计算补偿。
      </PageGuide>
      {/* 发起办理 */}
      <Card>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-sm font-medium">用工办理</h2>
          <Button size="sm" onClick={() => setShowCreate(true)}>
            <UserPlus className="w-4 h-4 mr-1" />发起办理
          </Button>
          <Button size="sm" variant="secondary" onClick={() => setShowBatch(true)}>
            <Users className="w-4 h-4 mr-1" />批量开具证明
          </Button>
        </div>

        {/* 13类流程卡片 */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2">
          {Object.entries(PROCESS_TYPES).map(([key, config]) => {
            const Icon = PROCESS_ICONS[key] || FileText
            return (
              <button
                key={key}
                onClick={() => {
                  setSelectedType(key)
                  setShowCreate(true)
                  setFormData({})
                }}
                className="flex items-start gap-2 p-3 rounded-md border border-gray-200 hover:border-primary hover:bg-primary/5 transition-colors text-left"
              >
                <Icon className="w-4 h-4 text-primary mt-0.5 shrink-0" />
                <div className="min-w-0">
                  <div className="text-xs font-medium text-gray-900">{config.label}</div>
                  <div className="text-[10px] text-gray-500 truncate">{config.description}</div>
                </div>
              </button>
            )
          })}
        </div>
      </Card>

      {/* 办理记录 */}
      <Card>
        <div className="flex items-center gap-3 mb-4">
          <h3 className="text-sm font-medium">办理记录</h3>
          <Select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="w-32">
            <option value="">全部类型</option>
            {Object.entries(PROCESS_TYPES).map(([key, config]) => (
              <option key={key} value={key}>{config.label}</option>
            ))}
          </Select>
          <Select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="w-32">
            <option value="">全部状态</option>
            {Object.entries(STATUS_CONFIG).map(([key, config]) => (
              <option key={key} value={key}>{config.label}</option>
            ))}
          </Select>
        </div>

        {isLoading ? (
          <div className="flex items-center justify-center py-8"><Loader2 className="w-5 h-5 animate-spin text-gray-400" /></div>
        ) : isError ? (
          <QueryError error={error} onRetry={refetch} />
        ) : items.length === 0 ? (
          <div className="text-center py-8 text-sm text-gray-400">暂无办理记录</div>
        ) : (
          <div className="space-y-2">
            {items.map((item: any) => {
              const Icon = PROCESS_ICONS[item.type] || FileText
              const statusCfg = STATUS_CONFIG[item.status] || STATUS_CONFIG.DRAFT
              return (
                <div
                  key={item.id}
                  className="flex items-center gap-3 p-3 rounded-md border border-gray-200 hover:bg-gray-50 cursor-pointer"
                  onClick={() => setDetailId(item.id)}
                >
                  <Icon className="w-4 h-4 text-gray-400 shrink-0" />
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium text-gray-900">{item.title}</span>
                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${statusCfg.color}`}>{statusCfg.label}</span>
                    </div>
                    <div className="text-xs text-gray-500">
                      {item.employee ? `${item.employee.name} · ${item.employee.department}` : (item.formData?.employeeName || item.formData?.name || '未关联员工')}
                      {' · '}{new Date(item.createdAt).toLocaleDateString('zh-CN')}
                    </div>
                  </div>
                  {(item.status === 'COMPLETED' || item.status === 'EXECUTING') && item.documents && item.documents.length > 0 && (
                    <button
                      className="text-xs text-primary hover:underline shrink-0 flex items-center gap-0.5"
                      onClick={(e) => { e.stopPropagation(); setDetailId(item.id) }}
                    >
                      <Eye className="w-3.5 h-3.5" />查看文书
                    </button>
                  )}
                  <ChevronRight className="w-4 h-4 text-gray-300" />
                </div>
              )
            })}
          </div>
        )}
        <Pagination
          page={page}
          pageSize={pageSize}
          total={total}
          onPageChange={setPage}
          onPageSizeChange={() => setPage(1)}
        />
      </Card>

      {/* 创建/编辑弹窗 */}
      <Modal open={showCreate} onClose={() => { setShowCreate(false); setFormData({}); setSelectedType('') }} title={selectedType ? `发起：${PROCESS_TYPES[selectedType]?.label}` : '发起办理'} size="lg">
        {!selectedType ? (
          <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
            {Object.entries(PROCESS_TYPES).map(([key, config]) => {
              const Icon = PROCESS_ICONS[key] || FileText
              return (
                <button
                  key={key}
                  onClick={() => setSelectedType(key)}
                  className="flex items-start gap-2 p-3 rounded-md border border-gray-200 hover:border-primary hover:bg-primary/5 transition-colors text-left"
                >
                  <Icon className="w-4 h-4 text-primary mt-0.5 shrink-0" />
                  <div>
                    <div className="text-xs font-medium">{config.label}</div>
                    <div className="text-[10px] text-gray-500">{config.description}</div>
                  </div>
                </button>
              )
            })}
          </div>
        ) : (
          <div className="space-y-3">
            <div className="text-xs text-gray-500 mb-2">{PROCESS_TYPES[selectedType]?.description}</div>
            {(FORM_FIELDS[selectedType] || []).map(field => (
              <div key={field.key}>
                <Label>{field.label}</Label>
                {field.type === 'select' ? (
                  <Select value={formData[field.key] || ''} onChange={(e) => handleFieldChange(field.key, e.target.value)}>
                    <option value="">请选择</option>
                    {field.options?.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                  </Select>
                ) : field.type === 'textarea' ? (
                  <textarea
                    className="w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary text-sm min-h-[80px]"
                    value={formData[field.key] || ''}
                    onChange={(e) => handleFieldChange(field.key, e.target.value)}
                  />
                ) : field.type === 'enterprise-template' ? (
                  <EnterpriseTemplateSelect value={formData[field.key] || ''} onChange={(v) => handleFieldChange(field.key, v)} />
                ) : field.type === 'employee-select' ? (
                  <EmployeeSelect value={formData[field.key] || ''} onChange={(v) => handleFieldChange(field.key, v)} />
                ) : field.type === 'contract-select' ? (
                  <ContractSelect value={formData[field.key] || ''} onChange={(v) => handleFieldChange(field.key, v)} employeeId={formData['employeeId'] || ''} />
                ) : (
                  <Input
                    type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
                    value={formData[field.key] || ''}
                    onChange={(e) => handleFieldChange(field.key, e.target.value)}
                  />
                )}
              </div>
            ))}
            <div className="flex items-center gap-2 pt-2">
              <Button onClick={handleCreate} disabled={createMutation.isPending}>
                {createMutation.isPending ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : null}
                存草稿
              </Button>
              <Button onClick={handleCreateAndSubmit} disabled={createMutation.isPending || submitMutation.isPending}>
                {(createMutation.isPending || submitMutation.isPending) ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Send className="w-4 h-4 mr-1" />}
                直接提交
              </Button>
              <Button variant="secondary" onClick={() => { setSelectedType(''); setFormData({}) }}>
                返回选择
              </Button>
            </div>
          </div>
        )}
      </Modal>

      {/* 详情弹窗 */}
      <Modal open={!!detailId} onClose={() => { setDetailId(null); setPreviewContent(null) }} title="办理详情" size="lg">
        <DetailContent
          id={detailId}
          previewContent={previewContent}
          onPreview={(id) => previewMutation.mutate(id)}
          onSubmit={(id) => submitMutation.mutate(id)}
          onCancel={(id) => cancelMutation.mutate(id)}
          onDelete={(id) => deleteMutation.mutate(id)}
          loading={submitMutation.isPending || cancelMutation.isPending}
        />
      </Modal>

      {/* 批量开具证明弹窗 */}
      <Modal open={showBatch} onClose={() => { setShowBatch(false); setBatchEmployees([]); setBatchSearch('') }} title="批量开具证明" size="lg">
        <div className="space-y-4">
          <div>
            <Label>证明类型</Label>
            <Select value={batchType} onChange={(e) => setBatchType(e.target.value)}>
              <option value="INCOME_CERT">收入证明</option>
              <option value="LEAVING_CERT">离职证明</option>
            </Select>
          </div>
          <div>
            <Label>选择员工（已选 {batchEmployees.length} 人）</Label>
            <div className="relative mb-2">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                value={batchSearch}
                onChange={(e) => setBatchSearch(e.target.value)}
                placeholder="搜索姓名或部门..."
                className="pl-9"
              />
            </div>
            <div className="max-h-[300px] overflow-y-auto border rounded-md">
              {filteredEmployees.map((emp: any) => (
                <label
                  key={emp.id}
                  className="flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer border-b last:border-0"
                >
                  <input
                    type="checkbox"
                    checked={batchEmployees.includes(emp.id)}
                    onChange={() => {
                      setBatchEmployees(prev =>
                        prev.includes(emp.id) ? prev.filter(id => id !== emp.id) : [...prev, emp.id]
                      )
                    }}
                  />
                  <span className="text-sm flex-1">{emp.name}</span>
                  <span className="text-xs text-gray-400">{emp.department || '—'}</span>
                </label>
              ))}
              {filteredEmployees.length === 0 && (
                <div className="text-center py-4 text-xs text-gray-400">未找到匹配员工</div>
              )}
            </div>
          </div>
          <div className="flex justify-end gap-2 pt-2 border-t">
            <Button variant="secondary" size="sm" onClick={() => { setShowBatch(false); setBatchEmployees([]); setBatchSearch('') }}>取消</Button>
            <Button size="sm" onClick={handleBatchSubmit} disabled={batchEmployees.length === 0}>
              <Send className="w-4 h-4 mr-1" />
              批量提交（{batchEmployees.length}人）
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}

function DetailContent({ id, previewContent, onPreview, onSubmit, onCancel, onDelete, loading }: {
  id: string | null
  previewContent: string | null
  onPreview: (id: string) => void
  onSubmit: (id: string) => void
  onCancel: (id: string) => void
  onDelete: (id: string) => void
  loading: boolean
}) {
  const { data, isLoading } = useQuery({
    queryKey: ['work-process', id],
    queryFn: async () => {
      return await workProcessApi.detail(id!)
    },
    enabled: !!id,
  })

  if (isLoading || !data) return <div className="flex items-center justify-center py-8"><Loader2 className="w-5 h-5 animate-spin text-gray-400" /></div>

  const statusCfg = STATUS_CONFIG[data.status] || STATUS_CONFIG.DRAFT
  const Icon = PROCESS_ICONS[data.type] || FileText

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <Icon className="w-5 h-5 text-primary" />
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <span className="font-medium">{data.title}</span>
            <span className={`text-[10px] px-1.5 py-0.5 rounded ${statusCfg.color}`}>{statusCfg.label}</span>
          </div>
          <div className="text-xs text-gray-500">
            {PROCESS_TYPES[data.type]?.label} · {data.employee ? `${data.employee.name}（${data.employee.department}）` : (data.formData?.employeeName || data.formData?.name || '未关联员工')}
          </div>
        </div>
      </div>

      {/* 表单数据 */}
      <div>
        <h4 className="text-xs font-medium text-gray-700 mb-2">表单信息</h4>
        <div className="bg-gray-50 rounded-md p-3 space-y-1">
          {Object.entries(data.formData || {}).map(([key, value]: [string, any]) => (
            <div key={key} className="flex text-xs">
              <span className="text-gray-500 w-28 shrink-0">{FIELD_LABEL_MAP[key] || key}</span>
              <span className="text-gray-900">{key === 'enterpriseTemplateId' && value ? `已关联企业模板` : (value ? String(value) : '-')}</span>
            </div>
          ))}
          {Object.keys(data.formData || {}).length === 0 && <span className="text-xs text-gray-400">无表单数据</span>}
        </div>
      </div>

      {/* 文书预览 */}
      {previewContent && (
        <div>
          <h4 className="text-xs font-medium text-gray-700 mb-2">文书预览</h4>
          <pre className="bg-gray-50 rounded-md p-3 text-xs whitespace-pre-wrap max-h-[300px] overflow-y-auto">{previewContent}</pre>
        </div>
      )}

      {/* 生成的文书 */}
      {data.documents && data.documents.length > 0 && (
        <div>
          <h4 className="text-xs font-medium text-gray-700 mb-2">已生成文书</h4>
          <div className="space-y-2">
            {data.documents.map((doc: any, i: number) => (
              <div key={i} className="flex items-center gap-2 text-xs bg-gray-50 rounded-md p-2">
                <FileText className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                <span className="flex-1 truncate">{doc.name}</span>
                <button
                  type="button"
                  className="text-primary hover:underline shrink-0"
                  onClick={() => onPreview(data.id)}
                >
                  <Eye className="w-3.5 h-3.5 inline mr-0.5" />查看
                </button>
                <button
                  type="button"
                  className="text-primary hover:underline shrink-0"
                  onClick={() => {
                    const content = previewContent || ''
                    if (!content) {
                      onPreview(data.id)
                      return
                    }
                    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
                    const url = URL.createObjectURL(blob)
                    const a = document.createElement('a')
                    a.href = url
                    a.download = `${doc.name}.txt`
                    a.click()
                    URL.revokeObjectURL(url)
                  }}
                >
                  <Download className="w-3.5 h-3.5 inline mr-0.5" />下载
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 操作按钮 */}
      <div className="flex items-center gap-2 pt-2 border-t">
        {data.status === 'DRAFT' && (
          <>
            <Button size="sm" onClick={() => onPreview(data.id)} variant="secondary">
              <Eye className="w-4 h-4 mr-1" />预览文书
            </Button>
            <Button size="sm" onClick={() => onSubmit(data.id)} disabled={loading}>
              {loading ? <Loader2 className="w-4 h-4 animate-spin mr-1" /> : <Send className="w-4 h-4 mr-1" />}
              提交办理
            </Button>
            <Button size="sm" variant="danger" onClick={() => onDelete(data.id)}>
              <Trash2 className="w-4 h-4 mr-1" />删除
            </Button>
          </>
        )}
        {!['COMPLETED', 'CANCELLED'].includes(data.status) && data.status !== 'DRAFT' && (
          <Button size="sm" variant="secondary" onClick={() => onCancel(data.id)} disabled={loading}>
            <X className="w-4 h-4 mr-1" />撤销
          </Button>
        )}
      </div>
    </div>
  )
}

function EnterpriseTemplateSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const { data, isLoading } = useQuery<any>({
    queryKey: ['enterprise-templates-for-cert'],
    queryFn: async () => {
      const res = await templatesApi.enterpriseList({ pageSize: 100 } as any)
      return res
    },
  })
  const items = data?.items || []
  return (
    <div>
      <Select value={value} onChange={(e) => onChange(e.target.value)} disabled={isLoading}>
        <option value="">{isLoading ? '加载中...' : '使用系统默认模板'}</option>
        {items.map((t: any) => (
          <option key={t.id} value={t.id}>{t.name}</option>
        ))}
      </Select>
      {items.length === 0 && !isLoading && (
        <p className="text-xs text-gray-400 mt-1">暂无企业模板，可前往「模板库」→「企业文本库」创建</p>
      )}
    </div>
  )
}

function EmployeeSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const [search, setSearch] = useState('')
  const [open, setOpen] = useState(false)
  const { data: employees = [], isLoading } = useQuery<any[]>({
    queryKey: ['employee-list-for-select'],
    queryFn: async () => {
      return await employeeApi.allLite()
    },
  })
  const filtered = employees.filter((e: any) => {
    if (!search) return true
    return e.name.includes(search) || (e.department || '').includes(search) || (e.phone || '').includes(search)
  })
  const selected = employees.find((e: any) => e.id === value)
  return (
    <div className="relative">
      <div
        className="w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary text-sm cursor-pointer flex items-center justify-between"
        onClick={() => setOpen(!open)}
      >
        {selected ? (
          <span>{selected.name} · {selected.department || '未分配部门'}</span>
        ) : (
          <span className="text-gray-400">{isLoading ? '加载中...' : '点击选择员工'}</span>
        )}
        <Search className="w-3.5 h-3.5 text-gray-400" />
      </div>
      {open && (
        <div className="absolute z-50 mt-1 w-full bg-white rounded-md border border-gray-200 shadow-lg max-h-[240px] overflow-hidden">
          <div className="p-2 border-b border-gray-100">
            <input
              type="text"
              autoFocus
              placeholder="搜索姓名/部门/手机号"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-primary"
              onClick={(e) => e.stopPropagation()}
            />
          </div>
          <div className="overflow-y-auto max-h-[180px]">
            {filtered.length === 0 ? (
              <div className="px-3 py-4 text-center text-xs text-gray-400">未找到匹配员工</div>
            ) : (
              filtered.map((e: any) => (
                <div
                  key={e.id}
                  className="px-3 py-2 text-sm hover:bg-primary/5 cursor-pointer flex items-center justify-between"
                  onClick={() => {
                    onChange(e.id)
                    setOpen(false)
                    setSearch('')
                  }}
                >
                  <span>{e.name}</span>
                  <span className="text-xs text-gray-400">{e.department || ''}</span>
                </div>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  )
}

function ContractSelect({ value, onChange, employeeId }: { value: string; onChange: (v: string) => void; employeeId: string }) {
  const { data: contracts = [], isLoading } = useQuery<any[]>({
    queryKey: ['employee-contracts', employeeId],
    queryFn: async () => {
      if (!employeeId) return []
      const res = await employeeApi.detail(employeeId)
      return res?.contracts || []
    },
    enabled: !!employeeId,
  })
  const activeContracts = contracts.filter((c: any) => c.status === 'ACTIVE' || c.status === 'SUSPENDED')
  return (
    <Select value={value} onChange={(e) => onChange(e.target.value)} disabled={!employeeId}>
      <option value="">{!employeeId ? '请先选择员工' : isLoading ? '加载中...' : activeContracts.length === 0 ? '无可用合同' : '请选择合同'}</option>
      {activeContracts.map((c: any) => (
        <option key={c.id} value={c.id}>
          {c.contractType === 'UNFIXED' ? '无固定期限' : `${c.startDate?.slice(0, 10)} ~ ${c.endDate?.slice(0, 10)}`}{c.status === 'SUSPENDED' ? '（已中止）' : ''}
        </option>
      ))}
    </Select>
  )
}
