import { useState, useEffect } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Building2, Users, CreditCard, Plus, Bell, Download, Upload, FileSpreadsheet, Clock, CheckCircle, AlertCircle, ClipboardList } from 'lucide-react'
import api from '../lib/api'
import { useAuthStore } from '../store/authStore'
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 { surveyPages, totalFeatures } from '../data/surveyData'

export default function Settings() {
  const queryClient = useQueryClient()
  const [activeSection, setActiveSection] = useState<'org' | 'users' | 'plan' | 'notifications' | 'import' | 'export'>('org')

  const { data: orgData } = useQuery<any>({
    queryKey: ['org-settings'],
    queryFn: async () => {
      const res = await api.get('/settings/org') as any
      return res.data
    },
  })

  const { data: usersData } = useQuery<any>({
    queryKey: ['users'],
    queryFn: async () => {
      const res = await api.get('/settings/users') as any
      return res.data
    },
  })

  const updateOrgMutation = useMutation({
    mutationFn: (data: any) => api.put('/settings/org', data),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['org-settings'] }),
  })

  const sections = [
    { key: 'org' as const, label: '企业信息', icon: Building2 },
    { key: 'users' as const, label: '用户管理', icon: Users },
    { key: 'plan' as const, label: '套餐', icon: CreditCard },
    { key: 'notifications' as const, label: '通知设置', icon: Bell },
    { key: 'import' as const, label: '数据导入', icon: FileSpreadsheet },
    { key: 'export' as const, label: '数据导出', icon: Download },
  ]

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Building2 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>

      <div className="flex gap-1 border-b">
        {sections.map((s) => {
          const Icon = s.icon
          return (
            <button
              key={s.key}
              onClick={() => setActiveSection(s.key)}
              className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeSection === s.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              <Icon className="w-4 h-4" />
              {s.label}
            </button>
          )
        })}
      </div>

      {activeSection === 'org' && (
        <OrgSettings orgData={orgData} onSave={(data) => updateOrgMutation.mutate(data)} saving={updateOrgMutation.isPending} />
      )}
      {activeSection === 'users' && <UserSettings usersData={usersData} />}
      {activeSection === 'plan' && <PlanSettings orgData={orgData} />}
      {activeSection === 'notifications' && <NotificationSettings />}
      {activeSection === 'import' && <ImportSettings />}
      {activeSection === 'export' && (
        <Card>
          <h2 className="text-sm font-medium mb-4">数据导出</h2>
          <ExportSettings />
        </Card>
      )}
    </div>
  )
}

function OrgSettings({ orgData, onSave, saving }: { orgData: any; onSave: (data: any) => void; saving: boolean }) {
  const [form, setForm] = useState({
    name: '',
    contactName: '',
    contactPhone: '',
    payrollFrequency: 1,
    retirementReminderEnabled: false,
  })

  useEffect(() => {
    if (orgData) {
      setForm({
        name: orgData.name || '',
        contactName: orgData.contactName || '',
        contactPhone: orgData.contactPhone || '',
        payrollFrequency: orgData.payrollFrequency || 1,
        retirementReminderEnabled: orgData.retirementReminderEnabled || false,
      })
    }
  }, [orgData])

  return (
    <Card>
      <h2 className="text-sm font-medium mb-4">企业信息</h2>
      <div className="space-y-3">
        <div>
          <Label>企业名称</Label>
          <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="企业名称" />
        </div>
        <div>
          <Label>联系人</Label>
          <Input value={form.contactName} onChange={(e) => setForm({ ...form, contactName: e.target.value })} placeholder="联系人姓名" />
        </div>
        <div>
          <Label>联系电话</Label>
          <Input value={form.contactPhone} onChange={(e) => setForm({ ...form, contactPhone: e.target.value })} placeholder="联系电话" />
        </div>
        <div>
          <Label>每月发薪次数</Label>
          <Select value={String(form.payrollFrequency)} onChange={(e) => setForm({ ...form, payrollFrequency: Number(e.target.value) })}>
            <option value="1">1次（一月一批）</option>
            <option value="2">2次（半月一批）</option>
            <option value="3">3次（旬批）</option>
            <option value="4">4次（周批）</option>
          </Select>
          <p className="text-xs text-gray-500 mt-1">设置每月发薪批次数，系统将按此数量管理发薪批次</p>
        </div>
        <Button onClick={() => onSave(form)} disabled={saving}>
          {saving ? '保存中...' : '保存'}
        </Button>
      </div>

      <RetirementSection enabled={form.retirementReminderEnabled} onToggle={(v) => { setForm({ ...form, retirementReminderEnabled: v }); onSave({ ...form, retirementReminderEnabled: v }) }} />
    </Card>
  )
}

