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

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { RefreshCw, BarChart3, Download, Cpu, HardDrive } from 'lucide-react';
import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

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

  useEffect(() => {
    kubernetesApi.getClusters().then((res: JsonData) => {
      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}/capacity`, { replace: true });
      }
    }).catch(() => {});
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

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

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

  const rows = useMemo(() =>
    capacity.flatMap((d: JsonData) =>
      (d.containers || []).map((c: JsonData) => ({
        namespace: d.namespace,
        deployment: d.name,
        replicas: d.replicas,
        container: c.name,
        cpu_req: c.cpu_request || '-',
        cpu_lim: c.cpu_limit || '-',
        mem_req: c.mem_request || '-',
        mem_lim: c.mem_limit || '-',
      }))
    ), [capacity]);

  const exportCSV = () => kubernetesApi.exportAsCSV(`capacity-${activeCluster}.csv`, rows);

  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;

  return (
    <PageShell
      variant="list"
      title={i18n.t('k8s.capacity.resources')}
      subtitle={clusterName ? `${clusterName} · ${i18n.t('k8s.capacity.resources1')}` : i18n.t('k8s.capacity.resources1')}
      icon={<BarChart3 className="h-5 w-5" />}
      actions={(
        <>
          <Select value={activeCluster} onValueChange={v => { setActiveCluster(v); navigate(`/kubernetes/${v}/capacity`); }}>
            <SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
            <SelectContent>
              {clusters.map((c: JsonData) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>)}
            </SelectContent>
          </Select>
          <Select value={selectedNs} onValueChange={setSelectedNs}>
            <SelectTrigger className="w-32 h-9 dg-input"><SelectValue placeholder={i18n.t('k8s.capacity.namespace')} /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{i18n.t("common.allNamespaces")}</SelectItem>
              {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadCapacity} disabled={loading}>
            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />{i18n.t('common.refresh')}</Button>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={exportCSV}>
            <Download className="h-4 w-4 mr-1" />
            CSV
          </Button>
        </>
      )}
    >
      <ContentPanel>
          <Table>
            <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
              <TableHead className="dg-text-secondary">Deployment</TableHead>
              <TableHead className="dg-text-secondary">{i18n.t("common.namespaceLabel")}</TableHead>
              <TableHead className="dg-text-secondary">{i18n.t("common.replicasLabel")}</TableHead>
              <TableHead className="dg-text-secondary">{i18n.t("common.containerLabel")}</TableHead>
              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
              <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
              <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Lim</TableHead>
            </TableRow></TableHeader>
            <TableBody>
              {rows.length === 0 ? (
                <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-8">{i18n.t('common.noData')}</TableCell></TableRow>
              ) : rows.map((r, i) => (
                <TableRow key={`${r.deployment}-${r.container}-${i}`} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                  <TableCell className="font-medium text-[var(--dg-text-primary)] text-sm">{r.deployment}</TableCell>
                  <TableCell><Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-xs">{r.namespace}</Badge></TableCell>
                  <TableCell className="text-sm text-[var(--dg-text-secondary)]">{r.replicas}</TableCell>
                  <TableCell className="text-sm dg-text-secondary">{r.container}</TableCell>
                  <TableCell className={`text-sm ${r.cpu_req !== '-' ? 'dg-text-blue' : 'dg-text-muted'}`}>{r.cpu_req}</TableCell>
                  <TableCell className={`text-sm ${r.cpu_lim !== '-' ? 'dg-text-cyan' : 'dg-text-muted'}`}>{r.cpu_lim}</TableCell>
                  <TableCell className={`text-sm ${r.mem_req !== '-' ? 'dg-text-green' : 'dg-text-muted'}`}>{r.mem_req}</TableCell>
                  <TableCell className={`text-sm ${r.mem_lim !== '-' ? 'text-teal-400' : 'dg-text-muted'}`}>{r.mem_lim}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
      </ContentPanel>
    </PageShell>
  );
}