aiops/frontend/src/components/kubernetes/deployment-view/PodsTab.tsx

// deployment-view/PodsTab.tsx — 容器组 Tab // Logan.Li
// v2: 虚拟滚动，支持 1000+ Pod 场景流畅渲染
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useVirtualizer } from '@tanstack/react-virtual';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  ChevronDown, ChevronRight, Terminal, HardDrive, MoreVertical, FileText, FileCode, Trash2,
} from 'lucide-react';
import { statusColor } from '../k8s-yaml-utils';
import { PodConditionsRow } from './helpers';
import type { DeploymentViewProps } from './types';

const GRID_COLS = '28px minmax(120px,3fr) 76px minmax(80px,1fr) minmax(70px,1fr) 56px 56px 88px';
const MIN_WIDTH = '700px';
const ROW_HEIGHT = 56;

export function PodsTab({
  clusterCode, pods, onShowPodLogs, onShowPodTerminal, onShowPodYaml, onShowPodFileBrowser,
  onDeletePod,
  expandedPod, setExpandedPod,
}: DeploymentViewProps & { expandedPod: string | null; setExpandedPod: (v: string | null) => void }) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);

  // eslint-disable-next-line react-hooks/incompatible-library
  const virtualizer = useVirtualizer({
    count: pods.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => ROW_HEIGHT,
    overscan: 8,
  });

  if (pods.length === 0) {
    return <div className="text-center text-[var(--dg-text-muted)] py-12">{t('k8s.pods.empty')}</div>;
  }

  const virtualRows = virtualizer.getVirtualItems();
  const totalHeight = virtualizer.getTotalSize();

  return (
    <Card className="dg-card overflow-hidden">
      <CardContent className="p-0">
        {/* 表头 */}
        <div
          className="grid gap-2 min-w-[740px] px-4 py-2.5 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/40 text-[11px] font-medium text-[var(--dg-text-muted)] uppercase tracking-wide sticky top-0 z-10"
          style={{ gridTemplateColumns: GRID_COLS }}
        >
          <span />
          <span>{t('k8s.pods.col.name')}</span>
          <span>{t('k8s.pods.col.status')}</span>
          <span>{t('k8s.pods.col.node')}</span>
          <span>IP</span>
          <span className="text-center">{t('k8s.pods.col.restart')}</span>
          <span>Age</span>
          <span className="text-right">{t('k8s.pods.col.actions')}</span>
        </div>

        {/* 虚拟滚动列表 */}
        <div ref={scrollRef} style={{ height: 'min(600px, calc(100vh - 320px))', overflow: 'auto' }} className="overflow-x-auto">
          <div style={{ height: totalHeight, position: 'relative', minWidth: MIN_WIDTH }}>
            {virtualRows.map((vr) => {
              const pod = pods[vr.index];
              if (!pod) return null;
              const expanded = expandedPod === pod.name;
              const nodeName = pod.node_name || pod.node;
              const sc = statusColor(pod.status);
              const containers = (pod as unknown as Record<string, unknown>).containers as Record<string, unknown>[] | undefined;

              return (
                <div
                  key={pod.name}
                  data-index={vr.index}
                  ref={virtualizer.measureElement}
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    transform: `translateY(${vr.start}px)`,
                  }}
                  className={expanded ? 'bg-[var(--dg-bg-tertiary)]/30' : ''}
                >
                  {/* 列表行 */}
                  <div
                    className={`grid gap-2 items-center px-4 py-3 transition-colors ${
                      expanded ? '' : 'hover:bg-[var(--dg-bg-tertiary)]/20'
                    }`}
                    style={{ gridTemplateColumns: GRID_COLS }}
                  >
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-[var(--dg-text-muted)]"
                      onClick={() => setExpandedPod(expanded ? null : pod.name)}
                    >
                      {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                    </Button>

                    <span className="font-mono text-sm text-[var(--dg-text-primary)] truncate" title={pod.name}>
                      {pod.name}
                    </span>

                    <Badge
                      className="w-fit text-[11px] font-normal"
                      style={{ background: `${sc}18`, color: sc, border: `1px solid ${sc}33` }}
                    >
                      {pod.status || 'Unknown'}
                    </Badge>

                    <button
                      className="text-xs text-[var(--dg-blue)] hover:underline truncate text-left"
                      title={nodeName}
                      onClick={() => nodeName && window.open(`/kubernetes/${clusterCode}/nodes/${nodeName}`, '_blank')}
                    >
                      {nodeName || '—'}
                    </button>

                    <span className="text-xs font-mono text-[var(--dg-text-muted)] truncate">
                      {pod.ip || pod.pod_ip || '—'}
                    </span>

                    <span className={`text-xs text-center font-mono ${(pod.restart_count || 0) > 0 ? 'dg-text-yellow' : 'text-[var(--dg-text-muted)]'}`}>
                      {pod.restart_count || 0}
                    </span>

                    <span className="text-xs text-[var(--dg-text-muted)] whitespace-nowrap">
                      {pod.age || '—'}
                    </span>

                    <div className="flex items-center justify-end gap-0.5 shrink-0 w-[88px]">
                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 dg-text-green" title={t('k8s.pods.action.terminal')} onClick={() => onShowPodTerminal(pod)}>
                        <Terminal className="h-3.5 w-3.5" />
                      </Button>
                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 dg-text-yellow" title={t('k8s.pods.action.file')} onClick={() => onShowPodFileBrowser(pod)}>
                        <HardDrive className="h-3.5 w-3.5" />
                      </Button>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-7 w-7 p-0 shrink-0 text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)]"
                            title={t('k8s.pods.action.more')}
                            aria-label={t('k8s.pods.action.more')}
                          >
                            <MoreVertical className="h-3.5 w-3.5" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                          <DropdownMenuItem onClick={() => onShowPodLogs(pod)} className="text-[var(--dg-text-primary)]">
                            <FileText className="h-3.5 w-3.5 mr-2" /> {t('k8s.pods.action.logs')}
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => onShowPodYaml(pod)} className="text-[var(--dg-text-primary)]">
                            <FileCode className="h-3.5 w-3.5 mr-2" /> YAML
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => onDeletePod?.(pod)} className="dg-text-red focus:dg-text-red">
                            <Trash2 className="h-3.5 w-3.5 mr-2" /> {t('k8s.pods.action.delete')}
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </div>

                  {/* 展开详情 */}
                  {expanded && (
                    <div className="px-4 pb-4 pt-1 space-y-3 bg-[var(--dg-bg-tertiary)]/20">
                      <PodConditionsRow pod={pod} />
                      {containers && containers.length > 0 && (
                        <div>
                          <p className="text-xs text-[var(--dg-text-muted)] mb-2">{t('k8s.pods.containers')}</p>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                            {containers.map((c, idx) => (
                              <div key={idx} className="rounded-md border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] px-3 py-2.5 text-xs">
                                <div className="flex items-center justify-between gap-2">
                                  <span className="font-medium text-[var(--dg-text-primary)]">{String(c.name ?? '')}</span>
                                  <span className={c.ready ? 'dg-text-green' : 'text-[var(--dg-text-muted)]'}>
                                    {c.ready ? 'Ready' : 'Pending'}
                                  </span>
                                </div>
                                <p className="text-[var(--dg-text-muted)] mt-1 truncate" title={String(c.image ?? '')}>{String(c.image ?? '')}</p>
                                {c.resources && (
                                  <div className="mt-1.5 flex gap-4 text-[var(--dg-text-muted)]">
                                    <span>CPU {String((c.resources as Record<string, Record<string, string>>)?.requests?.cpu ?? '0')} / {String((c.resources as Record<string, Record<string, string>>)?.limits?.cpu ?? '—')}</span>
                                    <span>{t('k8s.pods.memory')} {String((c.resources as Record<string, Record<string, string>>)?.requests?.memory ?? '0')} / {String((c.resources as Record<string, Record<string, string>>)?.limits?.memory ?? '—')}</span>
                                  </div>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* 行数统计 */}
        {pods.length > 0 && (
          <div className="text-center py-2 text-xs text-[var(--dg-text-muted)] border-t border-[var(--dg-border)]">
            {t('k8s.pods.totalCount', { count: pods.length })} {pods.length > 200 && `· ${t('k8s.pods.virtualScroll')}`}
          </div>
        )}
      </CardContent>
    </Card>
  );
}