aiops/frontend/src/components/kubernetes/ClusterOverviewPage.tsx

import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import {
  
  RefreshCw,
  Loader2,
  Cpu,
  Server,
  Container,
  ChevronRight,
  Cloud,
  Boxes,
  Shield,
  Activity,
} from 'lucide-react';

import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = {
  'kube-system': Server,
  'kube-public': Shield,
  'kube-node-lease': Activity,
  'default': Cloud,
};

export default function ClusterOverviewPage() {
  const { clusterCode } = useParams<{ clusterCode: string }>();
  const navigate = useNavigate();
  const { toast } = useToast();

  const [, setClusters] = useState<JsonData[]>([]);
  const [nodes, setNodes] = useState<JsonData[]>([]);
  const [namespaces, setNamespaces] = useState<string[]>([]);
  const [clusterInfo, setClusterInfo] = useState<JsonData>(null);
  const [loading, setLoading] = useState(false);

  // Load cluster list + current cluster info
  const loadClusterInfo = useCallback(async () => {
    try {
      const res: JsonData = await kubernetesApi.getClusters();
      const list = res?.list || [];
      setClusters(list);
      const current = list.find((c: JsonData) => (c.code || String(c.id)) === clusterCode);
      setClusterInfo(current || null);
      if (!current && list.length > 0 && clusterCode) {
        toast({ title: i18n.t('kubernetes.clusteroverview.s9ff765c1'), description: `找不到集群 ${clusterCode}`, variant: 'destructive' });
      }
    } catch { setClusters([]); }
  }, [clusterCode]);

  const loadData = useCallback(async () => {
    if (!clusterCode) return;
    setLoading(true);
    try {
      const [nodesRes, nsRes] = await Promise.all([
        kubernetesApi.getNodes(clusterCode).catch(() => []),
        kubernetesApi.getNamespaces(clusterCode).catch(() => []),
      ]);
      setNodes(Array.isArray(nodesRes) ? nodesRes : (nodesRes?.list || nodesRes?.data || []));
      const nsList: string[] = Array.isArray(nsRes) ? nsRes : (nsRes?.list || nsRes?.data || []);
      setNamespaces(nsList);
    } catch { setNodes([]); setNamespaces([]); } finally { setLoading(false); }
  }, [clusterCode]);

  useEffect(() => { loadClusterInfo(); }, [loadClusterInfo]);
  useEffect(() => { loadData(); }, [loadData]);

  const getNodeRole = (node: JsonData) => {
    if (node?.role === 'master' || node?.role === 'control-plane') return 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)] border-[var(--dg-blue)]/30';
    return 'bg-[var(--dg-text-muted)]/20 text-[var(--dg-text-secondary)] border-[var(--dg-text-muted)]/30';
  };

  return (
    <PageShell
      variant="default"
      title={clusterCode || i18n.t('kubernetes.clusteroverview.s066c0aa3')}
      subtitle={clusterInfo?.version ? `集群概览 · Kubernetes ${clusterInfo.version}` : i18n.t('kubernetes.clusteroverview.s066c0aa3')}
      icon={<Server className="h-5 w-5" />}
      metrics={!loading ? (
        <StatStrip
          items={[
            { label: i18n.t('kubernetes.node.title'), value: nodes.length, color: 'blue' },
            { label: i18n.t('kubernetes.namespace.title'), value: namespaces.length, color: 'green' },
            { label: i18n.t('agent.agentVersion'), value: clusterInfo?.version || '-', color: 'muted' },
          ]}
        />
      ) : undefined}
      actions={(
        <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
          <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
          刷新
        </Button>
      )}
    >
      {/* 节点列表 // Logan.Li */}
      <div>
        <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
          <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />节点列表
        </h2>
        <ContentPanel>
            <Table>
              <TableHeader>
                <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                  <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('kubernetes.secret.secretName')} </TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('system.userRole')} </TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('system.terminalStatus')} </TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]">IP</TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]">OS</TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]">Kubelet</TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]">CPU</TableHead>
                  <TableHead className="text-[var(--dg-text-secondary)]"> {i18n.t('kubernetes.pod.memory')} </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" /> {i18n.t('monitor.logPanel.logResults.loading')} </TableCell></TableRow>
                ) : nodes.length === 0 ? (
                  <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Cpu className="h-8 w-8 mx-auto mb-2 opacity-50" /> {i18n.t('kubernetes.topology.noNodes')} </TableCell></TableRow>
                ) : (
                  nodes.map((n: JsonData) => {
                    const cpuCores = n.cpu || 0;
                    const cpuUsageM = n.cpu_usage_m ? parseFloat(n.cpu_usage_m.replace('m','')) : 0;
                    const cpuPct = cpuCores > 0 ? (cpuUsageM / 1000 / cpuCores) * 100 : 0;
                    const memMb = n.memory_mb || 0;
                    const memUsageMi = n.mem_usage_mi ? parseFloat(n.mem_usage_mi.replace('Mi','').replace('Ki','').replace('Gi','')) : 0;
                    // Normalize to MiB
                    const memUsageNorm = n.mem_usage_mi?.includes('Ki') ? memUsageMi / 1024 : n.mem_usage_mi?.includes('Gi') ? memUsageMi * 1024 : memUsageMi;
                    const memPct = memMb > 0 ? (memUsageNorm / memMb) * 100 : 0;
                    const color = (pct: number) => pct > 80 ? 'bg-[var(--dg-red)]' : pct > 60 ? 'bg-[var(--dg-orange)]' : 'bg-[var(--dg-green)]';
                    return (
                    <TableRow key={n.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer"
                      onClick={() => navigate(`/kubernetes/${clusterCode}/nodes/${n.name}`)}>
                      <TableCell className="font-medium text-[var(--dg-blue)] hover:text-[var(--dg-blue)]">{n.name}</TableCell>
                      <TableCell><Badge className={getNodeRole(n)}>{n.role || 'worker'}</Badge></TableCell>
                      <TableCell><Badge className={n.status === 'Ready' ? 'bg-[var(--dg-green)]/20 text-[var(--dg-green)]' : 'bg-[var(--dg-red)]/20 text-[var(--dg-red)]'}>{n.status || 'Unknown'}</Badge></TableCell>
                      <TableCell className="text-sm text-[var(--dg-text-secondary)]">{n.ip || '-'}</TableCell>
                      <TableCell className="text-sm text-[var(--dg-text-secondary)] max-w-[200px] truncate">{n.os || '-'}</TableCell>
                      <TableCell className="text-sm text-[var(--dg-text-secondary)]">{n.kubelet_version || '-'}</TableCell>
                      <TableCell className="text-xs">
                        {n.cpu_usage_m ? (
                          <div className="flex items-center gap-1.5 min-w-[80px]">
                            <div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-tertiary)]/50 overflow-hidden">
                              <div className={`h-full rounded-full ${color(cpuPct)}`} style={{ width: `${Math.min(cpuPct, 100)}%` }} />
                            </div>
                            <span className="text-[var(--dg-text-secondary)]">{cpuPct.toFixed(0)}%</span>
                          </div>
                        ) : (
                          <span className="text-[var(--dg-text-muted)]">{cpuCores} 核</span>
                        )}
                      </TableCell>
                      <TableCell className="text-xs">
                        {n.mem_usage_mi ? (
                          <div className="flex items-center gap-1.5 min-w-[80px]">
                            <div className="flex-1 h-1.5 rounded-full bg-[var(--dg-bg-tertiary)]/50 overflow-hidden">
                              <div className={`h-full rounded-full ${color(memPct)}`} style={{ width: `${Math.min(memPct, 100)}%` }} />
                            </div>
                            <span className="text-[var(--dg-text-secondary)]">{memPct.toFixed(0)}%</span>
                          </div>
                        ) : (
                          <span className="text-[var(--dg-text-muted)]">{memMb}Mi</span>
                        )}
                      </TableCell>
                    </TableRow>
                    );
                  })
                )}
              </TableBody>
            </Table>
        </ContentPanel>
      </div>

      {/* Namespace list */}
      <div>
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
            <Boxes className="h-4 w-4 text-[var(--dg-green)]" />命名空间
          </h2>
          <Link to={`/kubernetes/${clusterCode}/namespaces`} className="text-sm text-[var(--dg-blue)] hover:text-[var(--dg-blue)] transition-colors flex items-center gap-1">
            管理全部 <ChevronRight className="h-3 w-3" />
          </Link>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {namespaces.map((ns) => {
            const Icon = NAMESPACE_ICON[ns] || Container;
            return (
              <Link key={ns}
                to={`/kubernetes/${clusterCode}/namespace/${ns}`}
                className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-4 hover:border-[var(--dg-border-hover)] hover:bg-[var(--dg-bg-tertiary)]/50 transition-all group"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Icon className="h-5 w-5 text-[var(--dg-text-muted)] group-hover:text-[var(--dg-text-secondary)] transition-colors" />
                    <span className="text-sm font-medium text-[var(--dg-text-secondary)] group-hover:text-[var(--dg-text-primary)] transition-colors">{ns}</span>
                  </div>
                  <ChevronRight className="h-4 w-4 text-[var(--dg-text-muted)] group-hover:text-[var(--dg-text-secondary)] transition-colors" />
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </PageShell>
  );
}