/**
 * 员工离职申请入口 — 员工端提交离职申请、查看申请状态、撤回申请
 */
import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { UserX, Clock, FileText, Camera, X, Image as ImageIcon, Download } from 'lucide-react'
import { portalApi } 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 { InlineAlert } from '../../components/ui/InlineAlert'

/** 离职原因选项 */
const RESIGN_REASONS = [
  { value: '个人发展', label: '个人发展' },
  { value: '薪资待遇', label: '薪资待遇' },
  { value: '家庭原因', label: '家庭原因' },
  { value: '健康原因', label: '健康原因' },
  { value: '工作环境', label: '工作环境' },
  { value: '其他', label: '其他' },
]

/** 状态映射 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
  DRAFT: { label: '草稿', color: 'bg-gray-100 text-gray-600' },
  PENDING_APPROVAL: { label: '待审批', color: 'bg-amber-50 text-amber-700' },
  APPROVED: { label: '已审批', color: 'bg-blue-50 text-blue-700' },
  REJECTED: { label: '已驳回', color: 'bg-red-50 text-red-700' },
  COMPLETED: { label: '已完成', color: 'bg-green-50 text-safe' },
  CANCELLED: { label: '已撤回', color: 'bg-gray-100 text-gray-400' },
}

export default function ResignationApply() {
  const queryClient = useQueryClient()
  const [form, setForm] = useState({
    reason: '',
    expectedDate: '',
    remark: '',
  })
  const [attachments, setAttachments] = useState<string[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)

  /** 查询离职申请状态 */
  const { data: records = [], isLoading } = useQuery<any[]>({
    queryKey: ['portal-resignation-status'],
    queryFn: async () => {
      return await portalApi.resignationStatus()
    },
  })

  /** 提交离职申请 */
  const submitMutation = useMutation({
    mutationFn: async (data: { reason: string; expectedDate: string; remark: string; attachments?: string[] }) => {
      return await portalApi.resignationSubmit(data)
    },
    onSuccess: () => {
      toast.success('离职申请已提交，请等待HR审批')
      queryClient.invalidateQueries({ queryKey: ['portal-resignation-status'] })
      setForm({ reason: '', expectedDate: '', remark: '' })
      setAttachments([])
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.error?.message || '提交失败')
    },
  })

  /** 撤回离职申请 */
  const withdrawMutation = useMutation({
    mutationFn: async (id: string) => {
      return await portalApi.resignationWithdraw(id)
    },
    onSuccess: () => {
      toast.success('离职申请已撤回')
      queryClient.invalidateQueries({ queryKey: ['portal-resignation-status'] })
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.error?.message || '撤回失败')
    },
  })

  const handleSubmit = () => {
    if (!form.reason) { toast.error('请选择离职原因'); return }
    if (!form.expectedDate) { toast.error('请选择预计离职日期'); return }
    submitMutation.mutate({ ...form, attachments })
  }

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files) return
    Array.from(files).forEach(file => {
      if (file.size > 5 * 1024 * 1024) {
        toast.error(`${file.name} 超过5MB限制`)
        return
      }
      const reader = new FileReader()
      reader.onload = () => {
        setAttachments(prev => [...prev, reader.result as string])
      }
      reader.readAsDataURL(file)
    })
    if (fileInputRef.current) fileInputRef.current.value = ''
  }

  const hasPending = records.some((r: any) => r.status === 'DRAFT' || r.status === 'PENDING_APPROVAL')

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <UserX className="h-5 w-5 text-primary" />
        <h1 className="text-base font-semibold">离职申请</h1>
      </div>

      <InlineAlert type="info">
        提交离职申请后，HR将在3个工作日内审批。提前30天提交为法定要求，请合理选择离职日期。
      </InlineAlert>

      {/* 申请表单 */}
      {!hasPending ? (
        <Card>
          <h2 className="text-sm font-medium mb-4">填写离职申请</h2>
          <div className="space-y-4">
            <div>
              <Label>离职原因 *</Label>
              <Select value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}>
                <option value="">请选择</option>
                {RESIGN_REASONS.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
              </Select>
            </div>
            <div>
              <Label>预计离职日期 *</Label>
              <Input
                type="date"
                value={form.expectedDate}
                min={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)}
                onChange={(e) => setForm({ ...form, expectedDate: e.target.value })}
              />
              <div className="text-xs text-gray-400 mt-1">法定要求提前30天通知</div>
            </div>
            <div>
              <Label>备注说明</Label>
              <Input
                value={form.remark}
                onChange={(e) => setForm({ ...form, remark: e.target.value })}
                placeholder="补充说明（选填）"
              />
            </div>
            <div>
              <Label>辞职信照片（选填，最多5张）</Label>
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                multiple
                className="hidden"
                onChange={handleFileUpload}
              />
              <div className="flex items-center gap-2 flex-wrap">
                <button
                  type="button"
                  onClick={() => fileInputRef.current?.click()}
                  className="flex items-center gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 text-sm text-gray-500 hover:border-primary hover:text-primary transition-colors"
                >
                  <Camera className="w-4 h-4" />
                  上传照片
                </button>
                {attachments.map((img, i) => (
                  <div key={i} className="relative w-16 h-16 rounded-md overflow-hidden border">
                    <img src={img} alt={`附件${i + 1}`} className="w-full h-full object-cover" />
                    <button
                      type="button"
                      onClick={() => setAttachments(prev => prev.filter((_, idx) => idx !== i))}
                      className="absolute top-0 right-0 bg-black/50 text-white rounded-bl p-0.5"
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
              <div className="text-xs text-gray-400 mt-1">支持上传辞职信照片，HR审批时可查看</div>
            </div>
            <Button onClick={handleSubmit} disabled={submitMutation.isPending} className="w-full">
              {submitMutation.isPending ? '提交中...' : '提交离职申请'}
            </Button>
          </div>
        </Card>
      ) : (
        <InlineAlert type="warning">
          您已有一个待处理的离职申请，请等待审批结果或撤回后重新提交。
        </InlineAlert>
      )}

      {/* 申请记录 */}
      <Card>
        <h2 className="text-sm font-medium mb-3 flex items-center gap-1">
          <FileText className="w-4 h-4 text-gray-400" />
          申请记录
        </h2>
        {isLoading ? (
          <div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
        ) : records.length === 0 ? (
          <div className="text-center py-4 text-gray-400 text-sm">暂无离职申请记录</div>
        ) : (
          <div className="space-y-3">
            {records.map((r: any) => {
              const statusCfg = STATUS_MAP[r.status] || STATUS_MAP.DRAFT
              const canWithdraw = r.status === 'DRAFT' || r.status === 'PENDING_APPROVAL'
              const canDownload = r.status === 'COMPLETED'
              return (
                <div key={r.id} className="p-3 rounded-lg border border-gray-100">
                  <div className="flex items-center justify-between mb-2">
                    <span className={`px-2 py-0.5 rounded text-xs ${statusCfg.color}`}>{statusCfg.label}</span>
                    <span className="text-xs text-gray-400 flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      {new Date(r.createdAt).toLocaleDateString('zh-CN')}
                    </span>
                  </div>
                  <div className="space-y-1 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-400">预计离职日期</span>
                      <span className="font-medium">{r.terminationDate ? new Date(r.terminationDate).toLocaleDateString('zh-CN') : '—'}</span>
                    </div>
                    {r.remark && (
                      <div className="text-xs text-gray-500 mt-1">{r.remark}</div>
                    )}
                  </div>
                  {canDownload && (
                    <div className="mt-2 pt-2 border-t border-gray-50">
                      <Button
                        variant="secondary"
                        size="sm"
                        onClick={async () => {
                          try {
                            const blob = await portalApi.downloadCertificate(r.id)
                            const url = URL.createObjectURL(blob)
                            const a = document.createElement('a')
                            a.href = url
                            a.download = `离职证明.doc`
                            a.click()
                            URL.revokeObjectURL(url)
                          } catch {
                            toast.error('下载失败')
                          }
                        }}
                      >
                        <Download className="w-4 h-4 mr-1" />下载离职证明
                      </Button>
                    </div>
                  )}
                  {canWithdraw && (
                    <div className="mt-2 pt-2 border-t border-gray-50">
                      <Button
                        variant="secondary"
                        size="sm"
                        onClick={() => withdrawMutation.mutate(r.id)}
                        disabled={withdrawMutation.isPending}
                      >
                        {withdrawMutation.isPending ? '撤回中...' : '撤回申请'}
                      </Button>
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </Card>
    </div>
  )
}