'use client'

import React, { useEffect, useState, useCallback } from 'react'
import { API_BASE } from '@/lib/apiBase'

// ---- Types ----

interface Tenant {
  id: string; companyName: string; contactName: string | null; contactEmail: string | null
  plan: string; status: string; validFrom: string; validUntil: string
  platformType: string | null; platformUrl: string | null
  features: string | null; usageQuotas: string | null
  createdAt: string; updatedAt: string; _daysUntilExpiry?: number; _userCount?: number
}

interface User {
  id: string; email: string | null; username: string | null; name: string | null; role: string; isActive: boolean
  tenantId: string | null; tenant: { companyName: string } | null; createdAt: string
}

interface SystemConfig {
  id: string; key: string; value: string; group: string; description: string | null
  createdAt: string; updatedAt: string
}

interface Stats {
  overview: { tenantCount: number; userCount: number; productCount: number; leadCount: number; imageCount: number; inquiryCount: number }
  perTenant: {
    id: string; companyName: string; plan: string; status: string; validUntil: string
    userCount: number
    quotas: { monthlyLeads: number; monthlyImages: number; monthlyProducts: number; monthlyComparisons: number; maxUsers: number }
    usage: { leads: number; images: number; products: number; comparisons: number; users: number }
  }[]
}

interface Features { inquiry: boolean; imageGen: boolean; product: boolean; comparison: boolean }
interface UsageQuotas { monthlyLeads: number; monthlyImages: number; monthlyProducts: number; monthlyComparisons: number; maxUsers: number }

const DEFAULT_FEATURES: Features = { inquiry: true, imageGen: true, product: true, comparison: true }
const DEFAULT_QUOTAS: UsageQuotas = { monthlyLeads: 100, monthlyImages: 50, monthlyProducts: 100, monthlyComparisons: 50, maxUsers: 5 }

type Tab = 'tenants' | 'users' | 'stats' | 'configs' | 'plans'

const PLAN_LABELS: Record<string, string> = { basic: '基础版', pro: '专业版', enterprise: '旗舰版' }
const PLAN_COLORS: Record<string, string> = { basic: 'bg-gray-100 text-gray-700', pro: 'bg-blue-50 text-blue-700', enterprise: 'bg-purple-50 text-purple-700' }
const STATUS_LABELS: Record<string, string> = { active: '正常', inactive: '已停用', expired: '已过期' }
const STATUS_COLORS: Record<string, string> = { active: 'bg-green-50 text-green-700', inactive: 'bg-red-50 text-red-700', expired: 'bg-yellow-50 text-yellow-700' }
const PLATFORM_LABELS: Record<string, string> = { jubian: '巨变平台', custom: '自建平台' }
const FEATURE_LABELS: Record<keyof Features, string> = { inquiry: '询价发布', imageGen: '商品生图', product: '商品上架', comparison: '智能比价' }
const CONFIG_GROUPS: Record<string, string> = { ai: 'AI 模型', platform: '平台对接', system: '系统参数' }

const API = `${API_BASE}/api/admin`
const authHeaders = (): Record<string, string> => {
  const auth = localStorage.getItem('auth')
  return { 'Content-Type': 'application/json', Authorization: `Bearer ${auth ? JSON.parse(auth).token : ''}` }
}

function toastManager() {
  const [toast, setToast] = useState('')
  const show = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 2500) }
  return { toast, show }
}

export default function AdminPage({ section }: { section: Tab }) {
  const { toast, show: showToast } = toastManager()

  return (
    <div>
      {toast && <div className="fixed top-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50 shadow-lg">{toast}</div>}

      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">运营后台</h1>
          <p className="text-sm text-on-surface-variant mt-1">平台管理控制台</p>
        </div>
      </div>

      {section === 'tenants' && <TenantTab showToast={showToast} />}
      {section === 'users' && <UserTab showToast={showToast} />}
      {section === 'stats' && <StatsTab />}
      {section === 'configs' && <ConfigTab showToast={showToast} />}
      {section === 'plans' && <PlanConfigTab showToast={showToast} />}
    </div>
  )
}

// ====================== Tenant Tab ======================

