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

'use client';

import {useEffect, useMemo, useState} from 'react';
import {useQuery} from '@tanstack/react-query';
import {Copy} from 'lucide-react';
import {toast} from 'sonner';

import {Button} from '@/components/ui/button';
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {type NodeItem, StatusService} from '@/lib/services/openflare';

import {
  buildRelayDockerInstallCommand,
  buildRelayInstallCommand,
  buildTunnelDockerInstallCommand,
  buildTunnelInstallCommand,
  getServerUrl,
} from './node-utils';

type InstallVariant = 'relay' | 'tunnel';

const variantMeta: Record<
  InstallVariant,
  {
    title: string;
    description: string;
    tokenLabel: string;
    scriptLabel: string;
    dockerLabel: string;
  }
> = {
  relay: {
    title: '中继部署命令',
    description: '使用 Discovery Token 将 frps 中继节点接入控制端。',
    tokenLabel: 'Discovery Token',
    scriptLabel: '一键脚本部署 (Linux / macOS)',
    dockerLabel: 'Docker 容器部署',
  },
  tunnel: {
    title: '隧道部署命令',
    description: '使用 Tunnel Token 将 openflared 客户端接入控制端。',
    tokenLabel: 'Tunnel Token',
    scriptLabel: '一键脚本部署 (Linux / macOS)',
    dockerLabel: 'Docker 容器部署',
  },
};

export function InstallCommand({
  node,
  variant,
}: {
  node: NodeItem;
  variant: InstallVariant;
}) {
  const [serverUrl, setServerUrl] = useState('');
  const meta = variantMeta[variant];

  const statusQuery = useQuery({
    queryKey: ['openflare', 'public-status'],
    queryFn: () => StatusService.getPublicStatus(),
    staleTime: 5 * 60 * 1000,
  });

  const serverVersion = statusQuery.data?.version;

  useEffect(() => {
    if (typeof window !== 'undefined' && !serverUrl) {
      setServerUrl(window.location.origin);
    }
  }, [serverUrl]);

  const normalizedServerUrl = getServerUrl(serverUrl);
  const scriptCommand = useMemo(() => {
    if (!normalizedServerUrl || !node.access_token) {
      return '';
    }
    return variant === 'relay'
      ? buildRelayInstallCommand(normalizedServerUrl, node.access_token)
      : buildTunnelInstallCommand(normalizedServerUrl, node.access_token);
  }, [normalizedServerUrl, node.access_token, variant]);

  const dockerCommand = useMemo(() => {
    if (!normalizedServerUrl || !node.access_token) {
      return '';
    }
    return variant === 'relay'
      ? buildRelayDockerInstallCommand(normalizedServerUrl, node.access_token, serverVersion)
      : buildTunnelDockerInstallCommand(normalizedServerUrl, node.access_token, serverVersion);
  }, [normalizedServerUrl, node.access_token, variant, serverVersion]);

  const handleCopy = async (value: string, message: string) => {
    try {
      await navigator.clipboard.writeText(value);
      toast.success(message);
    } catch {
      toast.error('复制失败，请手动选择命令文本。');
    }
  };

  return (
    <Card className="border-dashed shadow-none">
      <CardHeader className="flex-row items-start justify-between space-y-0 gap-4">
        <div>
          <CardTitle className="text-base font-semibold">{meta.title}</CardTitle>
          <CardDescription>{meta.description}</CardDescription>
        </div>
        <div className="flex flex-wrap gap-2">
          {scriptCommand ? (
            <Button
              variant="secondary"
              size="sm"
              className="h-7 text-xs"
              onClick={() => void handleCopy(scriptCommand, '部署脚本命令已复制')}
            >
              <Copy className="size-3.5 mr-1" />
              复制脚本
            </Button>
          ) : null}
          {dockerCommand ? (
            <Button
              variant="secondary"
              size="sm"
              className="h-7 text-xs"
              onClick={() => void handleCopy(dockerCommand, 'Docker 部署命令已复制')}
            >
              <Copy className="size-3.5 mr-1" />
              复制 Docker
            </Button>
          ) : null}
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-4 md:grid-cols-2">
          <div className="rounded-lg border px-3 py-3">
            <p className="text-xs text-muted-foreground">Node ID</p>
            <p className="mt-1 text-sm break-all font-medium">{node.node_id}</p>
          </div>
          <div className="rounded-lg border px-3 py-3">
            <p className="text-xs text-muted-foreground">{meta.tokenLabel}</p>
            <p className="mt-1 text-sm break-all font-medium">{node.access_token || '暂无'}</p>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor={`server-url-${variant}`}>Server URL（控制端地址）</Label>
          <Input
            id={`server-url-${variant}`}
            value={serverUrl}
            onChange={(event) => setServerUrl(event.target.value)}
            placeholder="https://openflare.example.com"
          />
          <p className="text-xs text-muted-foreground">
            部署脚本和容器将使用此地址连接 OpenFlare 控制端。
          </p>
        </div>

        {!node.access_token ? (
          <p className="text-sm text-muted-foreground">节点尚未生成接入 Token，请稍后刷新。</p>
        ) : !normalizedServerUrl ? (
          <p className="text-sm text-muted-foreground">请填写有效的 Server URL 以生成部署命令。</p>
        ) : (
          <>
            <div className="space-y-2">
              <p className="text-sm font-medium">{meta.scriptLabel}</p>
              <pre className="overflow-x-auto rounded-lg border bg-muted/40 p-3 text-xs whitespace-pre-wrap">
                {scriptCommand}
              </pre>
            </div>
            <div className="space-y-2">
              <p className="text-sm font-medium">{meta.dockerLabel}</p>
              <pre className="overflow-x-auto rounded-lg border bg-muted/40 p-3 text-xs whitespace-pre-wrap">
                {dockerCommand}
              </pre>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}