import type { ChangeEvent } from 'react';
import { Children, type ReactNode, useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';

import { AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS } from '../data/affinityLevels';
import {
  buildCustomWorldPlayableCharacters,
  ROLE_TEMPLATE_CHARACTERS,
} from '../data/characterPresets';
import {
  CUSTOM_WORLD_SCENE_RELATIVE_POSITION_OPTIONS,
  getCustomWorldSceneRelativePositionLabel,
  normalizeCustomWorldLandmarks,
} from '../data/customWorldSceneGraph';
import {
  getAllCustomWorldSceneImages,
  resolveCustomWorldCampSceneImage,
  resolveCustomWorldLandmarkImage,
} from '../data/customWorldVisuals';
import {
  type CustomWorldSceneImageResult,
  generateCustomWorldSceneImage,
} from '../services/aiService';
import { resolveCustomWorldCampScene } from '../services/customWorldCamp';
import {
  AnimationState,
  CustomWorldLandmark,
  CustomWorldNpc,
  CustomWorldPlayableNpc,
  CustomWorldProfile,
  CustomWorldSceneConnection,
  type ItemRarity,
} from '../types';
import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../uiAssets';
import { CharacterAnimator } from './CharacterAnimator';
import { buildDefaultCustomWorldNpcVisual } from './customWorldNpcVisualDefaults';
import {
  CustomWorldNpcPortrait,
  CustomWorldNpcVisualEditor,
} from './CustomWorldNpcVisualEditor';
import { CustomWorldRoleAssetStudioModal } from './CustomWorldRoleAssetStudioModal';
import { PixelIcon } from './PixelIcon';

export type CustomWorldEditorTarget =
  | { kind: 'world' }
  | { kind: 'playable'; mode: 'create' }
  | { kind: 'playable'; mode: 'edit'; id: string }
  | { kind: 'story'; mode: 'create' }
  | { kind: 'story'; mode: 'edit'; id: string }
  | { kind: 'landmark'; mode: 'create' }
  | { kind: 'landmark'; mode: 'edit'; id: string };

interface CustomWorldEntityEditorModalProps {
  profile: CustomWorldProfile;
  target: CustomWorldEditorTarget | null;
  onClose: () => void;
  onProfileChange: (profile: CustomWorldProfile) => void;
}

const [
  BACKSTORY_UNLOCK_AFFINITY_EASED,
  BACKSTORY_UNLOCK_AFFINITY_FRIENDLY,
  BACKSTORY_UNLOCK_AFFINITY_TRUSTED,
  BACKSTORY_UNLOCK_AFFINITY_CLOSE,
] = AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS;

const ITEM_RARITY_OPTIONS: Array<{ value: ItemRarity; label: string }> = [
  { value: 'common', label: 'common' },
  { value: 'uncommon', label: 'uncommon' },
  { value: 'rare', label: 'rare' },
  { value: 'epic', label: 'epic' },
  { value: 'legendary', label: 'legendary' },
];

function slugify(value: string) {
  const normalized = value
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')
    .replace(/^-+|-+$/g, '');

  return normalized || 'entry';
}

function createEntryId(prefix: string, label: string, seed: number) {
  return `${prefix}-${slugify(label || `${prefix}-${seed}`)}-${seed.toString(36)}`;
}

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

function commaText(value: string[]) {
  return value.join(', ');
}

function clampInitialAffinity(value: string, fallback: number) {
  const parsed = Number.parseInt(value, 10);
  if (!Number.isFinite(parsed)) {
    return fallback;
  }
  return Math.max(-40, Math.min(90, Math.round(parsed)));
}

function parseOptionalNumber(value: string) {
  const trimmed = value.trim();
  if (!trimmed) return undefined;
  const parsed = Number.parseInt(trimmed, 10);
  return Number.isFinite(parsed) ? parsed : undefined;
}

function createRoleSkillDraft(seedLabel: string, index: number) {
  return {
    id: createEntryId('skill', seedLabel, Date.now() + index),
    name: `新技能${index + 1}`,
    summary: '',
    style: '起手压制',
  };
}

function createRoleInitialItemDraft(seedLabel: string, index: number) {
  return {
    id: createEntryId('item', seedLabel, Date.now() + index),
    name: `新物品${index + 1}`,
    category: '材料',
    quantity: 1,
    rarity: 'rare' as ItemRarity,
    description: '',
    tags: [],
  };
}

function createBackstoryChapterDraft(seedLabel: string, index: number) {
  return {
    id: createEntryId('backstory-chapter', seedLabel, Date.now() + index),
    title: `背景片段${index + 1}`,
    affinityRequired:
      AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS[
        Math.min(index, AFFINITY_BACKSTORY_CHAPTER_THRESHOLDS.length - 1)
      ] ?? BACKSTORY_UNLOCK_AFFINITY_CLOSE,
    teaser: '',
    content: '',
    contextSnippet: '',
  };
}

function syncLandmarksWithStoryNpcs(
  landmarks: CustomWorldLandmark[],
  storyNpcs: CustomWorldProfile['storyNpcs'],
) {
  return normalizeCustomWorldLandmarks({
    landmarks,
    storyNpcs,
  });
}

function useDraft<T>(value: T) {
  const [draft, setDraft] = useState(value);
  useEffect(() => setDraft(value), [value]);
  return [draft, setDraft] as const;
}

function readImageFileAsDataUrl(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result ?? ''));
    reader.onerror = () => reject(reader.error ?? new Error('读取图片失败。'));
    reader.readAsDataURL(file);
  });
}

function ModalShell({
  title,
  subtitle,
  onClose,
  children,
  panelClassName = 'sm:max-w-2xl',
  overlayClassName = 'z-[98]',
  bodyClassName = '',
  disableClose = false,
  usePixelFont = false,
}: {
  title: string;
  subtitle?: string;
  onClose: () => void;
  children: ReactNode;
  panelClassName?: string;
  overlayClassName?: string;
  bodyClassName?: string;
  disableClose?: boolean;
  usePixelFont?: boolean;
}) {
  return (
    <div
      className={`fixed inset-0 ${overlayClassName} flex items-end justify-center bg-black/78 p-0 backdrop-blur-sm sm:items-center sm:p-4`}
      onClick={disableClose ? undefined : onClose}
    >
      <div
        className={`pixel-nine-slice pixel-modal-shell flex h-[92vh] w-full flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.6)] sm:h-auto sm:max-h-[min(92vh,56rem)] ${usePixelFont ? 'fusion-pixel-app' : ''} ${panelClassName} sm:rounded-[1.75rem]`}
        style={getNineSliceStyle(UI_CHROME.modalPanel)}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-white/10 px-4 py-4 sm:px-5">
          <div className="min-w-0">
            <div className="truncate text-sm font-semibold text-white">
              {title}
            </div>
            {subtitle ? (
              <div className="mt-1 text-xs leading-6 text-zinc-400">
                {subtitle}
              </div>
            ) : null}
          </div>
          <button
            type="button"
            onClick={onClose}
            disabled={disableClose}
            className={`rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white ${disableClose ? 'cursor-not-allowed opacity-45' : ''}`}
          >
            <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
          </button>
        </div>
        <div
          className={`min-h-0 flex-1 overflow-y-auto p-4 sm:p-5 ${bodyClassName}`}
        >
          {children}
        </div>
      </div>
    </div>
  );
}

function _PortalModalShell(props: {
  title: string;
  subtitle?: string;
  onClose: () => void;
  children: ReactNode;
  panelClassName?: string;
  overlayClassName?: string;
  bodyClassName?: string;
  disableClose?: boolean;
  usePixelFont?: boolean;
}) {
  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(<ModalShell {...props} />, document.body);
}

