import {
  ArrowLeft,
  CheckCircle2,
  ImagePlus,
  Images,
  Loader2,
  Play,
  Plus,
  Sparkles,
  Trash2,
  X,
} from 'lucide-react';
import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import type { PuzzleAgentActionRequest } from '../../../packages/shared/src/contracts/puzzleAgentActions';
import type {
  PuzzleDraftLevel,
  PuzzleResultDraft,
} from '../../../packages/shared/src/contracts/puzzleAgentDraft';
import type { PuzzleAgentSessionSnapshot } from '../../../packages/shared/src/contracts/puzzleAgentSession';
import { updatePuzzleWork } from '../../services/puzzle-works';
import {
  puzzleAssetClient,
  type PuzzleHistoryAsset,
} from '../../services/puzzle-works/puzzleAssetClient';
import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenceImage';
import { useAuthUi } from '../auth/AuthUiContext';
import { ResolvedAssetImage } from '../ResolvedAssetImage';

type PuzzleResultViewProps = {
  session: PuzzleAgentSessionSnapshot;
  profileId?: string | null;
  isBusy?: boolean;
  error?: string | null;
  onBack: () => void;
  onExecuteAction: (payload: PuzzleAgentActionRequest) => void;
  onStartTestRun?: (draft: PuzzleResultDraft) => void;
};

type PuzzleAutoSaveState = 'idle' | 'saving' | 'saved' | 'error';
type PuzzleResultTab = 'levels' | 'work';

type DraftEditState = {
  workTitle: string;
  workDescription: string;
  themeTags: string[];
  levels: PuzzleDraftLevel[];
};

const PUZZLE_MIN_THEME_TAG_COUNT = 3;
const PUZZLE_MAX_THEME_TAG_COUNT = 6;
const PUZZLE_AUTOSAVE_DEBOUNCE_MS = 600;

function normalizeThemeTagInput(value: string) {
  return [
    ...new Set(
      value
        .split(/[\n,，、]/u)
        .map((entry) => entry.trim())
        .filter(Boolean),
    ),
  ];
}

function resolveLevelFormalImageSrc(level: PuzzleDraftLevel) {
  const selectedCandidate =
    level.candidates.find(
      (candidate) =>
        candidate.selected ||
        (level.selectedCandidateId
          ? candidate.candidateId === level.selectedCandidateId
          : false),
    ) ??
    level.candidates[level.candidates.length - 1] ??
    null;

  return (
    selectedCandidate?.imageSrc?.trim() || level.coverImageSrc?.trim() || ''
  );
}

function buildFallbackLevelFromDraft(draft: PuzzleResultDraft): PuzzleDraftLevel {
  return {
    levelId: 'puzzle-level-1',
    levelName: draft.levelName || '',
    pictureDescription: draft.summary,
    candidates: draft.candidates,
    selectedCandidateId: draft.selectedCandidateId,
    coverImageSrc: draft.coverImageSrc,
    coverAssetId: draft.coverAssetId,
    generationStatus: draft.generationStatus,
  };
}

function normalizeDraftLevels(draft: PuzzleResultDraft) {
  const sourceLevels =
    draft.levels && draft.levels.length > 0
      ? draft.levels
      : [buildFallbackLevelFromDraft(draft)];

  return sourceLevels.map((level, index) => ({
    ...level,
    levelId: level.levelId?.trim() || `puzzle-level-${index + 1}`,
    levelName: level.levelName?.trim() || '',
    pictureDescription: level.pictureDescription?.trim() || draft.summary,
    candidates: level.candidates ?? [],
    selectedCandidateId: level.selectedCandidateId ?? null,
    coverImageSrc: level.coverImageSrc ?? null,
    coverAssetId: level.coverAssetId ?? null,
    generationStatus: level.generationStatus || 'idle',
  }));
}

function syncDraftFromEditState(
  draft: PuzzleResultDraft,
  editState: DraftEditState,
): PuzzleResultDraft {
  const levels = editState.levels;
  const primaryLevel = levels[0] ?? buildFallbackLevelFromDraft(draft);
  return {
    ...draft,
    workTitle: editState.workTitle.trim() || draft.workTitle,
    workDescription: editState.workDescription.trim(),
    levelName: primaryLevel.levelName,
    summary: primaryLevel.pictureDescription,
    themeTags: editState.themeTags,
    candidates: primaryLevel.candidates,
    selectedCandidateId: primaryLevel.selectedCandidateId,
    coverImageSrc: primaryLevel.coverImageSrc,
    coverAssetId: primaryLevel.coverAssetId,
    generationStatus: primaryLevel.generationStatus,
    levels,
  };
}

function createDraftEditState(draft: PuzzleResultDraft): DraftEditState {
  return {
    workTitle: draft.workTitle || draft.levelName,
    workDescription: draft.workDescription || '',
    themeTags: normalizeThemeTagInput(draft.themeTags.join('，')),
    levels: normalizeDraftLevels(draft),
  };
}

