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

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 [page, setPage] = useState(1)
  const [showAddModal, setShowAddModal] = useState(false)
  const [selectedEmpId, setSelectedEmpId] = useState<string | null>(null)

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

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

  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">
        <div className="relative flex-1">
          <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>
      </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>

            {/* 分页 */}
            {data.totalPages > 1 && (
              <div className="flex items-center justify-center gap-2 mt-4">
                <Button
                  variant="secondary"
                  size="sm"
                  disabled={page === 1}
                  onClick={() => setPage(p => p - 1)}
                >上一页</Button>
                <span className="text-xs text-gray-500">{page} / {data.totalPages}</span>
                <Button
                  variant="secondary"
                  size="sm"
                  disabled={page === data.totalPages}
                  onClick={() => setPage(p => p + 1)}
                >下一页</Button>
              </div>
            )}
          </>
        )}
      </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-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 { 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 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: '其他',
  }

  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-lg font-semibold">{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"
                className="hidden"
                onChange={handleFileUpload}
              />
              <Button
                size="sm"
                variant="secondary"
                onClick={() => fileInputRef.current?.click()}
                disabled={addAttachmentMutation.isPending}
              >
                {addAttachmentMutation.isPending ? '上传中...' : '上传'}
              </Button>
            </div>

            {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">
                        <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-xs text-center py-4">暂无附件</div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}