function CompactDialogShell({
  title,
  onClose,
  children,
  overlayClassName = 'z-[140]',
  disableClose = false,
  usePixelFont = false,
}: {
  title: string;
  onClose: () => void;
  children: ReactNode;
  overlayClassName?: string;
  disableClose?: boolean;
  usePixelFont?: boolean;
}) {
  return (
    <div
      className={`fixed inset-0 ${overlayClassName} flex items-center justify-center bg-black/78 p-4 backdrop-blur-sm`}
      onClick={disableClose ? undefined : onClose}
    >
      <div
        className={`pixel-nine-slice pixel-modal-shell w-full max-w-md overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.6)] ${usePixelFont ? 'fusion-pixel-app' : ''}`}
        style={getNineSliceStyle(UI_CHROME.modalPanel)}
        onClick={(event) => event.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 border-b border-white/10 px-4 py-4">
          <div className="min-w-0 text-sm font-semibold text-white">
            {title}
          </div>
          <button
            type="button"
            onClick={onClose}
            disabled={disableClose}
            className={`rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white ${disableClose ? 'cursor-not-allowed opacity-45' : ''}`}
          >
            <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
          </button>
        </div>
        <div className="p-4">{children}</div>
      </div>
    </div>
  );
}

function PortalCompactDialogShell(props: {
  title: string;
  onClose: () => void;
  children: ReactNode;
  overlayClassName?: string;
  disableClose?: boolean;
  usePixelFont?: boolean;
}) {
  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(<CompactDialogShell {...props} />, document.body);
}

function Field({ label, children }: { label: string; children: ReactNode }) {
  const hasVisibleChildren = Children.toArray(children).some(
    (child) => !(typeof child === 'string' && child.trim().length === 0),
  );
  if (!hasVisibleChildren) return null;

  return (
    <label className="block">
      <div className="mb-2 text-[11px] font-bold tracking-[0.14em] text-zinc-300">
        {label}
      </div>
      {children}
    </label>
  );
}

function TextInput({
  value,
  onChange,
  type = 'text',
  placeholder,
}: {
  value: string | number;
  onChange: (value: string) => void;
  type?: 'text' | 'number';
  placeholder?: string;
}) {
  return (
    <input
      type={type}
      value={value}
      placeholder={placeholder}
      onChange={(event) => onChange(event.target.value)}
      className="w-full rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-500 focus:border-sky-300/35"
    />
  );
}

function TextArea({
  value,
  onChange,
  rows = 4,
  placeholder,
}: {
  value: string;
  onChange: (value: string) => void;
  rows?: number;
  placeholder?: string;
}) {
  return (
    <textarea
      rows={rows}
      value={value}
      placeholder={placeholder}
      onChange={(event) => onChange(event.target.value)}
      className="w-full rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-sm leading-7 text-zinc-100 outline-none transition-colors placeholder:text-zinc-500 focus:border-sky-300/35"
    />
  );
}

function SelectField({
  value,
  onChange,
  options,
}: {
  value: string;
  onChange: (value: string) => void;
  options: Array<{ value: string; label: string }>;
}) {
  return (
    <select
      value={value}
      onChange={(event) => onChange(event.target.value)}
      className="w-full rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-sm text-zinc-100 outline-none transition-colors focus:border-sky-300/35"
    >
      {options.map((option) => (
        <option key={`${option.value}-${option.label}`} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
}

function ImagePreview({
  src,
  alt,
  fallbackLabel,
  tone = 'square',
  children,
}: {
  src?: string;
  alt: string;
  fallbackLabel: string;
  tone?: 'square' | 'landscape';
  children?: ReactNode;
}) {
  return (
    <div
      className={`relative overflow-hidden rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top,rgba(56,189,248,0.16),transparent_48%),linear-gradient(180deg,rgba(19,24,39,0.95),rgba(8,10,17,0.92))] ${tone === 'landscape' ? 'aspect-[16/9]' : 'aspect-square'}`}
    >
      {src ? (
        <img
          src={src}
          alt={alt}
          loading="lazy"
          className="h-full w-full object-cover"
        />
      ) : (
        <div className="flex h-full w-full items-center justify-center px-4 text-center text-sm font-semibold tracking-[0.18em] text-zinc-400">
          {fallbackLabel}
        </div>
      )}
      {children ? (
        <div className="pointer-events-none absolute inset-0">{children}</div>
      ) : null}
    </div>
  );
}

function ImageField({
  label,
  value,
  onChange,
  fallbackLabel,
  tone = 'square',
  showInput = true,
  previewOverlay,
  footer,
}: {
  label: string;
  value?: string;
  onChange: (value: string) => void;
  fallbackLabel: string;
  tone?: 'square' | 'landscape';
  showInput?: boolean;
  previewOverlay?: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <div className="space-y-3">
      <div className="text-[11px] font-bold tracking-[0.14em] text-zinc-300">
        {label}
      </div>
      <ImagePreview
        src={value}
        alt={label}
        fallbackLabel={fallbackLabel}
        tone={tone}
      >
        {previewOverlay}
      </ImagePreview>
      {showInput ? (
        <TextInput
          value={value ?? ''}
          onChange={onChange}
          placeholder="支持填写项目内图片路径或外链地址"
        />
      ) : null}
      {footer}
    </div>
  );
}

function ActionButton({
  label,
  onClick,
  tone = 'default',
  disabled = false,
}: {
  label: string;
  onClick: () => void;
  tone?: 'default' | 'sky' | 'rose';
  disabled?: boolean;
}) {
  const toneClassName =
    tone === 'sky'
      ? 'border-sky-300/22 bg-sky-500/12 text-sky-50 hover:border-sky-200/40 hover:text-white'
      : tone === 'rose'
        ? 'border-rose-300/22 bg-rose-500/12 text-rose-50 hover:border-rose-200/40 hover:text-white'
      : 'border-white/12 bg-black/20 text-zinc-200 hover:border-white/22 hover:text-white';

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`rounded-full border px-4 py-2 text-sm font-semibold transition-colors ${toneClassName} ${disabled ? 'cursor-not-allowed opacity-45' : ''}`}
    >
      {label}
    </button>
  );
}

function SceneSparringPreview({ profile }: { profile: CustomWorldProfile }) {
  const sparringCharacters = useMemo(() => {
    const candidates = buildCustomWorldPlayableCharacters(profile);
    if (candidates.length >= 2) {
      return candidates.slice(0, 2);
    }

    if (candidates.length === 1) {
      const firstCandidate = candidates[0];
      if (!firstCandidate) {
        return ROLE_TEMPLATE_CHARACTERS.slice(0, 2);
      }
      const fallback =
        ROLE_TEMPLATE_CHARACTERS.find(
          (character) => character.id !== firstCandidate.id,
        ) ??
        ROLE_TEMPLATE_CHARACTERS[0] ??
        firstCandidate;
      return [firstCandidate, fallback];
    }

    return ROLE_TEMPLATE_CHARACTERS.slice(0, 2);
  }, [profile]);

  const [leftCharacter, rightCharacter] = sparringCharacters;
  if (!leftCharacter || !rightCharacter) {
    return null;
  }

  return (
    <>
      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,17,0.02)_0%,rgba(8,10,17,0.08)_42%,rgba(8,10,17,0.68)_100%)]" />
      <div className="absolute left-3 top-3 rounded-full border border-white/12 bg-black/46 px-3 py-1 text-[10px] font-bold tracking-[0.18em] text-zinc-100">
        对战预览
      </div>
      <div className="absolute left-1/2 top-[58%] h-16 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-300/30 blur-2xl animate-pulse" />
      <div className="absolute inset-x-0 bottom-0 h-20 bg-[linear-gradient(180deg,rgba(8,10,17,0)_0%,rgba(8,10,17,0.72)_100%)]" />
      <div className="absolute inset-x-0 bottom-0 flex items-end justify-between px-2 pb-1 sm:px-4 sm:pb-2">
        <div className="flex flex-col items-center gap-1">
          <div className="rounded-full border border-sky-300/20 bg-black/48 px-2.5 py-0.5 text-[10px] text-sky-50">
            {leftCharacter.name}
          </div>
          <div className="h-24 w-24 sm:h-28 sm:w-28">
            <CharacterAnimator
              state={AnimationState.ATTACK}
              character={leftCharacter}
              className="h-full w-full"
              imageClassName="object-bottom drop-shadow-[0_10px_18px_rgba(0,0,0,0.45)]"
            />
          </div>
        </div>

        <div className="mb-10 rounded-full border border-amber-300/24 bg-amber-400/12 px-3 py-1 text-[10px] font-semibold tracking-[0.18em] text-amber-50">
          试玩中
        </div>

        <div className="flex flex-col items-center gap-1">
          <div className="rounded-full border border-rose-300/20 bg-black/48 px-2.5 py-0.5 text-[10px] text-rose-50">
            {rightCharacter.name}
          </div>
          <div className="h-24 w-24 scale-x-[-1] sm:h-28 sm:w-28">
            <CharacterAnimator
              state={AnimationState.ATTACK}
              character={rightCharacter}
              className="h-full w-full"
              imageClassName="object-bottom drop-shadow-[0_10px_18px_rgba(0,0,0,0.45)]"
            />
          </div>
        </div>
      </div>
    </>
  );
}

function ScenePresetPickerModal({
  selectedSrc,
  presetImages,
  onSelect,
  onClose,
}: {
  selectedSrc?: string;
  presetImages: string[];
  onSelect: (value: string) => void;
  onClose: () => void;
}) {
  return (
    <ModalShell
      title="预设选择"
      subtitle={`共 ${presetImages.length} 张场景图片，点击任意图片即可应用到当前场景。`}
      onClose={onClose}
    >
      <div className="mb-4 rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-6 text-zinc-300">
        当前会同步更新场景图片，结果页和正式进入世界后的背景也会同步更新。
      </div>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        {presetImages.map((src, index) => {
          const isSelected = src === selectedSrc;
          return (
            <button
              key={src}
              type="button"
              onClick={() => {
                onSelect(src);
                onClose();
              }}
              className={`overflow-hidden rounded-2xl border text-left transition-colors ${
                isSelected
                  ? 'border-sky-300/55 bg-sky-500/10'
                  : 'border-white/10 bg-black/20 hover:border-white/25'
              }`}
            >
              <div className="relative aspect-[16/9] overflow-hidden">
                <img
                  src={src}
                  alt={`Scene preset ${index + 1}`}
                  loading="lazy"
                  className="h-full w-full object-cover"
                />
                <div className="absolute inset-x-0 bottom-0 bg-[linear-gradient(180deg,rgba(8,10,17,0)_0%,rgba(8,10,17,0.82)_100%)] px-3 py-2 text-[11px] text-zinc-100">
                  预设 #{(index + 1).toString().padStart(3, '0')}
                </div>
                {isSelected ? (
                  <div className="absolute right-2 top-2 rounded-full border border-sky-200/40 bg-black/55 px-2 py-0.5 text-[10px] font-semibold text-sky-50">
                    已选中
                  </div>
                ) : null}
              </div>
            </button>
          );
        })}
      </div>
    </ModalShell>
  );
}