function TenantTab({ showToast }: { showToast: (m: string) => void }) {
  const [tenants, setTenants] = useState<Tenant[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [form, setForm] = useState({ companyName: '', contactName: '', contactEmail: '', plan: 'basic', status: 'active', validFrom: '', validUntil: '', platformType: 'jubian', platformUrl: '', platformApiKey: '' })
  const [features, setFeatures] = useState<Features>(DEFAULT_FEATURES)
  const [quotas, setQuotas] = useState<UsageQuotas>(DEFAULT_QUOTAS)
  const [adminUsername, setAdminUsername] = useState('')
  const [adminPassword, setAdminPassword] = useState('')
  const [adminName, setAdminName] = useState('')
  const [saving, setSaving] = useState(false)
  const [planConfig, setPlanConfig] = useState<Record<string, any> | null>(null)
  const [userManager, setUserManager] = useState<{ tenantId: string; companyName: string } | null>(null)

  const loadTenants = useCallback(async () => {
    try {
      const res = await fetch(`${API}/tenants`, { headers: authHeaders() })
      if (res.ok) setTenants(await res.json())
    } catch { showToast('加载失败')
    } finally { setLoading(false) }
  }, [showToast])

  useEffect(() => { loadTenants() }, [loadTenants])

  useEffect(() => {
    fetch(`${API}/plan-config`, { headers: authHeaders() })
      .then((r) => r.ok && r.json())
      .then((cfg) => setPlanConfig(cfg))
      .catch(() => {})
  }, [])

  const filtered = tenants.filter((t) =>
    [t.companyName, t.contactName, t.contactEmail].some((v) => v?.toLowerCase().includes(search.toLowerCase()))
  )

  const openCreate = () => {
    setForm({ companyName: '', contactName: '', contactEmail: '', plan: 'basic', status: 'active', validFrom: '', validUntil: '', platformType: 'jubian', platformUrl: '', platformApiKey: '' })
    const q = planConfig?.basic?.quotas || DEFAULT_QUOTAS
    setFeatures(planConfig?.basic?.features || DEFAULT_FEATURES); setQuotas(q); setEditingId(null); setShowForm(true)
    setAdminUsername(''); setAdminPassword(''); setAdminName('')
  }

  const openEdit = (t: Tenant) => {
    setForm({
      companyName: t.companyName, contactName: t.contactName || '', contactEmail: t.contactEmail || '',
      plan: t.plan, status: t.status, validFrom: t.validFrom?.slice(0, 10) || '', validUntil: t.validUntil?.slice(0, 10) || '',
      platformType: t.platformType || 'jubian', platformUrl: t.platformUrl || '', platformApiKey: '',
    })
    try { setFeatures(t.features ? JSON.parse(t.features) : DEFAULT_FEATURES) } catch { setFeatures(DEFAULT_FEATURES) }
    try { setQuotas(t.usageQuotas ? JSON.parse(t.usageQuotas) : DEFAULT_QUOTAS) } catch { setQuotas(DEFAULT_QUOTAS) }
    setEditingId(t.id); setShowForm(true)
  }

  const handleSave = async () => {
    if (!form.companyName || !form.validUntil) { showToast('请填写公司名和有效期'); return }
    setSaving(true)
    try {
      const body = {
        companyName: form.companyName, contactName: form.contactName || undefined, contactEmail: form.contactEmail || undefined,
        plan: form.plan, status: form.status, validFrom: form.validFrom || undefined, validUntil: form.validUntil,
        features: JSON.stringify(features), usageQuotas: JSON.stringify(quotas),
      }
            if (!editingId) {
        Object.assign(body, { platformApiKey: form.platformApiKey || '', adminUsername: adminUsername || undefined, adminPassword: adminPassword || undefined, adminName: adminName || undefined })
      } else {
        Object.assign(body, { platformType: form.platformType, platformUrl: form.platformUrl, platformApiKey: form.platformApiKey })
      }
      const res = await fetch(editingId ? `${API}/tenants/${editingId}` : `${API}/tenants`, {
        method: editingId ? 'PATCH' : 'POST', headers: authHeaders(),
        body: JSON.stringify(body),
      })
      if (!res.ok) { showToast('保存失败'); return }
      showToast(editingId ? '更新成功' : '创建成功'); setShowForm(false); loadTenants()
    } catch { showToast('保存失败')
    } finally { setSaving(false) }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('确定删除该租户？')) return
    const res = await fetch(`${API}/tenants/${id}`, { method: 'DELETE', headers: authHeaders() })
    if (res.ok) { showToast('删除成功'); loadTenants() } else showToast('删除失败')
  }

  const expiryBadge = (days: number | undefined) => {
    if (days === undefined) return null
    if (days < 0) return <span className="text-xs text-error-red font-semibold">已过期 {Math.abs(days)}天</span>
    if (days <= 7) return <span className="text-xs text-red-600 font-semibold">即将到期 {days}天</span>
    if (days <= 30) return <span className="text-xs text-yellow-600 font-semibold">{days}天后到期</span>
    return <span className="text-xs text-green-600">{days}天后到期</span>
  }

  const fmt = (d: string) => d ? new Date(d).toLocaleDateString('zh-CN') : '-'

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <input type="text" placeholder="搜索公司名、联系人、邮箱..." value={search} onChange={(e) => setSearch(e.target.value)}
          className="w-full max-w-md px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
        <button onClick={openCreate} className="ml-4 bg-secondary text-white px-5 py-2.5 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
          + 新建租户
        </button>
      </div>

      <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-surface-container-low text-left text-on-surface-variant">
                <th className="px-4 py-3 font-semibold">公司名</th>
                <th className="px-4 py-3 font-semibold">订阅版本</th>
                <th className="px-4 py-3 font-semibold">状态</th>
                <th className="px-4 py-3 font-semibold">有效期 / 到期提醒</th>
                <th className="px-4 py-3 font-semibold">联系人</th>
                <th className="px-4 py-3 font-semibold">功能</th>
                <th className="px-4 py-3 font-semibold">对接平台</th>
                <th className="px-4 py-3 font-semibold">操作</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={8} className="px-4 py-12 text-center text-on-surface-variant">加载中...</td></tr>
              ) : filtered.length === 0 ? (
                <tr><td colSpan={8} className="px-4 py-12 text-center text-on-surface-variant">暂无租户数据</td></tr>
              ) : filtered.map((t) => {
                const feat = (() => { try { return JSON.parse(t.features || '{}') as Features } catch { return {} as Features } })()
                return (
                  <tr key={t.id} className="border-t border-border-subtle hover:bg-surface-container-low/50 transition-colors">
                    <td className="px-4 py-3 font-semibold">{t.companyName}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${PLAN_COLORS[t.plan] || ''}`}>
                        {PLAN_LABELS[t.plan] || t.plan}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${STATUS_COLORS[t.status] || ''}`}>
                        {STATUS_LABELS[t.status] || t.status}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="text-xs">{fmt(t.validFrom)} ~ {fmt(t.validUntil)}</div>
                      <div>{expiryBadge(t._daysUntilExpiry)}</div>
                    </td>
                    <td className="px-4 py-3">
                      <div>{t.contactName || '-'}</div>
                      {t.contactEmail && <div className="text-xs text-on-surface-variant">{t.contactEmail}</div>}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex flex-wrap gap-1">
                        {(Object.entries(FEATURE_LABELS) as [keyof Features, string][]).map(([k, label]) => (
                          <span key={k} className={`inline-block px-1.5 py-0.5 rounded text-xs ${feat[k] ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-400'}`}>
                            {label}
                          </span>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-700">
                        {PLATFORM_LABELS[t.platformType || ''] || t.platformType || '-'}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <button onClick={() => openEdit(t)} className="text-xs text-secondary hover:underline">编辑</button>
                        <button onClick={() => setUserManager({ tenantId: t.id, companyName: t.companyName })} className="text-xs text-secondary hover:underline">管理用户</button>
                        <button onClick={() => handleDelete(t.id)} className="text-xs text-error-red hover:underline">删除</button>
                      </div>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>

      {showForm && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setShowForm(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">{editingId ? '编辑租户' : '新建租户'}</h2>
            </div>
            <div className="p-6 space-y-6">
              {/* 基本信息 */}
              <div className="grid grid-cols-2 gap-4">
                <div className="col-span-2">
                  <label className="block text-sm font-semibold mb-1">公司名 *</label>
                  <input type="text" value={form.companyName} onChange={(e) => setForm({ ...form, companyName: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">联系人</label>
                  <input type="text" value={form.contactName} onChange={(e) => setForm({ ...form, contactName: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">联系邮箱</label>
                  <input type="email" value={form.contactEmail} onChange={(e) => setForm({ ...form, contactEmail: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
              </div>
              {/* 订阅版本 & 状态 */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold mb-1">订阅版本</label>
                  <select value={form.plan} onChange={(e) => {
                    const p = e.target.value
                    setForm({ ...form, plan: p })
                    const cfg = planConfig?.[p]
                    if (cfg) { setFeatures(cfg.features || DEFAULT_FEATURES); setQuotas(cfg.quotas || DEFAULT_QUOTAS) }
                    else { setQuotas(DEFAULT_QUOTAS) }
                  }}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors bg-white">
                    {['basic', 'pro', 'enterprise'].map((k) => {
                      const cfg = planConfig?.[k]
                      return <option key={k} value={k}>{cfg ? `${cfg.label} (¥${cfg.price.toLocaleString()}/年)` : PLAN_LABELS[k] || k}</option>
                    })}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">状态</label>
                  <select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors bg-white">
                    <option value="active">正常</option>
                    <option value="inactive">已停用</option>
                    <option value="expired">已过期</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">有效期起</label>
                  <input type="date" value={form.validFrom} onChange={(e) => setForm({ ...form, validFrom: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">有效期止 *</label>
                  <input type="date" value={form.validUntil} onChange={(e) => setForm({ ...form, validUntil: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
              </div>
              {/* 平台对接配置 */}
              <div className="border-t border-border-subtle pt-4">
                <h3 className="text-sm font-semibold mb-3">平台对接配置</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold mb-1">平台类型</label>
                    <select value={form.platformType} onChange={(e) => setForm({ ...form, platformType: e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors bg-white">
                      <option value="jubian">巨变平台</option>
                      <option value="custom">自建平台</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">平台接口地址</label>
                    <input type="text" value={form.platformUrl} onChange={(e) => setForm({ ...form, platformUrl: e.target.value })} placeholder="https://api.example.com"
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div className="col-span-2">
                    <label className="block text-sm font-semibold mb-1">平台 API 密钥</label>
                    <input type="password" value={form.platformApiKey} onChange={(e) => setForm({ ...form, platformApiKey: e.target.value })} placeholder="用于平台对接的 API 密钥"
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                </div>
              </div>
              {!editingId && (
                <div className="border-t border-border-subtle pt-4">
                  <h3 className="text-sm font-semibold mb-3">管理员账号（创建时可选）</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold mb-1">邮箱</label>
                      <input type="text" value={adminUsername} onChange={(e) => setAdminUsername(e.target.value)} placeholder="admin"
                        className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold mb-1">密码</label>
                      <input type="password" value={adminPassword} onChange={(e) => setAdminPassword(e.target.value)} placeholder="至少6位"
                        className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                    </div>
                    <div className="col-span-2">
                      <label className="block text-sm font-semibold mb-1">姓名</label>
                      <input type="text" value={adminName} onChange={(e) => setAdminName(e.target.value)} placeholder="可选，默认显示'公司名管理员'"
                        className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                    </div>
                  </div>
                </div>
              )}
              {/* 功能权限 */}
              <div className="border-t border-border-subtle pt-4">
                <h3 className="text-sm font-semibold mb-3">功能权限</h3>
                <div className="grid grid-cols-2 gap-3">
                  {(Object.entries(FEATURE_LABELS) as [keyof Features, string][]).map(([k, label]) => (
                    <label key={k} className="flex items-center gap-3 p-3 border border-border-subtle rounded-lg cursor-pointer hover:bg-surface-container-low transition-colors">
                      <input type="checkbox" checked={features[k]} onChange={() => setFeatures({ ...features, [k]: !features[k] })}
                        className="w-4 h-4 rounded border-gray-300 text-secondary focus:ring-secondary" />
                      <span className="text-sm">{label}</span>
                    </label>
                  ))}
                </div>
              </div>
              {/* 用量配额 */}
              <div className="border-t border-border-subtle pt-4">
                <h3 className="text-sm font-semibold mb-3">用量配额</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold mb-1">月线索数上限</label>
                    <input type="number" min={0} value={quotas.monthlyLeads} onChange={(e) => setQuotas({ ...quotas, monthlyLeads: +e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月生图数上限</label>
                    <input type="number" min={0} value={quotas.monthlyImages} onChange={(e) => setQuotas({ ...quotas, monthlyImages: +e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月商品上架上限</label>
                    <input type="number" min={0} value={quotas.monthlyProducts} onChange={(e) => setQuotas({ ...quotas, monthlyProducts: +e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月比价次数上限</label>
                    <input type="number" min={0} value={quotas.monthlyComparisons} onChange={(e) => setQuotas({ ...quotas, monthlyComparisons: +e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">最大用户数</label>
                    <input type="number" min={1} value={quotas.maxUsers} onChange={(e) => setQuotas({ ...quotas, maxUsers: +e.target.value })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                </div>
              </div>
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setShowForm(false)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors" disabled={saving}>取消</button>
              <button onClick={handleSave} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '保存中...' : (editingId ? '更新' : '创建')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* User Manager Modal */}
      {userManager && <TenantUserManager
        tenantId={userManager.tenantId}
        companyName={userManager.companyName}
        onClose={() => setUserManager(null)}
        showToast={showToast}
      />}
    </div>
  )
}

// ====================== Tenant User Manager ======================

function TenantUserManager({ tenantId, companyName, onClose, showToast }: { tenantId: string; companyName: string; onClose: () => void; showToast: (m: string) => void }) {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [form, setForm] = useState({ username: '', password: '', name: '' })
  const [saving, setSaving] = useState(false)
  const [resetPwd, setResetPwd] = useState<{ id: string; name: string } | null>(null)
  const [newPwd, setNewPwd] = useState('')

  const loadUsers = useCallback(async () => {
    try {
      const res = await fetch(`${API}/users`, { headers: authHeaders() })
      if (res.ok) {
        const all: User[] = await res.json()
        setUsers(all.filter((u) => u.tenantId === tenantId))
      }
    } catch { showToast('加载失败')
    } finally { setLoading(false) }
  }, [tenantId, showToast])

  useEffect(() => { loadUsers() }, [loadUsers])

  const handleCreate = async () => {
    if (!form.username || !form.password) { showToast('请填写用户名和密码'); return }
    if (form.password.length < 6) { showToast('密码至少6位'); return }
    setSaving(true)
    try {
      const res = await fetch(`${API}/users`, {
        method: 'POST', headers: authHeaders(),
        body: JSON.stringify({ ...form, tenantId }),
      })
      if (res.ok) { showToast('创建成功'); setShowForm(false); setForm({ username: '', password: '', name: '' }); loadUsers() }
      else { const err = await res.json(); showToast(err.message || '创建失败') }
    } catch { showToast('创建失败')
    } finally { setSaving(false) }
  }

  const handleResetPwd = async () => {
    if (!resetPwd || !newPwd || newPwd.length < 6) { showToast('密码至少6位'); return }
    setSaving(true)
    try {
      const res = await fetch(`${API}/users/${resetPwd.id}/reset-password`, {
        method: 'POST', headers: authHeaders(), body: JSON.stringify({ password: newPwd }),
      })
      if (res.ok) { showToast('密码重置成功'); setResetPwd(null); setNewPwd(''); loadUsers() } else showToast('重置失败')
    } catch { showToast('重置失败')
    } finally { setSaving(false) }
  }

  const handleToggleActive = async (id: string) => {
    const res = await fetch(`${API}/users/${id}/toggle-active`, { method: 'POST', headers: authHeaders() })
    if (res.ok) loadUsers(); else showToast('操作失败')
  }

  return (
    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
      <div className="bg-white rounded-xl shadow-xl w-full max-w-3xl mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="p-6 border-b border-border-subtle flex items-center justify-between">
          <div>
            <h2 className="text-lg font-bold">用户管理</h2>
            <p className="text-sm text-on-surface-variant mt-0.5">{companyName}</p>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
        </div>

        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <span className="text-sm text-on-surface-variant">共 {users.length} 个用户</span>
            <button onClick={() => setShowForm(true)} className="bg-secondary text-white px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity">+ 新增用户</button>
          </div>

          {loading ? (
            <div className="text-center py-8 text-on-surface-variant text-sm">加载中...</div>
          ) : users.length === 0 ? (
            <div className="text-center py-8 text-on-surface-variant text-sm">暂无用户</div>
          ) : (
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-surface-container-low text-left text-on-surface-variant">
                  <th className="px-4 py-3 font-semibold">姓名</th>
                  <th className="px-4 py-3 font-semibold">用户名</th>
                  <th className="px-4 py-3 font-semibold">角色</th>
                  <th className="px-4 py-3 font-semibold">状态</th>
                  <th className="px-4 py-3 font-semibold">创建时间</th>
                  <th className="px-4 py-3 font-semibold">操作</th>
                </tr>
              </thead>
              <tbody>
                {users.map((u) => (
                  <tr key={u.id} className="border-t border-border-subtle hover:bg-surface-container-low/50 transition-colors">
                    <td className="px-4 py-3 font-semibold">{u.name || '-'}</td>
                    <td className="px-4 py-3 text-on-surface-variant">{u.username || u.email}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${u.role === 'admin' ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-700'}`}>
                        {u.role === 'admin' ? '管理员' : '普通用户'}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${u.isActive ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
                        {u.isActive ? '正常' : '已禁用'}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-xs text-on-surface-variant">{u.createdAt ? new Date(u.createdAt).toLocaleDateString('zh-CN') : '-'}</td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <button onClick={() => setResetPwd({ id: u.id, name: u.name || u.username || u.email || '' })} className="text-xs text-secondary hover:underline">重置密码</button>
                        <button onClick={() => handleToggleActive(u.id)} className={`text-xs hover:underline ${u.isActive ? 'text-red-600' : 'text-green-600'}`}>
                          {u.isActive ? '禁用' : '启用'}
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        {/* Create user form */}
        {showForm && (
          <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-[60]" onClick={() => setShowForm(false)}>
            <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
              <div className="p-6 border-b border-border-subtle">
                <h2 className="text-lg font-bold">新增用户 — {companyName}</h2>
              </div>
              <div className="p-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold mb-1">用户名 *</label>
                  <input type="text" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} placeholder="请输入用户名"
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">密码 *</label>
                  <input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} placeholder="至少6位"
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">姓名</label>
                  <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="可选"
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
              </div>
              <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
                <button onClick={() => setShowForm(false)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors" disabled={saving}>取消</button>
                <button onClick={handleCreate} disabled={saving}
                  className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                  {saving ? '创建中...' : '创建'}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Reset password */}
        {resetPwd && (
          <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-[60]" onClick={() => setResetPwd(null)}>
            <div className="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
              <div className="p-6 border-b border-border-subtle">
                <h2 className="text-lg font-bold">重置密码</h2>
                <p className="text-sm text-on-surface-variant mt-1">用户：{resetPwd.name}</p>
              </div>
              <div className="p-6">
                <label className="block text-sm font-semibold mb-1">新密码</label>
                <input type="password" value={newPwd} onChange={(e) => setNewPwd(e.target.value)} placeholder="至少6位"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
                <button onClick={() => setResetPwd(null)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors">取消</button>
                <button onClick={handleResetPwd} disabled={saving}
                  className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                  {saving ? '重置中...' : '确认重置'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

// ====================== User Tab ======================

function UserTab({ showToast }: { showToast: (m: string) => void }) {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [resetPwd, setResetPwd] = useState<{ id: string; name: string } | null>(null)
  const [newPwd, setNewPwd] = useState('')
  const [saving, setSaving] = useState(false)
  const [showUserForm, setShowUserForm] = useState(false)
  const [userForm, setUserForm] = useState({ username: '', password: '', name: '', tenantId: '' })
  const [tenants, setTenants] = useState<Tenant[]>([])
  const [userSaving, setUserSaving] = useState(false)

  const loadUsers = useCallback(async () => {
    try {
      const res = await fetch(`${API}/users`, { headers: authHeaders() })
      if (res.ok) setUsers(await res.json())
    } catch { showToast('加载失败')
    } finally { setLoading(false) }
  }, [showToast])

  useEffect(() => { loadUsers() }, [loadUsers])

  useEffect(() => {
    fetch(`${API}/tenants`, { headers: authHeaders() }).then(r => r.ok && r.json()).then(setTenants)
  }, [])

  const handleCreateUser = async () => {
    if (!userForm.username || !userForm.password) { showToast('请填写用户名和密码'); return }
    if (userForm.password.length < 6) { showToast('密码至少6位'); return }
    setUserSaving(true)
    try {
      const res = await fetch(`${API}/users`, {
        method: 'POST', headers: authHeaders(), body: JSON.stringify(userForm),
      })
      if (res.ok) { showToast('创建成功'); setShowUserForm(false); setUserForm({ username: '', password: '', name: '', tenantId: '' }); loadUsers() }
      else { const err = await res.json(); showToast(err.message || '创建失败') }
    } catch { showToast('创建失败')
    } finally { setUserSaving(false) }
  }

  const filtered = users.filter((u) =>
    [u.username, u.email, u.name, u.tenant?.companyName].some((v) => v?.toLowerCase().includes(search.toLowerCase()))
  )

  const handleResetPwd = async () => {
    if (!resetPwd || !newPwd || newPwd.length < 6) { showToast('密码至少6位'); return }
    setSaving(true)
    try {
      const res = await fetch(`${API}/users/${resetPwd.id}/reset-password`, {
        method: 'POST', headers: authHeaders(), body: JSON.stringify({ password: newPwd }),
      })
      if (res.ok) { showToast('密码重置成功'); setResetPwd(null); setNewPwd('') } else showToast('重置失败')
    } catch { showToast('重置失败')
    } finally { setSaving(false) }
  }

  const handleToggleActive = async (id: string) => {
    const res = await fetch(`${API}/users/${id}/toggle-active`, { method: 'POST', headers: authHeaders() })
    if (res.ok) loadUsers(); else showToast('操作失败')
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <input type="text" placeholder="搜索邮箱、姓名、所属租户..." value={search} onChange={(e) => setSearch(e.target.value)}
          className="w-full max-w-md px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
        <button onClick={() => setShowUserForm(true)} className="ml-4 bg-secondary text-white px-5 py-2.5 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
          + 新增用户
        </button>
      </div>

      <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-surface-container-low text-left text-on-surface-variant">
              <th className="px-4 py-3 font-semibold">姓名</th>
              <th className="px-4 py-3 font-semibold">邮箱</th>
              <th className="px-4 py-3 font-semibold">角色</th>
              <th className="px-4 py-3 font-semibold">所属租户</th>
              <th className="px-4 py-3 font-semibold">状态</th>
              <th className="px-4 py-3 font-semibold">操作</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={6} className="px-4 py-12 text-center text-on-surface-variant">加载中...</td></tr>
            ) : filtered.length === 0 ? (
              <tr><td colSpan={6} className="px-4 py-12 text-center text-on-surface-variant">暂无用户数据</td></tr>
            ) : filtered.map((u) => (
              <tr key={u.id} className="border-t border-border-subtle hover:bg-surface-container-low/50 transition-colors">
                <td className="px-4 py-3 font-semibold">{u.name || '-'}</td>
                <td className="px-4 py-3 text-on-surface-variant">{u.username || u.email}</td>
                <td className="px-4 py-3">
                  <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${u.role === 'admin' ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-700'}`}>
                    {u.role === 'admin' ? '管理员' : '普通用户'}
                  </span>
                </td>
                <td className="px-4 py-3">{u.tenant?.companyName || '-'}</td>
                <td className="px-4 py-3">
                  <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${u.isActive ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
                    {u.isActive ? '正常' : '已禁用'}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <button onClick={() => setResetPwd({ id: u.id, name: u.name || u.username || u.email || '' })} className="text-xs text-secondary hover:underline">重置密码</button>
                    <button onClick={() => handleToggleActive(u.id)} className={`text-xs hover:underline ${u.isActive ? 'text-red-600' : 'text-green-600'}`}>
                      {u.isActive ? '禁用' : '启用'}
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {showUserForm && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setShowUserForm(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">新增用户</h2>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-semibold mb-1">用户名 *</label>
                <input type="text" value={userForm.username} onChange={(e) => setUserForm({ ...userForm, username: e.target.value })} placeholder="请输入用户名"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">密码 *</label>
                <input type="password" value={userForm.password} onChange={(e) => setUserForm({ ...userForm, password: e.target.value })} placeholder="至少6位"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">姓名</label>
                <input type="text" value={userForm.name} onChange={(e) => setUserForm({ ...userForm, name: e.target.value })} placeholder="可选"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">所属租户</label>
                <select value={userForm.tenantId} onChange={(e) => setUserForm({ ...userForm, tenantId: e.target.value })}
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors bg-white">
                  <option value="">不归属租户</option>
                  {tenants.map((t) => (
                    <option key={t.id} value={t.id}>{t.companyName}</option>
                  ))}
                </select>
              </div>
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setShowUserForm(false)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors" disabled={userSaving}>取消</button>
              <button onClick={handleCreateUser} disabled={userSaving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {userSaving ? '创建中...' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}
      {resetPwd && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setResetPwd(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">重置密码</h2>
              <p className="text-sm text-on-surface-variant mt-1">用户：{resetPwd.name}</p>
            </div>
            <div className="p-6">
              <label className="block text-sm font-semibold mb-1">新密码</label>
              <input type="password" value={newPwd} onChange={(e) => setNewPwd(e.target.value)} placeholder="至少6位"
                className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setResetPwd(null)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors">取消</button>
              <button onClick={handleResetPwd} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '重置中...' : '确认重置'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// ====================== Stats Tab ======================

function StatsTab() {
  const [stats, setStats] = useState<Stats | null>(null)
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [statusFilter, setStatusFilter] = useState('all')
  const [selectedTenant, setSelectedTenant] = useState<Stats['perTenant'][0] | null>(null)

  useEffect(() => {
    (async () => {
      try {
        const res = await fetch(`${API}/stats`, { headers: authHeaders() })
        if (res.ok) setStats(await res.json())
      } catch {} finally { setLoading(false) }
    })()
  }, [])

  if (loading) return <div className="text-center py-12 text-on-surface-variant">加载中...</div>
  if (!stats) return <div className="text-center py-12 text-on-surface-variant">暂无数据</div>

  const cards = [
    { label: '租户总数', value: stats.overview.tenantCount, color: 'bg-blue-50 text-blue-700' },
    { label: '用户总数', value: stats.overview.userCount, color: 'bg-purple-50 text-purple-700' },
    { label: '商品数', value: stats.overview.productCount, color: 'bg-green-50 text-green-700' },
    { label: '线索数', value: stats.overview.leadCount, color: 'bg-orange-50 text-orange-700' },
    { label: '生成图片', value: stats.overview.imageCount, color: 'bg-pink-50 text-pink-700' },
    { label: '询价数', value: stats.overview.inquiryCount, color: 'bg-teal-50 text-teal-700' },
  ]

  const METRICS: { key: keyof Stats['perTenant'][0]['usage']; label: string; quotaKey: keyof Stats['perTenant'][0]['quotas']; desc: string }[] = [
    { key: 'users', label: '用户数', quotaKey: 'maxUsers', desc: '已用 / 上限' },
    { key: 'products', label: '商品上架', quotaKey: 'monthlyProducts', desc: '已上架 / 月配额' },
    { key: 'leads', label: '月线索', quotaKey: 'monthlyLeads', desc: '本月 / 月配额' },
    { key: 'images', label: '月生图', quotaKey: 'monthlyImages', desc: '本月 / 月配额' },
    { key: 'comparisons', label: '月比价', quotaKey: 'monthlyComparisons', desc: '本月 / 月配额' },
  ]

  function UsageBar({ usage, quota }: { usage: number; quota: number }) {
    if (quota === 0) return <span className="text-xs text-gray-400">未开通</span>
    const pct = Math.min(usage / quota, 1)
    const color = pct >= 1 ? 'bg-red-500' : pct >= 0.8 ? 'bg-yellow-500' : 'bg-green-500'
    return (
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-gray-100 rounded-full h-2">
          <div className={`${color} h-2 rounded-full transition-all`} style={{ width: `${Math.min(pct * 100, 100)}%` }} />
        </div>
        <span className="text-xs font-semibold whitespace-nowrap min-w-[56px] text-right">
          {usage} / {quota}
        </span>
      </div>
    )
  }

  const filtered = stats.perTenant.filter((t) => {
    if (statusFilter !== 'all' && t.status !== statusFilter) return false
    if (search && !t.companyName.toLowerCase().includes(search.toLowerCase())) return false
    return true
  })

  // Detail view
  if (selectedTenant) {
    const t = selectedTenant
    return (
      <div>
        <div className="flex items-center gap-3 mb-6">
          <button onClick={() => setSelectedTenant(null)}
            className="text-sm text-secondary hover:underline flex items-center gap-1">
            ← 返回列表
          </button>
        </div>
        <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
          <div className="px-5 py-4 border-b border-border-subtle flex items-center gap-3">
            <span className="font-semibold text-lg">{t.companyName}</span>
            <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${PLAN_COLORS[t.plan] || ''}`}>{PLAN_LABELS[t.plan] || t.plan}</span>
            <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${STATUS_COLORS[t.status] || ''}`}>{STATUS_LABELS[t.status] || t.status}</span>
            <span className="text-xs text-on-surface-variant ml-auto">
              有效期至 {t.validUntil ? new Date(t.validUntil).toLocaleDateString('zh-CN') : '-'}
            </span>
          </div>
          <div className="p-6 grid grid-cols-2 gap-6">
            {METRICS.map((m) => (
              <div key={m.key}>
                <div className="flex items-center justify-between mb-1">
                  <span className="text-sm font-semibold">{m.label}</span>
                  <span className="text-xs text-on-surface-variant">{m.desc}</span>
                </div>
                <UsageBar usage={t.usage[m.key]} quota={t.quotas[m.quotaKey]} />
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  // List view
  return (
    <div>
      <div className="grid grid-cols-3 gap-4 mb-6">
        {cards.map((c) => (
          <div key={c.label} className="bg-white rounded-xl border border-border-subtle p-5">
            <p className="text-sm text-on-surface-variant">{c.label}</p>
            <p className={`text-3xl font-bold mt-1 ${c.color.split(' ')[1]}`}>{c.value}</p>
          </div>
        ))}
      </div>

      <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
        <div className="p-4 border-b border-border-subtle flex items-center gap-3">
          <input type="text" placeholder="搜索企业名称..." value={search} onChange={(e) => setSearch(e.target.value)}
            className="max-w-xs px-3 py-1.5 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
            className="px-3 py-1.5 border border-border-subtle rounded-lg text-sm outline-none bg-white">
            <option value="all">全部状态</option>
            <option value="active">正常</option>
            <option value="inactive">已停用</option>
            <option value="expired">已过期</option>
          </select>
          <span className="text-xs text-on-surface-variant ml-auto">共 {filtered.length} 个租户</span>
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-surface-container-low text-left text-on-surface-variant">
              <th className="px-4 py-3 font-semibold">企业名称</th>
              <th className="px-4 py-3 font-semibold">版本</th>
              <th className="px-4 py-3 font-semibold">状态</th>
              <th className="px-4 py-3 font-semibold">有效期</th>
              <th className="px-4 py-3 font-semibold">用户</th>
              <th className="px-4 py-3 font-semibold">商品上架</th>
              <th className="px-4 py-3 font-semibold">月线索</th>
              <th className="px-4 py-3 font-semibold">月生图</th>
              <th className="px-4 py-3 font-semibold">月比价</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 ? (
              <tr><td colSpan={9} className="px-4 py-12 text-center text-on-surface-variant">无匹配租户</td></tr>
            ) : filtered.map((t) => (
              <tr key={t.id} className="border-t border-border-subtle hover:bg-surface-container-low/50 transition-colors cursor-pointer"
                onClick={() => setSelectedTenant(t)}>
                <td className="px-4 py-3 font-semibold">{t.companyName}</td>
                <td className="px-4 py-3">
                  <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${PLAN_COLORS[t.plan] || ''}`}>{PLAN_LABELS[t.plan] || t.plan}</span>
                </td>
                <td className="px-4 py-3">
                  <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${STATUS_COLORS[t.status] || ''}`}>{STATUS_LABELS[t.status] || t.status}</span>
                </td>
                <td className="px-4 py-3 text-xs">{t.validUntil ? new Date(t.validUntil).toLocaleDateString('zh-CN') : '-'}</td>
                <td className="px-4 py-3"><UsageBar usage={t.usage.users} quota={t.quotas.maxUsers} /></td>
                <td className="px-4 py-3"><UsageBar usage={t.usage.products} quota={t.quotas.monthlyProducts} /></td>
                <td className="px-4 py-3"><UsageBar usage={t.usage.leads} quota={t.quotas.monthlyLeads} /></td>
                <td className="px-4 py-3"><UsageBar usage={t.usage.images} quota={t.quotas.monthlyImages} /></td>
                <td className="px-4 py-3"><UsageBar usage={t.usage.comparisons} quota={t.quotas.monthlyComparisons} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

// ====================== Config Tab ======================

interface Integration {
  id: string; name: string; type: string; endpoint: string; appId: string | null; apiKey: string; customerCode: string
  status: string; tools: string | null; lastConnected: string | null; error: string | null
  createdAt: string; updatedAt: string
}

const INTEGRATION_API = `${API_BASE}/api/integrations`

function ConfigTab({ showToast }: { showToast: (m: string) => void }) {
  const [configs, setConfigs] = useState<SystemConfig[]>([])
  const [loading, setLoading] = useState(true)
  const [editing, setEditing] = useState<SystemConfig | null>(null)
  const [editValue, setEditValue] = useState('')
  const [newConfig, setNewConfig] = useState({ key: '', value: '', group: 'system', description: '' })
  const [showNew, setShowNew] = useState(false)
  const [saving, setSaving] = useState(false)

  const [integrations, setIntegrations] = useState<Integration[]>([])
  const [integrationLoading, setIntegrationLoading] = useState(true)
  const [showIntegrationForm, setShowIntegrationForm] = useState(false)
  const [editingIntegration, setEditingIntegration] = useState<Integration | null>(null)
  const [integrationForm, setIntegrationForm] = useState({
    name: '', endpoint: 'http://100.111.84.16:3002/mcp', appId: '', apiKey: '', customerCode: ''
  })
  const [testingId, setTestingId] = useState<string | null>(null)
  const [connectingId, setConnectingId] = useState<string | null>(null)

  const DEVBOX_ADMIN_APPLY_URL = 'http://100.111.84.16:3000/openapi/app'

  const loadConfigs = useCallback(async () => {
    try {
      const res = await fetch(`${API}/configs`, { headers: authHeaders() })
      if (res.ok) setConfigs(await res.json())
    } catch { showToast('加载失败')
    } finally { setLoading(false) }
  }, [showToast])

  const loadIntegrations = useCallback(async () => {
    try {
      const res = await fetch(INTEGRATION_API, { headers: authHeaders() })
      if (res.ok) setIntegrations(await res.json())
    } catch { showToast('加载对接配置失败')
    } finally { setIntegrationLoading(false) }
  }, [showToast])

  useEffect(() => { loadConfigs(); loadIntegrations() }, [loadConfigs, loadIntegrations])

  const grouped = configs.reduce((acc, c) => {
    const subGroup = c.group === 'platform' ? `platform-${c.key.startsWith('jubian') ? 'jubian' : 'custom'}` : c.group
    if (!acc[subGroup]) acc[subGroup] = []
    acc[subGroup].push(c)
    return acc
  }, {} as Record<string, SystemConfig[]>)

  const GROUP_LABELS: Record<string, string> = {
    ai: 'AI 模型', 'platform-jubian': '巨变平台配置', 'platform-custom': '自建平台配置', system: '系统参数',
  }

  const handleSaveEdit = async () => {
    if (!editing) return
    setSaving(true)
    try {
      const res = await fetch(`${API}/configs`, {
        method: 'POST', headers: authHeaders(),
        body: JSON.stringify({ key: editing.key, value: editValue, group: editing.group, description: editing.description }),
      })
      if (res.ok) { showToast('更新成功'); setEditing(null); loadConfigs() } else showToast('更新失败')
    } catch { showToast('更新失败')
    } finally { setSaving(false) }
  }

  const handleCreate = async () => {
    if (!newConfig.key || !newConfig.value) { showToast('请填写键和值'); return }
    setSaving(true)
    try {
      const res = await fetch(`${API}/configs`, {
        method: 'POST', headers: authHeaders(),
        body: JSON.stringify(newConfig),
      })
      if (res.ok) { showToast('创建成功'); setShowNew(false); setNewConfig({ key: '', value: '', group: 'system', description: '' }); loadConfigs() }
      else showToast('创建失败')
    } catch { showToast('创建失败')
    } finally { setSaving(false) }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('确定删除此配置？')) return
    const res = await fetch(`${API}/configs/${id}`, { method: 'DELETE', headers: authHeaders() })
    if (res.ok) { showToast('删除成功'); loadConfigs() } else showToast('删除失败')
  }

  const handleSaveIntegration = async () => {
    if (!integrationForm.name || !integrationForm.endpoint) { showToast('请填写名称和 MCP 地址'); return }
    if (!integrationForm.appId || !integrationForm.apiKey) { showToast('请填写 appId 和 appSecret（先在 devbox 运营后台申请）'); return }
    setSaving(true)
    try {
      const body = { ...integrationForm, type: 'mcp' }
      const res = await fetch(editingIntegration ? `${INTEGRATION_API}/${editingIntegration.id}` : INTEGRATION_API, {
        method: editingIntegration ? 'PUT' : 'POST', headers: authHeaders(), body: JSON.stringify(body),
      })
      if (res.ok) { showToast(editingIntegration ? '更新成功' : '创建成功'); setShowIntegrationForm(false); setEditingIntegration(null); loadIntegrations() }
      else showToast('保存失败')
    } catch { showToast('保存失败')
    } finally { setSaving(false) }
  }

  const handleDeleteIntegration = async (id: string) => {
    if (!confirm('确定删除此对接配置？')) return
    const res = await fetch(`${INTEGRATION_API}/${id}`, { method: 'DELETE', headers: authHeaders() })
    if (res.ok) { showToast('删除成功'); loadIntegrations() } else showToast('删除失败')
  }

  const handleTestIntegration = async (id: string) => {
    setTestingId(id)
    try {
      const res = await fetch(`${INTEGRATION_API}/${id}/connect`, { method: 'POST', headers: authHeaders() })
      const data = await res.json()
      if (res.ok) { showToast(`测试成功！发现 ${data.tools?.length || 0} 个工具`); loadIntegrations() }
      else showToast(data.error || data.message || '测试失败')
    } catch { showToast('测试失败')
    } finally { setTestingId(null) }
  }

  const handleConnectIntegration = async (id: string) => {
    setConnectingId(id)
    try {
      const res = await fetch(`${INTEGRATION_API}/${id}/connect`, { method: 'POST', headers: authHeaders() })
      if (res.ok) { showToast('连接成功'); loadIntegrations() } else showToast('连接失败')
    } catch { showToast('连接失败')
    } finally { setConnectingId(null) }
  }

  const handleDisconnectIntegration = async (id: string) => {
    try {
      const res = await fetch(`${INTEGRATION_API}/${id}/disconnect`, { method: 'POST', headers: authHeaders() })
      if (res.ok) { showToast('已断开'); loadIntegrations() } else showToast('断开失败')
    } catch { showToast('断开失败') }
  }

  if (loading) return <div className="text-center py-12 text-on-surface-variant">加载中...</div>

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <p className="text-sm text-on-surface-variant">平台全局参数配置，修改后立即生效</p>
        <button onClick={() => setShowNew(true)} className="bg-secondary text-white px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity">+ 新增配置</button>
      </div>

      <div className="mb-6">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-semibold text-on-surface-variant">MCP 对接配置</h3>
          <button onClick={() => { setEditingIntegration(null); setIntegrationForm({ name: '', endpoint: 'http://100.111.84.16:3002/mcp', appId: '', apiKey: '', customerCode: '' }); setShowIntegrationForm(true) }}
            className="bg-secondary text-white px-3 py-1.5 rounded-lg text-xs font-semibold hover:opacity-90 transition-opacity">
            + 新增对接
          </button>
        </div>
        <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
          {integrationLoading ? (
            <div className="px-4 py-8 text-center text-on-surface-variant text-sm">加载中...</div>
          ) : integrations.length === 0 ? (
            <div className="px-4 py-8 text-center text-on-surface-variant text-sm">暂无对接配置，点击"新增对接"添加</div>
          ) : (
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-surface-container-low text-left text-on-surface-variant">
                  <th className="px-4 py-3 font-semibold">名称</th>
                  <th className="px-4 py-3 font-semibold">MCP 地址</th>
                  <th className="px-4 py-3 font-semibold">客户编码</th>
                  <th className="px-4 py-3 font-semibold">状态</th>
                  <th className="px-4 py-3 font-semibold">工具数</th>
                  <th className="px-4 py-3 font-semibold">最后连接</th>
                  <th className="px-4 py-3 font-semibold">操作</th>
                </tr>
              </thead>
              <tbody>
                {integrations.map((item) => {
                  let toolsList: any[] = []
                  try {
                    if (item.tools) toolsList = JSON.parse(item.tools)
                  } catch { /* ignore */ }
                  return (
                  <React.Fragment key={item.id}>
                  <tr className="border-t border-border-subtle hover:bg-surface-container-low/50 transition-colors">
                    <td className="px-4 py-3 font-semibold">{item.name}</td>
                    <td className="px-4 py-3 font-mono text-xs text-on-surface-variant truncate max-w-[200px]">{item.endpoint}</td>
                    <td className="px-4 py-3">{item.customerCode || '-'}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${
                        item.status === 'active' ? 'bg-green-50 text-green-700' :
                        item.status === 'error' ? 'bg-red-50 text-red-700' : 'bg-gray-100 text-gray-600'
                      }`}>
                        {item.status === 'active' ? '已连接' : item.status === 'error' ? '错误' : '未连接'}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-xs">{toolsList.length}</td>
                    <td className="px-4 py-3 text-xs text-on-surface-variant">
                      {item.lastConnected ? new Date(item.lastConnected).toLocaleString('zh-CN') : '-'}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        <button onClick={() => handleTestIntegration(item.id)} disabled={testingId === item.id}
                          className="text-xs text-secondary hover:underline disabled:opacity-50">
                          {testingId === item.id ? '测试中...' : '测试'}
                        </button>
                        {item.status === 'active' && (
                          <button onClick={() => handleDisconnectIntegration(item.id)} className="text-xs text-orange-600 hover:underline">断开</button>
                        )}
                        {item.status !== 'active' && (
                          <button onClick={() => handleConnectIntegration(item.id)} disabled={connectingId === item.id}
                            className="text-xs text-green-600 hover:underline disabled:opacity-50">
                            {connectingId === item.id ? '连接中...' : '连接'}
                          </button>
                        )}
                        <button onClick={() => {
                          setEditingIntegration(item)
                          setIntegrationForm({ name: item.name, endpoint: item.endpoint, appId: item.appId || '', apiKey: '', customerCode: item.customerCode || '' })
                          setShowIntegrationForm(true)
                        }} className="text-xs text-secondary hover:underline">编辑</button>
                        <button onClick={() => handleDeleteIntegration(item.id)} className="text-xs text-error-red hover:underline">删除</button>
                      </div>
                    </td>
                  </tr>
                  {toolsList.length > 0 && (
                    <tr className="bg-surface-container-low/30">
                      <td colSpan={7} className="px-4 py-2 text-xs">
                        <div className="flex flex-wrap gap-1.5">
                          <span className="text-on-surface-variant font-medium">已加载 Tools:</span>
                          {toolsList.map((t: any) => (
                            <span key={t.name} className="inline-block px-2 py-0.5 bg-blue-50 text-blue-700 rounded font-mono"
                              title={t.description || t.name}>
                              {t.name}
                            </span>
                          ))}
                        </div>
                        {item.error && (
                          <div className="mt-1 text-error-red">最近错误: {item.error}</div>
                        )}
                      </td>
                    </tr>
                  )}
                  </React.Fragment>
                  )
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>

      {Object.entries(grouped).map(([group, items]) => (
        <div key={group} className="mb-6">
          <h3 className="text-sm font-semibold text-on-surface-variant mb-2">{GROUP_LABELS[group] || CONFIG_GROUPS[group] || group}</h3>
          <div className="bg-white rounded-xl border border-border-subtle overflow-hidden">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-surface-container-low text-left text-on-surface-variant">
                  <th className="px-4 py-3 font-semibold">配置键</th>
                  <th className="px-4 py-3 font-semibold">值</th>
                  <th className="px-4 py-3 font-semibold">说明</th>
                  <th className="px-4 py-3 font-semibold">操作</th>
                </tr>
              </thead>
              <tbody>
                {items.map((c) => (
                  <tr key={c.id} className="border-t border-border-subtle">
                    <td className="px-4 py-3 font-mono text-xs">{c.key}</td>
                    <td className="px-4 py-3">
                      {c.value ? (
                        <span className="font-mono text-xs bg-gray-50 px-2 py-1 rounded max-w-[200px] inline-block truncate">{c.value}</span>
                      ) : <span className="text-xs text-on-surface-variant">未设置</span>}
                    </td>
                    <td className="px-4 py-3 text-xs text-on-surface-variant">{c.description || '-'}</td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <button onClick={() => { setEditing(c); setEditValue(c.value) }} className="text-xs text-secondary hover:underline">编辑</button>
                        <button onClick={() => handleDelete(c.id)} className="text-xs text-error-red hover:underline">删除</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}

      {/* Edit modal */}
      {editing && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setEditing(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">编辑配置</h2>
              <p className="text-sm text-on-surface-variant mt-1 font-mono">{editing.key}</p>
            </div>
            <div className="p-6">
              <label className="block text-sm font-semibold mb-1">值</label>
              <input type="text" value={editValue} onChange={(e) => setEditValue(e.target.value)}
                className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              {editing.description && <p className="text-xs text-on-surface-variant mt-1">{editing.description}</p>}
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setEditing(null)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors">取消</button>
              <button onClick={handleSaveEdit} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '保存中...' : '保存'}
              </button>
            </div>
          </div>
        </div>
      )}

      {showNew && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setShowNew(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle"><h2 className="text-lg font-bold">新增配置</h2></div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-semibold mb-1">配置键 *</label>
                <input type="text" value={newConfig.key} onChange={(e) => setNewConfig({ ...newConfig, key: e.target.value })}
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" placeholder="例如: llm_model" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">值 *</label>
                <input type="text" value={newConfig.value} onChange={(e) => setNewConfig({ ...newConfig, value: e.target.value })}
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">分组</label>
                <select value={newConfig.group} onChange={(e) => setNewConfig({ ...newConfig, group: e.target.value })}
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors bg-white">
                  <option value="ai">AI 模型（大模型、生图等）</option>
                  <option value="platform">平台对接（API 地址、密钥等）</option>
                  <option value="system">系统参数（上传限制、超时等）</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">说明</label>
                <input type="text" value={newConfig.description} onChange={(e) => setNewConfig({ ...newConfig, description: e.target.value })}
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setShowNew(false)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors">取消</button>
              <button onClick={handleCreate} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '创建中...' : '创建'}
              </button>
            </div>
          </div>
        </div>
      )}

      {showIntegrationForm && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => { setShowIntegrationForm(false); setEditingIntegration(null) }}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">{editingIntegration ? '编辑对接' : '新增对接'}</h2>
              <p className="text-xs text-on-surface-variant mt-1">
                APIKey 需先在
                <a href={DEVBOX_ADMIN_APPLY_URL} target="_blank" rel="noreferrer" className="text-secondary hover:underline mx-1">devbox B2B 运营后台 → 集成管理 → 应用列表</a>
                申请获取
              </p>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-semibold mb-1">名称 *</label>
                <input type="text" value={integrationForm.name} onChange={(e) => setIntegrationForm({ ...integrationForm, name: e.target.value })}
                  placeholder="例如: B2B 平台对接"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">MCP 地址 *</label>
                <input type="text" value={integrationForm.endpoint} onChange={(e) => setIntegrationForm({ ...integrationForm, endpoint: e.target.value })}
                  placeholder="http://100.111.84.16:3002/mcp"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">appId *</label>
                <input type="text" value={integrationForm.appId} onChange={(e) => setIntegrationForm({ ...integrationForm, appId: e.target.value })}
                  placeholder="例如: app_2a66d12104e64b02a195"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm font-mono outline-none focus:border-secondary transition-colors" />
                <p className="text-xs text-on-surface-variant mt-1">申请后从运营后台"应用列表"详情里复制</p>
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">appSecret *</label>
                <input type="password" value={integrationForm.apiKey} onChange={(e) => setIntegrationForm({ ...integrationForm, apiKey: e.target.value })}
                  placeholder="申请时一次性返回, 仅显示一次, 请妥善保存"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                <p className="text-xs text-on-surface-variant mt-1">AES-256-GCM 加密存储于本地, 不会明文返回列表</p>
              </div>
              <div>
                <label className="block text-sm font-semibold mb-1">客户编码 (可选)</label>
                <input type="text" value={integrationForm.customerCode} onChange={(e) => setIntegrationForm({ ...integrationForm, customerCode: e.target.value })}
                  placeholder="例如: test-customer-001 (MCP 会从 app 自动识别, 这里仅做备注)"
                  className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
              </div>
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => { setShowIntegrationForm(false); setEditingIntegration(null) }}
                className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors">取消</button>
              <button onClick={handleSaveIntegration} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '保存中...' : '保存'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// ====================== Plan Config Tab ======================

interface PlanEntry {
  label: string
  price: number
  description: string
  features: Features
  quotas: UsageQuotas
  platformCount: number
  supportLevel: string
}

const PLAN_KEYS = ['basic', 'pro', 'enterprise']

function PlanConfigTab({ showToast }: { showToast: (m: string) => void }) {
  const [config, setConfig] = useState<Record<string, PlanEntry> | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [editPlan, setEditPlan] = useState<string | null>(null)
  const [editData, setEditData] = useState<PlanEntry | null>(null)

  const load = useCallback(async () => {
    try {
      const res = await fetch(`${API}/plan-config`, { headers: authHeaders() })
      if (res.ok) setConfig(await res.json())
    } catch { showToast('加载失败')
    } finally { setLoading(false) }
  }, [showToast])

  useEffect(() => { load() }, [load])

  const openEdit = (key: string) => {
    if (!config) return
    setEditPlan(key)
    setEditData(JSON.parse(JSON.stringify(config[key])))
  }

  const handleSave = async () => {
    if (!config || !editPlan || !editData) return
    const updated = { ...config, [editPlan]: editData }
    setSaving(true)
    try {
      const res = await fetch(`${API}/plan-config`, {
        method: 'PUT', headers: authHeaders(),
        body: JSON.stringify(updated),
      })
      if (res.ok) { showToast('保存成功'); setConfig(updated); setEditPlan(null) }
      else showToast('保存失败')
    } catch { showToast('保存失败')
    } finally { setSaving(false) }
  }

  if (loading) return <div className="text-center py-12 text-on-surface-variant">加载中...</div>
  if (!config) return <div className="text-center py-12 text-on-surface-variant">暂无数据</div>

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <p className="text-sm text-on-surface-variant">配置订阅方案的定价、功能权限和用量配额。修改后创建租户时将自动应用新的默认值。</p>
      </div>

      <div className="grid grid-cols-3 gap-6">
        {PLAN_KEYS.map((key) => {
          const p = config[key]
          if (!p) return null
          return (
            <div key={key} className={`bg-white rounded-xl border-2 overflow-hidden ${key === 'pro' ? 'border-secondary' : 'border-border-subtle'}`}>
              {key === 'pro' && <div className="bg-secondary text-white text-center text-xs font-semibold py-1">推荐</div>}
              <div className="p-5">
                <div className="flex items-center justify-between mb-1">
                  <h3 className="text-lg font-bold">{p.label}</h3>
                  <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${PLAN_COLORS[key] || ''}`}>{PLAN_LABELS[key]}</span>
                </div>
                <p className="text-sm text-on-surface-variant mb-4">{p.description}</p>
                <div className="mb-4">
                  <span className="text-3xl font-bold">¥{p.price.toLocaleString()}</span>
                  <span className="text-sm text-on-surface-variant ml-1">/年</span>
                  <div className="text-xs text-on-surface-variant mt-1">折合 ¥{Math.round(p.price / 12)}/月</div>
                </div>
                <div className="space-y-3 text-sm">
                  <div>
                    <div className="font-semibold mb-1">功能权限</div>
                    <div className="flex flex-wrap gap-1">
                      {(Object.entries(FEATURE_LABELS) as [keyof Features, string][]).map(([fk, fl]) => (
                        <span key={fk} className={`inline-block px-1.5 py-0.5 rounded text-xs ${p.features[fk] ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-400'}`}>{fl}</span>
                      ))}
                    </div>
                  </div>
                  <div>
                    <div className="font-semibold mb-1">用量配额</div>
                    <div className="text-xs text-on-surface-variant space-y-0.5">
                      <div>月线索: {p.quotas.monthlyLeads >= 99999 ? '不限' : p.quotas.monthlyLeads} 条</div>
                      <div>月生图: {p.quotas.monthlyImages >= 99999 ? '不限' : p.quotas.monthlyImages} 张</div>
                      <div>月上架: {p.quotas.monthlyProducts >= 99999 ? '不限' : p.quotas.monthlyProducts} 条</div>
                      <div>月比价: {p.quotas.monthlyComparisons >= 99999 ? '不限' : p.quotas.monthlyComparisons} 次</div>
                      <div>用户数: {p.quotas.maxUsers >= 99999 ? '不限' : p.quotas.maxUsers} 人</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="font-semibold">平台对接:</span>
                    <span className="text-xs">{p.platformCount >= 999 ? '不限' : p.platformCount} 个平台</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="font-semibold">技术支持:</span>
                    <span className="text-xs">{p.supportLevel}</span>
                  </div>
                </div>
                <button onClick={() => openEdit(key)} className="mt-5 w-full bg-secondary text-white px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity">
                  编辑方案
                </button>
              </div>
            </div>
          )
        })}
      </div>

      {/* Edit modal */}
      {editPlan && editData && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => setEditPlan(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="p-6 border-b border-border-subtle">
              <h2 className="text-lg font-bold">编辑方案 — {editData.label}</h2>
            </div>
            <div className="p-6 space-y-5">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-semibold mb-1">方案名称</label>
                  <input type="text" value={editData.label} onChange={(e) => setEditData({ ...editData, label: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">年费 (元)</label>
                  <input type="number" min={0} value={editData.price} onChange={(e) => setEditData({ ...editData, price: +e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div className="col-span-2">
                  <label className="block text-sm font-semibold mb-1">描述</label>
                  <input type="text" value={editData.description} onChange={(e) => setEditData({ ...editData, description: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">对接平台数</label>
                  <input type="number" min={1} value={editData.platformCount} onChange={(e) => setEditData({ ...editData, platformCount: +e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
                <div>
                  <label className="block text-sm font-semibold mb-1">技术支持级别</label>
                  <input type="text" value={editData.supportLevel} onChange={(e) => setEditData({ ...editData, supportLevel: e.target.value })}
                    className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                </div>
              </div>
              {/* Features */}
              <div className="border-t border-border-subtle pt-4">
                <h3 className="text-sm font-semibold mb-3">功能权限</h3>
                <div className="grid grid-cols-2 gap-3">
                  {(Object.entries(FEATURE_LABELS) as [keyof Features, string][]).map(([k, label]) => (
                    <label key={k} className="flex items-center gap-3 p-3 border border-border-subtle rounded-lg cursor-pointer hover:bg-surface-container-low transition-colors">
                      <input type="checkbox" checked={editData.features[k]} onChange={() => setEditData({ ...editData, features: { ...editData.features, [k]: !editData.features[k] } })}
                        className="w-4 h-4 rounded border-gray-300 text-secondary focus:ring-secondary" />
                      <span className="text-sm">{label}</span>
                    </label>
                  ))}
                </div>
              </div>
              {/* Quotas */}
              <div className="border-t border-border-subtle pt-4">
                <h3 className="text-sm font-semibold mb-3">用量配额</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold mb-1">月线索数上限（0=禁用，99999+=不限）</label>
                    <input type="number" min={0} value={editData.quotas.monthlyLeads} onChange={(e) => setEditData({ ...editData, quotas: { ...editData.quotas, monthlyLeads: +e.target.value } })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月生图数上限</label>
                    <input type="number" min={0} value={editData.quotas.monthlyImages} onChange={(e) => setEditData({ ...editData, quotas: { ...editData.quotas, monthlyImages: +e.target.value } })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月商品上架上限</label>
                    <input type="number" min={0} value={editData.quotas.monthlyProducts} onChange={(e) => setEditData({ ...editData, quotas: { ...editData.quotas, monthlyProducts: +e.target.value } })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">月比价次数上限</label>
                    <input type="number" min={0} value={editData.quotas.monthlyComparisons} onChange={(e) => setEditData({ ...editData, quotas: { ...editData.quotas, monthlyComparisons: +e.target.value } })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold mb-1">最大用户数</label>
                    <input type="number" min={1} value={editData.quotas.maxUsers} onChange={(e) => setEditData({ ...editData, quotas: { ...editData.quotas, maxUsers: +e.target.value } })}
                      className="w-full px-4 py-2 border border-border-subtle rounded-lg text-sm outline-none focus:border-secondary transition-colors" />
                  </div>
                </div>
              </div>
            </div>
            <div className="p-6 border-t border-border-subtle flex items-center justify-end gap-3">
              <button onClick={() => setEditPlan(null)} className="px-4 py-2 text-sm text-on-surface-variant hover:text-gray-900 transition-colors" disabled={saving}>取消</button>
              <button onClick={handleSave} disabled={saving}
                className="bg-secondary text-white px-5 py-2 rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50">
                {saving ? '保存中...' : '保存方案'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}