import { useState, useEffect } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Calculator, Info, Check, Settings as SettingsIcon, Plus, History, ChevronDown, ChevronRight, Edit2, Trash2, Sparkles, AlertCircle } from 'lucide-react'
import { socialInsuranceApi, socialAccountApi } from '../../lib/api-services'
import { useConfirm } from '../../hooks/useConfirm'
import Card from '../../components/ui/Card'
import Button from '../../components/ui/Button'
import { Input, Label } from '../../components/ui/Input'

/** 金额格式化：保留两位小数 + 千分位 */
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })

/**
 * 账户卡片组件
 * 展示账户基本信息，点击可展开显示当前年度标准、操作按钮、试算工具等
 */
export function AccountCard({
  account,
  isHousing,
  onEdit,
  onDelete,
}: {
  account: any
  isHousing: boolean
  onEdit: (account: any) => void
  onDelete: (account: any) => void
}) {
  const queryClient = useQueryClient()
  const confirm = useConfirm()
  const [expanded, setExpanded] = useState(false)
  const [showNewVersion, setShowNewVersion] = useState(false)
  const [showVersions, setShowVersions] = useState(false)
  const [showAdjust, setShowAdjust] = useState(false)
  const [adjustData, setAdjustData] = useState<any>(null)
  const [editItems, setEditItems] = useState<Record<string, number>>({})
  const [editingId, setEditingId] = useState<string | null>(null)
  const [minWageInput, setMinWageInput] = useState('0')
  const [base, setBase] = useState(8000)

  const [newVersion, setNewVersion] = useState<any>({
    effectiveFrom: new Date().toISOString().slice(0, 7),
    city: account.city,
    pensionOrg: 16, pensionEmp: 8,
    medicalOrg: 9.8, medicalEmp: 2, medicalOrgExtra: 0, medicalEmpExtra: 0,
    unemploymentOrg: 0.5, unemploymentEmp: 0.5,
    injuryOrg: 0.2, maternityOrg: 0.8,
    baseMin: isHousing ? 2540 : 6326, baseMax: isHousing ? 35811 : 33891,
    medicalBaseMin: 0, medicalBaseMax: 0,
    minWage: 0,
    extraInsurances: [],
    // 公积金字段
    accountType: account.accountType || 'BASIC',
    housingOrg: 12, housingEmp: 12,
    housingBaseMin: 0, housingBaseMax: 0,
  })

  // 查询当前年度标准（展开时才查询）
  const { data: config, isLoading: configLoading } = useQuery<any>({
    queryKey: ['account-current-standard', account.id],
    queryFn: () => socialAccountApi.currentStandard(account.id),
    enabled: expanded,
  })

  // 查询版本历史（展开且显示历史时才查询）
  const { data: versions } = useQuery<any[]>({
    queryKey: ['account-standards', account.id],
    queryFn: () => socialAccountApi.standards(account.id),
    enabled: expanded && showVersions,
  })

  // 查询公积金所有账户当前配置（用于展示多账户概览）
  const { data: housingAllAccounts } = useQuery<any[]>({
    queryKey: ['housing-config-all-accounts', account.city],
    queryFn: async () => {
      const res = await socialInsuranceApi.housingConfigVersions(account.city) as any
      const current = (res || []).filter((v: any) => v.isCurrent)
      return current
    },
    enabled: expanded && isHousing,
  })

  // 试算结果
  const { data: calcResult, mutate: calcMutate, isPending: calcPending } = useMutation<any>({
    mutationFn: async () => {
      if (isHousing) {
        return await socialInsuranceApi.housingCalculate(base, account.city)
      }
      return await socialInsuranceApi.calculate(base, account.city)
    },
  })

  // 新建年度标准
  const createVersionMutation = useMutation({
    mutationFn: (data: any) => socialAccountApi.createStandard(account.id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['account-current-standard'] })
      queryClient.invalidateQueries({ queryKey: ['account-standards'] })
      queryClient.invalidateQueries({ queryKey: ['social-accounts'] })
      setShowNewVersion(false)
      toast.success('新年度标准已创建，旧版本已自动归档')
    },
    onError: (err: any) => {
      const msg = err?.response?.data?.message || err?.message || '创建失败'
      toast.error(msg)
    },
  })

  // 快速更新最低工资（无需新建版本）
  const updateMinWageMutation = useMutation({
    mutationFn: () => socialAccountApi.updateMinWage(account.id, Number(minWageInput) || 0),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['account-current-standard', account.id] })
      queryClient.invalidateQueries({ queryKey: ['account-standards', account.id] })
      queryClient.invalidateQueries({ queryKey: ['social-accounts'] })
      toast.success('最低工资标准已更新')
    },
    onError: (err: any) => toast.error(err?.response?.data?.error?.message || '更新失败'),
  })

  // 当前配置变化时同步最低工资输入框
  useEffect(() => {
    setMinWageInput(String(config?.minWage || 0))
  }, [config?.minWage])

  // AI 建议
  const aiSuggestMut = useMutation<any, any, { city: string; effectiveFrom: string; type: 'social' | 'housing' }>({
    mutationFn: async (vars: { city: string; effectiveFrom: string; type: 'social' | 'housing' }) => {
      return await socialInsuranceApi.aiSuggest(vars)
    },
    onSuccess: (data) => {
      if (isHousing) {
        setNewVersion({
          ...newVersion,
          baseMin: data.baseMin ?? newVersion.baseMin,
          baseMax: data.baseMax ?? newVersion.baseMax,
          housingOrg: data.housingOrg ?? newVersion.housingOrg,
          housingEmp: data.housingEmp ?? newVersion.housingEmp,
        })
      } else {
        setNewVersion({
          ...newVersion,
          baseMin: data.baseMin ?? newVersion.baseMin,
          baseMax: data.baseMax ?? newVersion.baseMax,
          medicalBaseMin: data.medicalBaseMin ?? 0,
          medicalBaseMax: data.medicalBaseMax ?? 0,
          pensionOrg: data.pensionOrg ?? newVersion.pensionOrg,
          pensionEmp: data.pensionEmp ?? newVersion.pensionEmp,
          medicalOrg: data.medicalOrg ?? newVersion.medicalOrg,
          medicalEmp: data.medicalEmp ?? newVersion.medicalEmp,
          unemploymentOrg: data.unemploymentOrg ?? newVersion.unemploymentOrg,
          unemploymentEmp: data.unemploymentEmp ?? newVersion.unemploymentEmp,
          injuryOrg: data.injuryOrg ?? newVersion.injuryOrg,
          maternityOrg: data.maternityOrg ?? newVersion.maternityOrg,
          extraInsurances: data.extraInsurances ?? [],
        })
      }
      toast.success('AI建议已填入，请核对后保存')
    },
    onError: () => {
      toast.error('AI建议获取失败，请手动填写')
    },
  })

  // 调基预览
  const previewAdjustMutation = useMutation({
    mutationFn: async () => {
      if (isHousing) {
        return await socialInsuranceApi.housingAdjustPreview(config?.id)
      }
      return await socialInsuranceApi.adjustPreview(config?.id)
    },
    onSuccess: (data) => {
      setAdjustData(data)
      setShowAdjust(true)
    },
  })

  // 应用调基
  const applyAdjustMutation = useMutation({
    mutationFn: (data: { items: { employeeId: string; newBase: number }[] }) => {
      if (isHousing) {
        return socialInsuranceApi.applyHousingAdjust(config?.id, data)
      }
      return socialInsuranceApi.applyAdjust(config?.id, data)
    },
    onSuccess: (res: any) => {
      queryClient.invalidateQueries({ queryKey: ['account-current-standard', account.id] })
      queryClient.invalidateQueries({ queryKey: ['account-standards', account.id] })
      queryClient.invalidateQueries({ queryKey: ['roster-profile'] })
      queryClient.invalidateQueries({ queryKey: ['roster'] })
      setShowAdjust(false)
      setAdjustData(null)
      setEditItems({})
      setEditingId(null)
      toast.success(`调整完成，共调整 ${res.data?.adjusted || 0} 名员工的${isHousing ? '公积金' : '社保'}基数`)
    },
  })

  // 重置调基
  const resetAdjustMutation = useMutation({
    mutationFn: () => {
      if (isHousing) {
        return socialInsuranceApi.resetHousingAdjust(config?.id, account.city)
      }
      return socialInsuranceApi.resetAdjust(config?.id, account.city)
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['account-current-standard', account.id] })
      queryClient.invalidateQueries({ queryKey: ['account-standards', account.id] })
      toast.success(`${isHousing ? '公积金' : '社保'}基数调整已重置，可以重新调整`)
    },
  })

  // 设为默认
  const setDefaultMutation = useMutation({
    mutationFn: (id: string) => socialAccountApi.setDefault(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['social-accounts'] })
      toast.success('已设为默认')
    },
  })

  const deptCount = (account._count?.deptSocialAccounts || 0) + (account._count?.deptHousingAccounts || 0)
  const recordCount = (account._count?.socialRecords || 0) + (account._count?.housingRecords || 0)

  return (
    <div className="border border-gray-200 rounded-lg overflow-hidden">
      {/* 卡片头部（点击展开/折叠） */}
      <div
        className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors"
        onClick={() => setExpanded(!expanded)}
      >
        <div className="flex items-center gap-3 flex-1 min-w-0">
          {expanded ? <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" /> : <ChevronRight className="w-4 h-4 text-gray-400 shrink-0" />}
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-sm font-medium">{account.name}</span>
            {account.isDefault && <span className="px-1.5 py-0.5 rounded text-xs bg-green-50 text-safe">默认</span>}
            {account.status === 'SUSPENDED' && <span className="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-500">已停用</span>}
          </div>
          <div className="text-xs text-gray-500 flex items-center gap-2 flex-wrap min-w-0">
            <span>{account.city}</span>
            {account.accountNo && <span className="text-gray-400">· {account.accountNo}</span>}
            <span className="text-gray-400">· {deptCount}个部门 · {recordCount}条记录</span>
          </div>
        </div>
        <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
          {!account.isDefault && account.status === 'ACTIVE' && (
            <button onClick={() => setDefaultMutation.mutate(account.id)} className="text-xs text-primary hover:underline" title="设为默认">设为默认</button>
          )}
          <button onClick={() => onEdit(account)} className="p-1 text-gray-400 hover:text-primary" title="编辑">
            <Edit2 className="w-4 h-4" />
          </button>
          <button
            onClick={async () => {
              if (await confirm({ title: '删除确认', message: `确认删除账户"${account.name}"？关联的参保记录不会被删除。`, variant: 'danger' })) {
                onDelete(account)
              }
            }}
            className="p-1 text-gray-400 hover:text-danger" title="删除"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* 展开内容 */}
      {expanded && (
        <div className="border-t border-gray-200 p-4 space-y-3 bg-gray-50/50">
          {/* 账户详情 */}
          <div className="text-xs text-gray-500 space-y-0.5">
            {account.orgName && <div>缴费主体：{account.orgName} {account.orgCode && `（${account.orgCode}）`}</div>}
            {isHousing && account.bankName && <div>开户行：{account.bankName} {account.bankAccount && `· ${account.bankAccount}`}</div>}
            {isHousing && account.accountType && <div>账户类型：{account.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'}</div>}
          </div>

          {/* 当前年度标准展示 */}
          {configLoading ? (
            <Card><div className="text-center py-4 text-gray-500 text-sm">加载中...</div></Card>
          ) : config ? (
            <Card>
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <span className="px-2 py-0.5 rounded text-xs bg-green-50 text-safe">当前生效</span>
                  <span className="text-sm text-gray-500">生效月份：{config.effectiveFrom}</span>
                  <span className="text-sm text-gray-500">· {config.city}</span>
                  {config.adjustmentDone && (
                    <span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-500">已调整员工基数</span>
                  )}
                </div>
                <div className="flex items-center gap-2">
                  {config.adjustmentDone && (
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={async () => {
                        if (await confirm({ title: '重置确认', message: `确定要重置${isHousing ? '公积金' : '社保'}基数调整吗？重置后可重新调整。`, variant: 'primary' })) {
                          resetAdjustMutation.mutate()
                        }
                      }}
                      disabled={resetAdjustMutation.isPending}
                    >
                      <SettingsIcon className="w-4 h-4 mr-1" />
                      {resetAdjustMutation.isPending ? '重置中...' : '重置调整'}
                    </Button>
                  )}
                  <Button
                    variant="secondary"
                    size="sm"
                    onClick={() => previewAdjustMutation.mutate()}
                    disabled={config.adjustmentDone || previewAdjustMutation.isPending}
                  >
                    <SettingsIcon className="w-4 h-4 mr-1" />
                    {config.adjustmentDone ? '已调整' : previewAdjustMutation.isPending ? '加载中...' : `批量调基`}
                  </Button>
                </div>
              </div>
              <div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-center gap-2 mb-3">
                <Info className="w-4 h-4 shrink-0" />
                <span>批量调整用于每年7月统一调基。如需单独调整某员工基数，请前往「花名册」→ 点击员工 → 编辑 → 修改「社保缴费基数」/「公积金缴费基数」。</span>
              </div>
              {isHousing ? (
                <>
                  {(housingAllAccounts || []).length > 1 && (
                    <div className="flex gap-2 mb-3">
                      {(housingAllAccounts || []).map((a: any) => (
                        <span key={a.id} className={`px-2 py-0.5 rounded text-xs ${a.accountType === 'SUPPLEMENTARY' ? 'bg-purple-50 text-purple-700' : 'bg-blue-50 text-blue-700'}`}>
                          {a.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'} {a.housingOrg}%/{a.housingEmp}%
                        </span>
                      ))}
                    </div>
                  )}
                  <div className="space-y-3">
                    {/* 缴费基数范围 */}
                    <div className="bg-gray-50 rounded-lg p-3">
                      <div className="text-xs font-medium text-gray-400 mb-2">缴费基数范围</div>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">账户类型</span>
                          <span className="font-medium">{config.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'}</span>
                        </div>
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">下限</span>
                          <span className="font-medium">¥{fmt(config.housingBaseMin > 0 ? config.housingBaseMin : config.baseMin)}</span>
                        </div>
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">上限</span>
                          <span className="font-medium">¥{fmt(config.housingBaseMax > 0 ? config.housingBaseMax : config.baseMax)}</span>
                        </div>
                      </div>
                    </div>
                    {/* 缴存比例（企业 / 个人） */}
                    <div className="bg-gray-50 rounded-lg p-3">
                      <div className="text-xs font-medium text-gray-400 mb-2">缴存比例（企业 / 个人）</div>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">公积金</span>
                          <span className="font-medium">{config.housingOrg}% / {config.housingEmp}%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </>
              ) : (
                <div className="space-y-3">
                  {/* 缴费基数范围 */}
                  <div className="bg-gray-50 rounded-lg p-3">
                    <div className="text-xs font-medium text-gray-400 mb-2">缴费基数范围</div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">下限</span>
                        <span className="font-medium">¥{fmt(config.baseMin)}</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">上限</span>
                        <span className="font-medium">¥{fmt(config.baseMax)}</span>
                      </div>
                      {config.medicalBaseMin > 0 && (
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">医保基数下限</span>
                          <span className="font-medium">¥{fmt(config.medicalBaseMin)}</span>
                        </div>
                      )}
                      {config.medicalBaseMax > 0 && (
                        <div className="flex flex-col">
                          <span className="text-xs text-gray-400">医保基数上限</span>
                          <span className="font-medium">¥{fmt(config.medicalBaseMax)}</span>
                        </div>
                      )}
                    </div>
                  </div>
                  {/* 险种费率 */}
                  <div className="bg-gray-50 rounded-lg p-3">
                    <div className="text-xs font-medium text-gray-400 mb-2">险种费率（企业 / 个人）</div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">养老</span>
                        <span className="font-medium">{config.pensionOrg}% / {config.pensionEmp}%</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">医疗</span>
                        <span className="font-medium">{config.medicalOrg}% / {config.medicalEmp}%{(config.medicalOrgExtra > 0 || config.medicalEmpExtra > 0) && ` + ¥${fmt(config.medicalOrgExtra)}/¥${fmt(config.medicalEmpExtra)}`}</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">失业</span>
                        <span className="font-medium">{config.unemploymentOrg}% / {config.unemploymentEmp}%</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">工伤</span>
                        <span className="font-medium">{config.injuryOrg}%</span>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">生育</span>
                        <span className="font-medium">{config.maternityOrg}%</span>
                      </div>
                      {Array.isArray(config.extraInsurances) && config.extraInsurances.map((ins: any, idx: number) => (
                        <div key={idx} className="flex flex-col">
                          <span className="text-xs text-gray-400">{ins.name}</span>
                          <span className="font-medium">
                            {ins.baseType === 'fixed'
                              ? `¥${ins.fixedAmount} / ¥${ins.empFixedAmount || 0}`
                              : `${ins.orgRate}% / ${ins.empRate}%`}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                  {/* 其他标准 */}
                  <div className="bg-gray-50 rounded-lg p-3">
                    <div className="text-xs font-medium text-gray-400 mb-2">其他标准</div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                      {/* 最低工资标准（内联编辑，仅社保） */}
                      <div className="flex flex-col">
                        <span className="text-xs text-gray-400">最低工资标准</span>
                        <div className="flex items-center gap-1.5 mt-0.5">
                          <Input
                            type="number"
                            value={minWageInput}
                            onChange={(e) => setMinWageInput(e.target.value)}
                            placeholder="0"
                            className="w-20 h-7 text-sm text-right"
                          />
                          <Button
                            size="sm"
                            variant="secondary"
                            onClick={() => updateMinWageMutation.mutate()}
                            disabled={updateMinWageMutation.isPending}
                            className="h-7 px-2 text-xs whitespace-nowrap"
                          >
                            {updateMinWageMutation.isPending ? '保存中' : '保存'}
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </Card>
          ) : (
            <Card><div className="text-center py-6 text-gray-500 text-sm">该账户暂无{isHousing ? '公积金' : '社保'}年度标准，请点击「新建年度标准」创建</div></Card>
          )}

          {/* 操作按钮 */}
          <div className="flex items-center gap-2">
            <Button size="sm" onClick={async () => {
              if (!showNewVersion) {
                // 打开新建表单时，自动继承当前标准或旧配置
                try {
                  const inherited = await socialAccountApi.inheritConfig(account.id)
                  if (inherited) {
                    setNewVersion({
                      ...newVersion,
                      effectiveFrom: new Date().toISOString().slice(0, 7),
                      city: account.city,
                      pensionOrg: inherited.pensionOrg ?? newVersion.pensionOrg,
                      pensionEmp: inherited.pensionEmp ?? newVersion.pensionEmp,
                      medicalOrg: inherited.medicalOrg ?? newVersion.medicalOrg,
                      medicalEmp: inherited.medicalEmp ?? newVersion.medicalEmp,
                      medicalOrgExtra: inherited.medicalOrgExtra ?? 0,
                      medicalEmpExtra: inherited.medicalEmpExtra ?? 0,
                      unemploymentOrg: inherited.unemploymentOrg ?? newVersion.unemploymentOrg,
                      unemploymentEmp: inherited.unemploymentEmp ?? newVersion.unemploymentEmp,
                      injuryOrg: inherited.injuryOrg ?? newVersion.injuryOrg,
                      maternityOrg: inherited.maternityOrg ?? newVersion.maternityOrg,
                      baseMin: inherited.baseMin ?? newVersion.baseMin,
                      baseMax: inherited.baseMax ?? newVersion.baseMax,
                      medicalBaseMin: inherited.medicalBaseMin ?? 0,
                      medicalBaseMax: inherited.medicalBaseMax ?? 0,
                      minWage: inherited.minWage ?? 0,
                      extraInsurances: inherited.extraInsurances ?? [],
                      housingOrg: inherited.housingOrg ?? newVersion.housingOrg,
                      housingEmp: inherited.housingEmp ?? newVersion.housingEmp,
                      housingBaseMin: inherited.housingBaseMin ?? 0,
                      housingBaseMax: inherited.housingBaseMax ?? 0,
                      accountType: account.accountType || 'BASIC',
                    })
                  }
                } catch {}
              }
              setShowNewVersion(!showNewVersion)
            }}>
              <Plus className="w-4 h-4 mr-1" />新建年度标准
            </Button>
            <Button variant="secondary" size="sm" onClick={() => setShowVersions(!showVersions)}>
              <History className="w-4 h-4 mr-1" />
              {showVersions ? '收起历史' : '查看历史'}
            </Button>
          </div>

          {/* 调基预览 */}
          {showAdjust && adjustData && (
            <Card>
              <h3 className="text-sm font-medium mb-3 flex items-center gap-2">
                <SettingsIcon className="w-4 h-4" />员工{isHousing ? '公积金' : '社保'}基数调整
              </h3>
              <div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-start gap-2 mb-3">
                <Info className="w-4 h-4 mt-0.5 shrink-0" />
                <div>
                  按当前版本基数上下限（¥{fmt(adjustData.baseMin)} ~ ¥{fmt(adjustData.baseMax)}）调整全部在职员工{isHousing ? '公积金' : '社保'}缴费基数。
                  建议基数=上年月均工资按上下限裁剪。您可逐行修改，也可点击「采用建议值」或「保持原基数」。确认后保存，此操作只能执行一次。
                </div>
              </div>
              <div className="flex items-center gap-2 mb-3">
                <Button variant="secondary" size="sm" onClick={() => {
                  const newEdits: Record<string, number> = {}
                  adjustData.items.forEach((i: any) => { newEdits[i.employeeId] = i.suggestedBase })
                  setEditItems(newEdits)
                }}>
                  <Check className="w-3.5 h-3.5 mr-1" />全部采用建议值
                </Button>
                <Button variant="secondary" size="sm" onClick={() => {
                  const newEdits: Record<string, number> = {}
                  adjustData.items.forEach((i: any) => { newEdits[i.employeeId] = i.oldBase })
                  setEditItems(newEdits)
                }}>
                  全部保持原基数
                </Button>
                <span className="text-xs text-gray-400">共 {adjustData.total} 名员工</span>
              </div>
              <div className="overflow-x-auto mb-4">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b text-xs text-gray-500">
                      <th className="py-2 text-left">姓名</th>
                      <th className="py-2 text-left">部门</th>
                      <th className="py-2 text-right">上年月均</th>
                      <th className="py-2 text-right">{isHousing ? '公积金' : '社保'}基数(当前)</th>
                      <th className="py-2 text-right">{isHousing ? '公积金' : '社保'}基数(建议)</th>
                      <th className="py-2 text-right">{isHousing ? '公积金' : '社保'}基数(新)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {adjustData.items.map((item: any) => {
                      const edit = editItems[item.employeeId]
                      const newBase = edit ?? item.suggestedBase
                      const changed = newBase !== item.oldBase
                      return (
                        <tr key={item.employeeId} className="border-b last:border-0">
                          <td className="py-1.5">{item.name}</td>
                          <td className="py-1.5 text-gray-500">{item.department}</td>
                          <td className="py-1.5 text-right text-gray-400">¥{fmt(item.avgSalary)}</td>
                          <td className="py-1.5 text-right text-gray-400">¥{fmt(item.oldBase)}</td>
                          <td className="py-1.5 text-right text-gray-500">¥{fmt(item.suggestedBase)}</td>
                          <td className="py-1.5 text-right">
                            {editingId === item.employeeId ? (
                              <Input type="number" step="0.01" min="0" className="!w-28 text-right text-xs" value={newBase}
                                onChange={(e) => setEditItems({ ...editItems, [item.employeeId]: Number(e.target.value) || 0 })}
                                onBlur={() => setEditingId(null)}
                                autoFocus />
                            ) : (
                              <span className="cursor-text inline-block !w-28 text-right"
                                onClick={() => setEditingId(item.employeeId)}>
                                ¥{fmt(newBase)}
                              </span>
                            )}
                            {changed && <span className="text-warning ml-1">●</span>}
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
              <div className="flex gap-2">
                <Button onClick={() => {
                  const items = adjustData.items.map((i: any) => ({ employeeId: i.employeeId, newBase: editItems[i.employeeId] ?? i.suggestedBase }))
                  applyAdjustMutation.mutate({ items })
                }} disabled={applyAdjustMutation.isPending}>
                  {applyAdjustMutation.isPending ? '保存中...' : '确认保存'}
                </Button>
                <Button variant="secondary" onClick={() => { setShowAdjust(false); setAdjustData(null); setEditItems({}); setEditingId(null) }}>取消</Button>
              </div>
            </Card>
          )}

          {/* 版本历史 */}
          {showVersions && (
            <Card>
              <h3 className="text-xs font-medium mb-3 flex items-center gap-2"><History className="w-4 h-4" />{isHousing ? '公积金' : '社保'}版本历史</h3>
              {!versions || versions.length === 0 ? (
                <div className="text-center py-4 text-gray-400 text-xs">暂无版本记录</div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="border-b text-xs text-gray-500">
                        <th className="py-2 text-left">生效月份</th>
                        <th className="py-2 text-left">失效月份</th>
                        <th className="py-2 text-left">城市</th>
                        {isHousing && <th className="py-2 text-left">账户类型</th>}
                        <th className="py-2 text-right">基数下限</th>
                        <th className="py-2 text-right">基数上限</th>
                        {isHousing ? (
                          <th className="py-2 text-right">公积金%</th>
                        ) : (
                          <>
                            <th className="py-2 text-right">养老%</th>
                            <th className="py-2 text-right">医疗%</th>
                          </>
                        )}
                        <th className="py-2 text-center">状态</th>
                      </tr>
                    </thead>
                    <tbody>
                      {versions.map((v: any) => (
                        <tr key={v.id} className="border-b last:border-0 hover:bg-gray-50">
                          <td className="py-2">{v.effectiveFrom}</td>
                          <td className="py-2 text-gray-400">{v.effectiveTo || '—'}</td>
                          <td className="py-2">{v.city}</td>
                          {isHousing && <td className="py-2">{v.accountType === 'SUPPLEMENTARY' ? '补充公积金' : '基本公积金'}</td>}
                          <td className="py-2 text-right">¥{fmt(v.baseMin)}</td>
                          <td className="py-2 text-right">¥{fmt(v.baseMax)}</td>
                          {isHousing ? (
                            <td className="py-2 text-right text-gray-500">{v.housingOrg}/{v.housingEmp}</td>
                          ) : (
                            <>
                              <td className="py-2 text-right text-gray-500">{v.pensionOrg}/{v.pensionEmp}</td>
                              <td className="py-2 text-right text-gray-500">{v.medicalOrg}/{v.medicalEmp}</td>
                            </>
                          )}
                          <td className="py-2 text-center">
                            {v.isCurrent ? <span className="px-2 py-0.5 rounded bg-green-50 text-safe">当前</span> : <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-400">历史</span>}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </Card>
          )}

          {/* 新建年度标准 */}
          {showNewVersion && (
            <Card>
              <h3 className="text-xs font-medium mb-3 flex items-center gap-2"><Plus className="w-4 h-4" />新建{isHousing ? '公积金' : '社保'}年度标准</h3>
              <div className="space-y-3">
                <div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-start gap-2">
                  <Info className="w-4 h-4 mt-0.5 shrink-0" />
                  <div>新版本生效后，当前版本将自动归档。发薪批次计算时按批次月份匹配对应版本的配置。通常每年7月调基时新建版本。</div>
                </div>
                <button
                  type="button"
                  className="flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 font-medium"
                  onClick={() => aiSuggestMut.mutate({ city: account.city, effectiveFrom: newVersion.effectiveFrom, type: isHousing ? 'housing' : 'social' })}
                  disabled={aiSuggestMut.isPending}
                >
                  <Sparkles className="w-4 h-4" />
                  {aiSuggestMut.isPending ? 'AI获取中...' : 'AI建议 — 根据城市和年份自动填充最新政策'}
                </button>
                <div className="grid md:grid-cols-3 gap-3">
                  <div><Label>生效月份</Label><Input type="month" value={newVersion.effectiveFrom} onChange={(e) => setNewVersion({ ...newVersion, effectiveFrom: e.target.value })} /></div>
                  <div><Label>城市</Label>
                    <Input value={account.city} disabled className="bg-gray-50" />
                    <p className="text-xs text-gray-400 mt-1">从账户继承</p>
                  </div>
                  <div><Label>{isHousing ? '公积金基数下限' : '缴费基数下限'}</Label><Input type="number" value={newVersion.baseMin} onChange={(e) => setNewVersion({ ...newVersion, baseMin: Number(e.target.value) })} /></div>
                  <div><Label>{isHousing ? '公积金基数上限' : '缴费基数上限'}</Label><Input type="number" value={newVersion.baseMax} onChange={(e) => setNewVersion({ ...newVersion, baseMax: Number(e.target.value) })} /></div>
                </div>
                {!isHousing && (
                  <div className="grid md:grid-cols-2 gap-3">
                    <div>
                      <Label>医保/生育基数下限</Label>
                      <Input type="number" value={newVersion.medicalBaseMin} onChange={(e) => setNewVersion({ ...newVersion, medicalBaseMin: Number(e.target.value) })} />
                      <p className="text-xs text-gray-400 mt-1">填 0 时使用统一基数下限</p>
                    </div>
                    <div>
                      <Label>医保/生育基数上限</Label>
                      <Input type="number" value={newVersion.medicalBaseMax} onChange={(e) => setNewVersion({ ...newVersion, medicalBaseMax: Number(e.target.value) })} />
                      <p className="text-xs text-gray-400 mt-1">填 0 时使用统一基数上限</p>
                    </div>
                  </div>
                )}
                {!isHousing && (
                  <div className="grid md:grid-cols-3 gap-3">
                    <div>
                      <Label>最低工资标准</Label>
                      <Input type="number" value={newVersion.minWage} onChange={(e) => setNewVersion({ ...newVersion, minWage: Number(e.target.value) })} placeholder="如 2420" />
                      <p className="text-xs text-gray-400 mt-1">当地月最低工资标准，填 0 不检查。实发低于此值时触发保护（递延扣款）</p>
                    </div>
                  </div>
                )}
                {isHousing ? (
                  <>
                    <div className="grid md:grid-cols-3 gap-3">
                      <div>
                        <Label>账户类型</Label>
                        <select className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm" value={newVersion.accountType || 'BASIC'} onChange={(e) => setNewVersion({ ...newVersion, accountType: e.target.value })}>
                          <option value="BASIC">基本公积金</option>
                          <option value="SUPPLEMENTARY">补充公积金</option>
                        </select>
                      </div>
                      <div><Label>公积金(企业%)</Label><Input type="number" step="0.1" value={newVersion.housingOrg} onChange={(e) => setNewVersion({ ...newVersion, housingOrg: Number(e.target.value) })} /></div>
                      <div><Label>公积金(个人%)</Label><Input type="number" step="0.1" value={newVersion.housingEmp} onChange={(e) => setNewVersion({ ...newVersion, housingEmp: Number(e.target.value) })} /></div>
                    </div>
                  </>
                ) : (
                  <div className="grid md:grid-cols-4 gap-3">
                    <div><Label>养老(企业%)</Label><Input type="number" step="0.1" value={newVersion.pensionOrg} onChange={(e) => setNewVersion({ ...newVersion, pensionOrg: Number(e.target.value) })} /></div>
                    <div><Label>养老(个人%)</Label><Input type="number" step="0.1" value={newVersion.pensionEmp} onChange={(e) => setNewVersion({ ...newVersion, pensionEmp: Number(e.target.value) })} /></div>
                    <div><Label>医疗(企业%)</Label><Input type="number" step="0.1" value={newVersion.medicalOrg} onChange={(e) => setNewVersion({ ...newVersion, medicalOrg: Number(e.target.value) })} /></div>
                    <div><Label>医疗(个人%)</Label><Input type="number" step="0.1" value={newVersion.medicalEmp} onChange={(e) => setNewVersion({ ...newVersion, medicalEmp: Number(e.target.value) })} /></div>
                    <div><Label>医疗企业附加(元)</Label><Input type="number" step="0.01" value={newVersion.medicalOrgExtra} onChange={(e) => setNewVersion({ ...newVersion, medicalOrgExtra: Number(e.target.value) })} placeholder="0" /><p className="text-xs text-gray-400 mt-1">固定金额，如大病医疗</p></div>
                    <div><Label>医疗个人附加(元)</Label><Input type="number" step="0.01" value={newVersion.medicalEmpExtra} onChange={(e) => setNewVersion({ ...newVersion, medicalEmpExtra: Number(e.target.value) })} placeholder="如 北京3元" /><p className="text-xs text-gray-400 mt-1">固定金额，如北京3元大病医疗</p></div>
                    <div><Label>失业(企业%)</Label><Input type="number" step="0.1" value={newVersion.unemploymentOrg} onChange={(e) => setNewVersion({ ...newVersion, unemploymentOrg: Number(e.target.value) })} /></div>
                    <div><Label>失业(个人%)</Label><Input type="number" step="0.1" value={newVersion.unemploymentEmp} onChange={(e) => setNewVersion({ ...newVersion, unemploymentEmp: Number(e.target.value) })} /></div>
                    <div><Label>工伤(企业%)</Label><Input type="number" step="0.1" value={newVersion.injuryOrg} onChange={(e) => setNewVersion({ ...newVersion, injuryOrg: Number(e.target.value) })} /></div>
                    <div><Label>生育(企业%)</Label><Input type="number" step="0.1" value={newVersion.maternityOrg} onChange={(e) => setNewVersion({ ...newVersion, maternityOrg: Number(e.target.value) })} /></div>
                  </div>
                )}
                {!isHousing && (
                  <div className="border rounded-md p-3 space-y-2 bg-gray-50">
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-medium text-gray-700">附加险种（大病险/长护险等）</span>
                      <button
                        type="button"
                        className="text-xs text-primary hover:underline"
                        onClick={() => setNewVersion({
                          ...newVersion,
                          extraInsurances: [...(newVersion.extraInsurances || []), { name: '', orgRate: 0, empRate: 0, baseType: 'pension', fixedAmount: 0, empFixedAmount: 0 }],
                        })}
                      >
                        + 添加险种
                      </button>
                    </div>
                    {(newVersion.extraInsurances || []).map((ins: any, idx: number) => (
                      <div key={idx} className="grid grid-cols-5 gap-2 items-end">
                        <div><Label>险种名称</Label><Input value={ins.name} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, name: e.target.value }; setNewVersion({ ...newVersion, extraInsurances: arr }) }} /></div>
                        <div>
                          <Label>计算方式</Label>
                          <select className="w-full h-9 rounded-md border border-input px-2 text-sm" value={ins.baseType} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, baseType: e.target.value }; setNewVersion({ ...newVersion, extraInsurances: arr }) }}>
                            <option value="pension">按养老基数</option>
                            <option value="medical">按医保基数</option>
                            <option value="fixed">固定金额</option>
                          </select>
                        </div>
                        {ins.baseType === 'fixed' ? (
                          <>
                            <div><Label>企业固定(元)</Label><Input type="number" value={ins.fixedAmount} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, fixedAmount: Number(e.target.value) }; setNewVersion({ ...newVersion, extraInsurances: arr }) }} /></div>
                            <div><Label>个人固定(元)</Label><Input type="number" value={ins.empFixedAmount} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, empFixedAmount: Number(e.target.value) }; setNewVersion({ ...newVersion, extraInsurances: arr }) }} /></div>
                          </>
                        ) : (
                          <>
                            <div><Label>企业%</Label><Input type="number" step="0.01" value={ins.orgRate} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, orgRate: Number(e.target.value) }; setNewVersion({ ...newVersion, extraInsurances: arr }) }} /></div>
                            <div><Label>个人%</Label><Input type="number" step="0.01" value={ins.empRate} onChange={(e) => { const arr = [...(newVersion.extraInsurances || [])]; arr[idx] = { ...ins, empRate: Number(e.target.value) }; setNewVersion({ ...newVersion, extraInsurances: arr }) }} /></div>
                          </>
                        )}
                        <button type="button" className="text-xs text-danger h-9" onClick={() => { const arr = (newVersion.extraInsurances || []).filter((_: any, i: number) => i !== idx); setNewVersion({ ...newVersion, extraInsurances: arr }) }}>删除</button>
                      </div>
                    ))}
                  </div>
                )}
                <div className="flex gap-2">
                  <Button onClick={() => createVersionMutation.mutate(newVersion)} disabled={createVersionMutation.isPending}>
                    {createVersionMutation.isPending ? '保存中...' : '创建年度标准'}
                  </Button>
                  <Button variant="secondary" onClick={() => setShowNewVersion(false)}>取消</Button>
                </div>
              </div>
            </Card>
          )}

          {/* 试算工具 */}
          <div className="grid md:grid-cols-2 gap-4">
            <Card>
              <h2 className="text-sm font-medium mb-3">{isHousing ? '公积金' : '社保'}试算</h2>
              <div className="space-y-3">
                <div>
                  <Label>缴费基数（月工资）</Label>
                  <Input type="number" value={base} onChange={(e) => setBase(Number(e.target.value) || 0)} />
                </div>
                <Button onClick={() => calcMutate()} disabled={calcPending}>
                  <Calculator className="w-4 h-4 mr-1" />
                  {calcPending ? '计算中...' : '开始计算'}
                </Button>
                {config && (
                  <div className="text-sm text-gray-400">
                    当前配置：{config.city} | 基数范围 {fmt(config.baseMin)}~{fmt(config.baseMax)}
                  </div>
                )}
              </div>
            </Card>

            <Card>
              <h2 className="text-sm font-medium mb-3 flex items-center gap-2"><Calculator className="w-4 h-4" />计算结果</h2>
              {(() => {
                const r = calcResult
                if (!r) return <div className="text-gray-400 text-sm">点击「开始计算」查看结果</div>
                if (isHousing) {
                  return (
                    <div className="space-y-3">
                      <div className="text-sm text-gray-500">
                        缴费基数：<span className="text-gray-900 font-medium">¥{fmt(r.actualBase)}</span>
                        {r.capped && <span className="text-warning ml-2">（已封顶）</span>}
                        {r.floored && <span className="text-warning ml-2">（已保底）</span>}
                        {r.configVersion && <span className="text-gray-400 ml-2">| 配置版本：{r.configVersion}</span>}
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between border-b pb-2 text-sm">
                          <span className="text-gray-500">企业缴纳</span>
                          <span className="font-medium text-danger">¥{fmt(r.housingOrg)}</span>
                        </div>
                        <div className="flex items-center justify-between border-b pb-2 text-sm">
                          <span className="text-gray-500">个人缴纳</span>
                          <span className="font-medium text-warning">¥{fmt(r.housingEmp)}</span>
                        </div>
                      </div>
                      <div className="border-t pt-3">
                        <div className="flex items-center justify-between">
                          <span className="font-medium">总费用</span>
                          <span className="text-lg font-bold text-primary">¥{fmt(r.total)}</span>
                        </div>
                        <div className="text-xs text-gray-400 mt-1">
                          企业承担 ¥{fmt(r.housingOrg)} + 个人承担 ¥{fmt(r.housingEmp)}
                        </div>
                      </div>
                    </div>
                  )
                }
                return (
                  <div className="space-y-3">
                    <div className="text-sm text-gray-500">
                      缴费基数：<span className="text-gray-900 font-medium">¥{fmt(r.actualBase)}</span>
                      {r.capped && <span className="text-warning ml-2">（已封顶）</span>}
                      {r.floored && <span className="text-warning ml-2">（已保底）</span>}
                      {r.configVersion && <span className="text-gray-400 ml-2">| 配置版本：{r.configVersion}</span>}
                    </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-1.5">险种</th>
                            <th className="py-1.5 text-right">企业%</th>
                            <th className="py-1.5 text-right">个人%</th>
                            <th className="py-1.5 text-right">企业缴纳</th>
                            <th className="py-1.5 text-right">个人缴纳</th>
                          </tr>
                        </thead>
                        <tbody>
                          {r.items?.map((item: any) => (
                            <tr key={item.name} className="border-b last:border-0">
                              <td className="py-1.5">{item.name}</td>
                              <td className="py-1.5 text-right text-gray-500">{item.orgRate}%</td>
                              <td className="py-1.5 text-right text-gray-500">{item.empRate}%</td>
                              <td className="py-1.5 text-right">¥{fmt(item.orgAmount)}</td>
                              <td className="py-1.5 text-right">¥{fmt(item.empAmount)}</td>
                            </tr>
                          ))}
                        </tbody>
                        <tfoot>
                          <tr className="border-t-2 font-bold">
                            <td className="py-2" colSpan={3}>合计</td>
                            <td className="py-2 text-right text-danger">¥{fmt(r.totalOrg)}</td>
                            <td className="py-2 text-right text-warning">¥{fmt(r.totalEmp)}</td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                    <div className="border-t pt-3">
                      <div className="flex items-center justify-between">
                        <span className="font-medium">总费用</span>
                        <span className="text-lg font-bold text-primary">¥{fmt(r.total)}</span>
                      </div>
                      <div className="text-xs text-gray-400 mt-1">
                        企业承担 ¥{fmt(r.totalOrg)} + 个人承担 ¥{fmt(r.totalEmp)}
                      </div>
                    </div>
                  </div>
                )
              })()}
            </Card>
          </div>

          {/* 基数说明 */}
          <p className="text-sm text-gray-400">
            社保/公积金基数按上年度月均工资核定，每人不同，在员工基本信息中设置。比例和基数上下限按版本管理，通常每年7月调整。
            发薪批次计算时按批次月份自动匹配对应版本配置。
          </p>
        </div>
      )}
    </div>
  )
}