function createBlankPuzzleLevel(existingLevels: PuzzleDraftLevel[]): PuzzleDraftLevel {
  const nextIndex = existingLevels.length + 1;
  return {
    levelId: `puzzle-level-${Date.now()}-${nextIndex}`,
    levelName: '',
    pictureDescription: '',
    candidates: [],
    selectedCandidateId: null,
    coverImageSrc: null,
    coverAssetId: null,
    generationStatus: 'idle',
  };
}

function formatHistoryAssetDate(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return value || '';
  }
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function buildPublishReady(
  session: PuzzleAgentSessionSnapshot,
  editState: DraftEditState,
) {
  const preservedBlockers =
    session.resultPreview?.blockers
      .filter(
        (entry) =>
          ![
            'MISSING_LEVEL_NAME',
            'INVALID_TAG_COUNT',
            'MISSING_COVER_IMAGE',
          ].includes(entry.code),
      )
      .map((entry) => entry.message) ?? [];
  const levels = editState.levels;
  const blockers = [
    ...(session.resultPreview ? [] : ['等待结果页草稿完成后再发布。']),
    ...preservedBlockers,
    ...(editState.workTitle.trim() ? [] : ['作品名称不能为空。']),
    ...(editState.workDescription.trim() ? [] : ['作品描述不能为空。']),
    ...(editState.themeTags.length >= PUZZLE_MIN_THEME_TAG_COUNT &&
    editState.themeTags.length <= PUZZLE_MAX_THEME_TAG_COUNT
      ? []
      : [
          `正式标签数量必须在 ${PUZZLE_MIN_THEME_TAG_COUNT} 到 ${PUZZLE_MAX_THEME_TAG_COUNT} 之间。`,
        ]),
    ...(levels.length > 0 ? [] : ['至少需要一个拼图关卡。']),
    ...levels.flatMap((level, index) => [
      ...(level.levelName.trim() ? [] : [`第${index + 1}关名称不能为空。`]),
      ...(resolveLevelFormalImageSrc(level) ? [] : [`第${index + 1}关缺少正式图。`]),
    ]),
  ];

  return {
    blockers: [...new Set(blockers.filter(Boolean))],
    publishReady:
      Boolean(session.resultPreview?.publishReady) &&
      Boolean(editState.workTitle.trim()) &&
      Boolean(editState.workDescription.trim()) &&
      editState.themeTags.length >= PUZZLE_MIN_THEME_TAG_COUNT &&
      editState.themeTags.length <= PUZZLE_MAX_THEME_TAG_COUNT &&
      levels.length > 0 &&
      levels.every(
        (level) => level.levelName.trim() && resolveLevelFormalImageSrc(level),
      ),
  };
}