const FIXED_SCENE_IMAGE_SIZE = '1280*720';

function SceneImageGenerationModal({
  profile,
  landmark,
  onApply,
  onClose,
}: {
  profile: CustomWorldProfile;
  landmark: CustomWorldLandmark;
  onApply: (result: CustomWorldSceneImageResult) => void;
  onClose: () => void;
}) {
  const [userPrompt, setUserPrompt] = useDraft(
    landmark.name.trim() || landmark.description.trim(),
  );
  const [referenceImageSrc, setReferenceImageSrc] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [latestResult, setLatestResult] =
    useState<CustomWorldSceneImageResult | null>(null);
  const [isExitConfirmOpen, setIsExitConfirmOpen] = useState(false);

  const originalImageSrc = useMemo(() => {
    const landmarkIndex = profile.landmarks.findIndex(
      (entry) => entry.id === landmark.id,
    );

    return resolveCustomWorldLandmarkImage(
      profile,
      landmark,
      landmarkIndex >= 0 ? landmarkIndex : profile.landmarks.length,
      profile.landmarks
        .filter((entry) => entry.id !== landmark.id)
        .map((entry) => entry.imageSrc)
        .filter((imageSrc): imageSrc is string => Boolean(imageSrc)),
    );
  }, [landmark, profile]);

  const previewImageSrc = latestResult?.imageSrc || originalImageSrc;

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

    try {
      const dataUrl = await readImageFileAsDataUrl(file);
      setReferenceImageSrc(dataUrl);
      setError(null);
    } catch (uploadError) {
      setError(
        uploadError instanceof Error
          ? uploadError.message
          : '参考图读取失败，请重试。',
      );
    }
  };

  const handleRequestClose = () => {
    if (isGenerating) {
      return;
    }
    if (latestResult) {
      setIsExitConfirmOpen(true);
      return;
    }
    onClose();
  };

  const handleGenerate = async () => {
    if (!userPrompt.trim()) {
      setError('请先描述想要生成的画面内容。');
      return;
    }

    setIsGenerating(true);
    setError(null);

    try {
      const result = await generateCustomWorldSceneImage({
        profile,
        landmark,
        userPrompt,
        size: FIXED_SCENE_IMAGE_SIZE,
        ...(referenceImageSrc ? { referenceImageSrc } : {}),
      });
      setLatestResult(result);
    } catch (generationError) {
      setError(
        generationError instanceof Error
          ? generationError.message
          : '场景图片生成失败，请稍后重试。',
      );
    } finally {
      setIsGenerating(false);
    }
  };

  const handleSave = () => {
    if (!latestResult || isGenerating) {
      return;
    }
    onApply(latestResult);
    onClose();
  };

  return (
    <>
      <ModalShell
        title={`智能生成：${landmark.name || '当前场景'}`}
        onClose={handleRequestClose}
        panelClassName="sm:max-w-5xl"
        overlayClassName="z-[99]"
        disableClose={isGenerating}
        usePixelFont
      >
        <div className="grid gap-5 lg:grid-cols-[minmax(0,1.1fr)_minmax(20rem,0.9fr)]">
          <div className="space-y-4">
            <Field label="画面内容描述">
              <TextArea
                value={userPrompt}
                onChange={(value) => setUserPrompt(value)}
                rows={8}
                placeholder="例如：雨夜的悬桥横跨黑色峡谷，桥下翻涌蓝绿色雾潮，远处有半坍塌塔楼与零星灯火。"
              />
            </Field>

            <Field label="自定义参考图（可选）">
              <div className="space-y-3">
                <label className="block rounded-2xl border border-dashed border-white/12 bg-black/20 px-4 py-4">
                  <input
                    type="file"
                    accept="image/png,image/jpeg,image/webp"
                    onChange={(event) => {
                      void handleReferenceImageChange(event);
                    }}
                    className="w-full text-xs text-zinc-300 file:mr-3 file:rounded-lg file:border-0 file:bg-sky-500 file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-black"
                  />
                </label>
                {referenceImageSrc ? (
                  <div className="flex items-center gap-3 rounded-2xl border border-white/8 bg-black/20 p-3">
                    <div className="h-16 w-24 overflow-hidden rounded-xl border border-white/10 bg-black/30">
                      <img
                        src={referenceImageSrc}
                        alt="自定义参考图"
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="min-w-0 flex-1 text-xs leading-5 text-zinc-400">
                      已载入自定义参考图
                    </div>
                    <ActionButton
                      label="移除"
                      onClick={() => setReferenceImageSrc('')}
                      disabled={isGenerating}
                    />
                  </div>
                ) : null}
              </div>
            </Field>
          </div>

          <div className="space-y-4">
            <div className="rounded-2xl border border-white/8 bg-black/18 p-3">
              <ImagePreview
                src={previewImageSrc}
                alt={landmark.name || '场景预览'}
                fallbackLabel={
                  landmark.name ? landmark.name.slice(0, 4) : '场景'
                }
                tone="landscape"
              />
            </div>

            {latestResult ? (
              <div className="rounded-2xl border border-emerald-300/18 bg-emerald-500/10 px-4 py-3 text-sm leading-6 text-emerald-50">
                已生成完毕，请保存后再退出页面
              </div>
            ) : null}

            {error ? (
              <div className="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="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
              <ActionButton
                label="保存"
                onClick={handleSave}
                disabled={!latestResult || isGenerating}
              />
              <ActionButton
                label={
                  isGenerating
                    ? '正在生成...'
                    : latestResult
                      ? '重新生成'
                      : '开始生成'
                }
                onClick={() => {
                  void handleGenerate();
                }}
                tone="sky"
                disabled={isGenerating}
              />
            </div>
          </div>
        </div>
      </ModalShell>

      {isExitConfirmOpen ? (
        <PortalCompactDialogShell
          title="确认退出"
          onClose={() => setIsExitConfirmOpen(false)}
          overlayClassName="z-[140]"
          usePixelFont
        >
          <div className="space-y-4">
            <div className="rounded-2xl border border-amber-300/16 bg-amber-500/10 px-4 py-4 text-sm leading-6 text-amber-50">
              当前生成画面还未保存，退出后将丢失这次生成结果，仍然退出吗？
            </div>
            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
              <ActionButton
                label="继续编辑"
                onClick={() => setIsExitConfirmOpen(false)}
              />
              <ActionButton
                label="仍然退出"
                onClick={() => {
                  setIsExitConfirmOpen(false);
                  onClose();
                }}
                tone="sky"
              />
            </div>
          </div>
        </PortalCompactDialogShell>
      ) : null}
    </>
  );
}

function SaveBar({
  onClose,
  onSave,
  extraAction,
}: {
  onClose: () => void;
  onSave: () => void;
  extraAction?: ReactNode;
}) {
  return (
    <div className="sticky bottom-0 z-10 -mx-4 border-t border-white/10 bg-[linear-gradient(180deg,rgba(8,10,17,0.2)_0%,rgba(8,10,17,0.96)_28%)] px-4 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-3 backdrop-blur sm:static sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:pb-0 sm:pt-2 sm:backdrop-blur-0">
      <div
        className={`flex flex-col gap-3 ${
          extraAction
            ? 'sm:flex-row sm:items-center sm:justify-between'
            : 'sm:flex-row sm:justify-end'
        }`}
      >
        {extraAction ? (
          <div className="flex flex-col gap-3 sm:flex-row">{extraAction}</div>
        ) : null}
        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onClose}
            className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-300 transition-colors hover:text-white"
          >
            取消
          </button>
          <button
            type="button"
            onClick={onSave}
            className="pixel-nine-slice pixel-pressable text-left"
            style={getNineSliceStyle(UI_CHROME.choiceButton, {
              paddingX: 16,
              paddingY: 10,
            })}
          >
            <div className="flex items-center justify-between gap-4">
              <span className="text-sm font-semibold text-white">保存修改</span>
              <span className="text-white/60">→</span>
            </div>
          </button>
        </div>
      </div>
    </div>
  );
}

function SectionPanel({
  title,
  subtitle,
  actions,
  children,
}: {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 sm:px-4 sm:py-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-300">
            {title}
          </div>
          {subtitle ? (
            <div className="mt-2 text-sm leading-6 text-zinc-400">
              {subtitle}
            </div>
          ) : null}
        </div>
        {actions}
      </div>
      <div className="mt-4 space-y-3">{children}</div>
    </div>
  );
}

