// 监控中心 — 4个监控标签页的容器 // Logan.Li
import { useState } from 'react';
import { Cpu } from 'lucide-react';
import { PageShell } from '@/components/layout/PageShell';
import { HostMonitor } from './HostMonitor';
import { MiddlewareMonitor } from './MiddlewareMonitor';
import { SNMPMonitor } from './SNMPMonitor';
import { SiteMonitor } from './SiteMonitor';

type TabId = 'host' | 'middleware' | 'snmp' | 'site';

const tabs: { id: TabId; name: string; description: string }[] = [
  { id: 'host', name: '主机监控', description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
  { id: 'middleware', name: '中间件监控', description: 'Redis / MySQL 指标采集' },
  { id: 'snmp', name: 'SNMP 监控', description: '网络设备 / 服务器硬件 (OID 模板)' },
  { id: 'site', name: '站点拨测', description: 'HTTP / PING / DNS / TCP / WS 拨测' },
];

export function MonitorCenter() {
  const [activeTab, setActiveTab] = useState<TabId>('host');
  const current = tabs.find((t) => t.id === activeTab);

  return (
    <PageShell
      variant="list"
      title="监控中心"
      subtitle={current?.description ?? '全面的基础设施与应用监控'}
      icon={<Cpu className="h-5 w-5" />}
      tabs={tabs.map((t) => ({ id: t.id, label: t.name }))}
      activeTab={activeTab}
      onTabChange={(id) => setActiveTab(id as TabId)}
      contentClassName="min-h-[400px]"
    >
      {activeTab === 'host' && <HostMonitor embedded />}
      {activeTab === 'middleware' && <MiddlewareMonitor />}
      {activeTab === 'snmp' && <SNMPMonitor />}
      {activeTab === 'site' && <SiteMonitor />}
    </PageShell>
  );
}