function RetirementSection({ enabled, onToggle }: { enabled: boolean; onToggle: (v: boolean) => void }) {
  const queryClient = useQueryClient()
  const [confirming, setConfirming] = useState(false)

  const { data: policyData, isLoading } = useQuery<any>({
    queryKey: ['retirement-policy'],
    queryFn: async () => {
      const res = await api.get('/settings/retirement-policy') as any
      return res.data
    },
    enabled,
  })

  const confirmMutation = useMutation({
    mutationFn: (id: string) => api.post(`/settings/retirement-policy/${id}/confirm`),
    onSuccess: () => {
      toast.success('退休政策已确认生效')
      setConfirming(false)
      queryClient.invalidateQueries({ queryKey: ['retirement-policy'] })
    },
    onError: () => toast.error('确认失败'),
  })

  const confirmed = policyData?.confirmed
  const pending = policyData?.pending

  const renderPolicyRules = () => (
    <div className="space-y-2">
      <div className="text-xs font-medium text-gray-600">改革规则（基准退休年龄 → 目标退休年龄）</div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
        <div className="bg-white rounded-md p-2 text-center border border-gray-200">
          <div className="text-xs text-gray-500">男性职工</div>
          <div className="text-sm font-semibold text-gray-700">60岁 → 63岁</div>
          <div className="text-xs text-gray-400">每4个月延1个月</div>
        </div>
        <div className="bg-white rounded-md p-2 text-center border border-gray-200">
          <div className="text-xs text-gray-500">女性干部</div>
          <div className="text-sm font-semibold text-gray-700">55岁 → 58岁</div>
          <div className="text-xs text-gray-400">每4个月延1个月</div>
        </div>
        <div className="bg-white rounded-md p-2 text-center border border-gray-200">
          <div className="text-xs text-gray-500">女性工人</div>
          <div className="text-sm font-semibold text-gray-700">50岁 → 55岁</div>
          <div className="text-xs text-gray-400">每2个月延1个月</div>
        </div>
      </div>
      <p className="text-xs text-gray-400">个人退休年龄根据出生年月逐人计算，达到基准退休年龄的时间点不同，延迟月数也不同。</p>
    </div>
  )

  return (
    <div className="mt-6 pt-6 border-t">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Clock className="w-5 h-5 text-primary" />
          <h3 className="font-medium">退休提醒</h3>
          {enabled && (
            <div className="flex gap-2 ml-4">
              {pending && (
                <Button size="sm" onClick={() => { setConfirming(true); confirmMutation.mutate(pending.id) }} disabled={confirming}>
                  {confirming ? '确认中...' : '确认生效'}
                </Button>
              )}
            </div>
          )}
        </div>
        <label className="flex items-center gap-2 cursor-pointer">
          <span className="text-sm text-gray-500">{enabled ? '已开启' : '未开启'}</span>
          <button
            type="button"
            onClick={() => onToggle(!enabled)}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-gray-300'}`}
          >
            <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${enabled ? 'translate-x-6' : 'translate-x-1'}`} />
          </button>
        </label>
      </div>

      {enabled && (
        <div className="space-y-3">
          {/* 当前生效政策 */}
          {confirmed && (
            <div className="rounded-lg border border-green-200 bg-green-50 p-3">
              <div className="flex items-center gap-2 mb-2">
                <CheckCircle className="w-4 h-4 text-green-600" />
                <span className="text-sm font-medium text-green-800">当前生效政策（v{confirmed.version}）</span>
                <span className="text-xs text-gray-500 ml-auto">
                  确认于 {new Date(confirmed.confirmedAt).toLocaleDateString('zh-CN')}
                </span>
              </div>
              {renderPolicyRules()}
            </div>
          )}

          {/* 待确认政策 */}
          {pending && (
            <div className="rounded-lg border border-orange-200 bg-orange-50 p-3">
              <div className="flex items-center gap-2 mb-2">
                <AlertCircle className="w-4 h-4 text-orange-600" />
                <span className="text-sm font-medium text-orange-800">检测到新政策版本（v{pending.version}），请确认后生效</span>
              </div>
              {renderPolicyRules()}
            </div>
          )}

          {/* 无政策 */}
          {!confirmed && !pending && !isLoading && (
            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-center">
              <p className="text-sm text-gray-500">暂无退休政策数据，系统将自动获取最新政策</p>
            </div>
          )}

          {isLoading && <p className="text-sm text-gray-400 text-center">加载中...</p>}
        </div>
      )}
    </div>
  )
}

function UserSettings({ usersData }: { usersData: any }) {
  const queryClient = useQueryClient()
  const [showAddModal, setShowAddModal] = useState(false)
  const [editingUser, setEditingUser] = useState<any>(null)
  const users = usersData || []

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: any }) => api.put(`/settings/users/${id}`, data),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
  })

  const toggleDisableMutation = useMutation({
    mutationFn: (id: string) => api.patch(`/settings/users/${id}/toggle-disable`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
  })

  return (
    <Card>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-sm font-medium">用户管理</h2>
        <Button size="sm" onClick={() => setShowAddModal(true)}>
          <Plus className="w-4 h-4 mr-1" />添加用户
        </Button>
      </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="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>
              <th className="py-2 px-3 font-medium">操作</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u: any) => (
              <tr key={u.id} className="border-b last:border-0">
                <td className="py-3 px-3 font-medium">{u.name}</td>
                <td className="py-3 px-3 text-gray-600">{u.phone}</td>
                <td className="py-3 px-3">
                  <span className="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-600">
                    {u.role === 'ADMIN' ? '管理员' : u.role === 'HR' ? 'HR' : '查看者'}
                  </span>
                </td>
                <td className="py-3 px-3">
                  <span className={u.disabled ? 'text-danger' : 'text-safe'}>
                    {u.disabled ? '已禁用' : '正常'}
                  </span>
                </td>
                <td className="py-3 px-3 text-gray-500">
                  {u.lastLoginAt ? new Date(u.lastLoginAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}
                </td>
                <td className="py-3 px-3">
                  <div className="flex gap-2">
                    <button className="text-primary hover:underline" onClick={() => setEditingUser(u)}>编辑</button>
                    <button
                      className={u.disabled ? 'text-safe hover:underline' : 'text-danger hover:underline'}
                      onClick={() => toggleDisableMutation.mutate(u.id)}
                    >
                      {u.disabled ? '启用' : '禁用'}
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <AddUserModal open={showAddModal} onClose={() => setShowAddModal(false)} />
      <EditUserModal user={editingUser} onClose={() => setEditingUser(null)} onSave={(data) => { updateMutation.mutate({ id: editingUser.id, data }); setEditingUser(null) }} />
    </Card>
  )
}

function EditUserModal({ user, onClose, onSave }: { user: any; onClose: () => void; onSave: (data: any) => void }) {
  const [form, setForm] = useState({ name: '', phone: '', role: 'HR' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    if (user) {
      setForm({ name: user.name || '', phone: user.phone || '', role: user.role || 'HR' })
      setError('')
    }
  }, [user])

  const handleSubmit = async () => {
    setLoading(true)
    setError('')
    try {
      onSave(form)
    } catch (err: any) {
      setError(err.response?.data?.error?.message || '保存失败')
    } finally {
      setLoading(false)
    }
  }

  if (!user) return null

  return (
    <Modal open={!!user} onClose={onClose} title="编辑用户">
      <div className="space-y-3">
        {error && <div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-xs">{error}</div>}
        <div>
          <Label>姓名 *</Label>
          <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
        </div>
        <div>
          <Label>手机号 *</Label>
          <Input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} maxLength={11} />
        </div>
        <div>
          <Label>角色</Label>
          <Select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
            <option value="HR">HR</option>
            <option value="ADMIN">管理员</option>
            <option value="VIEWER">查看者</option>
          </Select>
        </div>
        <div className="flex justify-end gap-2">
          <Button variant="secondary" onClick={onClose}>取消</Button>
          <Button onClick={handleSubmit} disabled={loading || !form.name || !form.phone}>
            {loading ? '保存中...' : '保存'}
          </Button>
        </div>
      </div>
    </Modal>
  )
}

function AddUserModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [form, setForm] = useState({ name: '', phone: '', password: '', role: 'HR' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const handleSubmit = async () => {
    setLoading(true)
    setError('')
    try {
      await api.post('/settings/users', form)
      onClose()
    } catch (err: any) {
      setError(err.response?.data?.error?.message || '添加失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal open={open} onClose={onClose} title="添加用户">
      <div className="space-y-3">
        {error && <div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-xs">{error}</div>}
        <div>
          <Label>姓名 *</Label>
          <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
        </div>
        <div>
          <Label>手机号 *</Label>
          <Input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} maxLength={11} />
        </div>
        <div>
          <Label>初始密码 *</Label>
          <Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
        </div>
        <div>
          <Label>角色</Label>
          <Select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
            <option value="HR">HR</option>
            <option value="ADMIN">管理员</option>
            <option value="VIEWER">查看者</option>
          </Select>
        </div>
        <div className="flex justify-end gap-2">
          <Button variant="secondary" onClick={onClose}>取消</Button>
          <Button onClick={handleSubmit} disabled={loading || !form.name || !form.phone || !form.password}>
            {loading ? '添加中...' : '添加'}
          </Button>
        </div>
      </div>
    </Modal>
  )
}

function ExportSettings() {
  const [format, setFormat] = useState<'json' | 'excel'>('json')
  const [mask, setMask] = useState(false)
  const [gzip, setGzip] = useState(true)
  const [exporting, setExporting] = useState(false)
  const [selectedModules, setSelectedModules] = useState<Record<string, boolean>>({
    employees: true, contracts: true, terminations: true, payrollBatches: true,
    payslips: true, socialRecords: true, housingRecords: true, riskItems: true,
  })

  const moduleLabels: Record<string, string> = {
    employees: '员工信息', contracts: '劳动合同', terminations: '离职记录',
    payrollBatches: '发薪批次', payslips: '工资条', socialRecords: '社保记录',
    housingRecords: '公积金记录', riskItems: '风险项',
  }

  const handleExport = async () => {
    setExporting(true)
    try {
      const token = useAuthStore.getState().accessToken
      const modules = Object.keys(selectedModules).filter(k => selectedModules[k]).join(',')
      const params = new URLSearchParams({ format, mask: String(mask), modules })
      if (format === 'json' && !gzip) params.set('gzip', 'false')
      const res = await fetch(`/api/v1/export/all?${params}`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
      })
      const blob = await res.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      const ext = format === 'excel' ? 'xlsx' : (gzip ? 'json.gz' : 'json')
      a.download = `export-${new Date().toISOString().slice(0, 10)}.${ext}`
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      toast.error('导出失败')
    }
  }

  return (
    <div className="space-y-3">
      <p className="text-xs text-gray-500">选择需要导出的数据模块和格式</p>
      <div className="grid grid-cols-2 gap-2">
        {Object.keys(moduleLabels).map(key => (
          <label key={key} className="flex items-center gap-2 text-xs">
            <input
              type="checkbox"
              checked={selectedModules[key]}
              onChange={(e) => setSelectedModules({ ...selectedModules, [key]: e.target.checked })}
            />
            {moduleLabels[key]}
          </label>
        ))}
      </div>
      <div className="flex items-center gap-4">
        <label className="flex items-center gap-2 text-xs">
          <input type="radio" checked={format === 'json'} onChange={() => setFormat('json')} />
          JSON
        </label>
        <label className="flex items-center gap-2 text-xs">
          <input type="radio" checked={format === 'excel'} onChange={() => setFormat('excel')} />
          Excel
        </label>
        <label className="flex items-center gap-2 text-xs">
          <input type="checkbox" checked={mask} onChange={(e) => setMask(e.target.checked)} />
          敏感字段脱敏
        </label>
        {format === 'json' && (
          <label className="flex items-center gap-2 text-xs">
            <input type="checkbox" checked={gzip} onChange={(e) => setGzip(e.target.checked)} />
            Gzip 压缩
          </label>
        )}
      </div>
      <Button variant="secondary" size="sm" onClick={handleExport} disabled={exporting}>
        <Download className="w-4 h-4 mr-1" />{exporting ? '导出中...' : '导出选中数据'}
      </Button>

      {/* 问卷结果分析导出 */}
      <div className="border-t border-gray-200 pt-3 mt-3">
        <div className="flex items-center gap-2 mb-2">
          <ClipboardList className="w-4 h-4 text-primary" />
          <h3 className="text-sm font-medium">问卷结果分析导出</h3>
        </div>
        <p className="text-xs text-gray-500 mb-2">将功能调查问卷的填写结果导出为 Markdown 文档，包含每项功能的评分、有用性和备注</p>
        <Button variant="secondary" size="sm" onClick={handleSurveyExport}>
          <Download className="w-4 h-4 mr-1" />导出问卷结果（MD）
        </Button>
      </div>
    </div>
  )
}

/** 导出问卷结果为 Markdown 文档 */
function handleSurveyExport() {
  try {
    const raw = localStorage.getItem('survey-results')
    if (!raw) {
      toast.info('暂无已提交的问卷结果，请先在功能调查问卷中提交')
      return
    }
    const data = JSON.parse(raw)
    const items: Array<{ featureId: string; score: number; useful: string; remark: string }> = data.items || []
    if (items.length === 0) {
      toast.info('问卷结果为空')
      return
    }

    const scoreMap = new Map(items.map(i => [i.featureId, i]))
    const usefulLabels: Record<string, string> = { yes: '有用', no: '无用', maybe: '待定', '': '' }
    const submittedAt = data.submittedAt ? new Date(data.submittedAt).toLocaleString('zh-CN') : ''

    let md = `# 功能调查问卷结果分析\n\n`
    md += `> **导出时间：** ${new Date().toLocaleString('zh-CN')}\n`
    if (submittedAt) md += `> **提交时间：** ${submittedAt}\n`
    md += `> **总功能数：** ${totalFeatures}\n`
    md += `> **已评功能数：** ${items.length}\n\n`

    const rated = items.filter(i => i.score > 0)
    const avgScore = rated.length > 0 ? (rated.reduce((s, i) => s + i.score, 0) / rated.length).toFixed(2) : '0'
    const usefulCount = items.filter(i => i.useful === 'yes').length
    const notUsefulCount = items.filter(i => i.useful === 'no').length
    const maybeCount = items.filter(i => i.useful === 'maybe').length

    md += `## 统计概览\n\n`
    md += `| 指标 | 数值 |\n|------|------|\n`
    md += `| 已评功能数 | ${items.length} / ${totalFeatures} |\n`
    md += `| 平均评分 | ${avgScore} / 5 |\n`
    md += `| 标记有用 | ${usefulCount} |\n`
    md += `| 标记无用 | ${notUsefulCount} |\n`
    md += `| 标记待定 | ${maybeCount} |\n\n`

    md += `## 评分分布\n\n`
    for (let s = 5; s >= 1; s--) {
      const count = rated.filter(i => i.score === s).length
      const pct = rated.length > 0 ? ((count / rated.length) * 100).toFixed(1) : '0'
      md += `- **${s}星**：${count} 项（${pct}%）\n`
    }
    md += `\n`

    md += `## 详细评分\n\n`

    for (const page of surveyPages) {
      const pageItems = page.features.filter(f => scoreMap.has(f.id))
      if (pageItems.length === 0) continue

      md += `### ${page.id}. ${page.name}\n\n`
      md += `> 📍 ${page.menu}`
      if (page.tab) md += ` | Tab: ${page.tab}`
      md += `\n\n`

      md += `| # | 功能 | 评分 | 有用性 | 备注 |\n`
      md += `|---|------|:----:|:------:|------|\n`
      for (const f of pageItems) {
        const s = scoreMap.get(f.id)!
        const stars = '★'.repeat(s.score) + '☆'.repeat(5 - s.score)
        md += `| ${f.id} | ${f.name} | ${stars} (${s.score}) | ${usefulLabels[s.useful] || ''} | ${s.remark || ''} |\n`
      }
      md += `\n`
    }

    md += `## 低分功能（≤2分）\n\n`
    const lowScore = rated.filter(i => i.score <= 2).sort((a, b) => a.score - b.score)
    if (lowScore.length > 0) {
      md += `| # | 功能 | 评分 | 备注 |\n|---|------|:----:|------|\n`
      for (const item of lowScore) {
        const feat = surveyPages.flatMap(p => p.features).find(f => f.id === item.featureId)
        md += `| ${item.featureId} | ${feat?.name || item.featureId} | ${item.score} | ${item.remark || ''} |\n`
      }
    } else {
      md += `无低分功能\n`
    }
    md += `\n`

    md += `## 高分功能（≥4分）\n\n`
    const highScore = rated.filter(i => i.score >= 4).sort((a, b) => b.score - a.score)
    if (highScore.length > 0) {
      md += `| # | 功能 | 评分 | 备注 |\n|---|------|:----:|------|\n`
      for (const item of highScore) {
        const feat = surveyPages.flatMap(p => p.features).find(f => f.id === item.featureId)
        md += `| ${item.featureId} | ${feat?.name || item.featureId} | ${item.score} | ${item.remark || ''} |\n`
      }
    } else {
      md += `无高分功能\n`
    }
    md += `\n---\n*由企业用工专家系统自动生成*\n`

    const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `survey-results-${new Date().toISOString().slice(0, 10)}.md`
    a.click()
    URL.revokeObjectURL(url)
    toast.success('问卷结果已导出为 Markdown 文档')
  } catch {
    toast.error('导出问卷结果失败')
  }
}