function BackstoryRevealEditor({
  value,
  onChange,
}: {
  value: CustomWorldPlayableNpc['backstoryReveal'];
  onChange: (value: CustomWorldPlayableNpc['backstoryReveal']) => void;
}) {
  const updateChapter = (
    index: number,
    updater: (
      chapter: CustomWorldPlayableNpc['backstoryReveal']['chapters'][number],
    ) => CustomWorldPlayableNpc['backstoryReveal']['chapters'][number],
  ) => {
    onChange({
      ...value,
      chapters: value.chapters.map((chapter, chapterIndex) =>
        chapterIndex === index ? updater(chapter) : chapter,
      ),
    });
  };

  const addChapter = () => {
    onChange({
      ...value,
      chapters: [
        ...value.chapters,
        createBackstoryChapterDraft('custom-role', value.chapters.length),
      ],
    });
  };

  const removeChapter = (index: number) => {
    if (value.chapters.length <= 1) {
      window.alert('至少保留一个背景章节。');
      return;
    }

    onChange({
      ...value,
      chapters: value.chapters.filter(
        (_chapter, chapterIndex) => chapterIndex !== index,
      ),
    });
  };

  return (
    <SectionPanel
      title="背景公开与章节"
      subtitle="这里直接决定结果页、关系推进和后续剧情提示词看到的背景摘要与章节线索。"
      actions={
        <ActionButton label="新增章节" onClick={addChapter} tone="sky" />
      }
    >
      <Field label="公开背景摘要">
        <TextArea
          value={value.publicSummary}
          onChange={(nextValue) =>
            onChange({
              ...value,
              publicSummary: nextValue,
            })
          }
          rows={3}
        />
      </Field>
      {value.chapters.map((chapter, index) => (
        <div
          key={`${chapter.id}-${index}`}
          className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3"
        >
          <div className="mb-3 flex items-center justify-between gap-3">
            <div className="text-sm font-semibold text-white">
              背景章节 #{index + 1}
            </div>
            <ActionButton
              label="删除章节"
              onClick={() => removeChapter(index)}
            />
          </div>
          <Field label="章节标题">
            <TextInput
              value={chapter.title}
              onChange={(nextValue) =>
                updateChapter(index, (current) => ({
                  ...current,
                  title: nextValue,
                }))
              }
            />
          </Field>
          <Field label="解锁好感">
            <TextInput
              type="number"
              value={chapter.affinityRequired}
              onChange={(nextValue) =>
                updateChapter(index, (current) => ({
                  ...current,
                  affinityRequired: clampInitialAffinity(
                    nextValue,
                    current.affinityRequired,
                  ),
                }))
              }
            />
          </Field>
          <Field label="章节提示">
            <TextArea
              value={chapter.teaser}
              onChange={(nextValue) =>
                updateChapter(index, (current) => ({
                  ...current,
                  teaser: nextValue,
                }))
              }
              rows={2}
            />
          </Field>
          <Field label="章节内容">
            <TextArea
              value={chapter.content}
              onChange={(nextValue) =>
                updateChapter(index, (current) => ({
                  ...current,
                  content: nextValue,
                }))
              }
              rows={3}
            />
          </Field>
          <Field label="剧情引用摘要">
            <TextArea
              value={chapter.contextSnippet}
              onChange={(nextValue) =>
                updateChapter(index, (current) => ({
                  ...current,
                  contextSnippet: nextValue,
                }))
              }
              rows={2}
            />
          </Field>
        </div>
      ))}
    </SectionPanel>
  );
}

function SkillListEditor({
  value,
  onChange,
  labelSeed,
}: {
  value: CustomWorldPlayableNpc['skills'];
  onChange: (value: CustomWorldPlayableNpc['skills']) => void;
  labelSeed: string;
}) {
  const updateSkill = (
    index: number,
    updater: (
      skill: CustomWorldPlayableNpc['skills'][number],
    ) => CustomWorldPlayableNpc['skills'][number],
  ) => {
    onChange(
      value.map((skill, skillIndex) =>
        skillIndex === index ? updater(skill) : skill,
      ),
    );
  };

  return (
    <SectionPanel
      title="技能"
      subtitle="技能名、摘要和风格都会进入结果页与运行时 NPC 档案。"
      actions={
        <ActionButton
          label="新增技能"
          onClick={() =>
            onChange([...value, createRoleSkillDraft(labelSeed, value.length)])
          }
          tone="sky"
        />
      }
    >
      {value.map((skill, index) => (
        <div
          key={`${skill.id}-${index}`}
          className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3"
        >
          <div className="mb-3 flex items-center justify-between gap-3">
            <div className="text-sm font-semibold text-white">
              技能 #{index + 1}
            </div>
            <ActionButton
              label="删除技能"
              onClick={() =>
                onChange(
                  value.filter((_skill, skillIndex) => skillIndex !== index),
                )
              }
            />
          </div>
          <Field label="技能名称">
            <TextInput
              value={skill.name}
              onChange={(nextValue) =>
                updateSkill(index, (current) => ({
                  ...current,
                  name: nextValue,
                }))
              }
            />
          </Field>
          <Field label="技能风格">
            <TextInput
              value={skill.style}
              onChange={(nextValue) =>
                updateSkill(index, (current) => ({
                  ...current,
                  style: nextValue,
                }))
              }
            />
          </Field>
          <Field label="技能摘要">
            <TextArea
              value={skill.summary}
              onChange={(nextValue) =>
                updateSkill(index, (current) => ({
                  ...current,
                  summary: nextValue,
                }))
              }
              rows={3}
            />
          </Field>
        </div>
      ))}
    </SectionPanel>
  );
}

function InitialItemsEditor({
  value,
  onChange,
  labelSeed,
}: {
  value: CustomWorldPlayableNpc['initialItems'];
  onChange: (value: CustomWorldPlayableNpc['initialItems']) => void;
  labelSeed: string;
}) {
  const updateItem = (
    index: number,
    updater: (
      item: CustomWorldPlayableNpc['initialItems'][number],
    ) => CustomWorldPlayableNpc['initialItems'][number],
  ) => {
    onChange(
      value.map((item, itemIndex) =>
        itemIndex === index ? updater(item) : item,
      ),
    );
  };

  return (
    <SectionPanel
      title="初始物品"
      subtitle="这里的内容会影响结果页展示，也会作为后续运行时参考档案。"
      actions={
        <ActionButton
          label="新增物品"
          onClick={() =>
            onChange([
              ...value,
              createRoleInitialItemDraft(labelSeed, value.length),
            ])
          }
          tone="sky"
        />
      }
    >
      {value.map((item, index) => (
        <div
          key={`${item.id}-${index}`}
          className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3"
        >
          <div className="mb-3 flex items-center justify-between gap-3">
            <div className="text-sm font-semibold text-white">
              物品 #{index + 1}
            </div>
            <ActionButton
              label="删除物品"
              onClick={() =>
                onChange(
                  value.filter((_item, itemIndex) => itemIndex !== index),
                )
              }
            />
          </div>
          <Field label="名称">
            <TextInput
              value={item.name}
              onChange={(nextValue) =>
                updateItem(index, (current) => ({
                  ...current,
                  name: nextValue,
                }))
              }
            />
          </Field>
          <div className="grid gap-3 sm:grid-cols-2">
            <Field label="分类">
              <TextInput
                value={item.category}
                onChange={(nextValue) =>
                  updateItem(index, (current) => ({
                    ...current,
                    category: nextValue,
                  }))
                }
              />
            </Field>
            <Field label="稀有度">
              <SelectField
                value={item.rarity}
                onChange={(nextValue) =>
                  updateItem(index, (current) => ({
                    ...current,
                    rarity: nextValue as ItemRarity,
                  }))
                }
                options={ITEM_RARITY_OPTIONS}
              />
            </Field>
          </div>
          <Field label="数量">
            <TextInput
              type="number"
              value={item.quantity}
              onChange={(nextValue) =>
                updateItem(index, (current) => ({
                  ...current,
                  quantity: Math.max(
                    1,
                    parseOptionalNumber(nextValue) ?? current.quantity,
                  ),
                }))
              }
            />
          </Field>
          <Field label="描述">
            <TextArea
              value={item.description}
              onChange={(nextValue) =>
                updateItem(index, (current) => ({
                  ...current,
                  description: nextValue,
                }))
              }
              rows={3}
            />
          </Field>
          <Field label="标签">
            <TextArea
              value={commaText(item.tags)}
              onChange={(nextValue) =>
                updateItem(index, (current) => ({
                  ...current,
                  tags: parseCommaText(nextValue),
                }))
              }
              rows={2}
            />
          </Field>
        </div>
      ))}
    </SectionPanel>
  );
}

function StoryNpcVisualEditorModal({
  npc,
  visual,
  onChange,
  onOpenAiStudio,
  onClose,
}: {
  npc: CustomWorldNpc;
  visual: NonNullable<CustomWorldNpc['visual']>;
  onChange: (visual: NonNullable<CustomWorldNpc['visual']>) => void;
  onOpenAiStudio?: () => void;
  onClose: () => void;
}) {
  return (
    <ModalShell
      title={`修改形象：${npc.name}`}
      subtitle="在独立面板中组合中世纪奇幻角色形象，左侧预览会保持吸顶。"
      onClose={onClose}
      panelClassName="sm:max-w-6xl"
      overlayClassName="z-[99]"
    >
      <CustomWorldNpcVisualEditor
        npc={{
          id: npc.id,
          name: npc.name,
          role: npc.role,
          description: npc.description,
        }}
        value={visual}
        onChange={onChange}
        onAiGenerate={() => {
          onClose();
          onOpenAiStudio?.();
        }}
      />
    </ModalShell>
  );
}

