import { motion } from 'motion/react';

import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime';
import type { CustomWorldStructuredAnchorEntry } from '../services/customWorldAgentGenerationProgress';

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;
  retryLabel?: string;
  interruptLabel?: string;
  settingTitle?: string;
  settingDescription?: string;
  progressTitle?: string;
  activeBadgeLabel?: string;
  pausedBadgeLabel?: string;
  idleBadgeLabel?: string;
  structuredEmptyText?: string;
}

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 buildFallbackRenderKey(
  value: string | null | undefined,
  fallback: string,
) {
  const normalizedValue = value?.trim();
  return normalizedValue ? normalizedValue : fallback;
}

export function CustomWorldGenerationView({
  settingText,
  anchorEntries = [],
  progress,
  isGenerating,
  error,
  onBack,
  onEditSetting,
  onRetry,
  onInterrupt,
  backLabel = '返回',
  settingActionLabel = '修改设定',
  retryLabel = '重新开始生成',
  interruptLabel = '中断世界生成',
  settingTitle = '玩家设定',
  settingDescription = '这段文本会直接驱动本轮世界框架、角色与场景生成。',
  progressTitle = '生成进度',
  activeBadgeLabel = '世界建设中',
  pausedBadgeLabel = '生成已暂停',
  idleBadgeLabel = '等待操作',
  structuredEmptyText = '正在整理当前设定结构，请稍后。',
}: CustomWorldGenerationViewProps) {
  const progressValue = getProgressPercentage(progress);
  const steps = progress?.steps ?? [];
  const hasStructuredAnchors = anchorEntries.length > 0;
  const estimatedWaitText =
    progress?.estimatedRemainingMs != null
      ? `预计还需 ${formatDuration(progress.estimatedRemainingMs)}`
      : '正在校准预计等待时间';
  const elapsedText =
    progress != null
      ? `已耗时 ${formatDuration(progress.elapsedMs)}`
      : '正在启动世界生成';

  return (
    <div
      className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
      style={{ WebkitOverflowScrolling: 'touch' }}
    >
      <div className="platform-sticky-fade sticky top-0 z-20 -mx-3 mb-4 flex items-center justify-between gap-3 px-3 pb-3 pt-1 backdrop-blur-sm sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-0 sm:pt-0 sm:backdrop-blur-none">
        <button
          type="button"
          onClick={onBack}
          disabled={isGenerating}
          className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-45' : ''}`}
        >
          {backLabel}
        </button>
        <div className="platform-pill platform-pill--cool px-3 py-1 text-[10px] tracking-[0.2em]">
          {isGenerating
            ? activeBadgeLabel
            : error
              ? pausedBadgeLabel
              : idleBadgeLabel}
        </div>
      </div>

      <div className="flex flex-none flex-col gap-4 xl:min-h-0 xl:flex-1">
        <section className="platform-surface platform-surface--soft flex flex-col px-4 py-3.5 xl:min-h-0 xl:flex-1">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div className="min-w-0">
              <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
                {progressTitle}
              </div>
              <div className="mt-1 text-xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-[2rem]">
                {progress?.phaseLabel ?? '正在启动世界生成'}
              </div>
              <div className="mt-2 max-w-[36rem] text-sm leading-6 text-zinc-300">
                {progress?.phaseDetail ?? '正在初始化世界生成链路与阶段监控。'}
              </div>
            </div>
            <div className="shrink-0 sm:text-right">
              <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                总进度
              </div>
              <div className="mt-1 text-3xl font-black text-[var(--platform-cool-text)] sm:text-4xl">
                {progressValue}%
              </div>
            </div>
          </div>

          <div className="platform-progress-track mt-4 h-4 overflow-hidden rounded-full">
            <motion.div
              className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_52%,#ffd2a6_100%)]"
              animate={{ width: `${progressValue}%` }}
              transition={{ duration: 0.35, ease: 'easeOut' }}
            />
          </div>

          <div className="mt-4 grid gap-2 sm:grid-cols-3">
            <div className="platform-subpanel rounded-2xl px-4 py-3">
              <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                当前批次
              </div>
              <div className="mt-1 text-sm font-semibold text-white">
                {progress?.batchLabel ?? '准备中'}
              </div>
            </div>
            <div className="platform-subpanel rounded-2xl px-4 py-3">
              <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                预计等待
              </div>
              <div className="mt-1 text-sm font-semibold text-white">
                {estimatedWaitText}
              </div>
            </div>
            <div className="platform-subpanel rounded-2xl px-4 py-3">
              <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                计时
              </div>
              <div className="mt-1 text-sm font-semibold text-white">
                {elapsedText}
              </div>
            </div>
          </div>

          <div className="mt-4 space-y-2 xl:min-h-0 xl:flex-1 xl:overflow-y-auto xl:pr-1">
            {steps.map((step, index) => (
              <div
                key={buildFallbackRenderKey(step.id, `progress-step-${index}`)}
                className={`rounded-2xl border px-4 py-3 transition-colors ${
                  step.status === 'completed'
                    ? 'border-emerald-400/16 bg-emerald-500/8'
                    : step.status === 'active'
                      ? 'border-sky-300/22 bg-sky-500/10'
                      : 'platform-subpanel'
                }`}
              >
                <div className="flex items-center justify-between gap-3">
                  <div className="text-sm font-semibold text-white">
                    {step.label}
                  </div>
                  <div className="text-xs text-zinc-300">
                    {step.completed}/{step.total}
                  </div>
                </div>
                <div className="mt-1 text-xs leading-6 text-zinc-400">
                  {step.detail}
                </div>
              </div>
            ))}
          </div>

          {error ? (
            <div className="mt-4 rounded-2xl border border-rose-400/18 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
              {error}
            </div>
          ) : null}

          <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-end">
            {!isGenerating ? (
              <>
                <button
                  type="button"
                  onClick={onEditSetting}
                  className="platform-button platform-button--ghost min-h-0 rounded-full px-4 py-2 text-sm"
                >
                  {settingActionLabel}
                </button>
                <button
                  type="button"
                  onClick={onRetry}
                  className="platform-button platform-button--primary w-full sm:w-auto"
                >
                  {retryLabel}
                </button>
              </>
            ) : onInterrupt ? (
              <button
                type="button"
                onClick={onInterrupt}
                className="rounded-full border border-rose-300/18 bg-rose-500/10 px-4 py-2 text-sm text-rose-100 transition-colors hover:text-white"
              >
                {interruptLabel}
              </button>
            ) : null}
          </div>
        </section>

        <section className="platform-surface platform-surface--soft overflow-hidden px-4 py-3.5">
          <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="min-w-0">
              <div className="text-[11px] font-bold tracking-[0.2em] text-[var(--platform-cool-text)]">
                {settingTitle}
              </div>
              <div className="mt-1 text-sm text-zinc-400">
                {settingDescription}
              </div>
            </div>
            <button
              type="button"
              onClick={onEditSetting}
              disabled={isGenerating}
              className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-40' : ''}`}
            >
              {settingActionLabel}
            </button>
          </div>
          {hasStructuredAnchors ? (
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              {anchorEntries.map((entry, index) => (
                <div
                  key={buildFallbackRenderKey(
                    entry.id,
                    `anchor-entry-${index}`,
                  )}
                  className="platform-subpanel rounded-2xl px-4 py-4"
                >
                  <div className="text-[11px] font-bold tracking-[0.18em] text-zinc-500">
                    {entry.label}
                  </div>
                  <div className="mt-2 whitespace-pre-line text-sm leading-7 text-zinc-100">
                    {entry.value}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="platform-subpanel whitespace-pre-line rounded-2xl px-4 py-4 text-sm leading-7 text-zinc-200 md:max-h-[16rem] md:overflow-y-auto">
              {settingText || structuredEmptyText}
            </div>
          )}
        </section>
      </div>
    </div>
  );
}