import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import { Search, Plus, Edit2, Trash2, X, Download } from 'lucide-react'
import { toast } from 'sonner'
import { rosterApi, employeeApi } from '../../lib/api-services'
import api from '../../lib/api'
import { usePageSize } from '../../hooks/usePageSize'
import { Input, Label, Select } from '../../components/ui/Input'
import Button from '../../components/ui/Button'

const TYPE_LABELS: Record<string, string> = { LATE: '迟到', ABSENT: '旷工', INSUBORDINATION: '不服从管理', MISCONDUCT: '违纪', VIOLATE_POLICY: '违反规章制度', OTHER: '其他' }
const SEVERITY_LABELS: Record<string, string> = { WARNING: '警告', SERIOUS: '严重', SEVERE: '极其严重' }
const SEVERITY_COLORS: Record<string, string> = { WARNING: 'bg-amber-50 text-amber-700', SERIOUS: 'bg-orange-50 text-orange-700', SEVERE: 'bg-red-50 text-red-700' }
const ACTION_LABELS: Record<string, string> = { ORAL_WARNING: '口头警告', WRITTEN_WARNING: '书面警告', DEDUCTION: '扣款', DEMOTION: '降职', TERMINATION: '解除劳动合同' }

function fmtDate(d: string | Date | null): string {
  if (!d) return '-'
  return new Date(d).toLocaleDateString('zh-CN')
}