function WorldEditor({
  profile,
  onSave,
  onClose,
}: {
  profile: CustomWorldProfile;
  onSave: (profile: CustomWorldProfile) => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useDraft(profile);
  const [isCampPresetPickerOpen, setIsCampPresetPickerOpen] = useState(false);
  const [isCampAiGenerateOpen, setIsCampAiGenerateOpen] = useState(false);
  const presetImages = useMemo(() => getAllCustomWorldSceneImages(), []);
  const resolvedCampScene = useMemo(
    () => resolveCustomWorldCampScene(draft),
    [draft],
  );
  const resolvedCampImageSrc = useMemo(
    () => resolveCustomWorldCampSceneImage(draft),
    [draft],
  );
  const campSceneDraft = useMemo<CustomWorldLandmark>(
    () => ({
      id: 'custom-scene-camp',
      name: resolvedCampScene.name,
      description: resolvedCampScene.description,
      dangerLevel: resolvedCampScene.dangerLevel,
      imageSrc: resolvedCampScene.imageSrc,
      sceneNpcIds: [],
      connections: [],
    }),
    [resolvedCampScene],
  );

  return (
    <ModalShell
      title="编辑世界信息"
      subtitle="修改后的内容会直接反映在结果页，并会作为进入世界前的最终档案。"
      onClose={onClose}
    >
      <div className="space-y-4">
        <Field label="世界名称">
          <TextInput
            value={draft.name}
            onChange={(value) =>
              setDraft((current) => ({ ...current, name: value }))
            }
          />
        </Field>
        <Field label="副标题">
          <TextInput
            value={draft.subtitle}
            onChange={(value) =>
              setDraft((current) => ({ ...current, subtitle: value }))
            }
          />
        </Field>
        <Field label="世界概述">
          <TextArea
            value={draft.summary}
            onChange={(value) =>
              setDraft((current) => ({ ...current, summary: value }))
            }
            rows={4}
          />
        </Field>
        <Field label="世界基调">
          <TextArea
            value={draft.tone}
            onChange={(value) =>
              setDraft((current) => ({ ...current, tone: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="主线目标">
          <TextArea
            value={draft.playerGoal}
            onChange={(value) =>
              setDraft((current) => ({ ...current, playerGoal: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="开局归处名称">
          <TextInput
            value={resolvedCampScene.name}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                camp: {
                  ...resolveCustomWorldCampScene(current),
                  name: value,
                },
              }))
            }
          />
        </Field>
        <Field label="开局归处描述">
          <TextArea
            value={resolvedCampScene.description}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                camp: {
                  ...resolveCustomWorldCampScene(current),
                  description: value,
                },
              }))
            }
            rows={4}
          />
        </Field>
        <Field label="开局归处危险度">
          <TextInput
            value={resolvedCampScene.dangerLevel}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                camp: {
                  ...resolveCustomWorldCampScene(current),
                  dangerLevel: value,
                },
              }))
            }
          />
        </Field>
        <ImageField
          label="开局归处背景"
          value={resolvedCampImageSrc}
          onChange={(value) =>
            setDraft((current) => ({
              ...current,
              camp: {
                ...resolveCustomWorldCampScene(current),
                imageSrc: value || undefined,
              },
            }))
          }
          fallbackLabel={resolvedCampScene.name.slice(0, 4) || '归处'}
          tone="landscape"
          showInput={false}
          previewOverlay={<SceneSparringPreview profile={draft} />}
          footer={
            <div className="space-y-3">
              <div className="flex flex-wrap gap-3">
                <ActionButton
                  label="预设选择"
                  onClick={() => setIsCampPresetPickerOpen(true)}
                  tone="sky"
                />
                <ActionButton
                  label="智能生成"
                  onClick={() => setIsCampAiGenerateOpen(true)}
                />
              </div>
              <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-6 text-zinc-300">
                开局归处会直接作为进入自定义世界时的第一张背景。这里可以单独指定或生成这张背景图。
              </div>
            </div>
          }
        />
        <Field label="玩家原始设定">
          <TextArea
            value={draft.settingText}
            onChange={(value) =>
              setDraft((current) => ({ ...current, settingText: value }))
            }
            rows={4}
          />
        </Field>
        {isCampPresetPickerOpen ? (
          <ScenePresetPickerModal
            selectedSrc={resolvedCampScene.imageSrc}
            presetImages={presetImages}
            onSelect={(value) =>
              setDraft((current) => ({
                ...current,
                camp: {
                  ...resolveCustomWorldCampScene(current),
                  imageSrc: value,
                },
              }))
            }
            onClose={() => setIsCampPresetPickerOpen(false)}
          />
        ) : null}
        {isCampAiGenerateOpen ? (
          <SceneImageGenerationModal
            profile={draft}
            landmark={campSceneDraft}
            onApply={(result) => {
              setDraft((current) => ({
                ...current,
                camp: {
                  ...resolveCustomWorldCampScene(current),
                  imageSrc: result.imageSrc,
                },
              }));
            }}
            onClose={() => setIsCampAiGenerateOpen(false)}
          />
        ) : null}
        <SaveBar
          onClose={onClose}
          onSave={() => {
            onSave(draft);
            onClose();
          }}
        />
      </div>
    </ModalShell>
  );
}

