OpenFlare/frontend/app/(main)/nodes/components/nodes-table.tsx

'use client';

import Link from 'next/link';
import {Pencil, Trash2} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
import {formatDateTime} from '@/lib/utils';
import type {NodeItem} from '@/lib/services/openflare';

import {NodeStatusBadge} from './node-status-badge';
import {
  formatRelativeTime,
  getApplyLabel,
  getApplyTone,
  getNodeStatusLabel,
  getNodeStatusTone,
  getNodeTypeLabel,
  getOpenrestyStatusLabel,
  getOpenrestyStatusTone,
  getRelayStatusLabel,
  getRelayStatusTone,
  isMeaningfulTime,
  isWSConnectedLastSeen,
} from './node-utils';

export function NodesTable({
  nodes,
  deletingId,
  onEdit,
  onDelete,
}: {
  nodes: NodeItem[];
  deletingId: number | null;
  onEdit: (node: NodeItem) => void;
  onDelete: (node: NodeItem) => void;
}) {
  return (
    <div className="border border-dashed rounded-lg overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow className="border-dashed hover:bg-transparent">
            <TableHead className="py-2 h-8">节点</TableHead>
            <TableHead className="py-2 h-8">状态</TableHead>
            <TableHead className="py-2 h-8">Version</TableHead>
            <TableHead className="py-2 h-8">运行健康</TableHead>
            <TableHead className="py-2 h-8">当前版本</TableHead>
            <TableHead className="py-2 h-8">最近应用</TableHead>
            <TableHead className="py-2 h-8">最近心跳</TableHead>
            <TableHead className="py-2 h-8 text-right">操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {nodes.map((node) => (
            <TableRow key={node.id} className="border-dashed align-top">
              <TableCell className="py-3">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <p className="font-medium">{node.name}</p>
                    <NodeStatusBadge label={getNodeTypeLabel(node.node_type)} tone="info" />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    IP：{node.ip || '—'}
                    {node.ip_manual_override ? '（已锁定）' : ''}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    位置：{node.geo_name || '未配置地图点位'}
                  </p>
                </div>
              </TableCell>
              <TableCell className="py-3">
                <NodeStatusBadge
                  label={getNodeStatusLabel(node.status)}
                  tone={getNodeStatusTone(node.status)}
                />
              </TableCell>
              <TableCell className="py-3 text-muted-foreground">
                {node.version || 'unknown'}
              </TableCell>
              <TableCell className="py-3">
                {node.node_type === 'tunnel_relay' ? (
                  <NodeStatusBadge
                    label={getRelayStatusLabel(node.relay_status)}
                    tone={getRelayStatusTone(node.relay_status)}
                  />
                ) : node.node_type === 'tunnel_client' ? (
                  <NodeStatusBadge
                    label={node.status === 'online' ? '运行中' : '未知'}
                    tone={node.status === 'online' ? 'success' : 'warning'}
                  />
                ) : (
                  <NodeStatusBadge
                    label={getOpenrestyStatusLabel(node.openresty_status)}
                    tone={getOpenrestyStatusTone(node.openresty_status)}
                  />
                )}
              </TableCell>
              <TableCell className="py-3 text-muted-foreground">
                {node.current_version ||
                  (node.node_type === 'tunnel_relay' ? '实时配置' : '未应用')}
              </TableCell>
              <TableCell className="py-3">
                {node.node_type === 'tunnel_relay' ? (
                  <span className="text-sm text-muted-foreground">—</span>
                ) : (
                  <NodeStatusBadge
                    label={getApplyLabel(node.latest_apply_result)}
                    tone={getApplyTone(node.latest_apply_result)}
                  />
                )}
              </TableCell>
              <TableCell className="py-3 text-muted-foreground">
                {isWSConnectedLastSeen(node.last_seen_at)
                  ? 'WS 已连接'
                  : isMeaningfulTime(node.last_seen_at)
                    ? `${formatRelativeTime(node.last_seen_at)} · ${formatDateTime(node.last_seen_at)}`
                    : '暂无'}
              </TableCell>
              <TableCell className="py-3">
                <div className="flex flex-wrap justify-end gap-1">
                  <Button variant="outline" size="sm" className="h-7 text-xs" asChild>
                    <Link href={`/nodes/detail?id=${node.id}`}>详情</Link>
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-7 text-xs"
                    onClick={() => onEdit(node)}
                  >
                    <Pencil className="size-3 mr-1" />
                    编辑
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-7 text-xs text-destructive hover:text-destructive"
                    disabled={deletingId === node.id}
                    onClick={() => onDelete(node)}
                  >
                    <Trash2 className="size-3 mr-1" />
                    删除
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}