Genarrative/src/components/CustomWorldGenerationView.tsx

import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime';
import type { CustomWorldStructuredAnchorEntry } from '../services/customWorldAgentGenerationProgress';
import { PlatformActionButton } from './common/PlatformActionButton';
import { PlatformPillBadge } from './common/PlatformPillBadge';
import {
  GenerationCurrentStepCard,
  GenerationHeaderBackButton,
  GenerationPageBackdrop,
  GenerationProgressHero,
} from './GenerationProgressHero';

interface CustomWorldGenerationViewProps {
  settingText: string;
  anchorEntries?: CustomWorldStructuredAnchorEntry[];
  progress: CustomWorldGenerationProgress | null;
  isGenerating: boolean;
  error?: string | null;
  onBack: () => void;
  onEditSetting: () => void;
  onRetry: () => void;
  onInterrupt?: () => void;
  backLabel?: string;
  settingActionLabel?: string | null;
  retryLabel?: string;
  interruptLabel?: string;
  settingTitle?: string;
  settingDescription?: string | null;
  progressTitle?: string;
  activeBadgeLabel?: string;
  pausedBadgeLabel?: string;
  idleBadgeLabel?: string;
  structuredEmptyText?: string;
  hideBatchModule?: boolean;
  queueStatus?: ExternalGenerationQueueStatus | null;
}

export type ExternalGenerationQueueStatus = {
  currentStatus?: 'queued' | 'running' | 'completed' | 'failed' | null;
  currentProgress?: number | null;
  pendingCount?: number | null;
  runningCount?: number | null;
};