function PlayableNpcEditor({
  npc,
  mode,
  onSave,
  onClose,
}: {
  npc: CustomWorldPlayableNpc;
  mode: 'create' | 'edit';
  onSave: (npc: CustomWorldPlayableNpc) => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useDraft(npc);
  const [isAiAssetStudioOpen, setIsAiAssetStudioOpen] = useState(false);
  const selectedTemplate =
    ROLE_TEMPLATE_CHARACTERS.find(
      (character) => character.id === draft.templateCharacterId,
    ) ??
    ROLE_TEMPLATE_CHARACTERS[0] ??
    null;

  return (
    <ModalShell
      title={mode === 'create' ? '新增可扮演角色' : `编辑角色：${npc.name}`}
      subtitle="这里可以直接修改可扮演角色的完整档案字段，结果页和正式选角都会同步使用。"
      onClose={onClose}
    >
      <div className="space-y-4">
        {selectedTemplate ? (
          <div className="grid gap-4 rounded-2xl border border-white/8 bg-black/20 p-4 sm:grid-cols-[7rem_minmax(0,1fr)]">
            <div className="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
              <img
                src={draft.imageSrc || selectedTemplate.portrait}
                alt={selectedTemplate.name}
                className="h-28 w-full object-cover object-top"
              />
            </div>
            <div className="min-w-0">
              <div className="text-[11px] tracking-[0.18em] text-zinc-500">
                当前外观模板
              </div>
              <div className="mt-2 text-base font-semibold text-white">
                {selectedTemplate.name}
              </div>
              <div className="mt-1 text-sm text-zinc-400">
                {selectedTemplate.title}
              </div>
              <div className="mt-3 text-sm leading-6 text-zinc-300">
                {selectedTemplate.description}
              </div>
              <div className="mt-3 flex flex-wrap gap-2">
                {draft.generatedVisualAssetId ? (
                  <span className="rounded-full border border-emerald-400/20 bg-emerald-500/10 px-2.5 py-1 text-[10px] text-emerald-100">
                    已应用主图
                  </span>
                ) : null}
                {draft.generatedAnimationSetId ? (
                  <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2.5 py-1 text-[10px] text-amber-100">
                    已应用动作
                  </span>
                ) : null}
              </div>
              <div className="mt-3">
                <ActionButton
                  label="AI生成形象与动作"
                  onClick={() => setIsAiAssetStudioOpen(true)}
                  tone="sky"
                />
              </div>
            </div>
          </div>
        ) : null}

        <Field label="外观模板">
          <SelectField
            value={draft.templateCharacterId ?? ROLE_TEMPLATE_CHARACTERS[0]?.id ?? ''}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                templateCharacterId: value,
              }))
            }
            options={ROLE_TEMPLATE_CHARACTERS.map((character) => ({
              value: character.id,
              label: `${character.name} / ${character.title}`,
            }))}
          />
        </Field>
        <Field label="名称">
          <TextInput
            value={draft.name}
            onChange={(value) =>
              setDraft((current) => ({ ...current, name: value }))
            }
          />
        </Field>
        <Field label="称号 / 头衔">
          <TextInput
            value={draft.title}
            onChange={(value) =>
              setDraft((current) => ({ ...current, title: value }))
            }
          />
        </Field>
        <Field label="世界身份 / 职责">
          <TextInput
            value={draft.role}
            onChange={(value) =>
              setDraft((current) => ({ ...current, role: value }))
            }
          />
        </Field>
        <Field label="简介">
          <TextArea
            value={draft.description}
            onChange={(value) =>
              setDraft((current) => ({ ...current, description: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="背景">
          <TextArea
            value={draft.backstory}
            onChange={(value) =>
              setDraft((current) => ({ ...current, backstory: value }))
            }
            rows={5}
          />
        </Field>
        <Field label="性格">
          <TextArea
            value={draft.personality}
            onChange={(value) =>
              setDraft((current) => ({ ...current, personality: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="当前动机">
          <TextArea
            value={draft.motivation}
            onChange={(value) =>
              setDraft((current) => ({ ...current, motivation: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="战斗风格">
          <TextArea
            value={draft.combatStyle}
            onChange={(value) =>
              setDraft((current) => ({ ...current, combatStyle: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="初始好感">
          <TextInput
            type="number"
            value={draft.initialAffinity}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                initialAffinity: clampInitialAffinity(
                  value,
                  current.initialAffinity,
                ),
              }))
            }
          />
        </Field>
        <Field label="关系切入口">
          <TextArea
            value={commaText(draft.relationshipHooks)}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                relationshipHooks: parseCommaText(value),
              }))
            }
            rows={2}
          />
        </Field>
        <Field label="标签">
          <TextArea
            value={commaText(draft.tags)}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                tags: parseCommaText(value),
              }))
            }
            rows={2}
          />
        </Field>
        <BackstoryRevealEditor
          value={draft.backstoryReveal}
          onChange={(backstoryReveal) =>
            setDraft((current) => ({
              ...current,
              backstoryReveal,
            }))
          }
        />
        <SkillListEditor
          value={draft.skills}
          onChange={(skills) =>
            setDraft((current) => ({
              ...current,
              skills,
            }))
          }
          labelSeed={draft.name || draft.id}
        />
        <InitialItemsEditor
          value={draft.initialItems}
          onChange={(initialItems) =>
            setDraft((current) => ({
              ...current,
              initialItems,
            }))
          }
          labelSeed={draft.name || draft.id}
        />
        <SaveBar
          onClose={onClose}
          onSave={() => {
            onSave({
              ...draft,
              templateCharacterId:
                draft.templateCharacterId ?? ROLE_TEMPLATE_CHARACTERS[0]?.id,
            });
            onClose();
          }}
        />
        {isAiAssetStudioOpen ? (
          <CustomWorldRoleAssetStudioModal
            role={draft}
            roleKind="playable"
            onApply={(nextRole) =>
              setDraft((current) => ({
                ...current,
                ...nextRole,
              }))
            }
            onClose={() => setIsAiAssetStudioOpen(false)}
          />
        ) : null}
      </div>
    </ModalShell>
  );
}

function StoryNpcEditor({
  npc,
  mode,
  onSave,
  onClose,
}: {
  npc: CustomWorldNpc;
  mode: 'create' | 'edit';
  onSave: (npc: CustomWorldNpc) => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useDraft(npc);
  const [isVisualEditorOpen, setIsVisualEditorOpen] = useState(false);
  const [isAiAssetStudioOpen, setIsAiAssetStudioOpen] = useState(false);

  return (
    <ModalShell
      title={mode === 'create' ? '新增场景角色' : `编辑场景角色：${npc.name}`}
      subtitle="这里可以直接修改场景角色的完整档案字段，形象编辑仍保留在独立面板。"
      onClose={onClose}
    >
      <div className="space-y-4">
        <div className="rounded-3xl border border-white/10 bg-black/20 p-4">
          <div className="grid gap-4 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-center">
            <div className="flex justify-center">
              <CustomWorldNpcPortrait
                npc={draft}
                visual={draft.visual}
                className="aspect-square w-full max-w-[9.5rem]"
                scale={2.05}
                preferImageSrc
              />
            </div>
            <div className="min-w-0 space-y-3">
              <div>
                <div className="text-[11px] font-bold tracking-[0.18em] text-zinc-300">
                  场景角色形象预览
                </div>
                <div className="mt-2 text-sm leading-6 text-zinc-400">
                  形象设定已单独拆到专门面板中编辑。这里保持卡片大小预览，方便边改档案边确认当前人物形象。
                </div>
              </div>
              <div className="flex flex-wrap gap-3">
                <ActionButton
                  label="修改形象"
                  onClick={() => setIsVisualEditorOpen(true)}
                  tone="sky"
                />
                <ActionButton
                  label="AI生成形象与动作"
                  onClick={() => setIsAiAssetStudioOpen(true)}
                  tone="sky"
                />
              </div>
              <div className="flex flex-wrap gap-2">
                {draft.generatedVisualAssetId ? (
                  <span className="rounded-full border border-emerald-400/20 bg-emerald-500/10 px-2.5 py-1 text-[10px] text-emerald-100">
                    已应用主图
                  </span>
                ) : null}
                {draft.generatedAnimationSetId ? (
                  <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2.5 py-1 text-[10px] text-amber-100">
                    已应用动作
                  </span>
                ) : null}
              </div>
            </div>
          </div>
        </div>
        <Field label="名称">
          <TextInput
            value={draft.name}
            onChange={(value) =>
              setDraft((current) => ({ ...current, name: value }))
            }
          />
        </Field>
        <Field label="头衔 / 职能">
          <TextInput
            value={draft.title}
            onChange={(value) =>
              setDraft((current) => ({ ...current, title: value }))
            }
          />
        </Field>
        <Field label="世界身份 / 职能">
          <TextInput
            value={draft.role}
            onChange={(value) =>
              setDraft((current) => ({ ...current, role: value }))
            }
          />
        </Field>
        <Field label="描述">
          <TextArea
            value={draft.description}
            onChange={(value) =>
              setDraft((current) => ({ ...current, description: value }))
            }
            rows={4}
          />
        </Field>
        <Field label="背景">
          <TextArea
            value={draft.backstory}
            onChange={(value) =>
              setDraft((current) => ({ ...current, backstory: value }))
            }
            rows={4}
          />
        </Field>
        <Field label="性格">
          <TextArea
            value={draft.personality}
            onChange={(value) =>
              setDraft((current) => ({ ...current, personality: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="动机">
          <TextArea
            value={draft.motivation}
            onChange={(value) =>
              setDraft((current) => ({ ...current, motivation: value }))
            }
            rows={4}
          />
        </Field>
        <Field label="战斗风格">
          <TextArea
            value={draft.combatStyle}
            onChange={(value) =>
              setDraft((current) => ({ ...current, combatStyle: value }))
            }
            rows={3}
          />
        </Field>
        <Field label="初始好感">
          <TextInput
            type="number"
            value={draft.initialAffinity}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                initialAffinity: clampInitialAffinity(
                  value,
                  current.initialAffinity,
                ),
              }))
            }
          />
        </Field>
        <Field label="关系切入口">
          <TextArea
            value={commaText(draft.relationshipHooks)}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                relationshipHooks: parseCommaText(value),
              }))
            }
            rows={3}
          />
        </Field>
        <Field label="标签">
          <TextArea
            value={commaText(draft.tags)}
            onChange={(value) =>
              setDraft((current) => ({
                ...current,
                tags: parseCommaText(value),
              }))
            }
            rows={2}
          />
        </Field>
        <BackstoryRevealEditor
          value={draft.backstoryReveal}
          onChange={(backstoryReveal) =>
            setDraft((current) => ({
              ...current,
              backstoryReveal,
            }))
          }
        />
        <SkillListEditor
          value={draft.skills}
          onChange={(skills) =>
            setDraft((current) => ({
              ...current,
              skills,
            }))
          }
          labelSeed={draft.name || draft.id}
        />
        <InitialItemsEditor
          value={draft.initialItems}
          onChange={(initialItems) =>
            setDraft((current) => ({
              ...current,
              initialItems,
            }))
          }
          labelSeed={draft.name || draft.id}
        />
        <SaveBar
          onClose={onClose}
          onSave={() => {
            onSave(draft);
            onClose();
          }}
        />
        {isVisualEditorOpen ? (
          <StoryNpcVisualEditorModal
            npc={draft}
            visual={
              draft.visual ??
              buildDefaultCustomWorldNpcVisual({
                id: draft.id,
                name: draft.name,
                role: draft.role,
                description: draft.description,
              })
            }
            onChange={(visual) =>
              setDraft((current) => ({ ...current, visual }))
            }
            onOpenAiStudio={() => setIsAiAssetStudioOpen(true)}
            onClose={() => setIsVisualEditorOpen(false)}
          />
        ) : null}
        {isAiAssetStudioOpen ? (
          <CustomWorldRoleAssetStudioModal
            role={draft}
            roleKind="story"
            onApply={(nextRole) =>
              setDraft((current) => ({
                ...current,
                ...nextRole,
              }))
            }
            onClose={() => setIsAiAssetStudioOpen(false)}
          />
        ) : null}
      </div>
    </ModalShell>
  );
}

