Genarrative/apps/ai-game-creator-shell/src/components/AppUpdateNotice.tsx

import { Download, LoaderCircle, X } from 'lucide-react';
import { useEffect, useState } from 'react';

import { APP_VERSION } from '../app/appMetadata';
import {
  AGC_UPDATE_DOWNLOAD_PROGRESS_EVENT,
  type AppUpdateInfo,
  checkForAppUpdate,
  downloadAppUpdate,
  subscribeToAppUpdate,
} from '../services/appUpdate';
import {
  canSubscribeTauriEvents,
  subscribeTauriEvent,
} from '../services/tauriEventSubscription';

type DownloadProgress = {
  downloadedBytes: number;
  totalBytes?: number;
};

type DownloadState = 'idle' | 'downloading' | 'completed' | 'error';

function formatBytes(bytes: number) {
  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}

export function AppUpdateNotice() {
  const [update, setUpdate] = useState<AppUpdateInfo | null>(null);
  const [downloadState, setDownloadState] = useState<DownloadState>('idle');
  const [downloadProgress, setDownloadProgress] = useState<DownloadProgress>({
    downloadedBytes: 0,
  });
  const [downloadError, setDownloadError] = useState('');

  useEffect(() => {
    let mounted = true;
    const unsubscribe = subscribeToAppUpdate((result) => {
      if (mounted) setUpdate(result);
    });
    void checkForAppUpdate().then((result) => {
      if (mounted) setUpdate(result);
    });
    return () => {
      mounted = false;
      unsubscribe();
    };
  }, []);

  useEffect(() => {
    if (!canSubscribeTauriEvents() || !update) return;
    let disposed = false;
    let unlisten: (() => void) | undefined;
    void subscribeTauriEvent<DownloadProgress>(
      AGC_UPDATE_DOWNLOAD_PROGRESS_EVENT,
      (event) => {
        if (!disposed) setDownloadProgress(event.payload);
      },
    ).then((cleanup) => {
      if (disposed) cleanup();
      else unlisten = cleanup;
    });
    return () => {
      disposed = true;
      unlisten?.();
    };
  }, [update]);

  if (!update) return null;
  const currentUpdate = update;

  const isDownloading = downloadState === 'downloading';
  const totalBytes = downloadProgress.totalBytes ?? currentUpdate.size;
  const progress = totalBytes
    ? Math.min(
        100,
        Math.round((downloadProgress.downloadedBytes / totalBytes) * 100),
      )
    : null;

  async function handleDownload() {
    if (isDownloading) return;
    setDownloadError('');
    setDownloadProgress({ downloadedBytes: 0, totalBytes });
    setDownloadState('downloading');
    try {
      await downloadAppUpdate(currentUpdate.downloadUrl, currentUpdate);
      setDownloadState('completed');
    } catch (error) {
      setDownloadError(error instanceof Error ? error.message : String(error));
      setDownloadState('error');
    }
  }

  function dismiss() {
    if (isDownloading) return;
    setUpdate(null);
    setDownloadState('idle');
  }

  return (
    <>
      <aside
        className="app-update-notice"
        role="status"
        aria-label="发现新版本"
      >
        <div>
          <strong>发现新版本 {currentUpdate.version}</strong>
          <span>当前版本 {APP_VERSION}</span>
          {currentUpdate.releaseNotes ? (
            <p>{currentUpdate.releaseNotes}</p>
          ) : null}
        </div>
        <button
          type="button"
          onClick={() => void handleDownload()}
          disabled={isDownloading}
        >
          {isDownloading ? '正在下载…' : '下载更新'}
        </button>
        <button
          type="button"
          className="app-update-close"
          onClick={dismiss}
          disabled={isDownloading}
          aria-label="关闭更新提示"
          title="关闭"
        >
          <X size={18} aria-hidden="true" />
        </button>
      </aside>
      {downloadState !== 'idle' ? (
        <div
          className="app-update-overlay"
          role="dialog"
          aria-modal="true"
          aria-label="下载更新"
        >
          <div className="app-update-progress-dialog">
            <div className="app-update-progress-icon" aria-hidden="true">
              {isDownloading ? (
                <LoaderCircle className="is-spinning" size={24} />
              ) : (
                <Download size={24} />
              )}
            </div>
            <h2>
              {isDownloading
                ? `正在下载 ${currentUpdate.version}`
                : downloadState === 'completed'
                  ? '下载完成'
                  : '下载失败'}
            </h2>
            {isDownloading ? (
              <>
                <div
                  className="app-update-progress-track"
                  role="progressbar"
                  aria-valuemin={0}
                  aria-valuemax={100}
                  aria-valuenow={progress ?? undefined}
                >
                  <span
                    style={{
                      width: progress === null ? '35%' : `${progress}%`,
                    }}
                  />
                </div>
                <p>
                  {progress === null
                    ? '正在获取下载进度…'
                    : `${progress}% · ${formatBytes(downloadProgress.downloadedBytes)} / ${formatBytes(totalBytes ?? downloadProgress.downloadedBytes)}`}
                </p>
                <small>下载期间请勿关闭客户端或进行其他操作</small>
              </>
            ) : downloadState === 'completed' ? (
              <>
                <p>安装程序已启动，客户端将自动完成更新。</p>
                <button type="button" onClick={dismiss}>
                  知道了
                </button>
              </>
            ) : (
              <>
                <p>{downloadError || '下载更新失败，请稍后重试。'}</p>
                <div className="app-update-progress-actions">
                  <button type="button" onClick={() => void handleDownload()}>
                    重试
                  </button>
                  <button type="button" onClick={dismiss}>
                    关闭
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      ) : null}
    </>
  );
}