import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Plus, Search, Paperclip, Trash2, X, FileText, Download, Eye } from 'lucide-react'
import { toast } from 'sonner'
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 EmptyState from '../components/ui/EmptyState'
import Pagination from '../components/ui/Pagination'

interface EmployeeItem {
  id: string
  name: string
  department: string
  hireDate: string
  status: string
  contractStatus: string
  contractStatusText: string
  riskLevel: 'high' | 'medium' | 'low' | 'safe'
  isPregnant: boolean
  isInMedicalPeriod: boolean
  isWorkInjured: boolean
}

interface EmployeeListResponse {
  items: EmployeeItem[]
  total: number
  page: number
  pageSize: number
  totalPages: number
}

export default function Contracts() {
  const queryClient = useQueryClient()
  const [search, setSearch] = useState('')
  const [filterDepartment, setFilterDepartment] = useState('')
  const [filterContractStatus, setFilterContractStatus] = useState('')
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [showAddModal, setShowAddModal] = useState(false)
  const [selectedEmpId, setSelectedEmpId] = useState<string | null>(null)

  const { data, isLoading } = useQuery<EmployeeListResponse>({
    queryKey: ['employees', search, filterDepartment, filterContractStatus, page, pageSize],
    queryFn: async () => {
      const params: any = { search, page, pageSize }
      if (filterDepartment) params.department = filterDepartment
      if (filterContractStatus) params.contractStatus = filterContractStatus
      const res = await api.get('/roster', { params }) as any
      return res
    },
  })

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

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

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <FileText className="h-5 w-5 text-primary" />
          <div>
            <h1 className="text-base font-semibold">合同管理</h1>
            <p className="mt-1 text-sm text-gray-500">集中管理劳动合同、签署状态及到期风险</p>
          </div>
        </div>
        <Button onClick={() => setShowAddModal(true)}>
          <Plus className="w-4 h-4 mr-1" /> 添加员工
        </Button>
      </div>

      {/* 搜索栏 */}
      <div className="flex gap-2 flex-wrap">
        <div className="relative flex-1 min-w-[200px]">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            placeholder="搜索员工姓名或手机号"
            value={search}
            onChange={(e) => { setSearch(e.target.value); setPage(1) }}
            className="pl-9"
          />
        </div>
        <select
          value={filterDepartment}
          onChange={(e) => { setFilterDepartment(e.target.value); setPage(1) }}
          className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
        >
          <option value="">全部部门</option>
          {departmentList?.map((d: string) => <option key={d} value={d}>{d}</option>)}
        </select>
        <select
          value={filterContractStatus}
          onChange={(e) => { setFilterContractStatus(e.target.value); setPage(1) }}
          className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
        >
          <option value="">全部合同</option>
          <option value="active">正常</option>
          <option value="expiring">即将到期</option>
          <option value="expired">已到期</option>
          <option value="unsigned">未签合同</option>
          <option value="unsigned_over_30">未签合同(超30天)</option>
          <option value="unsigned_over_year">未签合同(已满一年)</option>
        </select>
        {(search || filterDepartment || filterContractStatus) && (
          <button onClick={() => { setSearch(''); setFilterDepartment(''); setFilterContractStatus(''); setPage(1) }} className="text-xs text-gray-500 hover:text-primary">清除筛选</button>
        )}
      </div>

      {/* 员工列表 */}
      <Card>
        {isLoading ? (
          <div className="text-center py-8 text-gray-400">加载中...</div>
        ) : !data || data.items.length === 0 ? (
          <EmptyState
            title="暂无员工"
            description="点击「添加员工」开始管理合同"
            actionLabel="添加员工"
            onAction={() => setShowAddModal(true)}
          />
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b text-left text-xs text-gray-500">
                    <th className="py-2 px-3 font-medium">姓名</th>
                    <th className="py-2 px-3 font-medium">部门</th>
                    <th className="py-2 px-3 font-medium">入职日期</th>
                    <th className="py-2 px-3 font-medium">合同状态</th>
                    <th className="py-2 px-3 font-medium">特殊状态</th>
                  </tr>
                </thead>
                <tbody>
                  {data.items.map((emp) => (
                    <tr key={emp.id} className="border-b last:border-0 hover:bg-gray-50 cursor-pointer" onClick={() => setSelectedEmpId(emp.id)}>
                      <td className="py-3 px-3 font-medium">{emp.name}</td>
                      <td className="py-3 px-3 text-gray-600">{emp.department}</td>
                      <td className="py-3 px-3 text-gray-600">{emp.hireDate}</td>
                      <td className="py-3 px-3">
                        {(() => {
                          const tagStyles: Record<string, string> = {
                            expired: 'bg-red-50 text-danger',
                            unsigned_over_year: 'bg-red-50 text-danger',
                            unsigned_over_30: 'bg-red-50 text-danger',
                            unsigned: 'bg-yellow-50 text-yellow-700',
                            expiring: 'bg-yellow-50 text-yellow-700',
                            active: 'bg-green-50 text-safe',
                            unfixed: 'bg-blue-50 text-blue-700',
                          }
                          const style = tagStyles[emp.contractStatus] || 'bg-gray-100 text-gray-600'
                          return <span className={`px-2 py-0.5 rounded text-xs ${style}`}>{emp.contractStatusText}</span>
                        })()}
                      </td>
                      <td className="py-3 px-3">
                        <div className="flex gap-1">
                          {emp.isPregnant && <span className="text-xs px-1.5 py-0.5 rounded bg-pink-50 text-pink-600">孕期</span>}
                          {emp.isInMedicalPeriod && <span className="text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-600">医疗期</span>}
                          {emp.isWorkInjured && <span className="text-xs px-1.5 py-0.5 rounded bg-red-50 text-red-600">工伤</span>}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* 分页 */}
            <Pagination
              page={page}
              pageSize={pageSize}
              total={data.total}
              onPageChange={setPage}
              onPageSizeChange={(s) => { setPageSize(s); setPage(1) }}
            />
          </>
        )}
      </Card>

      {/* 添加员工 Modal */}
      <AddEmployeeModal
        open={showAddModal}
        onClose={() => setShowAddModal(false)}
        onSubmit={(data) => addMutation.mutate(data)}
        loading={addMutation.isPending}
        error={addMutation.error as any}
      />

      {/* 员工详情抽屉 */}
      {selectedEmpId && (
        <EmployeeDetailDrawer employeeId={selectedEmpId} onClose={() => setSelectedEmpId(null)} />
      )}
    </div>
  )
}

function AddEmployeeModal({ open, onClose, onSubmit, loading, error }: {
  open: boolean
  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={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-xs">
            {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-xs">
            <input type="checkbox" checked={form.isPregnant} onChange={(e) => setForm({ ...form, isPregnant: e.target.checked })} />
            孕期/哺乳期
          </label>
          <label className="flex items-center gap-1.5 text-xs">
            <input type="checkbox" checked={form.isInMedicalPeriod} onChange={(e) => setForm({ ...form, isInMedicalPeriod: e.target.checked })} />
            医疗期
          </label>
          <label className="flex items-center gap-1.5 text-xs">
            <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-1 sm: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 EmployeeDetailDrawer({ employeeId, onClose }: { employeeId: string; onClose: () => void }) {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [fileType, setFileType] = useState<'ID_CARD' | 'BANK_CARD' | 'CONTRACT_SCAN' | 'EDUCATION' | 'OTHER'>('ID_CARD')
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)

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

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

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

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

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

    const allowedExts = ['.pdf', '.jpg', '.jpeg', '.png', '.heic', '.gif', '.bmp', '.webp', '.doc', '.docx', '.xls', '.xlsx', '.tiff', '.tif']
    const maxSize = 10 * 1024 * 1024

    for (const file of Array.from(files)) {
      const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'))
      if (!allowedExts.includes(ext)) {
        toast.error(`不支持的文件格式: ${file.name}`)
        continue
      }
      if (file.size > maxSize) {
        toast.error(`文件过大: ${file.name}（最大 10MB）`)
        continue
      }
      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)
    }
    e.target.value = ''
  }

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

  const emp = employee?.data || employee

  return (
    <div className="fixed inset-0 z-50 flex justify-end">
      <button className="fixed inset-0 bg-black/40 cursor-default" onClick={onClose} aria-label="关闭" />
      <div className="relative w-full max-w-2xl bg-white h-full overflow-y-auto shadow-xl">
        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 sticky top-0 bg-white z-10">
          <h3 className="font-medium text-gray-900">员工详情</h3>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700" aria-label="关闭">
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="p-5 space-y-4">
          {emp && (
            <>
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <h2 className="text-sm font-medium">{emp.name}</h2>
                  <span className="text-xs text-gray-500">{emp.department}</span>
                </div>
                <div className="grid grid-cols-2 gap-2 text-xs">
                  <div><span className="text-gray-400">入职日期：</span>{emp.hireDate?.slice(0, 10)}</div>
                  <div><span className="text-gray-400">性别：</span>{emp.gender || '-'}</div>
                  <div><span className="text-gray-400">手机：</span>{emp.phone || '-'}</div>
                  <div><span className="text-gray-400">状态：</span>{emp.status === 'ACTIVE' ? '在职' : '离职'}</div>
                </div>
                {(emp.isPregnant || emp.isInMedicalPeriod || emp.isWorkInjured) && (
                  <div className="flex gap-1">
                    {emp.isPregnant && <span className="text-xs px-1.5 py-0.5 rounded bg-pink-50 text-pink-600">孕期</span>}
                    {emp.isInMedicalPeriod && <span className="text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-600">医疗期</span>}
                    {emp.isWorkInjured && <span className="text-xs px-1.5 py-0.5 rounded bg-red-50 text-red-600">工伤</span>}
                  </div>
                )}
              </div>

              {emp.contracts && emp.contracts.length > 0 && (
                <div className="border-t pt-3">
                  <h3 className="font-medium text-xs mb-2">合同信息</h3>
                  <div className="space-y-2 text-xs">
                    {emp.contracts.map((c: any) => (
                      <div key={c.id} className="bg-gray-50 rounded p-2">
                        <div className="flex items-center gap-2">
                          {(() => {
                            const typeLabel = c.contractType === 'FIXED' ? '固定期限' : c.contractType === 'UNFIXED' ? '无固定期限' : '未签'
                            const typeStyle = c.contractType === 'UNSIGNED' ? 'bg-red-50 text-danger' : 'bg-blue-50 text-blue-700'
                            return <span className={`px-2 py-0.5 rounded text-xs ${typeStyle}`}>{typeLabel}</span>
                          })()}
                        </div>
                        <div className="text-gray-500 text-xs mt-1">
                          {c.startDate?.slice(0, 10)} ~ {c.endDate?.slice(0, 10) || '无固定期限'}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}

          <div className="border-t pt-3">
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-medium text-xs flex items-center gap-1">
                <Paperclip className="w-4 h-4" /> 附件管理
              </h3>
            </div>

            <div className="flex gap-2 mb-3">
              <Select value={fileType} onChange={(e) => setFileType(e.target.value as any)} className="text-xs">
                <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"
                multiple
                className="hidden"
                onChange={handleFileUpload}
              />
              <Button
                size="sm"
                variant="secondary"
                onClick={() => fileInputRef.current?.click()}
                disabled={addAttachmentMutation.isPending}
              >
                {addAttachmentMutation.isPending ? '上传中...' : '上传附件'}
              </Button>
            </div>
            <p className="text-xs text-gray-400 mb-2">支持 PDF、图片、Word、Excel 等格式，每个文件最大 10MB</p>

            {attachments && attachments.length > 0 ? (
              <div className="space-y-2">
                {attachments.map((att: any) => (
                  <div key={att.id} className="flex items-center justify-between bg-gray-50 rounded p-2 text-xs">
                    <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">
                        <button onClick={() => setPreviewUrl(att.fileUrl)} className="text-primary hover:underline truncate text-left">
                          {att.fileName}
                        </button>
                        <div className="text-xs text-gray-400">
                          {fileTypeLabels[att.fileType] || att.fileType} · {new Date(att.createdAt).toLocaleDateString('zh-CN')}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-1 shrink-0 ml-2">
                      <a href={att.fileUrl} download={att.fileName} className="text-gray-400 hover:text-primary p-1" title="下载">
                        <Download className="w-4 h-4" />
                      </a>
                      <button
                        onClick={() => deleteAttachmentMutation.mutate(att.id)}
                        className="text-gray-400 hover:text-danger p-1"
                        title="删除"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-gray-400 text-xs text-center py-4">暂无附件</div>
            )}
          </div>
        </div>
      </div>

      {/* 附件预览弹窗 */}
      {previewUrl && (() => {
        const dataToBlobUrl = (dataUrl: string) => {
          try {
            const arr = dataUrl.split(',')
            const mime = arr[0].match(/:(.*?);/)?.[1] || 'application/octet-stream'
            const bstr = atob(arr[1])
            const u8 = new Uint8Array(bstr.length)
            for (let i = 0; i < bstr.length; i++) u8[i] = bstr.charCodeAt(i)
            return URL.createObjectURL(new Blob([u8], { type: mime }))
          } catch { return dataUrl }
        }
        const blobUrl = previewUrl.startsWith('data:') ? dataToBlobUrl(previewUrl) : previewUrl
        const mime = previewUrl.startsWith('data:') ? previewUrl.match(/data:(.*?);/)?.[1] || '' : ''
        const isImage = mime.startsWith('image/')
        const isPdf = mime === 'application/pdf'

        return (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50" onClick={() => { if (blobUrl !== previewUrl) URL.revokeObjectURL(blobUrl); setPreviewUrl(null) }}>
          <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full h-[90vh] flex flex-col" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between px-4 py-2 border-b">
              <span className="text-sm font-medium">附件预览</span>
              <div className="flex items-center gap-2">
                <a href={blobUrl} download="附件" className="text-xs text-primary hover:underline flex items-center gap-1">
                  <Download className="w-3 h-3" />下载
                </a>
                <button onClick={() => { if (blobUrl !== previewUrl) URL.revokeObjectURL(blobUrl); setPreviewUrl(null) }} className="text-gray-400 hover:text-gray-600">
                  <X className="w-4 h-4" />
                </button>
              </div>
            </div>
            <div className="flex-1 overflow-auto flex items-center justify-center p-4">
              {isImage ? (
                <img src={blobUrl} alt="附件预览" className="max-w-full max-h-full object-contain" />
              ) : isPdf ? (
                <embed src={blobUrl} type="application/pdf" className="w-full h-full" />
              ) : (
                <div className="text-center space-y-3">
                  <FileText className="w-12 h-12 text-gray-300 mx-auto" />
                  <p className="text-sm text-gray-500">此文件格式不支持在线预览</p>
                  <a href={blobUrl} download="附件" className="inline-flex items-center gap-1 text-sm text-primary hover:underline">
                    <Download className="w-4 h-4" />点击下载查看
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
        )
      })()}
    </div>
  )
}