function PuzzleResultHeader({
  autoSaveState,
  isBusy,
  onBack,
}: {
  autoSaveState: PuzzleAutoSaveState;
  isBusy: boolean;
  onBack: () => void;
}) {
  const autoSaveBadge =
    autoSaveState === 'saving' ? (
      <div className="platform-pill platform-pill--warm px-3 py-1 text-[11px]">
        保存中
      </div>
    ) : autoSaveState === 'saved' ? (
      <div className="platform-pill platform-pill--success px-3 py-1 text-[11px]">
        已自动保存
      </div>
    ) : autoSaveState === 'error' ? (
      <div className="platform-pill platform-pill--rose px-3 py-1 text-[11px]">
        保存失败
      </div>
    ) : null;

  return (
    <div className="mb-4 flex items-center justify-between gap-3">
      <button
        type="button"
        onClick={onBack}
        disabled={isBusy}
        className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isBusy ? 'opacity-45' : ''}`}
      >
        <span className="inline-flex items-center gap-1.5">
          <ArrowLeft className="h-3.5 w-3.5" />
          返回
        </span>
      </button>
      {autoSaveBadge}
    </div>
  );
}

function PuzzleResultTabs({
  activeTab,
  onChange,
}: {
  activeTab: PuzzleResultTab;
  onChange: (tab: PuzzleResultTab) => void;
}) {
  return (
    <div className="mb-3 grid grid-cols-2 gap-2 rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/62 p-1">
      {[
        { id: 'levels' as const, label: '拼图关卡' },
        { id: 'work' as const, label: '作品信息' },
      ].map((tab) => (
        <button
          key={tab.id}
          type="button"
          onClick={() => onChange(tab.id)}
          className={`min-h-10 rounded-[1rem] px-3 text-sm font-bold transition ${
            activeTab === tab.id
              ? 'bg-white text-[var(--platform-text-strong)] shadow-sm'
              : 'text-[var(--platform-text-base)] hover:bg-white/60'
          }`}
          aria-pressed={activeTab === tab.id}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}

function PuzzleThemeTagEditor({
  editState,
  isBusy,
  onChange,
}: {
  editState: DraftEditState;
  isBusy: boolean;
  onChange: (nextState: DraftEditState) => void;
}) {
  const [newTagText, setNewTagText] = useState('');
  const [isAddingTag, setIsAddingTag] = useState(false);

  const addTags = () => {
    const nextTags = normalizeThemeTagInput(newTagText);
    if (nextTags.length <= 0) {
      setIsAddingTag(false);
      setNewTagText('');
      return;
    }

    onChange({
      ...editState,
      themeTags: [...new Set([...editState.themeTags, ...nextTags])],
    });
    setNewTagText('');
    setIsAddingTag(false);
  };

  return (
    <section className="platform-subpanel rounded-[1.35rem] p-4 sm:p-5">
      <div className="flex items-center justify-between gap-3">
        <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
          作品标签
        </div>
        {!isAddingTag ? (
          <button
            type="button"
            disabled={isBusy}
            onClick={() => setIsAddingTag(true)}
            className="platform-icon-button h-9 w-9"
            aria-label="新增作品标签"
            title="新增作品标签"
          >
            <Plus className="h-4 w-4" />
          </button>
        ) : null}
      </div>

      <div className="mt-3 flex flex-wrap gap-2">
        {editState.themeTags.map((tag) => (
          <span
            key={tag}
            className="inline-flex items-center gap-1.5 rounded-full border border-amber-300/35 bg-amber-100/68 px-3 py-1.5 text-xs font-semibold text-amber-700"
          >
            {tag}
            <button
              type="button"
              disabled={isBusy}
              onClick={() => {
                onChange({
                  ...editState,
                  themeTags: editState.themeTags.filter(
                    (currentTag) => currentTag !== tag,
                  ),
                });
              }}
              className="rounded-full text-amber-800/70 transition hover:text-amber-950 disabled:opacity-45"
              aria-label={`删除标签 ${tag}`}
              title="删除标签"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          </span>
        ))}
        {editState.themeTags.length <= 0 ? (
          <span className="text-sm text-[var(--platform-text-soft)]">
            暂无标签
          </span>
        ) : null}
      </div>

      {isAddingTag ? (
        <div className="mt-3 flex flex-col gap-2 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/68 p-2 sm:flex-row">
          <input
            autoFocus
            value={newTagText}
            disabled={isBusy}
            onChange={(event) => setNewTagText(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === 'Enter') {
                event.preventDefault();
                addTags();
              }
              if (event.key === 'Escape') {
                setIsAddingTag(false);
                setNewTagText('');
              }
            }}
            className="min-h-10 flex-1 rounded-[0.8rem] border border-transparent bg-white/92 px-3 text-sm text-[var(--platform-text-strong)] outline-none"
            placeholder="输入新标签"
            aria-label="新题材标签"
          />
          <div className="flex gap-2">
            <button
              type="button"
              disabled={isBusy}
              onClick={addTags}
              className="platform-button platform-button--primary min-h-10 flex-1 px-4 py-2 text-sm sm:flex-none"
            >
              添加
            </button>
            <button
              type="button"
              disabled={isBusy}
              onClick={() => {
                setIsAddingTag(false);
                setNewTagText('');
              }}
              className="platform-button platform-button--ghost min-h-10 flex-1 px-4 py-2 text-sm sm:flex-none"
            >
              取消
            </button>
          </div>
        </div>
      ) : null}
    </section>
  );
}

function PuzzleHistoryAssetPickerDialog({
  isBusy,
  onClose,
  onSelect,
}: {
  isBusy: boolean;
  onClose: () => void;
  onSelect: (asset: PuzzleHistoryAsset) => void;
}) {
  const platformTheme = useAuthUi()?.platformTheme ?? 'light';
  const [assets, setAssets] = useState<PuzzleHistoryAsset[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    setIsLoading(true);
    setError(null);
    puzzleAssetClient
      .listHistoryAssets({ limit: 120 })
      .then((nextAssets) => {
        if (!cancelled) {
          setAssets(nextAssets);
        }
      })
      .catch((loadError) => {
        if (!cancelled) {
          setError(
            loadError instanceof Error
              ? loadError.message
              : '历史拼图素材读取失败。',
          );
        }
      })
      .finally(() => {
        if (!cancelled) {
          setIsLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, []);

  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(
    <div
      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[145] flex items-end justify-center p-3 backdrop-blur-sm sm:items-center sm:p-4`}
      onClick={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-label="选择历史拼图素材"
        className="platform-modal-shell platform-remap-surface flex max-h-[min(92vh,46rem)] w-full max-w-5xl flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.55)] sm:rounded-[1.75rem]"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
          <div className="text-base font-semibold text-[var(--platform-text-strong)]">
            选择历史拼图素材
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="关闭"
            className="platform-icon-button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
          {error ? (
            <div className="platform-banner platform-banner--danger text-sm leading-6">
              {error}
            </div>
          ) : null}

          {isLoading ? (
            <div className="flex min-h-[14rem] items-center justify-center rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52 px-6 text-center text-sm text-[var(--platform-text-base)]">
              读取中...
            </div>
          ) : null}

          {!isLoading && !error && assets.length <= 0 ? (
            <div className="flex min-h-[14rem] items-center justify-center rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52 px-6 text-center text-sm text-[var(--platform-text-base)]">
              暂无历史拼图素材
            </div>
          ) : null}

          {!isLoading && assets.length > 0 ? (
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
              {assets.map((asset) => (
                <button
                  key={asset.assetObjectId}
                  type="button"
                  disabled={isBusy}
                  onClick={() => onSelect(asset)}
                  className={`overflow-hidden rounded-[1.25rem] border bg-white/82 text-left transition hover:border-amber-300/70 hover:bg-white ${isBusy ? 'cursor-not-allowed opacity-55' : 'border-[var(--platform-subpanel-border)]'}`}
                >
                  <div className="aspect-square overflow-hidden bg-[var(--platform-subpanel-fill)]">
                    <ResolvedAssetImage
                      src={asset.imageSrc}
                      alt={asset.ownerLabel || '历史拼图素材'}
                      className="h-full w-full object-cover"
                    />
                  </div>
                  <div className="space-y-1 px-4 py-4">
                    <div className="truncate text-sm font-black text-[var(--platform-text-strong)]">
                      {asset.ownerLabel || '未记录账号'}
                    </div>
                    <div className="text-xs leading-5 text-[var(--platform-text-base)]">
                      {formatHistoryAssetDate(asset.createdAt)}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </div>,
    document.body,
  );
}

function PuzzleLevelDetailDialog({
  draft,
  imageRefreshKey,
  isBusy,
  level,
  onClose,
  onGenerate,
  onLevelChange,
  onStartTestRun,
}: {
  draft: PuzzleResultDraft;
  imageRefreshKey: string;
  isBusy: boolean;
  level: PuzzleDraftLevel;
  onClose: () => void;
  onGenerate: (
    levelId: string,
    promptText?: string | null,
    referenceImageSrc?: string | null,
  ) => void;
  onLevelChange: (nextLevel: PuzzleDraftLevel) => void;
  onStartTestRun?: (level: PuzzleDraftLevel) => void;
}) {
  const platformTheme = useAuthUi()?.platformTheme ?? 'light';
  const [referenceImageSrc, setReferenceImageSrc] = useState('');
  const [referenceImageLabel, setReferenceImageLabel] = useState('');
  const [referenceImageError, setReferenceImageError] = useState<string | null>(null);
  const [isHistoryPickerOpen, setIsHistoryPickerOpen] = useState(false);
  const formalImageSrc = resolveLevelFormalImageSrc(level);
  const hasFormalImage = Boolean(formalImageSrc);

  const handleReferenceImageChange = async (
    event: ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    event.currentTarget.value = '';
    if (!file) {
      return;
    }

    try {
      const dataUrl = await readPuzzleReferenceImageAsDataUrl(file);
      setReferenceImageSrc(dataUrl);
      setReferenceImageLabel(file.name.trim() || '本地参考图');
      setReferenceImageError(null);
    } catch (uploadError) {
      setReferenceImageError(
        uploadError instanceof Error
          ? uploadError.message
          : '参考图读取失败，请重试。',
      );
    }
  };

  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(
    <div
      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[138] flex items-end justify-center p-3 backdrop-blur-sm sm:items-center sm:p-4`}
      onClick={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-label="关卡详情"
        className="platform-modal-shell platform-remap-surface flex max-h-[min(94vh,50rem)] w-full max-w-2xl flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.55)] sm:rounded-[1.75rem]"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
          <div className="min-w-0 truncate text-base font-semibold text-[var(--platform-text-strong)]">
            {level.levelName || '关卡详情'}
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="关闭"
            className="platform-icon-button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
          <div className="space-y-4">
            <section className="platform-subpanel rounded-[1.35rem] p-4">
              <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                关卡名称
              </div>
              <input
                value={level.levelName}
                disabled={isBusy}
                onChange={(event) =>
                  onLevelChange({ ...level, levelName: event.target.value })
                }
                className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none"
                aria-label="关卡名称"
              />
            </section>

            {hasFormalImage ? (
              <section className="platform-subpanel rounded-[1.35rem] p-4">
                <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                  画面图
                </div>
                <div className="relative mt-3 aspect-square overflow-hidden rounded-[1.15rem] bg-[var(--platform-subpanel-fill)]">
                  <ResolvedAssetImage
                    src={formalImageSrc}
                    refreshKey={`${imageRefreshKey}:${level.levelId}`}
                    alt={level.levelName || draft.workTitle || '拼图关卡'}
                    className="h-full w-full object-cover"
                  />
                  <button
                    type="button"
                    disabled={isBusy}
                    onClick={() => setIsHistoryPickerOpen(true)}
                    className={`absolute bottom-3 right-3 inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--platform-subpanel-border)] bg-white/96 text-[var(--platform-text-strong)] shadow-sm transition hover:bg-[var(--platform-subpanel-fill)] ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
                    aria-label="从历史拼图素材库选择"
                    title="从历史拼图素材库选择"
                  >
                    <Images className="h-4 w-4" />
                  </button>
                </div>
              </section>
            ) : null}

            <section className="platform-subpanel rounded-[1.35rem] p-4">
              <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                画面描述
              </div>
              <div className="relative mt-3">
                <textarea
                  value={level.pictureDescription}
                  disabled={isBusy}
                  rows={9}
                  onChange={(event) =>
                    onLevelChange({
                      ...level,
                      pictureDescription: event.target.value,
                    })
                  }
                  className="w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 pb-16 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
                  aria-label="画面描述"
                />
                <label
                  className={`absolute bottom-3 right-3 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-amber-300/70 bg-white/96 text-amber-700 shadow-sm transition hover:bg-amber-50 ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
                  title={referenceImageSrc ? '更换参考图' : '添加参考图'}
                >
                  <ImagePlus className="h-4 w-4" />
                  <span className="sr-only">
                    {referenceImageSrc ? '更换参考图' : '添加参考图'}
                  </span>
                  <input
                    type="file"
                    accept="image/png,image/jpeg,image/webp"
                    disabled={isBusy}
                    onChange={(event) => {
                      void handleReferenceImageChange(event);
                    }}
                    className="hidden"
                  />
                </label>
              </div>

              {referenceImageSrc ? (
                <div className="mt-3 flex items-center gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-3">
                  <div className="h-14 w-14 overflow-hidden rounded-[0.9rem] bg-[var(--platform-subpanel-fill)]">
                    <img
                      src={referenceImageSrc}
                      alt="拼图参考图"
                      className="h-full w-full object-cover"
                    />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-semibold text-[var(--platform-text-strong)]">
                      {referenceImageLabel || '已选择参考图'}
                    </div>
                  </div>
                  <button
                    type="button"
                    disabled={isBusy}
                    onClick={() => {
                      setReferenceImageSrc('');
                      setReferenceImageLabel('');
                      setReferenceImageError(null);
                    }}
                    className="platform-icon-button h-9 w-9"
                    aria-label="移除参考图"
                    title="移除参考图"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
              ) : null}

              {referenceImageError ? (
                <div className="mt-2 text-xs leading-5 text-red-600">
                  {referenceImageError}
                </div>
              ) : null}
            </section>
          </div>
        </div>

        <div className="shrink-0 space-y-3 border-t border-[var(--platform-subpanel-border)] bg-[var(--platform-page-fill)] px-5 py-4 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)]">
          {onStartTestRun && hasFormalImage ? (
            <button
              type="button"
              disabled={isBusy}
              onClick={() => onStartTestRun(level)}
              className={`platform-button platform-button--secondary w-full ${isBusy ? 'opacity-55' : ''}`}
            >
              <span className="inline-flex items-center gap-2">
                <Play className="h-4 w-4" />
                关卡测试
              </span>
            </button>
          ) : null}

          <button
            type="button"
            disabled={isBusy}
            onClick={() => {
              onGenerate(
                level.levelId,
                level.pictureDescription.trim() || undefined,
                referenceImageSrc || undefined,
              );
            }}
            className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-amber-600 px-4 py-3 text-sm font-bold text-white disabled:opacity-45"
          >
            {isBusy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
            <Sparkles className="h-4 w-4" />
            {hasFormalImage ? '重新生成画面' : '生成画面'}
          </button>
        </div>

        {isHistoryPickerOpen ? (
          <PuzzleHistoryAssetPickerDialog
            isBusy={isBusy}
            onClose={() => setIsHistoryPickerOpen(false)}
            onSelect={(asset) => {
              setReferenceImageSrc(asset.imageSrc);
              setReferenceImageLabel(
                `历史素材 · ${asset.ownerLabel || '未记录账号'}`,
              );
              setReferenceImageError(null);
              setIsHistoryPickerOpen(false);
            }}
          />
        ) : null}
      </div>
    </div>,
    document.body,
  );
}

function PuzzlePublishDialog({
  blockers,
  editState,
  imageRefreshKey,
  isBusy,
  publishReady,
  onClose,
  onPublish,
}: {
  blockers: string[];
  editState: DraftEditState;
  imageRefreshKey: string;
  isBusy: boolean;
  publishReady: boolean;
  onClose: () => void;
  onPublish: () => void;
}) {
  const platformTheme = useAuthUi()?.platformTheme ?? 'light';
  const primaryLevel = editState.levels[0] ?? null;
  const formalImageSrc = primaryLevel ? resolveLevelFormalImageSrc(primaryLevel) : '';

  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(
    <div
      className={`platform-theme platform-theme--${platformTheme} platform-overlay fixed inset-0 z-[140] flex items-end justify-center p-3 backdrop-blur-sm sm:items-center sm:p-4`}
      onClick={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-label="发布拼图作品"
        className="platform-modal-shell platform-remap-surface flex max-h-[min(90vh,42rem)] w-full max-w-3xl flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.55)] sm:rounded-[1.75rem]"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-[var(--platform-subpanel-border)] px-5 py-4">
          <div className="text-base font-semibold text-[var(--platform-text-strong)]">
            发布拼图作品
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="关闭"
            className="platform-icon-button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
          <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_14rem]">
            <div className="space-y-3">
              <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                发布检查
              </div>
              {publishReady ? (
                <div className="platform-banner platform-banner--success text-sm leading-6">
                  当前作品已满足发布条件。
                </div>
              ) : (
                <div className="space-y-2">
                  {blockers.map((blocker, index) => (
                    <div
                      key={`puzzle-publish-blocker-${index}-${blocker}`}
                      className="platform-banner platform-banner--warning text-sm leading-6"
                    >
                      {blocker}
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="space-y-3">
              <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
                封面关卡
              </div>
              <div className="aspect-square overflow-hidden rounded-[1.15rem] bg-[var(--platform-subpanel-fill)]">
                {formalImageSrc ? (
                  <ResolvedAssetImage
                    src={formalImageSrc}
                    refreshKey={imageRefreshKey}
                    alt={primaryLevel?.levelName || editState.workTitle}
                    className="h-full w-full object-cover"
                  />
                ) : null}
              </div>
              <div className="text-sm font-black text-[var(--platform-text-strong)]">
                {editState.workTitle}
              </div>
            </div>
          </div>
        </div>

        <div className="flex flex-col-reverse gap-3 border-t border-[var(--platform-subpanel-border)] px-5 py-4 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onClose}
            className="platform-button platform-button--ghost"
          >
            取消
          </button>
          <button
            type="button"
            onClick={onPublish}
            disabled={!publishReady || isBusy}
            className={`platform-button platform-button--primary ${!publishReady || isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
          >
            {isBusy ? '发布中...' : '发布到广场'}
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}

function PuzzleLevelListTab({
  editState,
  imageRefreshKey,
  isBusy,
  onAddLevel,
  onDeleteLevel,
  onOpenLevel,
}: {
  editState: DraftEditState;
  imageRefreshKey: string;
  isBusy: boolean;
  onAddLevel: () => void;
  onDeleteLevel: (levelId: string) => void;
  onOpenLevel: (levelId: string) => void;
}) {
  return (
    <div className="space-y-3">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {editState.levels.map((level, index) => {
          const imageSrc = resolveLevelFormalImageSrc(level);
          const displayLevelName = level.levelName || `第${index + 1}关`;
          return (
            <div
              key={level.levelId}
              className="platform-subpanel overflow-hidden rounded-[1.35rem] p-0"
            >
              <button
                type="button"
                onClick={() => onOpenLevel(level.levelId)}
                className="block w-full text-left"
              >
                <div className="aspect-[4/3] overflow-hidden bg-[var(--platform-subpanel-fill)]">
                  {imageSrc ? (
                    <ResolvedAssetImage
                      src={imageSrc}
                      refreshKey={`${imageRefreshKey}:${level.levelId}`}
                      alt={displayLevelName}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <div className="flex h-full items-center justify-center text-sm text-[var(--platform-text-soft)]">
                      暂无正式图
                    </div>
                  )}
                </div>
                <div className="space-y-1 px-4 py-4">
                  <div className="text-[11px] font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
                    第{index + 1}关
                  </div>
                </div>
              </button>
              <div className="flex items-end gap-2 px-4 pb-4">
                <button
                  type="button"
                  onClick={() => onOpenLevel(level.levelId)}
                  className="min-w-0 flex-1 truncate text-left text-base font-black text-[var(--platform-text-strong)]"
                >
                  {displayLevelName}
                </button>
                <button
                  type="button"
                  disabled={isBusy || editState.levels.length <= 1}
                  onClick={() => onDeleteLevel(level.levelId)}
                  className="platform-icon-button h-9 w-9 shrink-0"
                  aria-label={`删除关卡 ${displayLevelName}`}
                  title="删除关卡"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <button
        type="button"
        disabled={isBusy}
        onClick={onAddLevel}
        className="platform-button platform-button--secondary w-full"
      >
        <span className="inline-flex items-center gap-2">
          <Plus className="h-4 w-4" />
          新增关卡
        </span>
        <span className="mt-1 block text-[11px] font-semibold leading-none text-[var(--platform-text-soft)]">
          获得更多积分激励
        </span>
      </button>
    </div>
  );
}

function PuzzleWorkInfoTab({
  editState,
  isBusy,
  onChange,
}: {
  editState: DraftEditState;
  isBusy: boolean;
  onChange: (nextState: DraftEditState) => void;
}) {
  return (
    <div className="space-y-3">
      <section className="platform-subpanel rounded-[1.35rem] p-4 sm:p-5">
        <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
          作品名称
        </div>
        <input
          value={editState.workTitle}
          disabled={isBusy}
          onChange={(event) =>
            onChange({ ...editState, workTitle: event.target.value })
          }
          className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/86 px-3 py-3 text-base font-semibold text-[var(--platform-text-strong)] outline-none"
          aria-label="作品名称"
        />
      </section>

      <section className="platform-subpanel rounded-[1.35rem] p-4 sm:p-5">
        <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
          作品描述
        </div>
        <textarea
          value={editState.workDescription}
          disabled={isBusy}
          rows={6}
          onChange={(event) =>
            onChange({ ...editState, workDescription: event.target.value })
          }
          className="mt-3 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
          aria-label="作品描述"
        />
      </section>

      <PuzzleThemeTagEditor
        editState={editState}
        isBusy={isBusy}
        onChange={onChange}
      />
    </div>
  );
}

function PuzzleResultActionBar({
  editState,
  imageRefreshKey,
  isBusy,
  publishReady,
  publishBlockers,
  onPublish,
}: {
  editState: DraftEditState;
  imageRefreshKey: string;
  isBusy: boolean;
  publishReady: boolean;
  publishBlockers: string[];
  onPublish: () => void;
}) {
  const [showPublishDialog, setShowPublishDialog] = useState(false);

  return (
    <div className="mt-4 flex items-center justify-end gap-3 pb-[max(0.25rem,env(safe-area-inset-bottom))]">
      <button
        type="button"
        onClick={() => setShowPublishDialog(true)}
        disabled={isBusy}
        className={`platform-button platform-button--primary ${isBusy ? 'opacity-55' : ''}`}
      >
        <span className="inline-flex items-center gap-2">
          <CheckCircle2 className="h-4 w-4" />
          发布
        </span>
      </button>

      {showPublishDialog ? (
        <PuzzlePublishDialog
          blockers={publishBlockers}
          editState={editState}
          imageRefreshKey={imageRefreshKey}
          isBusy={isBusy}
          publishReady={publishReady}
          onClose={() => setShowPublishDialog(false)}
          onPublish={onPublish}
        />
      ) : null}
    </div>
  );
}

export function PuzzleResultView({
  session,
  profileId = null,
  isBusy = false,
  error = null,
  onBack,
  onExecuteAction,
  onStartTestRun,
}: PuzzleResultViewProps) {
  const draft = session.draft;
  const [activeTab, setActiveTab] = useState<PuzzleResultTab>('levels');
  const [activeLevelId, setActiveLevelId] = useState<string | null>(null);
  const [editState, setEditState] = useState<DraftEditState | null>(
    draft ? createDraftEditState(draft) : null,
  );
  const [autoSaveState, setAutoSaveState] =
    useState<PuzzleAutoSaveState>('idle');
  const [autoSaveError, setAutoSaveError] = useState<string | null>(null);
  const savedEditStateRef = useRef<DraftEditState | null>(
    draft ? createDraftEditState(draft) : null,
  );

  useEffect(() => {
    if (!draft) {
      setEditState(null);
      setActiveLevelId(null);
      setAutoSaveState('idle');
      setAutoSaveError(null);
      return;
    }
    const nextState = createDraftEditState(draft);
    savedEditStateRef.current = nextState;
    setEditState(nextState);
    setActiveLevelId((currentLevelId) =>
      currentLevelId &&
      nextState.levels.some((level) => level.levelId === currentLevelId)
        ? currentLevelId
        : null,
    );
    setAutoSaveState('idle');
    setAutoSaveError(null);
  }, [draft]);

  const syncedDraft = useMemo(() => {
    if (!draft || !editState) {
      return null;
    }
    return syncDraftFromEditState(draft, editState);
  }, [draft, editState]);
  const primaryLevel = editState?.levels[0] ?? null;
  const primaryImageSrc = primaryLevel ? resolveLevelFormalImageSrc(primaryLevel) : '';
  const imageRefreshKey = `${session.updatedAt}:${primaryImageSrc}:${editState?.levels.length ?? 0}`;
  const activeLevel =
    editState?.levels.find((level) => level.levelId === activeLevelId) ?? null;

  useEffect(() => {
    if (!draft || !editState || !profileId) {
      return;
    }

    const normalizedState: DraftEditState = {
      ...editState,
      workTitle: editState.workTitle.trim(),
      workDescription: editState.workDescription.trim(),
      themeTags: normalizeThemeTagInput(editState.themeTags.join('，')),
      levels: editState.levels.map((level) => ({
        ...level,
        levelName: level.levelName.trim(),
        pictureDescription: level.pictureDescription.trim(),
      })),
    };
    const originalState = savedEditStateRef.current ?? createDraftEditState(draft);
    const changed =
      JSON.stringify(normalizedState) !== JSON.stringify(originalState);

    if (!changed || normalizedState.levels.length <= 0) {
      return;
    }

    setAutoSaveState('saving');
    setAutoSaveError(null);

    let cancelled = false;
    const timer = window.setTimeout(() => {
      const firstLevel = normalizedState.levels[0]!;
      void updatePuzzleWork(profileId, {
        workTitle: normalizedState.workTitle,
        workDescription: normalizedState.workDescription,
        levelName: firstLevel.levelName,
        summary: firstLevel.pictureDescription,
        themeTags: normalizedState.themeTags,
        coverImageSrc: resolveLevelFormalImageSrc(firstLevel) || null,
        coverAssetId: firstLevel.coverAssetId ?? null,
        levels: normalizedState.levels,
      })
        .then(() => {
          if (cancelled) {
            return;
          }
          // 自动保存成功后推进比较基线，避免新增后再删除回首版形态时漏同步后端。
          savedEditStateRef.current = normalizedState;
          setAutoSaveState('saved');
        })
        .catch((saveError) => {
          if (cancelled) {
            return;
          }
          setAutoSaveState('error');
          setAutoSaveError(
            saveError instanceof Error ? saveError.message : '自动保存失败。',
          );
        });
    }, PUZZLE_AUTOSAVE_DEBOUNCE_MS);

    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [draft, editState, profileId]);

  const publishState = useMemo(() => {
    if (!editState) {
      return {
        blockers: ['等待结果页草稿完成后再发布。'],
        publishReady: false,
      };
    }
    return buildPublishReady(session, editState);
  }, [editState, session]);

  if (!draft || !editState || !syncedDraft) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="platform-subpanel rounded-2xl px-5 py-4 text-sm text-[var(--platform-text-base)]">
          还没有可编辑的拼图草稿
        </div>
      </div>
    );
  }

  const updateLevel = (nextLevel: PuzzleDraftLevel) => {
    setEditState((currentState) =>
      currentState
        ? {
            ...currentState,
            levels: currentState.levels.map((level) =>
              level.levelId === nextLevel.levelId ? nextLevel : level,
            ),
          }
        : currentState,
    );
  };

  const buildLevelDraft = (level: PuzzleDraftLevel): PuzzleResultDraft => ({
    ...syncedDraft,
    levelName: level.levelName,
    summary: level.pictureDescription,
    candidates: level.candidates,
    selectedCandidateId: level.selectedCandidateId,
    coverImageSrc: resolveLevelFormalImageSrc(level) || level.coverImageSrc,
    coverAssetId: level.coverAssetId,
    generationStatus: level.generationStatus,
    levels: [level],
  });

  return (
    <div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full flex-col xl:max-w-[min(100%,98rem)] xl:px-1 2xl:max-w-[min(100%,112rem)]">
      <PuzzleResultHeader
        autoSaveState={autoSaveState}
        isBusy={isBusy}
        onBack={onBack}
      />

      <PuzzleResultTabs activeTab={activeTab} onChange={setActiveTab} />

      <div className="min-h-0 flex-1 overflow-y-auto pr-1">
        {activeTab === 'levels' ? (
          <PuzzleLevelListTab
            editState={editState}
            imageRefreshKey={imageRefreshKey}
            isBusy={isBusy}
            onAddLevel={() => {
              const nextLevel = createBlankPuzzleLevel(editState.levels);
              setEditState({
                ...editState,
                levels: [...editState.levels, nextLevel],
              });
              setActiveLevelId(nextLevel.levelId);
            }}
            onDeleteLevel={(levelId) => {
              if (editState.levels.length <= 1) {
                return;
              }
              const nextLevels = editState.levels.filter(
                (level) => level.levelId !== levelId,
              );
              setEditState({
                ...editState,
                levels: nextLevels,
              });
              if (activeLevelId === levelId) {
                setActiveLevelId(null);
              }
            }}
            onOpenLevel={setActiveLevelId}
          />
        ) : (
          <PuzzleWorkInfoTab
            editState={editState}
            isBusy={isBusy}
            onChange={setEditState}
          />
        )}
      </div>

      {error ? (
        <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
          {error}
        </div>
      ) : null}
      {!error && autoSaveError ? (
        <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
          {autoSaveError}
        </div>
      ) : null}

      <PuzzleResultActionBar
        editState={editState}
        imageRefreshKey={imageRefreshKey}
        isBusy={isBusy}
        publishReady={publishState.publishReady}
        publishBlockers={publishState.blockers}
        onPublish={() => {
          if (!publishState.publishReady) {
            return;
          }
          const firstLevel = editState.levels[0]!;
          onExecuteAction({
            action: 'publish_puzzle_work',
            workTitle: editState.workTitle.trim(),
            workDescription: editState.workDescription.trim(),
            levelName: firstLevel.levelName.trim(),
            summary: firstLevel.pictureDescription.trim(),
            themeTags: editState.themeTags,
            levelsJson: JSON.stringify(editState.levels),
          });
        }}
      />

      {activeLevel ? (
        <PuzzleLevelDetailDialog
          draft={syncedDraft}
          imageRefreshKey={imageRefreshKey}
          isBusy={isBusy}
          level={activeLevel}
          onClose={() => setActiveLevelId(null)}
          onGenerate={(levelId, promptText, referenceImageSrc) => {
            onExecuteAction({
              action: 'generate_puzzle_images',
              levelId,
              promptText,
              referenceImageSrc,
              candidateCount: 1,
              levelsJson: JSON.stringify(editState.levels),
            });
          }}
          onLevelChange={updateLevel}
          onStartTestRun={
            onStartTestRun
              ? (level) => onStartTestRun(buildLevelDraft(level))
              : undefined
          }
        />
      ) : null}
    </div>
  );
}

export default PuzzleResultView;