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

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { Cpu, HardDrive, RefreshCw, ChevronRight, Activity } from 'lucide-react';
import { kubernetesApi } from '@/services/api';

export default function PodMetricsPage() {
  const { clusterCode } = useParams<{ clusterCode: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [metrics, setMetrics] = useState<any[]>([]);
  const [clusters, setClusters] = useState<any[]>([]);
  const [namespaces, setNamespaces] = useState<string[]>([]);
  const [selectedNs, setSelectedNs] = useState('all');
  const [activeCluster, setActiveCluster] = useState(clusterCode || '');

  useEffect(() => {
    kubernetesApi.getClusters().then((res: any) => {
      const list = res?.list || [];
      setClusters(list);
      if (!activeCluster && list.length > 0) {
        const code = list[0].code || String(list[0].id);
        setActiveCluster(code);
        navigate(`/kubernetes/${code}/metrics/pods`, { replace: true });
      }
    }).catch(() => {});
  }, []);

  useEffect(() => {
    if (!activeCluster) return;
    kubernetesApi.getNamespaces(activeCluster).then((res: any) => {
      setNamespaces(Array.isArray(res) ? res : (res?.list || res?.data || []));
    }).catch(() => {});
  }, [activeCluster]);

  const loadMetrics = useCallback(async () => {
    if (!activeCluster) return;
    setLoading(true);
    try {
      const ns = selectedNs === 'all' ? undefined : selectedNs;
      const res: any = await kubernetesApi.getPodMetrics(activeCluster, ns);
      setMetrics(Array.isArray(res) ? res : (res?.list || []));
    } catch { setMetrics([]); } finally { setLoading(false); }
  }, [activeCluster, selectedNs]);

  useEffect(() => { loadMetrics(); }, [loadMetrics]);

  // Flatten for table
  const rows = useMemo(() =>
    metrics.flatMap((pm: any) =>
      (pm.containers || []).map((c: any) => ({
        pod: pm.name,
        namespace: pm.namespace,
        container: c.name,
        cpu: c.cpu || '0m',
        memory: c.memory || '0Mi',
      }))
    ), [metrics]);

  const totalCPU = useMemo(() => rows.reduce((s, r) => s + (parseInt(r.cpu) || 0), 0), [rows]);
  const totalMem = useMemo(() => {
    let sum = 0;
    rows.forEach(r => {
      const v = r.memory;
      if (v.endsWith('Mi')) sum += parseInt(v);
      else if (v.endsWith('Ki')) sum += parseInt(v) / 1024;
      else if (v.endsWith('Gi')) sum += parseInt(v) * 1024;
    });
    return sum;
  }, [rows]);

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm text-slate-500">
        <Link to="/kubernetes" className="hover:text-slate-300">集群</Link>
        {activeCluster && <><ChevronRight className="h-3 w-3" /><Link to={`/kubernetes/${activeCluster}`} className="hover:text-slate-300">{activeCluster}</Link></>}
        <ChevronRight className="h-3 w-3" /><span className="text-slate-300">Pod 资源用量</span>
      </div>

      <div className="flex items-center justify-between flex-wrap gap-3">
        <h2 className="text-lg font-semibold text-slate-100 flex items-center gap-2"><Activity className="h-5 w-5 text-blue-400" />Pod 资源用量</h2>
        <div className="flex items-center gap-2">
          <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/metrics/pods`); }}>
            <SelectTrigger className="w-44 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue /></SelectTrigger>
            <SelectContent className="bg-slate-800 border-slate-700">
              {clusters.map((c: any) => <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>)}
            </SelectContent>
          </Select>
          <Select value={selectedNs} onValueChange={setSelectedNs}>
            <SelectTrigger className="w-36 h-8 text-xs bg-slate-800 border-slate-700"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
            <SelectContent className="bg-slate-800 border-slate-700">
              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
              {namespaces.map(n => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300 text-xs" onClick={loadMetrics} disabled={loading}>
            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新
          </Button>
        </div>
      </div>

      {/* Summary cards */}
      <div className="grid grid-cols-3 gap-3">
        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">Pod 数</p><p className="text-xl font-bold text-slate-200">{metrics.length}</p>
        </CardContent></Card>
        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">总 CPU</p><p className="text-xl font-bold text-blue-400">{totalCPU}m</p>
        </CardContent></Card>
        <Card className="bg-slate-900 border-slate-800"><CardContent className="p-3 text-center">
          <p className="text-xs text-slate-500">总内存</p><p className="text-xl font-bold text-emerald-400">{totalMem.toFixed(0)}Mi</p>
        </CardContent></Card>
      </div>

      <Card className="bg-slate-900 border-slate-800">
        <CardContent className="p-0">
          <Table>
            <TableHeader><TableRow className="border-slate-800 hover:bg-transparent">
              <TableHead className="text-slate-400">Pod</TableHead>
              <TableHead className="text-slate-400">命名空间</TableHead>
              <TableHead className="text-slate-400">容器</TableHead>
              <TableHead className="text-slate-400"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
              <TableHead className="text-slate-400"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
            </TableRow></TableHeader>
            <TableBody>
              {rows.length === 0 ? (
                <TableRow><TableCell colSpan={5} className="text-center text-slate-500 py-8">暂无数据{loading ? <span className="animate-spin inline-block ml-2">⏳</span> : ''}</TableCell></TableRow>
              ) : rows.map((r, i) => (
                <TableRow key={`${r.pod}-${r.container}-${i}`} className="border-slate-800 hover:bg-slate-800/30">
                  <TableCell className="font-medium text-slate-200 text-sm">{r.pod}</TableCell>
                  <TableCell><Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">{r.namespace}</Badge></TableCell>
                  <TableCell className="text-sm text-slate-400">{r.container}</TableCell>
                  <TableCell className="text-sm text-blue-400">{r.cpu}</TableCell>
                  <TableCell className="text-sm text-emerald-400">{r.memory}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}