OpenFlare/frontend/app/(main)/nodes/components/agent-update-dialog.tsx

'use client';

import {useState} from 'react';
import {useQuery} from '@tanstack/react-query';
import {ExternalLink, Loader2} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {formatDateTime} from '@/lib/utils';
import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel} from '@/lib/services/openflare';
import {NodeService} from '@/lib/services/openflare';

import {NodeStatusBadge} from './node-status-badge';
import {formatRelativeTime, getErrorMessage} from './node-utils';

export function AgentUpdateDialog({
  open,
  node,
  submitting,
  onClose,
  onConfirm,
}: {
  open: boolean;
  node: NodeItem;
  submitting: boolean;
  onClose: () => void;
  onConfirm: (release: NodeAgentReleaseInfo | null, channel: ReleaseChannel) => Promise<void>;
}) {
  const [channel, setChannel] = useState<ReleaseChannel>('stable');

  const releaseQuery = useQuery({
    queryKey: ['openflare', 'node-agent-release', node.id, channel],
    queryFn: () => NodeService.getAgentRelease(node.id, channel),
    enabled: open,
  });

  const release = releaseQuery.data ?? null;

  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogContent className="sm:max-w-xl">
        <DialogHeader>
          <DialogTitle>Agent 升级</DialogTitle>
          <DialogDescription>
            检查 GitHub 发布并向节点下发升级指令，节点将在下一次心跳后执行。
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="grid gap-3 sm:grid-cols-3">
            <div className="rounded-lg border p-3">
              <p className="text-xs text-muted-foreground">当前版本</p>
              <p className="mt-1 text-sm font-medium">{node.version || 'unknown'}</p>
            </div>
            <div className="rounded-lg border p-3">
              <p className="text-xs text-muted-foreground">检查通道</p>
              <p className="mt-1 text-sm font-medium">
                {channel === 'preview' ? '预览版' : '正式版'}
              </p>
            </div>
            <div className="rounded-lg border p-3">
              <p className="text-xs text-muted-foreground">更新状态</p>
              <div className="mt-1">
                <NodeStatusBadge
                  label={
                    node.update_requested
                      ? node.update_channel === 'preview'
                        ? '等待预览更新'
                        : '等待更新'
                      : '未下发'
                  }
                  tone={node.update_requested ? 'warning' : 'info'}
                />
              </div>
            </div>
          </div>

          {releaseQuery.isFetching ? (
            <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
              <Loader2 className="size-4 mr-2 animate-spin" />
              检查发布版本中...
            </div>
          ) : releaseQuery.isError ? (
            <p className="text-sm text-destructive">{getErrorMessage(releaseQuery.error)}</p>
          ) : release ? (
            <div className="space-y-3 rounded-lg border p-4">
              <div className="flex flex-wrap items-center gap-2">
                <NodeStatusBadge
                  label={release.has_update ? '发现可升级版本' : '当前已是最新版本'}
                  tone={release.has_update ? 'warning' : 'success'}
                />
                {release.prerelease ? (
                  <NodeStatusBadge label="Preview 发布" tone="warning" />
                ) : (
                  <NodeStatusBadge label="正式发布" tone="info" />
                )}
              </div>
              <div className="grid gap-3 sm:grid-cols-2 text-sm">
                <div>
                  <p className="text-xs text-muted-foreground">目标版本</p>
                  <p className="mt-1 font-medium">{release.tag_name || '未找到'}</p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground">发布时间</p>
                  <p className="mt-1">
                    {release.published_at
                      ? `${formatRelativeTime(release.published_at)} · ${formatDateTime(release.published_at)}`
                      : '—'}
                  </p>
                </div>
              </div>
              <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                {release.body || '暂无更新说明'}
              </p>
              {release.html_url ? (
                <a
                  href={release.html_url}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center text-sm text-primary hover:underline"
                >
                  查看发布详情
                  <ExternalLink className="size-3 ml-1" />
                </a>
              ) : null}
            </div>
          ) : null}
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            type="button"
            variant="outline"
            disabled={submitting || releaseQuery.isFetching}
            onClick={() => setChannel('stable')}
          >
            检查正式版
          </Button>
          <Button
            type="button"
            variant="outline"
            disabled={submitting || releaseQuery.isFetching}
            onClick={() => setChannel('preview')}
          >
            检查预览版
          </Button>
          <Button
            type="button"
            disabled={
              submitting ||
              releaseQuery.isFetching ||
              !release?.has_update ||
              node.update_requested
            }
            onClick={() => void onConfirm(release, channel)}
          >
            {submitting ? '下发中...' : channel === 'preview' ? '升级到预览版' : '升级到正式版'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}