export default function DisciplinaryRecords() {
  const queryClient = useQueryClient()
  const pageSize = usePageSize()
  const [page, setPage] = useState(1)
  const [keyword, setKeyword] = useState('')
  const [showCreate, setShowCreate] = useState(false)
  const [editRecord, setEditRecord] = useState<any>(null)

  const { data, isLoading } = useQuery({
    queryKey: ['disciplinary-list', page, pageSize, keyword],
    queryFn: () => rosterApi.disciplinaryList({ page, pageSize, keyword }),
  })

  const { data: employees } = useQuery({
    queryKey: ['employees-active'],
    queryFn: () => employeeApi.list({ status: 'ACTIVE' }),
  })

  const saveMut = useMutation({
    mutationFn: (data: any) => {
      const empId = data.employeeId
      delete data.employeeId
      const isEdit = !!data.recordId
      const recordId = data.recordId
      delete data.recordId
      if (isEdit) {
        return api.put(`/roster/${empId}/disciplinary/${recordId}`, data)
      }
      return api.post(`/roster/${empId}/disciplinary`, data)
    },
    onSuccess: () => {
      toast.success('违纪记录已保存')
      queryClient.invalidateQueries({ queryKey: ['disciplinary-list'] })
      setShowCreate(false)
      setEditRecord(null)
    },
    onError: () => toast.error('保存失败'),
  })

  const deleteMut = useMutation({
    mutationFn: ({ employeeId, recordId }: { employeeId: string; recordId: string }) =>
      api.delete(`/roster/${employeeId}/disciplinary/${recordId}`),
    onSuccess: () => {
      toast.success('记录已删除')
      queryClient.invalidateQueries({ queryKey: ['disciplinary-list'] })
    },
  })

  const records = data?.records || []
  const total = data?.total || 0
  const totalPages = Math.ceil(total / pageSize)

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-base font-semibold">违纪记录</h1>
          <p className="mt-1 text-sm text-gray-500">管理全员违纪记录及处理情况</p>
        </div>
        <Button size="sm" onClick={() => setShowCreate(true)}>
          <Plus className="w-4 h-4 mr-1" /> 新增违纪记录
        </Button>
      </div>

      <div className="flex items-center gap-2">
        <div className="relative flex-1 max-w-xs">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            value={keyword}
            onChange={(e) => { setKeyword(e.target.value); setPage(1) }}
            placeholder="搜索员工姓名"
            className="pl-9"
          />
        </div>
      </div>

      <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="pb-2 pr-4 font-medium">员工</th>
              <th className="pb-2 pr-4 font-medium">部门</th>
              <th className="pb-2 pr-4 font-medium">违纪日期</th>
              <th className="pb-2 pr-4 font-medium">类型</th>
              <th className="pb-2 pr-4 font-medium">描述</th>
              <th className="pb-2 pr-4 font-medium">严重程度</th>
              <th className="pb-2 pr-4 font-medium">处理</th>
              <th className="pb-2 pr-4 font-medium">执行细节</th>
              <th className="pb-2 pr-4 font-medium">签字</th>
              <th className="pb-2 pr-4 font-medium">操作</th>
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr><td colSpan={10} className="py-8 text-center text-gray-400">加载中...</td></tr>
            ) : records.length === 0 ? (
              <tr><td colSpan={10} className="py-8 text-center text-gray-400">暂无违纪记录</td></tr>
            ) : records.map((r: any) => (
              <tr key={r.id} className="border-b hover:bg-gray-50">
                <td className="py-2 pr-4">
                  <Link to={`/roster?employeeId=${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
                </td>
                <td className="py-2 pr-4 text-gray-600">{r.employee?.department || '-'}</td>
                <td className="py-2 pr-4">{fmtDate(r.violationDate)}</td>
                <td className="py-2 pr-4">{TYPE_LABELS[r.violationType] || r.violationType}</td>
                <td className="py-2 pr-4 max-w-xs truncate" title={r.description}>{r.description}</td>
                <td className="py-2 pr-4">
                  <span className={`inline-block px-2 py-0.5 rounded text-xs ${SEVERITY_COLORS[r.severity] || 'bg-gray-50 text-gray-600'}`}>
                    {SEVERITY_LABELS[r.severity] || r.severity}
                  </span>
                </td>
                <td className="py-2 pr-4 text-gray-600">{ACTION_LABELS[r.action] || r.action}</td>
                <td className="py-2 pr-4 max-w-xs truncate text-gray-500 text-xs" title={r.actionDetail}>{r.actionDetail || '-'}</td>
                <td className="py-2 pr-4">
                  {r.employeeAck ? (
                    <span className="text-xs text-green-600">已签字</span>
                  ) : (
                    <span className="text-xs text-amber-600">待签字</span>
                  )}
                </td>
                <td className="py-2 pr-4">
                  <div className="flex gap-1">
                    {r.employeeAck && (
                      <button
                        title="下载违纪确认证明"
                        onClick={async () => {
                          try {
                            const { useAuthStore } = await import('../../store/authStore')
                            const token = useAuthStore.getState().accessToken
                            const res = await fetch(`/api/v1/roster/${r.employeeId}/disciplinary/${r.id}/certificate`, {
                              headers: token ? { Authorization: `Bearer ${token}` } : {},
                            })
                            if (!res.ok) throw new Error('导出失败')
                            const blob = await res.blob()
                            const url = URL.createObjectURL(blob)
                            const a = document.createElement('a')
                            a.href = url
                            const cd = res.headers.get('content-disposition') || ''
                            const fname = cd.match(/filename\*=UTF-8''(.+)/)?.[1] || cd.match(/filename="(.+?)"/)?.[1] || '违纪确认证明.doc'
                            a.download = decodeURIComponent(fname)
                            document.body.appendChild(a)
                            a.click()
                            document.body.removeChild(a)
                            URL.revokeObjectURL(url)
                          } catch { toast.error('下载失败') }
                        }}
                        className="p-1 hover:bg-gray-100 rounded"
                      >
                        <Download className="w-3.5 h-3.5 text-primary" />
                      </button>
                    )}
                    <button onClick={() => setEditRecord(r)} className="p-1 hover:bg-gray-100 rounded">
                      <Edit2 className="w-3.5 h-3.5 text-gray-500" />
                    </button>
                    <button
                      onClick={() => { if (confirm('确认删除？')) deleteMut.mutate({ employeeId: r.employeeId, recordId: r.id }) }}
                      className="p-1 hover:bg-gray-100 rounded"
                    >
                      <Trash2 className="w-3.5 h-3.5 text-red-400" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-500">共 {total} 条</span>
          <div className="flex gap-1">
            <Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>上一页</Button>
            <span className="px-3 py-1 text-xs text-gray-500">{page} / {totalPages}</span>
            <Button size="sm" variant="secondary" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>下一页</Button>
          </div>
        </div>
      )}

      {(showCreate || editRecord) && (
        <DisciplinaryForm
          employees={employees || []}
          record={editRecord}
          onSubmit={(data) => saveMut.mutate(data)}
          onClose={() => { setShowCreate(false); setEditRecord(null) }}
        />
      )}
    </div>
  )
}

function DisciplinaryForm({ employees, record, onSubmit, onClose }: {
  employees: any[]
  record: any
  onSubmit: (data: any) => void
  onClose: () => void
}) {
  const [form, setForm] = useState({
    employeeId: record?.employeeId || '',
    violationDate: record?.violationDate ? new Date(record.violationDate).toISOString().slice(0, 10) : new Date().toISOString().slice(0, 10),
    violationType: record?.violationType || 'OTHER',
    description: record?.description || '',
    severity: record?.severity || 'WARNING',
    action: record?.action || 'ORAL_WARNING',
    actionDetail: record?.actionDetail || '',
    witness: record?.witness || '',
  })

  return (
    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
      <div className="bg-white rounded-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-medium">{record ? '编辑违纪记录' : '新增违纪记录'}</h3>
          <button onClick={onClose}><X className="w-4 h-4 text-gray-400" /></button>
        </div>
        <div className="space-y-3">
          {!record && (
            <div>
              <Label>员工</Label>
              <Select value={form.employeeId} onChange={(e) => setForm({ ...form, employeeId: e.target.value })}>
                <option value="">请选择员工</option>
                {employees.map((emp: any) => (
                  <option key={emp.id} value={emp.id}>{emp.name} - {emp.department || ''}</option>
                ))}
              </Select>
            </div>
          )}
          <div>
            <Label>违纪日期</Label>
            <Input type="date" value={form.violationDate} onChange={(e) => setForm({ ...form, violationDate: e.target.value })} />
          </div>
          <div>
            <Label>违纪类型</Label>
            <Select value={form.violationType} onChange={(e) => setForm({ ...form, violationType: e.target.value })}>
              <option value="LATE">迟到</option>
              <option value="ABSENT">旷工</option>
              <option value="INSUBORDINATION">不服从管理</option>
              <option value="MISCONDUCT">违纪</option>
              <option value="VIOLATE_POLICY">违反规章制度</option>
              <option value="OTHER">其他</option>
            </Select>
          </div>
          <div>
            <Label>违纪描述</Label>
            <Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="详细描述违纪事实" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label>严重程度</Label>
              <Select value={form.severity} onChange={(e) => setForm({ ...form, severity: e.target.value })}>
                <option value="WARNING">警告</option>
                <option value="SERIOUS">严重</option>
                <option value="SEVERE">极其严重</option>
              </Select>
            </div>
            <div>
              <Label>处理方式</Label>
              <Select value={form.action} onChange={(e) => setForm({ ...form, action: e.target.value })}>
                <option value="ORAL_WARNING">口头警告</option>
                <option value="WRITTEN_WARNING">书面警告</option>
                <option value="DEDUCTION">扣款</option>
                <option value="DEMOTION">降职</option>
                <option value="TERMINATION">解除劳动合同</option>
              </Select>
            </div>
          </div>
          <div>
            <Label>处罚执行细节</Label>
            <textarea value={form.actionDetail} onChange={(e) => setForm({ ...form, actionDetail: e.target.value })} rows={3} className="w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="详细说明处罚执行情况，如扣款金额、书面警告文号、降职后岗位等" />
          </div>
          <div>
            <Label>见证人</Label>
            <Input value={form.witness} onChange={(e) => setForm({ ...form, witness: e.target.value })} placeholder="见证人（选填）" />
          </div>
          {record && (
            <div>
              <Label>签字状态</Label>
              <div className="text-sm text-gray-600">
                {record.employeeAck ? (
                  <span className="text-green-600">已签字（{record.ackDate ? new Date(record.ackDate).toLocaleDateString('zh-CN') : ''}）</span>
                ) : (
                  <span className="text-amber-600">待签字 <span className="text-xs text-gray-400 ml-1">由员工在员工端签字确认</span></span>
                )}
              </div>
            </div>
          )}
          <div className="flex justify-end gap-2 pt-2">
            <Button variant="secondary" size="sm" onClick={onClose}>取消</Button>
            <Button size="sm" onClick={() => onSubmit(form)} disabled={!form.employeeId || !form.description}>保存</Button>
          </div>
        </div>
      </div>
    </div>
  )
}