function LandmarkEditor({
  profile,
  landmark,
  mode,
  onSaveProfile,
  onClose,
}: {
  profile: CustomWorldProfile;
  landmark: CustomWorldLandmark;
  mode: 'create' | 'edit';
  onSaveProfile: (profile: CustomWorldProfile) => void;
  onClose: () => void;
}) {
  const [draft, setDraft] = useDraft(landmark);
  const [draftStoryNpcs, setDraftStoryNpcs] = useDraft(profile.storyNpcs);
  const [isPresetPickerOpen, setIsPresetPickerOpen] = useState(false);
  const [isAiGenerateOpen, setIsAiGenerateOpen] = useState(false);
  const [npcEditorState, setNpcEditorState] = useState<{
    mode: 'create' | 'edit';
    npc: CustomWorldNpc;
  } | null>(null);
  const presetImages = useMemo(() => getAllCustomWorldSceneImages(), []);
  const resolvedDraftImageSrc = useMemo(() => {
    const landmarkIndex = profile.landmarks.findIndex(
      (entry) => entry.id === draft.id,
    );

    return resolveCustomWorldLandmarkImage(
      profile,
      draft,
      landmarkIndex >= 0 ? landmarkIndex : profile.landmarks.length,
      profile.landmarks
        .filter((entry) => entry.id !== draft.id)
        .map((entry) => entry.imageSrc)
        .filter((imageSrc): imageSrc is string => Boolean(imageSrc)),
    );
  }, [draft, profile]);
  const storyNpcById = useMemo(
    () => new Map(draftStoryNpcs.map((npc) => [npc.id, npc])),
    [draftStoryNpcs],
  );
  const availableTargetLandmarks = useMemo(
    () => profile.landmarks.filter((entry) => entry.id !== draft.id),
    [draft.id, profile.landmarks],
  );

  const toggleSceneNpc = (npcId: string) => {
    setDraft((current) => ({
      ...current,
      sceneNpcIds: current.sceneNpcIds.includes(npcId)
        ? current.sceneNpcIds.filter((entry) => entry !== npcId)
        : [...current.sceneNpcIds, npcId],
    }));
  };

  const updateConnection = (
    index: number,
    updater: (
      connection: CustomWorldSceneConnection,
    ) => CustomWorldSceneConnection,
  ) => {
    setDraft((current) => ({
      ...current,
      connections: current.connections.map((connection, connectionIndex) =>
        connectionIndex === index ? updater(connection) : connection,
      ),
    }));
  };

  const addConnection = () => {
    const fallbackTarget = availableTargetLandmarks[0];
    if (!fallbackTarget) {
      window.alert('请先保留至少一个其他场景，才能配置连接关系。');
      return;
    }

    setDraft((current) => ({
      ...current,
      connections: [
        ...current.connections,
        {
          targetLandmarkId: fallbackTarget.id,
          relativePosition: 'forward',
          summary: `可通往${fallbackTarget.name}`,
        },
      ],
    }));
  };

  const saveLandmarkProfile = () => {
    if (draft.sceneNpcIds.length < 3) {
      window.alert('每个场景至少需要分配 3 个 NPC。');
      return;
    }

    const nextLandmarks =
      mode === 'create'
        ? [...profile.landmarks, draft]
        : profile.landmarks.map((entry) =>
            entry.id === draft.id ? draft : entry,
          );

    onSaveProfile({
      ...profile,
      storyNpcs: draftStoryNpcs,
      landmarks: syncLandmarksWithStoryNpcs(nextLandmarks, draftStoryNpcs),
    });
    onClose();
  };

  return (
    <ModalShell
      title={mode === 'create' ? '新增场景' : `编辑场景：${landmark.name}`}
      subtitle="这里可以同时配置场景图片、场景内 NPC，以及场景之间的相对位置连接关系。"
      onClose={onClose}
    >
      <div className="space-y-4">
        <ImageField
          label="场景图片"
          value={resolvedDraftImageSrc}
          onChange={(value) =>
            setDraft((current) => ({
              ...current,
              imageSrc: value || undefined,
            }))
          }
          fallbackLabel={draft.name ? draft.name.slice(0, 4) : '背景'}
          tone="landscape"
          showInput={false}
          previewOverlay={<SceneSparringPreview profile={profile} />}
          footer={
            <div className="space-y-3">
              <div className="flex flex-wrap gap-3">
                <ActionButton
                  label="预设选择"
                  onClick={() => setIsPresetPickerOpen(true)}
                  tone="sky"
                />
                <ActionButton
                  label="智能生成"
                  onClick={() => setIsAiGenerateOpen(true)}
                />
              </div>
              <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-sm leading-6 text-zinc-300">
                预览图中的切割预览会优先提取当前自定义世界的可选角色颜色，仅用于辅助确认场景截图，不会修改颜色面板。智能生成会把结果保存为本地可复用的场景资源。
              </div>
            </div>
          }
        />
        <Field label="名称">
          <TextInput
            value={draft.name}
            onChange={(value) =>
              setDraft((current) => ({ ...current, name: value }))
            }
          />
        </Field>
        <Field label="描述">
          <TextArea
            value={draft.description}
            onChange={(value) =>
              setDraft((current) => ({ ...current, description: value }))
            }
            rows={5}
          />
        </Field>
        <Field label="危险度">
          <TextInput
            value={draft.dangerLevel}
            onChange={(value) =>
              setDraft((current) => ({ ...current, dangerLevel: value }))
            }
          />
        </Field>
        <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-300">
                场景内 NPC
              </div>
              <div className="mt-2 text-sm leading-6 text-zinc-400">
                每个场景至少保留 3 个 NPC。可以在这里直接继续新增
                NPC，并立即加入当前场景。
              </div>
            </div>
            <ActionButton
              label="新增 NPC 并加入此场景"
              onClick={() =>
                setNpcEditorState({
                  mode: 'create',
                  npc: createStoryNpc({ storyNpcs: draftStoryNpcs }),
                })
              }
              tone="sky"
            />
          </div>
          <div className="mt-3 space-y-2">
            {draft.sceneNpcIds.length > 0 ? (
              draft.sceneNpcIds.map((npcId) => {
                const npc = storyNpcById.get(npcId);
                return (
                  <div
                    key={`${draft.id}-selected-npc-${npcId}`}
                    className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3"
                  >
                    <div className="flex flex-wrap items-center justify-between gap-3">
                      <div className="min-w-0">
                        <div className="text-sm font-semibold text-white">
                          {npc?.name ?? '未匹配场景角色'}
                        </div>
                        <div className="mt-1 text-xs leading-6 text-zinc-400">
                          {npc?.role || npc?.title || '未填写身份'}
                        </div>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        {npc ? (
                          <ActionButton
                            label="编辑"
                            onClick={() =>
                              setNpcEditorState({
                                mode: 'edit',
                                npc,
                              })
                            }
                            tone="sky"
                          />
                        ) : null}
                        <ActionButton
                          label="移出场景"
                          onClick={() => toggleSceneNpc(npcId)}
                        />
                      </div>
                    </div>
                  </div>
                );
              })
            ) : (
              <div className="rounded-2xl border border-dashed border-white/12 bg-black/20 px-4 py-4 text-sm text-zinc-500">
                还没有为这个场景分配 NPC。
              </div>
            )}
          </div>
          <div className="mt-3 max-h-64 space-y-2 overflow-y-auto pr-1">
            {draftStoryNpcs.map((npc) => {
              const selected = draft.sceneNpcIds.includes(npc.id);
              return (
                <button
                  key={`${draft.id}-npc-picker-${npc.id}`}
                  type="button"
                  onClick={() => toggleSceneNpc(npc.id)}
                  className={`w-full rounded-2xl border px-3 py-3 text-left transition-colors ${
                    selected
                      ? 'border-sky-300/28 bg-sky-500/10'
                      : 'border-white/8 bg-black/20 hover:border-white/18'
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="text-sm font-semibold text-white">
                        {npc.name}
                      </div>
                      <div className="mt-1 text-xs leading-6 text-zinc-400">
                        {npc.role}
                      </div>
                    </div>
                    <div className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[10px] text-zinc-300">
                      {selected ? '已加入' : '点击加入'}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
        <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-300">
                场景连接关系
              </div>
              <div className="mt-2 text-sm leading-6 text-zinc-400">
                编辑当前场景与其他场景之间的相对位置关系。保存时会自动同步反向连线，避免地图断开。
              </div>
            </div>
            <ActionButton label="新增连接" onClick={addConnection} tone="sky" />
          </div>
          <div className="mt-3 space-y-3">
            {draft.connections.length > 0 ? (
              draft.connections.map((connection, index) => (
                <div
                  key={`${draft.id}-connection-${index}`}
                  className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3"
                >
                  <div className="grid gap-3 md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
                    <Field label="目标场景">
                      <SelectField
                        value={connection.targetLandmarkId}
                        onChange={(value) =>
                          updateConnection(index, (current) => ({
                            ...current,
                            targetLandmarkId: value,
                          }))
                        }
                        options={availableTargetLandmarks.map((entry) => ({
                          value: entry.id,
                          label: entry.name,
                        }))}
                      />
                    </Field>
                    <Field label="相对位置">
                      <SelectField
                        value={connection.relativePosition}
                        onChange={(value) =>
                          updateConnection(index, (current) => ({
                            ...current,
                            relativePosition:
                              value as CustomWorldSceneConnection['relativePosition'],
                          }))
                        }
                        options={CUSTOM_WORLD_SCENE_RELATIVE_POSITION_OPTIONS.map(
                          (option) => ({
                            value: option.value,
                            label: option.label,
                          }),
                        )}
                      />
                    </Field>
                  </div>
                  <Field label="连接说明">
                    <TextArea
                      value={connection.summary}
                      onChange={(value) =>
                        updateConnection(index, (current) => ({
                          ...current,
                          summary: value,
                        }))
                      }
                      rows={2}
                      placeholder="例如：沿山脊向北翻过去，可到达断桥。"
                    />
                  </Field>
                  <div className="flex justify-end">
                    <ActionButton
                      label="删除连接"
                      onClick={() =>
                        setDraft((current) => ({
                          ...current,
                          connections: current.connections.filter(
                            (_item, connectionIndex) =>
                              connectionIndex !== index,
                          ),
                        }))
                      }
                    />
                  </div>
                </div>
              ))
            ) : (
              <div className="rounded-2xl border border-dashed border-white/12 bg-black/20 px-4 py-4 text-sm text-zinc-500">
                当前还没有手动配置连接。若直接保存，系统会自动补一条可遍历的主路连接。
              </div>
            )}
          </div>
          {draft.connections.length > 0 ? (
            <div className="mt-3 rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-xs leading-6 text-zinc-400">
              当前连接预览：
              {draft.connections
                .map((connection) => {
                  const targetLandmark = availableTargetLandmarks.find(
                    (entry) => entry.id === connection.targetLandmarkId,
                  );
                  return `${getCustomWorldSceneRelativePositionLabel(connection.relativePosition)} -> ${targetLandmark?.name ?? '未匹配场景'}`;
                })
                .join('；')}
            </div>
          ) : null}
        </div>
        <SaveBar
          onClose={onClose}
          onSave={saveLandmarkProfile}
        />
        {isPresetPickerOpen ? (
          <ScenePresetPickerModal
            selectedSrc={draft.imageSrc}
            presetImages={presetImages}
            onSelect={(value) =>
              setDraft((current) => ({ ...current, imageSrc: value }))
            }
            onClose={() => setIsPresetPickerOpen(false)}
          />
        ) : null}
        {isAiGenerateOpen ? (
          <SceneImageGenerationModal
            profile={profile}
            landmark={draft}
            onApply={(result) => {
              setDraft((current) => ({
                ...current,
                imageSrc: result.imageSrc,
              }));
            }}
            onClose={() => setIsAiGenerateOpen(false)}
          />
        ) : null}
        {npcEditorState ? (
          <StoryNpcEditor
            npc={npcEditorState.npc}
            mode={npcEditorState.mode}
            onSave={(nextNpc) => {
              setDraftStoryNpcs((current) =>
                npcEditorState.mode === 'create'
                  ? [...current, nextNpc]
                  : current.map((item) =>
                      item.id === nextNpc.id ? nextNpc : item,
                    ),
              );
              setDraft((current) => ({
                ...current,
                sceneNpcIds: current.sceneNpcIds.includes(nextNpc.id)
                  ? current.sceneNpcIds
                  : [...current.sceneNpcIds, nextNpc.id],
              }));
              setNpcEditorState(null);
            }}
            onClose={() => setNpcEditorState(null)}
          />
        ) : null}
      </div>
    </ModalShell>
  );
}

function createPlayableNpc(
  profile: CustomWorldProfile,
): CustomWorldPlayableNpc {
  const seed = Date.now() + profile.playableNpcs.length;
  const template =
    ROLE_TEMPLATE_CHARACTERS[
      profile.playableNpcs.length % Math.max(1, ROLE_TEMPLATE_CHARACTERS.length)
    ] ?? ROLE_TEMPLATE_CHARACTERS[0];

  return {
    id: createEntryId(
      'playable-npc',
      `角色-${profile.playableNpcs.length + 1}`,
      seed,
    ),
    name: `自定义角色${profile.playableNpcs.length + 1}`,
    title: '自定义身份',
    role: '世界中的行动者',
    description: '',
    backstory: '',
    personality: '',
    motivation: '',
    combatStyle: '',
    initialAffinity: 18,
    relationshipHooks: ['首次接触', '合作空间'],
    tags: ['自定义'],
    backstoryReveal: {
      publicSummary: '',
      chapters: [
        {
          id: 'surface',
          title: '表层来意',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_EASED,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'scar',
          title: '旧事裂痕',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_FRIENDLY,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'hidden',
          title: '隐藏执念',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_TRUSTED,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'final',
          title: '最终底牌',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_CLOSE,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
      ],
    },
    skills: [
      { id: 'skill-1', name: '基础起手', summary: '', style: '起手压制' },
      { id: 'skill-2', name: '常用变招', summary: '', style: '机动周旋' },
      { id: 'skill-3', name: '压箱底牌', summary: '', style: '爆发终结' },
    ],
    initialItems: [
      {
        id: 'item-1',
        name: '随身武具',
        category: '武器',
        quantity: 1,
        rarity: 'rare',
        description: '',
        tags: ['自定义'],
      },
      {
        id: 'item-2',
        name: '补给包',
        category: '消耗品',
        quantity: 2,
        rarity: 'uncommon',
        description: '',
        tags: ['自定义'],
      },
      {
        id: 'item-3',
        name: '私人物件',
        category: '专属物品',
        quantity: 1,
        rarity: 'rare',
        description: '',
        tags: ['自定义'],
      },
    ],
    templateCharacterId: template?.id,
  };
}

function createStoryNpc(
  profile: Pick<CustomWorldProfile, 'storyNpcs'>,
): CustomWorldNpc {
  const seed = Date.now() + profile.storyNpcs.length;
  const npc = {
    id: createEntryId(
      'story-npc',
      `场景角色-${profile.storyNpcs.length + 1}`,
      seed,
    ),
    name: `自定义场景角色${profile.storyNpcs.length + 1}`,
    title: '自定义头衔',
    role: '自定义身份',
    description: '',
    backstory: '',
    personality: '',
    motivation: '',
    combatStyle: '',
    initialAffinity: 6,
    relationshipHooks: ['合作', '互动'],
    tags: ['自定义'],
    backstoryReveal: {
      publicSummary: '',
      chapters: [
        {
          id: 'surface',
          title: '表层来意',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_EASED,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'scar',
          title: '旧事裂痕',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_FRIENDLY,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'hidden',
          title: '隐藏执念',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_TRUSTED,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
        {
          id: 'final',
          title: '最终底牌',
          affinityRequired: BACKSTORY_UNLOCK_AFFINITY_CLOSE,
          teaser: '',
          content: '',
          contextSnippet: '',
        },
      ],
    },
    skills: [
      { id: 'skill-1', name: '基础起手', summary: '', style: '起手压制' },
      { id: 'skill-2', name: '常用变招', summary: '', style: '机动周旋' },
      { id: 'skill-3', name: '压箱底牌', summary: '', style: '爆发终结' },
    ],
    initialItems: [
      {
        id: 'item-1',
        name: '随身武具',
        category: '武器',
        quantity: 1,
        rarity: 'rare',
        description: '',
        tags: ['自定义'],
      },
      {
        id: 'item-2',
        name: '补给包',
        category: '消耗品',
        quantity: 2,
        rarity: 'uncommon',
        description: '',
        tags: ['自定义'],
      },
      {
        id: 'item-3',
        name: '私人物件',
        category: '专属物品',
        quantity: 1,
        rarity: 'rare',
        description: '',
        tags: ['自定义'],
      },
    ],
  } satisfies CustomWorldNpc;

  return npc;
}

function createLandmark(profile: CustomWorldProfile): CustomWorldLandmark {
  const seed = Date.now() + profile.landmarks.length;
  const previousLandmark = profile.landmarks[profile.landmarks.length - 1];
  return {
    id: createEntryId(
      'landmark',
      `scene-${profile.landmarks.length + 1}`,
      seed,
    ),
    name: `自定义场景${profile.landmarks.length + 1}`,
    description: '',
    dangerLevel: '中',
    imageSrc: undefined,
    sceneNpcIds: profile.storyNpcs.slice(0, 3).map((npc) => npc.id),
    connections: previousLandmark
      ? [
          {
            targetLandmarkId: previousLandmark.id,
            relativePosition: 'back',
            summary: `暂时接回${previousLandmark.name}这条旧路`,
          },
        ]
      : [],
  };
}

export function CustomWorldEntityEditorModal({
  profile,
  target,
  onClose,
  onProfileChange,
}: CustomWorldEntityEditorModalProps) {
  if (!target) return null;

  if (target.kind === 'world') {
    return (
      <WorldEditor
        profile={profile}
        onSave={onProfileChange}
        onClose={onClose}
      />
    );
  }

  if (target.kind === 'playable') {
    if (target.mode === 'create') {
      return (
        <PlayableNpcEditor
          npc={createPlayableNpc(profile)}
          mode="create"
          onSave={(nextNpc) =>
            onProfileChange({
              ...profile,
              playableNpcs: [...profile.playableNpcs, nextNpc],
            })
          }
          onClose={onClose}
        />
      );
    }

    const npc = profile.playableNpcs.find((item) => item.id === target.id);
    return npc ? (
      <PlayableNpcEditor
        npc={npc}
        mode="edit"
        onSave={(nextNpc) =>
          onProfileChange({
            ...profile,
            playableNpcs: profile.playableNpcs.map((item) =>
              item.id === nextNpc.id ? nextNpc : item,
            ),
          })
        }
        onClose={onClose}
      />
    ) : null;
  }

  if (target.kind === 'story') {
    if (target.mode === 'create') {
      return (
        <StoryNpcEditor
          npc={createStoryNpc(profile)}
          mode="create"
          onSave={(nextNpc) =>
            onProfileChange({
              ...profile,
              storyNpcs: [...profile.storyNpcs, nextNpc],
            })
          }
          onClose={onClose}
        />
      );
    }

    const npc = profile.storyNpcs.find((item) => item.id === target.id);
    return npc ? (
      <StoryNpcEditor
        npc={npc}
        mode="edit"
        onSave={(nextNpc) =>
          onProfileChange({
            ...profile,
            storyNpcs: profile.storyNpcs.map((item) =>
              item.id === nextNpc.id ? nextNpc : item,
            ),
          })
        }
        onClose={onClose}
      />
    ) : null;
  }

  if (target.mode === 'create') {
    return (
      <LandmarkEditor
        profile={profile}
        landmark={createLandmark(profile)}
        mode="create"
        onSaveProfile={onProfileChange}
        onClose={onClose}
      />
    );
  }

  const landmark = profile.landmarks.find((entry) => entry.id === target.id);
  return landmark ? (
    <LandmarkEditor
      profile={profile}
      landmark={landmark}
      mode="edit"
      onSaveProfile={onProfileChange}
      onClose={onClose}
    />
  ) : null;
}