l-ui/frontend/src/pages/nodes/NodesPage.tsx

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
import {
  Button,
  Card,
  Col,
  ConfigProvider,
  Layout,
  Modal,
  Result,
  Row,
  Spin,
  Statistic,
  message,
} from 'antd';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  CloudServerOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons';

import { useTheme } from '@/hooks/useTheme';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useNodesQuery } from '@/api/queries/useNodesQuery';
import type { NodeRecord } from '@/api/queries/useNodesQuery';
import { useNodeMutations } from '@/api/queries/useNodeMutations';
import AppSidebar from '@/layouts/AppSidebar';
import NodeList from './NodeList';
import NodeFormModal from './NodeFormModal';
import { HttpUtil } from '@/utils';
import type { PanelUpdateInfo } from '../index/PanelUpdateModal';
import { setMessageInstance } from '@/utils/messageBus';

export default function NodesPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { isDark, isUltra, antdThemeConfig } = useTheme();
  const { isMobile } = useMediaQuery();
  const [modal, modalContextHolder] = Modal.useModal();
  const [messageApi, messageContextHolder] = message.useMessage();
  useEffect(() => {
    setMessageInstance(messageApi);
  }, [messageApi]);

  const { nodes, loading, fetched, fetchError, refetch, totals } = useNodesQuery();
  const { create, update, remove, setEnable, probe, updatePanels } = useNodeMutations();

  // Agent-line latest for the node list's update badge (version
  // decoupling): read from the same update-info endpoint the index
  // page uses; the server resolves it from the newest release's
  // agent-version.txt marker. Best-effort — an empty value just
  // leaves every badge dark.
  const [agentLatestVersion, setAgentLatestVersion] = useState('');
  useEffect(() => {
    HttpUtil.get<PanelUpdateInfo>('/panel/api/server/getPanelUpdateInfo').then((msg) => {
      if (msg?.success && msg.obj?.displayLatestAgentVersion) {
        setAgentLatestVersion(msg.obj.displayLatestAgentVersion);
      }
    });
  }, []);

  const [formOpen, setFormOpen] = useState(false);
  const [formMode, setFormMode] = useState<'add' | 'edit'>('add');
  const [formNode, setFormNode] = useState<NodeRecord | null>(null);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  const onAdd = useCallback(() => {
    setFormMode('add');
    setFormNode(null);
    setFormOpen(true);
  }, []);

  const onEdit = useCallback((node: NodeRecord) => {
    setFormMode('edit');
    setFormNode({ ...node });
    setFormOpen(true);
  }, []);

  const onSave = useCallback(
    async (payload: Partial<NodeRecord>) => {
      if (formMode === 'edit' && formNode?.id) {
        return update(formNode.id, payload);
      }
      return create(payload);
    },
    [formMode, formNode, update, create],
  );

  const onDelete = useCallback(
    (node: NodeRecord) => {
      modal.confirm({
        title: t('pages.nodes.deleteConfirmTitle', { name: node.name }),
        content: t('pages.nodes.deleteConfirmContent'),
        okText: t('delete'),
        okType: 'danger',
        cancelText: t('cancel'),
        onOk: async () => {
          const msg = await remove(node.id);
          if (msg?.success) messageApi.success(t('pages.nodes.toasts.deleted'));
        },
      });
    },
    [modal, t, remove, messageApi],
  );

  const onProbe = useCallback(
    async (node: NodeRecord) => {
      const msg = await probe(node.id);
      if (msg?.success && msg.obj) {
        if (msg.obj.status === 'online') {
          // Even if xray is in error/stop on the node we still reached its panel API.
          messageApi.success(t('pages.nodes.connectionOk', { ms: msg.obj.latencyMs }));
        } else {
          messageApi.error(msg.obj.error || t('pages.nodes.toasts.probeFailed'));
        }
      }
      // Refresh the list so the new xrayState / xrayError (if any) appears immediately in the row.
      refetch();
    },
    [probe, t, messageApi, refetch],
  );

  const onToggleEnable = useCallback(
    async (node: NodeRecord, next: boolean) => {
      await setEnable(node.id, next);
    },
    [setEnable],
  );

  const runUpdate = useCallback(
    async (ids: number[], dev: boolean) => {
      const msg = await updatePanels(ids, dev);
      if (!msg?.success) {
        messageApi.error(msg?.msg || t('somethingWentWrong'));
        return;
      }
      const results = msg.obj ?? [];
      const ok = results.filter((r) => r.ok).length;
      const failed = results.length - ok;
      if (failed === 0) {
        messageApi.success(t('pages.nodes.toasts.updateStarted'));
      } else {
        const firstError = results.find((r) => !r.ok)?.error ?? '';
        const base = t('pages.nodes.toasts.updateResult', { ok, failed });
        messageApi.warning(firstError ? `${base} — ${firstError}` : base);
      }
      setSelectedIds([]);
    },
    [updatePanels, messageApi, t],
  );

  // Nodes update through the master-recorded intent (item 20):
  // there is no channel to pick, so the confirm is a plain message.
  const onUpdateNode = useCallback(
    (node: NodeRecord) => {
      modal.confirm({
        title: t('pages.nodes.updateConfirmTitle', { count: 1 }),
        content: t('pages.nodes.updateAgentConfirmContent'),
        okText: t('update'),
        cancelText: t('cancel'),
        onOk: () => runUpdate([node.id], false),
      });
    },
    [modal, t, runUpdate],
  );

  const onUpdateSelected = useCallback(() => {
    const eligible = nodes
      .filter((n) => selectedIds.includes(n.id) && n.enable && n.status === 'online')
      .map((n) => n.id);
    if (eligible.length === 0) {
      messageApi.warning(t('pages.nodes.toasts.updateNoneEligible'));
      return;
    }
    modal.confirm({
      title: t('pages.nodes.updateConfirmTitle', { count: eligible.length }),
      content: t('pages.nodes.updateAgentConfirmContent'),
      okText: t('update'),
      cancelText: t('cancel'),
      onOk: () => runUpdate(eligible, false),
    });
  }, [modal, t, nodes, selectedIds, runUpdate, messageApi]);

  const pageClass = useMemo(() => {
    const classes = ['nodes-page'];
    if (isDark) classes.push('is-dark');
    if (isUltra) classes.push('is-ultra');
    return classes.join(' ');
  }, [isDark, isUltra]);

  return (
    <ConfigProvider theme={antdThemeConfig}>
      {messageContextHolder}
      {modalContextHolder}
      <Layout className={pageClass}>
        <AppSidebar />

        <Layout className="content-shell">
          <Layout.Content id="content-layout" className="content-area">
            <Spin spinning={!fetched} delay={200} description={t('loading')} size="large">
              {!fetched ? (
                <div className="loading-spacer" />
              ) : fetchError ? (
                <Result
                  status="error"
                  title={t('somethingWentWrong')}
                  subTitle={fetchError}
                  extra={
                    <Button type="primary" loading={loading} onClick={() => refetch()}>
                      {t('refresh')}
                    </Button>
                  }
                />
              ) : (
                <Row gutter={[isMobile ? 8 : 16, isMobile ? 8 : 12]}>
                  <Col span={24}>
                    <Card size="small" hoverable className="summary-card">
                      <Row gutter={[16, isMobile ? 16 : 12]}>
                        <Col xs={12} sm={12} md={6}>
                          <Statistic
                            title={t('pages.nodes.totalNodes')}
                            value={String(totals.total)}
                            prefix={<CloudServerOutlined />}
                          />
                        </Col>
                        <Col xs={12} sm={12} md={6}>
                          <Statistic
                            title={t('pages.nodes.onlineNodes')}
                            value={String(totals.online)}
                            prefix={
                              <CheckCircleOutlined style={{ color: 'var(--ant-color-success)' }} />
                            }
                          />
                        </Col>
                        <Col xs={12} sm={12} md={6}>
                          <Statistic
                            title={t('pages.nodes.offlineNodes')}
                            value={String(totals.offline)}
                            prefix={
                              <CloseCircleOutlined style={{ color: 'var(--ant-color-error)' }} />
                            }
                          />
                        </Col>
                        <Col xs={12} sm={12} md={6}>
                          <Statistic
                            title={t('pages.nodes.avgLatency')}
                            value={totals.avgLatency > 0 ? `${totals.avgLatency} ms` : '-'}
                            prefix={<ThunderboltOutlined />}
                          />
                        </Col>
                      </Row>
                    </Card>
                  </Col>

                  <Col span={24}>
                    <NodeList
                      nodes={nodes}
                      agentLatestVersion={agentLatestVersion}
                      loading={loading}
                      isMobile={isMobile}
                      selectedIds={selectedIds}
                      onSelectionChange={setSelectedIds}
                      onAdd={onAdd}
                      onProbeTasks={() => navigate('/settings#probe')}
                      onEdit={onEdit}
                      onDelete={onDelete}
                      onProbe={onProbe}
                      onToggleEnable={onToggleEnable}
                      onUpdateNode={onUpdateNode}
                      onUpdateSelected={onUpdateSelected}
                    />
                  </Col>
                </Row>
              )}
            </Spin>
          </Layout.Content>
        </Layout>

        <NodeFormModal
          open={formOpen}
          mode={formMode}
          node={formNode}
          save={onSave}
          onOpenChange={setFormOpen}
        />
      </Layout>
    </ConfigProvider>
  );
}