function PlanSettings({ orgData }: { orgData: any }) {
  const queryClient = useQueryClient()
  const plan = orgData?.plan || 'FREE'

  const { data: usageData } = useQuery<any>({
    queryKey: ['usage'],
    queryFn: async () => {
      const res = await api.get('/settings/usage') as any
      return res.data
    },
  })

  const planMutation = useMutation({
    mutationFn: (newPlan: string) => api.put('/settings/plan', { plan: newPlan }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['org'] })
      queryClient.invalidateQueries({ queryKey: ['usage'] })
    },
  })

  const plans = [
    { key: 'FREE', label: '免费版', price: '¥0/月', features: ['10人以内', '基础风险检测', '10次AI问答/月'] },
    { key: 'PRO', label: '专业版', price: '¥299/月', features: ['100人以内', '全功能风险检测', '100次AI问答/月', '合同审查'] },
    { key: 'ENTERPRISE', label: '企业版', price: '联系客服', features: ['无限人数', '无限AI问答', '专属客服', 'API接入'] },
  ]

  return (
    <div className="space-y-4">
      {usageData && (
        <Card>
          <h3 className="text-xs font-medium text-gray-700 mb-3">当前用量</h3>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
            <div>
              <div className="text-gray-500">员工数</div>
              <div className="font-medium text-base">{usageData.employeeCount}<span className="text-gray-500 text-xs">/{usageData.maxEmployees}</span></div>
            </div>
            <div>
              <div className="text-gray-500">AI 对话</div>
              <div className="font-medium text-base">{usageData.aiConversations}</div>
            </div>
            <div>
              <div className="text-gray-500">合同数</div>
              <div className="font-medium text-base">{usageData.contracts}</div>
            </div>
          </div>
        </Card>
      )}
      <div className="grid md:grid-cols-3 gap-4">
        {plans.map((p) => (
          <Card key={p.key}>
            <div className={`px-4 py-3 rounded-t-lg ${plan === p.key ? 'bg-primary text-white' : 'bg-gray-50'}`}>
              <div className="font-medium">{p.label}</div>
              <div className={`text-base font-bold ${plan === p.key ? 'text-white' : 'text-gray-900'}`}>{p.price}</div>
            </div>
            <div className="p-4 space-y-2">
              {p.features.map((f, i) => (
                <div key={i} className="text-xs text-gray-600 flex items-center gap-2">
                  <span className="text-safe">✓</span> {f}
                </div>
              ))}
              <div className="pt-2">
                {plan === p.key ? (
                  <div className="text-xs text-center text-primary font-medium">当前套餐</div>
                ) : (
                  <Button
                    variant="secondary"
                    className="w-full"
                    size="sm"
                    onClick={() => {
                      if (confirm(`确定切换到${p.label}？`)) planMutation.mutate(p.key)
                    }}
                    disabled={planMutation.isPending}
                  >
                    {planMutation.isPending ? '切换中...' : '升级'}
                  </Button>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}

function NotificationSettings() {
  const queryClient = useQueryClient()
  const [form, setForm] = useState<any>({})
  const [checkResult, setCheckResult] = useState<string>('')

  const { data: setting } = useQuery<any>({
    queryKey: ['notification-settings'],
    queryFn: async () => {
      const res = await api.get('/notifications/settings') as any
      return res.data
    },
  })

  const { data: logsData } = useQuery<any>({
    queryKey: ['notification-logs'],
    queryFn: async () => {
      const res = await api.get('/notifications/logs', { params: { pageSize: 10 } }) as any
      return res.data
    },
  })

  useEffect(() => {
    if (setting) setForm(setting)
  }, [setting])

  const updateMutation = useMutation({
    mutationFn: (data: any) => api.put('/notifications/settings', data),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['notification-settings'] }),
  })

  const checkMutation = useMutation({
    mutationFn: () => api.post('/notifications/check-contracts') as any,
    onSuccess: (res: any) => {
      setCheckResult(`检查完成：发现 ${res.data.checked} 个即将到期的合同，已发送 ${res.data.notified} 条通知`)
      queryClient.invalidateQueries({ queryKey: ['notification-logs'] })
    },
  })

  const testWechatMutation = useMutation({
    mutationFn: () => api.post('/notifications/test', { channel: 'wechat' }) as any,
    onSuccess: (res: any) => {
      toast.success(res.success ? res.data.message : (res.error?.message || '测试失败'))
    },
  })

  const testEmailMutation = useMutation({
    mutationFn: () => api.post('/notifications/test', { channel: 'email' }) as any,
    onSuccess: (res: any) => {
      toast.success(res.success ? res.data.message : (res.error?.message || '测试失败'))
    },
  })

  const logs = logsData?.items || []

  return (
    <div className="space-y-3">
      <Card>
        <h2 className="text-sm font-medium mb-4">通知设置</h2>
        <div className="space-y-3">
          <label className="flex items-center justify-between">
            <span className="text-xs">合同到期提醒</span>
            <input type="checkbox" checked={form.contractExpiry ?? true} onChange={(e) => setForm({ ...form, contractExpiry: e.target.checked })} />
          </label>
          <div>
            <Label>提前提醒天数</Label>
            <Input type="number" value={form.expiryDays ?? 30} onChange={(e) => setForm({ ...form, expiryDays: Number(e.target.value) })} />
          </div>
          <label className="flex items-center justify-between">
            <span className="text-xs">未签合同提醒</span>
            <input type="checkbox" checked={form.contractUnsigned ?? true} onChange={(e) => setForm({ ...form, contractUnsigned: e.target.checked })} />
          </label>
          <label className="flex items-center justify-between">
            <span className="text-xs">加班超时提醒</span>
            <input type="checkbox" checked={form.overtimeAlert ?? true} onChange={(e) => setForm({ ...form, overtimeAlert: e.target.checked })} />
          </label>
          <label className="flex items-center justify-between">
            <span className="text-xs">工资条发布通知</span>
            <input type="checkbox" checked={form.payslipReady ?? true} onChange={(e) => setForm({ ...form, payslipReady: e.target.checked })} />
          </label>
          <div className="border-t pt-3 space-y-3">
            <div className="text-xs font-medium">月度事务提醒</div>
            <div className="text-xs text-gray-500">设置每月截止日，到期后自动生成待办提醒</div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label>发薪日（每月几号）</Label>
                <Input type="number" min={1} max={28} value={form.payrollDay ?? 10} onChange={(e) => setForm({ ...form, payrollDay: Number(e.target.value) })} />
              </div>
              <div>
                <Label>社保缴纳日</Label>
                <Input type="number" min={1} max={28} value={form.socialInsDay ?? 15} onChange={(e) => setForm({ ...form, socialInsDay: Number(e.target.value) })} />
              </div>
              <div>
                <Label>公积金缴纳日</Label>
                <Input type="number" min={1} max={28} value={form.housingFundDay ?? 15} onChange={(e) => setForm({ ...form, housingFundDay: Number(e.target.value) })} />
              </div>
              <div>
                <Label>个税申报日</Label>
                <Input type="number" min={1} max={28} value={form.taxDay ?? 15} onChange={(e) => setForm({ ...form, taxDay: Number(e.target.value) })} />
              </div>
            </div>
          </div>
          <div className="border-t pt-3">
            <Label>企业微信 Webhook（选填）</Label>
            <div className="flex gap-2">
              <Input value={form.wechatWebhook || ''} onChange={(e) => setForm({ ...form, wechatWebhook: e.target.value || null })} placeholder="https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=..." />
              <Button variant="secondary" size="sm" onClick={() => testWechatMutation.mutate()} disabled={testWechatMutation.isPending || !form.wechatWebhook}>
                {testWechatMutation.isPending ? '测试中...' : '测试'}
              </Button>
            </div>
          </div>
          <label className="flex items-center justify-between">
            <span className="text-xs">邮件通知</span>
            <input type="checkbox" checked={form.emailNotify ?? false} onChange={(e) => setForm({ ...form, emailNotify: e.target.checked })} />
          </label>
          {form.emailNotify && (
            <div>
              <Label>通知邮箱</Label>
              <div className="flex gap-2">
                <Input value={form.email || ''} onChange={(e) => setForm({ ...form, email: e.target.value || null })} placeholder="hr@example.com" />
                <Button variant="secondary" size="sm" onClick={() => testEmailMutation.mutate()} disabled={testEmailMutation.isPending || !form.email}>
                  {testEmailMutation.isPending ? '测试中...' : '测试'}
                </Button>
              </div>
            </div>
          )}
          <Button onClick={() => updateMutation.mutate(form)} disabled={updateMutation.isPending}>
            {updateMutation.isPending ? '保存中...' : '保存设置'}
          </Button>
        </div>
      </Card>

      <Card>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-sm font-medium">合同到期检查</h2>
          <Button size="sm" onClick={() => checkMutation.mutate()} disabled={checkMutation.isPending}>
            {checkMutation.isPending ? '检查中...' : '立即检查'}
          </Button>
        </div>
        {checkResult && (
          <div className="px-3 py-2 rounded-md bg-blue-50 text-blue-700 text-xs mb-3">{checkResult}</div>
        )}
        {logs.length > 0 ? (
          <div className="space-y-2">
            {logs.map((log: any) => (
              <div key={log.id} className="text-xs border-b last:border-0 py-2">
                <div className="font-medium">{log.title}</div>
                <div className="text-gray-500 text-xs mt-0.5">{log.content}</div>
                <div className="text-gray-500 text-xs mt-0.5">{new Date(log.createdAt).toLocaleString('zh-CN')}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-gray-500 text-xs text-center py-4">暂无通知记录</div>
        )}
      </Card>
    </div>
  )
}

export function ImportSettings() {
  const [importType, setImportType] = useState<'init' | 'monthly'>('init')

  return (
    <div className="space-y-3">
      <div className="flex gap-1 border-b">
        <button
          onClick={() => setImportType('init')}
          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${importType === 'init' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
        >
          初始化导入
        </button>
        <button
          onClick={() => setImportType('monthly')}
          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${importType === 'monthly' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
        >
          月度导入
        </button>
      </div>
      {importType === 'init' ? <InitImport /> : <MonthlyImport />}
    </div>
  )
}

function InitImport() {
  const queryClient = useQueryClient()
  const [file, setFile] = useState<File | null>(null)
  const [result, setResult] = useState<any>(null)
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState('')
  const [preview, setPreview] = useState<any>(null)
  const [previewing, setPreviewing] = useState(false)
  const [previewTab, setPreviewTab] = useState('employees')

  const handlePreview = async () => {
    if (!file) return
    setPreviewing(true)
    setError('')
    setPreview(null)
    try {
      const token = useAuthStore.getState().accessToken
      const formData = new FormData()
      formData.append('file', file)
      const res = await fetch('/api/v1/import/excel/preview', {
        method: 'POST',
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        body: formData,
      })
      const data = await res.json()
      if (!data.success) {
        setError(data.error?.message || '预览失败')
      } else {
        setPreview(data.data)
      }
    } catch (e: any) {
      setError(e?.message || '预览失败')
    } finally {
      setPreviewing(false)
    }
  }

  const handleExportErrors = async () => {
    if (!preview?.errors?.length) return
    try {
      const token = useAuthStore.getState().accessToken
      const res = await fetch('/api/v1/import/excel/error-log', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          ...(token ? { Authorization: `Bearer ${token}` } : {}),
        },
        body: JSON.stringify({ errors: preview.errors }),
      })
      const blob = await res.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `import-errors-${Date.now()}.xlsx`
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      toast.error('导出错误日志失败')
    }
  }

  const handleUpload = async () => {
    if (!file) return
    setUploading(true)
    setError('')
    setResult(null)
    try {
      const token = useAuthStore.getState().accessToken
      const formData = new FormData()
      formData.append('file', file)
      const res = await fetch('/api/v1/import/excel', {
        method: 'POST',
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        body: formData,
      })
      const data = await res.json()
      if (!data.success) {
        setError(data.error?.message || '导入失败')
      } else {
        setResult(data.data)
        queryClient.invalidateQueries({ queryKey: ['roster'] })
        queryClient.invalidateQueries({ queryKey: ['dashboard'] })
      }
    } catch (e: any) {
      setError(e?.message || '上传失败')
    } finally {
      setUploading(false)
    }
  }

  const handleDownloadTemplate = async () => {
    try {
      const token = useAuthStore.getState().accessToken
      const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
      const res = await fetch(`${baseURL}/import/template`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
      })
      const blob = await res.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = '员工导入模板.xlsx'
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      setError('下载模板失败')
    }
  }

  return (
    <div className="space-y-3">
      <Card>
        <div className="space-y-4">
          <div>
            <h3 className="text-xs font-medium text-gray-700 mb-1">初始化数据导入</h3>
            <p className="text-xs text-gray-500">首次使用系统时，批量导入已有员工、合同、历史考勤/加班/违纪记录</p>
          </div>

          <div className="flex gap-2">
            <Button variant="secondary" size="sm" onClick={handleDownloadTemplate}>
              <Download className="w-4 h-4 mr-1" />下载导入模板
            </Button>
            <Button variant="secondary" size="sm" onClick={handlePreview} disabled={!file || previewing}>
              {previewing ? '预览中...' : '预览数据'}
            </Button>
          </div>

          <div className="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center">
            <FileSpreadsheet className="w-8 h-8 text-gray-300 mx-auto mb-2" />
            <input type="file" accept=".xlsx,.xls" onChange={(e) => { setFile(e.target.files?.[0] || null); setResult(null); setError(''); setPreview(null) }} className="hidden" id="import-file-init" />
            <label htmlFor="import-file-init" className="cursor-pointer text-xs text-primary hover:underline">
              {file ? file.name : '点击选择 Excel 文件'}
            </label>
          </div>

          {error && <div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-xs">{error}</div>}

          {preview && (
            <div className="border rounded-lg p-3 space-y-3">
              <div className="flex items-center justify-between">
                <div className="text-xs font-medium">
                  预览：共 {preview.summary?.totalRows || 0} 行，正常 {preview.summary?.normalRows || 0} 行，错误 {preview.summary?.errorRows || 0} 行
                </div>
                {preview.errors?.length > 0 && (
                  <Button variant="secondary" size="sm" onClick={handleExportErrors}>
                    <Download className="w-4 h-4 mr-1" />导出错误日志
                  </Button>
                )}
              </div>
              <div className="flex gap-1 border-b">
                {['employees', 'contracts', 'overtime', 'disciplinary', 'attendance'].map(tab => {
                  const labels: any = { employees: '员工信息', contracts: '劳动合同', overtime: '加班记录', disciplinary: '违纪记录', attendance: '考勤记录' }
                  const rows = preview[tab] || []
                  if (rows.length === 0) return null
                  return (
                    <button key={tab} onClick={() => setPreviewTab(tab)}
                      className={`px-2 py-1 text-xs border-b-2 ${previewTab === tab ? 'border-primary text-primary' : 'border-transparent text-gray-500'}`}>
                      {labels[tab]} ({rows.length})
                    </button>
                  )
                })}
              </div>
              <div className="overflow-x-auto max-h-60 overflow-y-auto">
                <table className="w-full text-sm">
                  <thead className="sticky top-0 bg-white">
                    <tr className="border-b text-left text-xs text-gray-500">
                      <th className="py-1 px-2">行号</th>
                      <th className="py-1 px-2">姓名</th>
                      <th className="py-1 px-2">状态</th>
                      <th className="py-1 px-2">错误/警告</th>
                    </tr>
                  </thead>
                  <tbody>
                    {(preview[previewTab] || []).map((row: any, i: number) => (
                      <tr key={i} className="border-b last:border-0">
                        <td className="py-1 px-2 text-gray-500">{row.rowNo}</td>
                        <td className="py-1 px-2">{row.name || row.idCard || '—'}</td>
                        <td className="py-1 px-2">
                          <span className={row.status === 'error' ? 'text-danger' : row.status === 'warning' ? 'text-amber-600' : 'text-safe'}>
                            {row.status === 'error' ? '错误' : row.status === 'warning' ? '警告' : '正常'}
                          </span>
                        </td>
                        <td className="py-1 px-2 text-gray-500">
                          {row.errors?.join('; ') || row.warnings?.join('; ') || '—'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {result && (
            <div className="px-3 py-2 rounded-md bg-green-50 text-green-700 text-xs space-y-1">
              <div className="font-medium">导入完成</div>
              <div>员工：{result.employees} 人</div>
              <div>合同：{result.contracts} 份</div>
              {result.overtime > 0 && <div>加班记录：{result.overtime} 条</div>}
              {result.disciplinary > 0 && <div>违纪记录：{result.disciplinary} 条</div>}
              {result.attendance > 0 && <div>考勤记录：{result.attendance} 条</div>}
              {result.errors?.length > 0 && (
                <div className="mt-2 pt-2 border-t border-green-200">
                  <div className="font-medium text-amber-600">部分错误（{result.errors.length}条）：</div>
                  {result.errors.slice(0, 10).map((e: string, i: number) => (<div key={i} className="text-amber-600">{e}</div>))}
                  {result.errors.length > 10 && <div className="text-amber-600">...还有 {result.errors.length - 10} 条</div>}
                </div>
              )}
            </div>
          )}

          <div className="flex justify-end">
            <Button onClick={handleUpload} disabled={!file || uploading}>
              <Upload className="w-4 h-4 mr-1" />{uploading ? '导入中...' : '开始导入'}
            </Button>
          </div>
        </div>
      </Card>

      <Card>
        <div className="text-xs text-gray-500 space-y-1">
          <div className="font-medium text-gray-700 mb-1">Sheet 页说明</div>
          <div>- <b>员工信息</b>：姓名、部门、性别、手机号、身份证号、入职日期、月工资、社保基数、公积金基数等</div>
          <div>- <b>劳动合同</b>：身份证号（优先匹配）、姓名（备选）、合同类型、签订日期、起止日期、试用期等</div>
          <div>- <b>加班记录</b>：身份证号（优先匹配）、姓名（备选）、日期、加班时长、加班类型</div>
          <div>- <b>违纪记录</b>：身份证号（优先匹配）、姓名（备选）、日期、违纪类型、描述、处罚</div>
          <div>- <b>考勤记录</b>：身份证号（优先匹配）、姓名（备选）、日期、考勤状态、上下班时间</div>
          <div className="mt-2 text-gray-500">各 Sheet 优先用「身份证号」精确匹配员工，未填身份证号时用「姓名」兑底（重名可能匹配错误）</div>
        </div>
      </Card>
    </div>
  )
}

function MonthlyImport() {
  const queryClient = useQueryClient()
  const [file, setFile] = useState<File | null>(null)
  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7))
  const [result, setResult] = useState<any>(null)
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState('')

  const handleUpload = async () => {
    if (!file) return
    setUploading(true)
    setError('')
    setResult(null)
    try {
      const token = useAuthStore.getState().accessToken
      const formData = new FormData()
      formData.append('file', file)
      formData.append('month', month)
      const res = await fetch('/api/v1/import/monthly', {
        method: 'POST',
        headers: token ? { Authorization: `Bearer ${token}` } : {},
        body: formData,
      })
      const data = await res.json()
      if (!data.success) {
        setError(data.error?.message || '导入失败')
      } else {
        setResult(data.data)
        queryClient.invalidateQueries({ queryKey: ['roster'] })
        queryClient.invalidateQueries({ queryKey: ['dashboard'] })
      }
    } catch (e: any) {
      setError(e?.message || '上传失败')
    } finally {
      setUploading(false)
    }
  }

  const handleDownloadTemplate = async () => {
    try {
      const token = useAuthStore.getState().accessToken
      const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
      const res = await fetch(`${baseURL}/import/monthly-template`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
      })
      const blob = await res.blob()
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = '月度增减员导入模板.xlsx'
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      setError('下载模板失败')
    }
  }

  return (
    <div className="space-y-3">
      <Card>
        <div className="space-y-4">
          <div>
            <h3 className="text-xs font-medium text-gray-700 mb-1">月度数据导入</h3>
            <p className="text-xs text-gray-500">每月定期导入当月考勤、加班、薪资调整、社保/公积金增减员变动</p>
          </div>

          <div className="flex items-center gap-3">
            <div>
              <Label>导入月份</Label>
              <Input type="month" value={month} onChange={(e) => setMonth(e.target.value)} className="!w-40" />
            </div>
            <div className="pt-5">
              <Button variant="secondary" size="sm" onClick={handleDownloadTemplate}>
                <Download className="w-4 h-4 mr-1" />下载月度模板
              </Button>
            </div>
          </div>

          <div className="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center">
            <FileSpreadsheet className="w-8 h-8 text-gray-300 mx-auto mb-2" />
            <input type="file" accept=".xlsx,.xls" onChange={(e) => { setFile(e.target.files?.[0] || null); setResult(null); setError('') }} className="hidden" id="import-file-monthly" />
            <label htmlFor="import-file-monthly" className="cursor-pointer text-xs text-primary hover:underline">
              {file ? file.name : '点击选择 Excel 文件'}
            </label>
          </div>

          {error && <div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-xs">{error}</div>}

          {result && (
            <div className="px-3 py-2 rounded-md bg-green-50 text-green-700 text-xs space-y-1">
              <div className="font-medium">{result.month} 月度导入完成</div>
              {result.attendance > 0 && <div>考勤记录：{result.attendance} 条</div>}
              {result.overtime > 0 && <div>加班记录：{result.overtime} 条</div>}
              {result.salaryChanges > 0 && <div>薪资调整：{result.salaryChanges} 人</div>}
              {result.socialInsChanges > 0 && <div>社保变动：{result.socialInsChanges} 人</div>}
              {result.housingFundChanges > 0 && <div>公积金变动：{result.housingFundChanges} 人</div>}
              {result.strategies && (
                <div className="mt-2 pt-2 border-t border-green-200">
                  <div className="font-medium text-gray-600">覆盖策略：</div>
                  {Object.entries(result.strategies).map(([k, v]) => (
                    <div key={k} className="text-gray-500">{k}：{v as string}</div>
                  ))}
                </div>
              )}
              {result.errors?.length > 0 && (
                <div className="mt-2 pt-2 border-t border-green-200">
                  <div className="flex items-center justify-between">
                    <div className="font-medium text-amber-600">部分错误（{result.errors.length}条）：</div>
                    <button className="text-xs text-primary hover:underline" onClick={async () => {
                      try {
                        const token = useAuthStore.getState().accessToken
                        const errorList = result.errors.map((e: string, i: number) => ({ sheet: '月度导入', row: i + 2, name: '', errors: [e] }))
                        const res = await fetch('/api/v1/import/excel/error-log', {
                          method: 'POST',
                          headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
                          body: JSON.stringify({ errors: errorList }),
                        })
                        const blob = await res.blob()
                        const url = URL.createObjectURL(blob)
                        const a = document.createElement('a')
                        a.href = url
                        a.download = `import-errors-${Date.now()}.xlsx`
                        a.click()
                        URL.revokeObjectURL(url)
                      } catch { toast.error('导出失败') }
                    }}>导出错误日志</button>
                  </div>
                  {result.errors.slice(0, 10).map((e: string, i: number) => (<div key={i} className="text-amber-600">{e}</div>))}
                  {result.errors.length > 10 && <div className="text-amber-600">...还有 {result.errors.length - 10} 条</div>}
                </div>
              )}
            </div>
          )}

          <div className="flex justify-end">
            <Button onClick={handleUpload} disabled={!file || uploading}>
              <Upload className="w-4 h-4 mr-1" />{uploading ? '导入中...' : '开始导入'}
            </Button>
          </div>
        </div>
      </Card>

      <Card>
        <div className="text-xs text-gray-500 space-y-1">
          <div className="font-medium text-gray-700 mb-1">Sheet 页说明</div>
          <div>- <b>考勤记录</b>：身份证号（优先匹配）、姓名（备选）、日期、考勤状态、上下班时间（同日重复导入会覆盖）</div>
          <div>- <b>加班记录</b>：身份证号（优先匹配）、姓名（备选）、日期、加班时长、加班类型（同月重复导入会累加）</div>
          <div>- <b>薪资调整</b>：身份证号（优先匹配）、姓名（备选）、调整后月薪、生效日期、调薪原因（自动关闭旧薪资记录）</div>
          <div>- <b>社保变动</b>：身份证号（优先匹配）、姓名（备选）、变动类型（增员/调基/减员）、缴费基数</div>
          <div>- <b>公积金变动</b>：身份证号（优先匹配）、姓名（备选）、变动类型（增员/调基/减员）、缴费基数</div>
          <div className="mt-2 text-gray-500">所有 Sheet 优先用「身份证号」精确匹配员工，未填时用「姓名」兑底（重名可能匹配错误）</div>
        </div>
      </Card>
    </div>
  )
}