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

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
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,
  Server,
  Activity,
  ArrowLeft,
  Container,
  Network,
  Info,
  AlertTriangle,
  CheckCircle2,
} from 'lucide-react';

import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell';

export default function NodeDetailPage() {
  const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
  const navigate = useNavigate();
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  const loadData = useCallback(async () => {
    if (!clusterCode || !nodeName) return;
    setLoading(true);
    try {
      const res: Record<string, unknown> = await kubernetesApi.getNodeDetail(clusterCode, nodeName);
      setData(res);
    } catch { setData(null); } finally { setLoading(false); }
  }, [clusterCode, nodeName]);

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

  const _formatNum = ( v: any, suffix = '') => {
    if (v === undefined || v === null || v === '') return '-';
    const n = typeof v === 'number' ? v : parseFloat(v);
    return isNaN(n) ? '-' : `${n.toLocaleString()}${suffix}`;
  };

  // Resource bar component
  const ResourceBar = ({ label, used, total, unit, pct, color }: { label: string; used: string; total: string; unit: string; pct: number; color: string }) => {
    const safePct = Math.min(Math.max(pct || 0, 0), 100);
    const barColor = safePct > 80 ? 'bg-red-500' : safePct > 60 ? 'bg-amber-500' : 'bg-emerald-500';
    return (
      <div className="space-y-1.5">
        <div className="flex items-center justify-between text-xs">
          <span className="dg-text-secondary">{label}</span>
          <span className="text-[var(--dg-text-secondary)] font-medium">
            {used} / {total} {unit}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex-1 h-2 rounded-full bg-[var(--dg-bg-active)]/50 overflow-hidden">
            <div className={`h-full rounded-full ${barColor} transition-all duration-500`} style={{ width: `${safePct}%` }} />
          </div>
          <span className={`text-xs font-semibold min-w-[40px] text-right ${color}`}>
            {safePct.toFixed(0)}%
          </span>
        </div>
      </div>
    );
  };

  const conditionColor = (type: string, status: string) => {
    if (status === 'True') {
      if (type === 'Ready') return 'bg-emerald-500/20 dg-text-green';
      // Other True conditions (DiskPressure, MemoryPressure, PIDPressure, NetworkUnavailable) are BAD
      return 'bg-red-500/20 dg-text-red';
    }
    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary';
  };

  const taintColor = (effect: string) => {
    if (effect === 'NoSchedule') return 'bg-red-500/20 dg-text-red border-red-500/30';
    if (effect === 'NoExecute') return 'bg-red-600/20 dg-text-red border-red-600/30';
    if (effect === 'PreferNoSchedule') return 'bg-amber-500/20 dg-text-yellow border-amber-500/30';
    return 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
  };

  const nodeSubtitle = [
    clusterCode,
    data?.internal_ip,
    data?.hostname,
  ].filter(Boolean).join(' · ');

  return (
    <PageShell
      variant="default"
      title={nodeName || '节点详情'}
      subtitle={nodeSubtitle || clusterCode}
      icon={<Server className="h-5 w-5" />}
      loading={loading && !data}
      loadingLabel="加载节点详情..."
      actions={(
        <>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
            <ArrowLeft className="h-4 w-4 mr-1" />
            返回
          </Button>
          <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>
        </>
      )}
    >
      {data && (
        <div className="flex items-center gap-2 mb-4">
          <Badge className={data?.role === 'master' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>
            {data?.role || 'worker'}
          </Badge>
          <Badge className={data?.status === 'Ready' ? 'bg-emerald-500/20 dg-text-green' : 'bg-red-500/20 dg-text-red'}>
            {data?.status || 'Unknown'}
          </Badge>
        </div>
      )}

      {!loading && !data ? (
        <Card className="dg-card">
          <CardContent className="py-16 text-center dg-text-muted">
            <AlertTriangle className="h-8 w-8 mx-auto mb-2 opacity-50" />
            无法加载节点详情
          </CardContent>
        </Card>
      ) : data ? (
        <>
          {/* Row 1: System Info + Basic Info */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* System Info */}
            <Card className="dg-card">
              <CardContent className="p-4">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                  <Info className="h-4 w-4 dg-text-cyan" />系统信息
                </h2>
                <div className="space-y-2 text-xs">
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">容器运行时</span>
                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">Kubelet</span>
                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">操作系统</span>
                    <span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">内核版本</span>
                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">架构</span>
                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
                    <span className="dg-text-muted">创建时间</span>
                    <span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5">
                    <span className="dg-text-muted">Pod CIDR</span>
                    <span className="text-[var(--dg-text-secondary)] font-mono">{data.pod_cidr || '-'}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Resource Allocation */}
            <Card className="dg-card">
              <CardContent className="p-4">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                  <Activity className="h-4 w-4 dg-text-green" />资源分配率
                </h2>
                <div className="space-y-4 mt-4">
                  {/* CPU allocation (requested vs allocatable) */}
                  <ResourceBar
                    label="CPU 已分配"
                    used={`${(data.cpu_request_m / 1000).toFixed(2)} 核`}
                    total={`${data.cpu_allocatable} 核`}
                    unit=""
                    pct={data.cpu_alloc_pct}
                    color="dg-text-green"
                  />
                  {/* CPU real usage (from metrics) */}
                  {data.cpu_usage_m && (
                    <ResourceBar
                      label="CPU 实时使用"
                      used={data.cpu_usage_m}
                      total={`${data.cpu_capacity} 核`}
                      unit=""
                      pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100}
                      color="dg-text-blue"
                    />
                  )}
                  {/* Memory allocation */}
                  <ResourceBar
                    label="内存已分配"
                    used={`${data.mem_request_mi} Mi`}
                    total={`${data.mem_allocatable_mb} Mi`}
                    unit=""
                    pct={data.mem_alloc_pct}
                    color="dg-text-green"
                  />
                  {/* Memory real usage */}
                  {data.mem_usage_mi && (
                    <ResourceBar
                      label="内存实时使用"
                      used={data.mem_usage_mi}
                      total={`${data.mem_capacity_mb} Mi`}
                      unit=""
                      pct={(parseFloat(data.mem_usage_mi.replace('Mi', '').replace('Ki', '').replace('Gi', '')) / data.mem_capacity_mb) * 100}
                      color="dg-text-blue"
                    />
                  )}
                  {/* Pod allocation */}
                  <ResourceBar
                    label="Pod 数量"
                    used={`${data.pod_count}`}
                    total={`${data.pod_allocatable}`}
                    unit=""
                    pct={data.pod_alloc_pct}
                    color="dg-text-green"
                  />
                </div>
                {/* Capacity vs Allocatable raw */}
                <div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted">
                  <div className="flex justify-between">
                    <span>CPU 容量 / 可分配</span>
                    <span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span>
                  </div>
                  <div className="flex justify-between">
                    <span>内存容量 / 可分配</span>
                    <span className="font-mono">{data.mem_capacity_mb} / {data.mem_allocatable_mb} Mi</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Pod 容量 / 可分配</span>
                    <span className="font-mono">{data.pod_capacity} / {data.pod_allocatable}</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Row 2: Conditions + Taints */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Conditions */}
            <Card className="dg-card">
              <CardContent className="p-4">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件
                </h2>
                {(!data.conditions || data.conditions.length === 0) ? (
                  <p className="text-xs dg-text-muted py-4 text-center">无条件数据</p>
                ) : (
                  <div className="space-y-2">
                    {data.conditions.map(( cond: any, i: number) => (
                      <div key={i} className="flex items-start gap-2 text-xs py-1.5 border-b border-[var(--dg-border)]/30 last:border-0">
                        <Badge className={conditionColor(cond.type, cond.status)}>
                          {cond.status === 'True' ? <CheckCircle2 className="h-3 w-3 mr-1" /> : null}
                          {cond.type}
                        </Badge>
                        <div className="flex-1 min-w-0">
                          {cond.reason && <span className="dg-text-secondary block">{cond.reason}</span>}
                          {cond.message && <span className="dg-text-muted text-[11px] block truncate">{cond.message}</span>}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Taints */}
            <Card className="dg-card">
              <CardContent className="p-4">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                  <AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints)
                </h2>
                {(!data.taints || data.taints.length === 0) ? (
                  <p className="text-xs dg-text-muted py-4 text-center">无污点</p>
                ) : (
                  <div className="space-y-2">
                    {data.taints.map(( t: any, i: number) => (
                      <div key={i} className="flex items-center gap-2 text-xs">
                        <Badge className={taintColor(t.effect)}>{t.effect}</Badge>
                        <span className="text-[var(--dg-text-secondary)] font-mono">{t.key}</span>
                        {t.value && <span className="dg-text-muted">= {t.value}</span>}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Row 3: Labels */}
          {data.labels && data.labels.length > 0 && (
            <Card className="dg-card">
              <CardContent className="p-4">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                  <Network className="h-4 w-4 dg-text-secondary" />标签 ({data.labels.length})
                </h2>
                <div className="flex flex-wrap gap-1.5">
                  {data.labels.map(( l: any, i: number) => (
                    <div key={i} className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50 rounded px-2 py-0.5 text-[11px]">
                      <span className="dg-text-secondary">{l.key}</span>
                      <span className="dg-text-muted">:</span>
                      <span className="text-[var(--dg-text-secondary)]">{l.value}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* Row 4: Pods on this node */}
          <Card className="dg-card">
            <CardContent className="p-0">
              <div className="px-4 py-3 border-b border-[var(--dg-border)]">
                <h2 className="text-sm font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
                  <Container className="h-4 w-4 dg-text-cyan" />
                  节点上的 Pod
                  <Badge className="bg-[var(--dg-bg-active)]/50 text-[var(--dg-text-secondary)]">{data.pods?.length || 0}</Badge>
                </h2>
              </div>
              {(!data.pods || data.pods.length === 0) ? (
                <p className="text-xs dg-text-muted py-8 text-center">该节点上暂无 Pod</p>
              ) : (
                <Table>
                  <TableHeader>
                    <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
                      <TableHead className="dg-text-secondary">命名空间</TableHead>
                      <TableHead className="dg-text-secondary">名称</TableHead>
                      <TableHead className="dg-text-secondary">状态</TableHead>
                      <TableHead className="dg-text-secondary">IP</TableHead>
                      <TableHead className="dg-text-secondary">CPU 请求</TableHead>
                      <TableHead className="dg-text-secondary">内存请求</TableHead>
                      <TableHead className="dg-text-secondary">重启次数</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {data.pods.map(( p: any, i: number) => (
                      <TableRow key={i} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
                        <TableCell className="text-sm dg-text-secondary">{p.namespace}</TableCell>
                        <TableCell className="text-sm font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
                        <TableCell>
                          <Badge className={
                            p.status === 'Running' ? 'bg-emerald-500/20 dg-text-green' :
                            p.status === 'Pending' ? 'bg-amber-500/20 dg-text-yellow' :
                            'bg-red-500/20 dg-text-red'
                          }>{p.status}</Badge>
                        </TableCell>
                        <TableCell className="text-xs dg-text-secondary font-mono">{p.ip || '-'}</TableCell>
                        <TableCell className="text-xs dg-text-secondary">
                          {p.cpu_request_m > 0 ? `${p.cpu_request_m}m` : '-'}
                        </TableCell>
                        <TableCell className="text-xs dg-text-secondary">
                          {p.mem_request_mi > 0 ? `${p.mem_request_mi}Mi` : '-'}
                        </TableCell>
                        <TableCell className="text-xs">
                          {p.restart_count > 0 ? (
                            <span className="dg-text-yellow">{p.restart_count}</span>
                          ) : (
                            <span className="dg-text-muted">0</span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </CardContent>
          </Card>
        </>
      ) : null}
    </PageShell>
  );
}