import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Building2, LayoutDashboard, Server, Shield } from 'lucide-react'
import { OverviewTab } from '@/components/admin/OverviewTab'
import { TenantsTab } from '@/components/admin/TenantsTab'
import { SystemTab } from '@/components/admin/SystemTab'

const TABS = [
  { key: 'overview', label: '平台概览', icon: LayoutDashboard },
  { key: 'tenants', label: '租户管理', icon: Building2 },
  { key: 'system', label: '系统监控', icon: Server },
]

export function TenantManagementPage() {
  const [tab, setTab] = useState('overview')

  return (
    <div className="space-y-4">
      <div>
        <h1 className="flex items-center gap-2 text-xl font-bold">
          <Shield size={22} className="text-primary" />
          平台管理后台
        </h1>
        <p className="mt-0.5 text-xs text-muted-foreground">SaaS 多租户管理 · 数据库连接配置 · 用户权限管理 · 系统监控</p>
      </div>

      {/* Tab 切换 */}
      <div className="flex gap-1 border-b">
        {TABS.map((t) => {
          const Icon = t.icon
          const active = tab === t.key
          return (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={cn(
                'flex items-center gap-1.5 border-b-2 px-4 py-2 text-sm font-medium transition-colors',
                active ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
              )}
            >
              <Icon size={16} />
              {t.label}
            </button>
          )
        })}
      </div>

      {tab === 'overview' && <OverviewTab />}
      {tab === 'tenants' && <TenantsTab />}
      {tab === 'system' && <SystemTab />}
    </div>
  )
}

// Tab 组件拆分至 @/components/admin/ 目录：
// - OverviewTab.tsx   平台概览
// - TenantsTab.tsx    租户管理（含用户管理）
// - SystemTab.tsx     系统监控
