OpenFlare/frontend/app/(main)/nodes/detail/page-client.tsx

'use client';

import Link from 'next/link';
import { useMemo } from 'react';
import { useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { ArrowLeft, Server } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import { ErrorInline } from '@/components/layout/error';
import { LoadingStateWithBorder } from '@/components/layout/loading';
import { NodeService } from '@/lib/services/openflare';

import { EdgeNodeDetail } from '../components/edge-node-detail';
import { RelayNodeDetail } from '../components/relay-node-detail';
import { TunnelNodeDetail } from '../components/tunnel-node-detail';
import { getErrorMessage } from '../components/node-utils';

const nodesQueryKey = ['openflare', 'nodes'];

export function NodeDetailPageClient() {
  const searchParams = useSearchParams();
  const nodeId = searchParams.get('id')?.trim() ?? '';

  const nodesQuery = useQuery({
    queryKey: nodesQueryKey,
    queryFn: () => NodeService.listNodes(),
    refetchInterval: 5000,
  });

  const node = useMemo(() => {
    if (!nodeId) return null;
    return (
      (nodesQuery.data ?? []).find((item) => String(item.id) === nodeId) ?? null
    );
  }, [nodeId, nodesQuery.data]);

  if (!nodeId) {
    return (
      <div className='py-6 px-1'>
        <EmptyStateWithBorder
          icon={Server}
          description='缺少节点 ID，请从节点列表进入详情页。'
        />
      </div>
    );
  }

  if (nodesQuery.isLoading) {
    return (
      <div className='py-6 px-1'>
        <LoadingStateWithBorder icon={Server} description='加载节点详情中...' />
      </div>
    );
  }

  if (nodesQuery.isError) {
    return (
      <div className='py-6 px-1'>
        <div className='p-8 border border-dashed rounded-lg'>
          <ErrorInline
            message={getErrorMessage(nodesQuery.error)}
            onRetry={() => void nodesQuery.refetch()}
            className='justify-center'
          />
        </div>
      </div>
    );
  }

  if (!node) {
    return (
      <div className='py-6 px-1 space-y-4'>
        <Button variant='ghost' size='sm' className='h-8 px-2' asChild>
          <Link href='/nodes'>
            <ArrowLeft className='size-4 mr-1' />
            返回节点列表
          </Link>
        </Button>
        <EmptyStateWithBorder
          icon={Server}
          description='节点不存在，可能已被删除或 ID 无效。'
        />
      </div>
    );
  }

  if (node.node_type === 'tunnel_relay') {
    return <RelayNodeDetail node={node} />;
  }

  if (node.node_type === 'tunnel_client') {
    return <TunnelNodeDetail node={node} />;
  }

  return <EdgeNodeDetail node={node} />;
}