import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { Building2, Upload, Trash2, FileText, AlertCircle, Calendar } from 'lucide-react'
import { companyFilesApi } 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 EmptyState from '../components/ui/EmptyState'
import PageGuide from '../components/ui/PageGuide'

const FILE_TYPES = [
  { value: 'BUSINESS_LICENSE', label: '营业执照' },
  { value: 'WORK_HOURS', label: '工时备案' },
  { value: 'HR_POLICY', label: '制度文件' },
  { value: 'LABOR_CONTRACT_TEMPLATE', label: '合同模板' },
  { value: 'OTHER', label: '其他' },
]

const fileTypeLabels: Record<string, string> = Object.fromEntries(FILE_TYPES.map(t => [t.value, t.label]))

export default function CompanyFiles() {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [fileType, setFileType] = useState('BUSINESS_LICENSE')
  const [remark, setRemark] = useState('')
  const [expiryDate, setExpiryDate] = useState('')
  const [filterType, setFilterType] = useState('')

  const { data: files, isLoading } = useQuery<any[]>({
    queryKey: ['company-files', filterType],
    queryFn: async () => {
      return await companyFilesApi.list(filterType ? { fileType: filterType } : {})
    },
  })

  const addMutation = useMutation({
    mutationFn: (data: any) => companyFilesApi.add(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['company-files'] })
      toast.success('文件上传成功')
      setRemark('')
      setExpiryDate('')
    },
    onError: () => toast.error('上传失败'),
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => companyFilesApi.remove(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['company-files'] })
      toast.success('已删除')
    },
  })

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    if (file.size > 10 * 1024 * 1024) {
      toast.error('文件不能超过 10MB')
      return
    }
    const reader = new FileReader()
    reader.onload = () => {
      addMutation.mutate({
        fileName: file.name,
        fileType,
        fileUrl: reader.result as string,
        fileSize: file.size,
        remark: remark || undefined,
        expiryDate: expiryDate || undefined,
      })
    }
    reader.readAsDataURL(file)
    e.target.value = ''
  }

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

  return (
    <div className="space-y-4">
      <PageGuide>公司文件管理，集中存储和管理公司制度、合同模板、政策文件等。支持分类管理、在线预览、权限控制。关联：员工可在员工端查看已授权的公司文件。</PageGuide>
      <div className="flex items-center gap-2">
        <Building2 className="h-5 w-5 text-primary" />
        <h1 className="text-lg font-semibold">公司备用文件</h1>
      </div>

      <Card>
        <div className="p-4 space-y-3">
          <div className="text-sm text-gray-500">上传营业执照、工时备案文件、公司制度文件、合同模板等公司级文件</div>
          <div className="flex flex-wrap items-end gap-3">
            <div>
              <Label>文件类型</Label>
              <Select value={fileType} onChange={(e) => setFileType(e.target.value)} className="w-36">
                {FILE_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
              </Select>
            </div>
            <div>
              <Label>备注（选填）</Label>
              <Input value={remark} onChange={(e) => setRemark(e.target.value)} placeholder="如：2024年营业执照" className="w-48" />
            </div>
            <div>
              <Label>有效期（选填）</Label>
              <Input type="date" value={expiryDate} onChange={(e) => setExpiryDate(e.target.value)} className="w-40" />
            </div>
            <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileUpload} />
            <Button onClick={() => fileInputRef.current?.click()} disabled={addMutation.isPending}>
              <Upload className="w-4 h-4 mr-1" />
              {addMutation.isPending ? '上传中...' : '上传文件'}
            </Button>
          </div>
        </div>
      </Card>

      <Card>
        <div className="p-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-medium">文件列表</h2>
            <Select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="!w-28 text-xs">
              <option value="">全部类型</option>
              {FILE_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </Select>
          </div>
          {isLoading ? (
            <div className="text-center py-8 text-gray-500">加载中...</div>
          ) : !files || files.length === 0 ? (
            <EmptyState title="暂无文件" description="点击上方上传按钮添加公司文件" />
          ) : (
            <div className="space-y-2">
              {files.map((f: any) => {
                const isExpired = f.expiryDate && new Date(f.expiryDate) < new Date()
                const isExpiringSoon = f.expiryDate && !isExpired && (new Date(f.expiryDate).getTime() - new Date().getTime()) < 30 * 24 * 60 * 60 * 1000
                return (
                  <div key={f.id} className="flex items-center gap-3 p-3 rounded-md border hover:bg-gray-50">
                    <FileText className="w-5 h-5 text-gray-400 flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-medium truncate">{f.fileName}</span>
                        <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">{fileTypeLabels[f.fileType] || f.fileType}</span>
                        {isExpired && <span className="text-xs px-1.5 py-0.5 rounded bg-red-50 text-danger flex items-center gap-0.5"><AlertCircle className="w-3 h-3" />已过期</span>}
                        {isExpiringSoon && <span className="text-xs px-1.5 py-0.5 rounded bg-amber-50 text-warning flex items-center gap-0.5"><Calendar className="w-3 h-3" />即将到期</span>}
                      </div>
                      <div className="text-xs text-gray-400 mt-0.5">
                        {fmtSize(f.fileSize)}
                        {f.remark && <span className="ml-2">· {f.remark}</span>}
                        {f.expiryDate && <span className="ml-2">· 有效期至 {f.expiryDate.slice(0, 10)}</span>}
                        <span className="ml-2">· {new Date(f.createdAt).toLocaleDateString('zh-CN')}</span>
                      </div>
                    </div>
                    <a href={f.fileUrl} download={f.fileName} className="text-xs text-primary hover:underline flex items-center gap-1">
                      <FileText className="w-3.5 h-3.5" />下载
                    </a>
                    <button
                      onClick={() => deleteMutation.mutate(f.id)}
                      className="p-1.5 rounded hover:bg-red-50 text-gray-400 hover:text-danger"
                      title="删除"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </Card>
    </div>
  )
}