function formatDuration(ms: number) {
  const safeMs = Math.max(0, Math.round(ms));
  const totalSeconds = Math.ceil(safeMs / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  if (minutes <= 0) {
    return `${Math.max(1, seconds)} 秒`;
  }

  if (seconds === 0) {
    return `${minutes} 分钟`;
  }

  return `${minutes} 分 ${seconds} 秒`;
}

function getProgressPercentage(progress: CustomWorldGenerationProgress | null) {
  return Math.max(0, Math.min(100, progress?.overallProgress ?? 0));
}

function getStepProgressPercentage(step: {
  completed: number;
  total: number;
  status: string;
}) {
  if (step.status === 'completed') {
    return 100;
  }

  if (step.total <= 0) {
    return 0;
  }

  return Math.max(
    0,
    Math.min(100, Math.round((step.completed / step.total) * 100)),
  );
}

function getStepStatusLabel(step: { status: string }) {
  if (step.status === 'completed') {
    return '完成';
  }

  if (step.status === 'active') {
    return '进行中';
  }

  return '待处理';
}

function resolveQueueStatusLabel(
  status: ExternalGenerationQueueStatus['currentStatus'],
) {
  if (status === 'queued') {
    return '排队中';
  }

  if (status === 'running') {
    return '生成中';
  }

  if (status === 'failed') {
    return '生成失败';
  }

  if (status === 'completed') {
    return '已完成';
  }

  return null;
}

function hasQueueStatus(status: ExternalGenerationQueueStatus | null | undefined) {
  return Boolean(
    status &&
      (status.currentStatus ||
        typeof status.pendingCount === 'number' ||
        typeof status.runningCount === 'number'),
  );
}

function formatQueueCount(value: number | null | undefined) {
  return Math.max(0, Math.round(value ?? 0)).toString();
}

function formatQueueProgress(value: number | null | undefined) {
  if (typeof value !== 'number' || !Number.isFinite(value)) {
    return null;
  }

  return `${Math.max(0, Math.min(100, Math.round(value)))}%`;
}

function resolveCurrentGenerationStep(
  progress: CustomWorldGenerationProgress | null,
) {
  const steps = progress?.steps ?? [];
  return (
    steps.find((step) => step.status === 'active') ??
    steps[progress?.activeStepIndex ?? -1] ??
    steps.find((step) => step.status === 'pending') ??
    steps.at(-1) ??
    null
  );
}

export function CustomWorldGenerationView({
  progress,
  isGenerating,
  onBack,
  onRetry,
  onInterrupt,
  backLabel = '返回',
  retryLabel = '重新开始生成',
  interruptLabel = '中断世界生成',
  progressTitle = '生成进度',
  activeBadgeLabel = '世界建设中',
  idleBadgeLabel = '等待操作',
  hideBatchModule = false,
  queueStatus = null,
}: CustomWorldGenerationViewProps) {
  void hideBatchModule;
  const progressValue = getProgressPercentage(progress);
  const currentStep = resolveCurrentGenerationStep(progress);
  const currentStepProgress = currentStep
    ? getStepProgressPercentage(currentStep)
    : progressValue;
  const currentStepLabel =
    currentStep?.label ?? progress?.phaseLabel ?? '准备生成';
  const currentStepStatusLabel = currentStep
    ? getStepStatusLabel(currentStep)
    : isGenerating
      ? '进行中'
      : '待处理';
  const estimatedWaitText =
    progress?.estimatedRemainingMs != null
      ? formatDuration(progress.estimatedRemainingMs)
      : '校准中';
  const elapsedText =
    progress != null ? formatDuration(progress.elapsedMs) : '启动中';
  const queueStatusLabel = resolveQueueStatusLabel(
    queueStatus?.currentStatus ?? null,
  );
  const queueProgressText = formatQueueProgress(queueStatus?.currentProgress);
  const shouldShowQueueStatus = hasQueueStatus(queueStatus);

  return (
    <div className="relative isolate z-[1] -mx-3 -my-3 flex h-[calc(100%+1.5rem)] min-h-0 flex-col overflow-hidden bg-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-4 text-[#3d1f10] sm:mx-0 sm:my-0 sm:h-full sm:rounded-[2rem] sm:px-5 sm:pt-5">
      <GenerationPageBackdrop />
      <div className="relative z-30 mb-4 flex shrink-0 items-center justify-between gap-3 py-2 sm:mb-5">
        <GenerationHeaderBackButton label={backLabel} onClick={onBack} />
        <PlatformPillBadge
          tone="warning"
          size="xs"
          className="px-3 py-1.5 tracking-[0.08em] shadow-[0_12px_30px_rgba(214,77,31,0.08)] backdrop-blur-md sm:px-4 sm:text-xs"
        >
          {isGenerating ? activeBadgeLabel : idleBadgeLabel}
        </PlatformPillBadge>
      </div>

      <div
        className="relative z-10 flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain"
        style={{ WebkitOverflowScrolling: 'touch' }}
      >
        <section className="overflow-hidden px-0 pb-2 pt-0 sm:px-0">
          <GenerationProgressHero
            title={progressTitle}
            phaseLabel={progress?.phaseLabel ?? '正在启动世界生成'}
            progressValue={progressValue}
            estimatedWaitText={estimatedWaitText}
            elapsedText={elapsedText}
          />

          <div className="mt-5 px-0 sm:mt-[-0.15rem] sm:px-0">
            <GenerationCurrentStepCard
              label={currentStepLabel}
              statusLabel={currentStepStatusLabel}
              progressValue={currentStepProgress}
            />
          </div>

          {shouldShowQueueStatus ? (
            <div className="mt-3 flex flex-wrap items-center gap-2 rounded-[1.25rem] border border-white/70 bg-white/72 px-3 py-2 text-xs font-semibold text-[#6b3a1d] shadow-[0_14px_34px_rgba(121,70,33,0.10)] backdrop-blur-md sm:px-4">
              {queueStatusLabel ? (
                <span className="rounded-full bg-[#fff4dc] px-2.5 py-1 text-[#8a4c1e]">
                  {queueProgressText
                    ? `${queueStatusLabel} ${queueProgressText}`
                    : queueStatusLabel}
                </span>
              ) : null}
              <span>排队 {formatQueueCount(queueStatus?.pendingCount)}</span>
              <span className="h-1 w-1 rounded-full bg-[#d4a15d]" />
              <span>生成 {formatQueueCount(queueStatus?.runningCount)}</span>
            </div>
          ) : null}

          <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end">
            {!isGenerating ? (
              <PlatformActionButton
                onClick={onRetry}
                fullWidth
                className="sm:w-auto"
              >
                {retryLabel}
              </PlatformActionButton>
            ) : onInterrupt ? (
              <PlatformActionButton
                tone="danger"
                shape="pill"
                onClick={onInterrupt}
                className="transition-colors hover:text-[var(--platform-text-strong)]"
              >
                {interruptLabel}
              </PlatformActionButton>
            ) : null}
          </div>
        </section>
      </div>
    </div>
  );
}