// 数据源管理页面 — Prometheus + Zabbix 双 Tab // Logan.Li
import { useState } from 'react';
import { Database } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import PrometheusDatasourceManager from '@/components/monitor/datasource/PrometheusDatasourceManager';
import ZabbixDatasourceManager from '@/components/monitor/datasource/ZabbixDatasourceManager';

export default function DatasourcePage() {
  const [activeTab, setActiveTab] = useState('prometheus');

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Database className="h-5 w-5 text-blue-400" />
        <h1 className="text-xl font-bold text-[var(--dg-text-primary)]">数据源管理</h1>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
          <TabsTrigger value="prometheus" className="data-[state=active]:bg-orange-500/10 data-[state=active]:text-orange-400">
            <img
              src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/prometheus.png"
              className="w-4 h-4 rounded mr-1.5"
              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
            />
            Prometheus
          </TabsTrigger>
          <TabsTrigger value="zabbix" className="data-[state=active]:bg-orange-500/10 data-[state=active]:text-orange-400">
            <img
              src="https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/zabbix.png"
              className="w-4 h-4 rounded mr-1.5"
              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
            />
            Zabbix
          </TabsTrigger>
        </TabsList>

        <TabsContent value="prometheus" className="mt-4">
          <PrometheusDatasourceManager />
        </TabsContent>
        <TabsContent value="zabbix" className="mt-4">
          <ZabbixDatasourceManager />
        </TabsContent>
      </Tabs>
    </div>
  );
}