import { useRef, useState } from 'react'
import { toast } from 'sonner'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { attachmentApi } from '../../lib/api-services'
import { useConfirm } from '../../hooks/useConfirm'
import Card from '../../components/ui/Card'
import Button from '../../components/ui/Button'
import { Select } from '../../components/ui/Input'
import { Paperclip, Trash2, Eye, Download } from 'lucide-react'

const fileTypeLabels: Record<string, string> = {
  ID_CARD: '身份证', BANK_CARD: '银行卡', EDUCATION: '学历证书',
  CERTIFICATE: '职业资格证书', CONTRACT: '合同扫描件', CONTRACT_SCAN: '合同扫描件',
  PHOTO: '员工照片', OTHER: '其他',
  TERMINATION_DOC: '离职文件', RETIREMENT_DOC: '退休文件',
  INJURY_CERT: '工伤证明', MEDICAL_CERT: '医疗证明', PREGNANCY_CERT: '孕期证明',
  DISCIPLINARY: '违纪文件',
}
const fileTypeColors: Record<string, string> = {
  ID_CARD: 'bg-blue-50 text-blue-600', BANK_CARD: 'bg-green-50 text-safe',
  EDUCATION: 'bg-amber-50 text-amber-600', CERTIFICATE: 'bg-purple-50 text-purple-600',
  CONTRACT: 'bg-cyan-50 text-cyan-600', CONTRACT_SCAN: 'bg-cyan-50 text-cyan-600',
  PHOTO: 'bg-pink-50 text-pink-600', OTHER: 'bg-gray-100 text-gray-500',
  TERMINATION_DOC: 'bg-red-50 text-red-600', RETIREMENT_DOC: 'bg-orange-50 text-orange-600',
  INJURY_CERT: 'bg-red-50 text-red-600', MEDICAL_CERT: 'bg-orange-50 text-orange-600',
  PREGNANCY_CERT: 'bg-pink-50 text-pink-600', DISCIPLINARY: 'bg-red-50 text-red-600',
}

const formatSize = (bytes: number) => {
  if (!bytes) return '-'
  if (bytes < 1024) return `${bytes}B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`
  return `${(bytes / 1024 / 1024).toFixed(1)}MB`
}

export default function AttachmentsTab({ employeeId, attachments }: { employeeId: string; attachments: any[] }) {
  const queryClient = useQueryClient()
  const confirm = useConfirm()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [fileType, setFileType] = useState<'ID_CARD' | 'BANK_CARD' | 'EDUCATION' | 'CERTIFICATE' | 'CONTRACT' | 'PHOTO' | 'OTHER'>('ID_CARD')

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

  const deleteAttachmentMutation = useMutation({
    mutationFn: (id: string) => attachmentApi.remove(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['roster-profile', employeeId] }),
  })

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    const allowedExts = ['.pdf', '.jpg', '.jpeg', '.png', '.heic', '.gif', '.bmp', '.webp', '.doc', '.docx', '.xls', '.xlsx', '.tiff', '.tif']
    const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'))
    if (!allowedExts.includes(ext)) {
      toast.error('不支持的文件格式，支持 PDF、图片、Word、Excel 等常见格式')
      return
    }
    if (file.size > 10 * 1024 * 1024) {
      toast.error('文件过大，请上传小于 10MB 的文件')
      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 handleDelete = async (att: any) => {
    const ok = await confirm({ title: '删除附件', message: `确认删除「${att.fileName}」？` })
    if (ok) deleteAttachmentMutation.mutate(att.id)
  }

  return (
    <Card>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xs font-medium">附件资料（{attachments?.length || 0}个）</h2>
        <div className="flex gap-2 items-center">
          <Select value={fileType} onChange={(e) => setFileType(e.target.value as any)} className="text-xs !w-28">
            <option value="ID_CARD">身份证</option>
            <option value="BANK_CARD">银行卡</option>
            <option value="EDUCATION">学历证书</option>
            <option value="CERTIFICATE">职业资格证书</option>
            <option value="CONTRACT">合同扫描件</option>
            <option value="PHOTO">员工照片</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} className="shrink-0 whitespace-nowrap">
            {addAttachmentMutation.isPending ? '上传中...' : '上传附件'}
          </Button>
        </div>
      </div>

      {attachments?.length ? (
        <div className="space-y-1.5">
          {attachments.map((att) => (
            <div key={att.id} className="flex items-center justify-between bg-gray-50 rounded p-2 text-xs hover:bg-gray-100">
              <div className="flex items-center gap-2 min-w-0">
                <Paperclip className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                <div className="min-w-0">
                  <div className="truncate font-medium text-gray-700">{att.fileName}</div>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className={`px-1.5 py-0.5 rounded text-xs ${fileTypeColors[att.fileType] || 'bg-gray-100 text-gray-500'}`}>{fileTypeLabels[att.fileType] || att.fileType}</span>
                    <span className="text-gray-400">{formatSize(att.fileSize)}</span>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-1.5 shrink-0 ml-2">
                <button onClick={() => window.open(att.fileUrl, '_blank')} className="text-gray-400 hover:text-blue-600" title="查看">
                  <Eye className="w-3.5 h-3.5" />
                </button>
                <a href={att.fileUrl} download={att.fileName} className="text-gray-400 hover:text-blue-600" title="下载">
                  <Download className="w-3.5 h-3.5" />
                </a>
                <button onClick={() => handleDelete(att)} className="text-gray-300 hover:text-danger" title="删除">
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="text-gray-400 text-xs text-center py-8">暂无附件，请点击右上角上传</div>
      )}
    </Card>
  )
}
