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, LayoutGrid, PenTool } from 'lucide-react'
import { settingsApi, notificationsApi } from '../lib/api-services'
import { useAuthStore } from '../store/authStore'
import { getPageSize, setPageSize as setGlobalPageSize } from '../lib/pageSize'
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 { useConfirm } from '../hooks/useConfirm'


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

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

  const { data: usersData } = useQuery<any>({
    queryKey: ['users'],
    queryFn: async () => {
      return await settingsApi.users()
    },
  })

  const updateOrgMutation = useMutation({
    mutationFn: (data: any) => settingsApi.updateOrg(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: 'retirement' as const, label: '退休提醒', icon: Clock },
    { 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 === 'retirement' && (
        <RetirementSettings orgData={orgData} onSave={(data) => updateOrgMutation.mutate(data)} />
      )}
      {activeSection === 'import' && <ImportSettings />}
      {activeSection === 'export' && <ExportSettings />}
    </div>
  )
}

function OrgSettings({ orgData, onSave, saving }: { orgData: any; onSave: (data: any) => void; saving: boolean }) {
  const [pageSize, setPageSize] = useState(getPageSize())
  const [form, setForm] = useState({
    name: '',
    contactName: '',
    contactPhone: '',
    payrollDays: [5] as number[],
    payrollReminderDays: 3,
    retirementReminderEnabled: false,
    esignPolicyEnabled: false,
    esignPayslipEnabled: false,
    esignOnboardingEnabled: false,
    esignTrainingEnabled: false,
    esignPerformanceEnabled: false,
    esignDisciplinaryEnabled: false,
  })

  useEffect(() => {
    if (orgData) {
      setForm({
        name: orgData.name || '',
        contactName: orgData.contactName || '',
        contactPhone: orgData.contactPhone || '',
        payrollDays: Array.isArray(orgData.payrollDays) && orgData.payrollDays.length > 0 ? orgData.payrollDays : [5],
        payrollReminderDays: orgData.payrollReminderDays ?? 3,
        retirementReminderEnabled: orgData.retirementReminderEnabled || false,
        esignPolicyEnabled: orgData.esignPolicyEnabled || false,
        esignPayslipEnabled: orgData.esignPayslipEnabled || false,
        esignOnboardingEnabled: orgData.esignOnboardingEnabled || false,
        esignTrainingEnabled: orgData.esignTrainingEnabled || false,
        esignPerformanceEnabled: orgData.esignPerformanceEnabled || false,
        esignDisciplinaryEnabled: orgData.esignDisciplinaryEnabled || 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>
          <p className="text-xs text-gray-500 mt-1 mb-2">设置每月发薪日期（可多选），系统将在工作日历中显示，并提前提醒</p>
          <div className="flex flex-wrap gap-1.5">
            {Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
              <button
                key={day}
                type="button"
                onClick={() => {
                  const days = form.payrollDays.includes(day)
                    ? form.payrollDays.filter(d => d !== day)
                    : [...form.payrollDays, day].sort((a, b) => a - b)
                  setForm({ ...form, payrollDays: days })
                }}
                className={`w-9 h-9 rounded-md text-xs font-medium border transition-colors ${
                  form.payrollDays.includes(day)
                    ? 'bg-primary text-white border-primary'
                    : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'
                }`}
              >
                {day}
              </button>
            ))}
          </div>
          {form.payrollDays.length > 0 && (
            <p className="text-xs text-gray-500 mt-2">已选：每月 {form.payrollDays.map(d => `${d}号`).join('、')} 发薪</p>
          )}
        </div>
        <div>
          <Label>发薪提前提醒天数</Label>
          <div className="flex items-center gap-3">
            <Input type="number" min={0} max={30} value={form.payrollReminderDays} onChange={(e) => setForm({ ...form, payrollReminderDays: Number(e.target.value) })} className="!w-24" />
            <span className="text-xs text-gray-500">天前在工作台提醒发薪</span>
          </div>
        </div>
        <Button onClick={() => onSave(form)} disabled={saving}>
          {saving ? '保存中...' : '保存'}
        </Button>
      </div>

      {/* 电子签署设置 */}
      <div className="mt-6 pt-6 border-t">
        <div className="flex items-center gap-2 mb-4">
          <PenTool className="w-5 h-5 text-primary" />
          <h3 className="font-medium">电子签署设置</h3>
        </div>
        <div className="grid grid-cols-2 gap-4">
          {([
            { key: 'esignPolicyEnabled', label: '规章制度电子签', desc: '开启后，员工阅读规章制度时需电子签署；关闭时保持阅读确认' },
            { key: 'esignPayslipEnabled', label: '工资条电子签', desc: '开启后，员工确认工资条时需电子签署；关闭时保持点击确认' },
            { key: 'esignOnboardingEnabled', label: '入职文件电子签', desc: '开启后，HR审批通过入职流程时自动创建入职文件签署；关闭时不签' },
            { key: 'esignTrainingEnabled', label: '培训记录电子签', desc: '开启后，员工签收培训记录时需电子签署；关闭时保持点击签收' },
            { key: 'esignPerformanceEnabled', label: '绩效考核电子签', desc: '开启后，员工签字确认绩效时需电子签署；关闭时保持点击确认' },
            { key: 'esignDisciplinaryEnabled', label: '违纪记录电子签', desc: '开启后，员工签字确认违纪记录时需电子签署；关闭时保持点击确认' },
          ] as const).map((item) => (
            <div key={item.key} className="flex items-center justify-between border rounded-lg p-3">
              <div className="flex-1 mr-3">
                <div className="text-sm font-medium">{item.label}</div>
                <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>
              </div>
              <button
                type="button"
                onClick={() => {
                  const next = !form[item.key]
                  setForm({ ...form, [item.key]: next })
                  onSave({ [item.key]: next })
                }}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${form[item.key] ? 'bg-primary' : 'bg-gray-200'}`}
              >
                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${form[item.key] ? 'translate-x-6' : 'translate-x-1'}`} />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* 显示设置 */}
      <div className="mt-6 pt-6 border-t">
        <div className="flex items-center gap-2 mb-4">
          <LayoutGrid className="w-5 h-5 text-primary" />
          <h3 className="font-medium">显示设置</h3>
        </div>
        <div className="space-y-4">
          <div>
            <Label>列表分页大小</Label>
            <p className="text-xs text-gray-500 mt-1 mb-2">设置所有列表页面每页显示的记录条数，保存后立即生效</p>
            <div className="flex items-center gap-3">
              <Select value={String(pageSize)} onChange={(e) => setPageSize(parseInt(e.target.value, 10))} className="!w-32">
                <option value="10">10 条/页</option>
                <option value="20">20 条/页</option>
                <option value="50">50 条/页</option>
                <option value="100">100 条/页</option>
              </Select>
              <Button size="sm" onClick={() => { setGlobalPageSize(pageSize); toast.success(`分页大小已设置为 ${pageSize} 条/页`) }}>保存</Button>
            </div>
          </div>
        </div>
      </div>
    </Card>
  )
}

function RetirementSettings({ orgData, onSave }: { orgData: any; onSave: (data: any) => void }) {
  const queryClient = useQueryClient()
  const [confirming, setConfirming] = useState(false)
  const enabled = orgData?.retirementReminderEnabled || false

  const { data: policyData, isLoading } = useQuery<any>({
    queryKey: ['retirement-policy'],
    queryFn: async () => {
      return await settingsApi.retirementPolicy()
    },
    enabled,
  })

  const confirmMutation = useMutation({
    mutationFn: (id: string) => settingsApi.confirmRetirementPolicy(id),
    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 (
    <Card>
      <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={() => onSave({ retirementReminderEnabled: !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>
      )}
    </Card>
  )
}

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 }) => settingsApi.updateUser(id, data),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
  })

  const toggleDisableMutation = useMutation({
    mutationFn: (id: string) => settingsApi.toggleDisable(id),
    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 settingsApi.addUser(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">导出验收测试清单中各验收人的填写结果，包含每项功能的验收结果和备注</p>
        <Button variant="secondary" size="sm" onClick={handleAcceptanceExport}>
          <Download className="w-4 h-4 mr-1" />导出验收结果（MD）
        </Button>
      </div>
    </div>
  )
}

/** 导出验收测试结果为 Markdown 文档 */
function handleAcceptanceExport() {
  try {
    const PREFIX = 'turbohr_acceptance_'
    const keys = Object.keys(localStorage).filter(k => k.startsWith(PREFIX))
    if (keys.length === 0) {
      toast.info('暂无已保存的验收结果，请先在顶部「验收测试」中填写并保存')
      return
    }

    const resultMap: Record<string, string> = { pass: '✅通过', fail: '❌失败', partial: '⚠️部分通过', untested: '🚫未测试' }
    let md = `# TurboHR 验收测试结果\n\n`
    md += `> **导出时间：** ${new Date().toLocaleString('zh-CN')}\n`
    md += `> **验收人数：** ${keys.length}\n\n`

    for (const key of keys) {
      const raw = localStorage.getItem(key)
      if (!raw) continue
      const data = JSON.parse(raw)
      const name = data.verifier || key.substring(PREFIX.length)
      const results: Record<string, string> = data.results || {}
      const remarks: Record<string, string> = data.remarks || {}

      const values = Object.values(results)
      const pass = values.filter(v => v === 'pass').length
      const fail = values.filter(v => v === 'fail').length
      const partial = values.filter(v => v === 'partial').length
      const untested = values.filter(v => v === 'untested' || !v).length
      const total = values.length
      const tested = pass + fail + partial
      const rate = total > 0 ? Math.round(tested / total * 100) : 0

      md += `## 验收人：${name}\n\n`
      if (data.savedAt) md += `> 保存时间：${new Date(data.savedAt).toLocaleString('zh-CN')}\n`
      md += `\n### 统计\n\n`
      md += `| 指标 | 数值 |\n|------|------|\n`
      md += `| 总项数 | ${total} |\n`
      md += `| 通过 | ${pass} |\n`
      md += `| 失败 | ${fail} |\n`
      md += `| 部分通过 | ${partial} |\n`
      md += `| 未测试 | ${untested} |\n`
      md += `| 完成率 | ${rate}% |\n\n`

      if (data.conclusionResult) {
        const crText: Record<string, string> = { pass: '通过', conditional: '有条件通过', fail: '不通过' }
        md += `### 验收结论\n\n`
        md += `- **总体结论：** ${crText[data.conclusionResult] || '未选择'}\n`
        if (data.conclusionDate) md += `- **验收日期：** ${data.conclusionDate}\n`
        if (data.conclusionIssues) md += `- **遗留问题：**\n${data.conclusionIssues}\n`
        md += `\n`
      }

      md += `### 明细\n\n`
      md += `| # | 结果 | 备注 |\n|---|:----:|------|\n`
      for (const [fid, result] of Object.entries(results)) {
        md += `| ${fid} | ${resultMap[result] || '🚫未测试'} | ${remarks[fid] || ''} |\n`
      }
      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 = `acceptance-results-${new Date().toISOString().slice(0, 10)}.md`
    a.click()
    URL.revokeObjectURL(url)
    toast.success(`已导出 ${keys.length} 位验收人的测试结果`)
  } catch {
    toast.error('导出验收结果失败')
  }
}

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

  const { data: usageData } = useQuery<any>({
    queryKey: ['usage'],
    queryFn: async () => {
      return await settingsApi.usage()
    },
  })

  const planMutation = useMutation({
    mutationFn: (newPlan: string) => settingsApi.updatePlan(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={async () => {
                      if (await confirm({ title: '切换套餐', message: `确定切换到${p.label}？`, variant: 'primary' })) 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 { data: setting } = useQuery<any>({
    queryKey: ['notification-settings'],
    queryFn: async () => {
      return await notificationsApi.settings()
    },
  })

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

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

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

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

  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-3 gap-3">
              <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>
    </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 || '导入失败')
        toast.error(data.error?.message || '导入失败')
      } else {
        setResult(data.data)
        if (data.data.errors?.length > 0) {
          toast.warning(`导入完成，但有 ${data.data.errors.length} 条错误，请查看详情`)
        } else {
          toast.success(`成功导入员工 ${data.data.employees} 人`)
        }
        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 className="flex gap-4">
                <span>成功导入：员工 {result.employees} 人、合同 {result.contracts} 份</span>
                {result.overtime > 0 && <span>加班 {result.overtime} 条</span>}
                {result.disciplinary > 0 && <span>违纪 {result.disciplinary} 条</span>}
                {result.attendance > 0 && <span>考勤 {result.attendance} 条</span>}
              </div>
              {result.skipped > 0 && (
                <div className="text-amber-600">跳过 {result.skipped} 条（数据不完整或格式错误）</div>
              )}
              {result.duplicates > 0 && (
                <div className="text-amber-600">重复 {result.duplicates} 条（身份证号已存在）</div>
              )}
              {result.errors?.length > 0 && (
                <div className="mt-2 pt-2 border-t border-green-200">
                  <div className="font-medium text-amber-600 flex items-center justify-between">
                    <span>错误详情（{result.errors.length}条）：</span>
                    <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) => {
                          const detail = result.details?.[i] || {}
                          return { sheet: detail.sheet || '员工信息', row: detail.row || i + 2, name: detail.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 = '导入错误日志.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>
              )}
              {/* 导入明细 */}
              {result.details?.filter((d: any) => d.status === 'success').length > 0 && (
                <div className="mt-2 pt-2 border-t border-green-200">
                  <div className="font-medium text-gray-600 mb-1">导入明细：</div>
                  <div className="max-h-40 overflow-y-auto">
                    {result.details.filter((d: any) => d.status === 'success').map((d: any, i: number) => (
                      <div key={i} className="flex gap-3 text-xs text-gray-500">
                        <span>第{d.row}行</span>
                        <span>{d.name}</span>
                        {d.employeeId && <span className="text-gray-400">ID: {d.employeeId.slice(0, 8)}...</span>}
                        <span className="text-safe">✓ {d.message}</span>
                      </div>
                    ))}
                  </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 || '导入失败')
        toast.error(data.error?.message || '导入失败')
      } else {
        setResult(data.data)
        if (data.data.errors?.length > 0) {
          toast.warning(`导入完成，但有 ${data.data.errors.length} 条错误，请查看详情`)
        } else {
          toast.success('月度数据导入成功')
        }
        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>
  )
}