"use client";

import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode, type RefObject } from "react";
import { Check, Download, ExternalLink, Film, ImageIcon, ImagePlus, ImageUp, Loader2, Music, Paintbrush, Pencil, Plus, RefreshCw, Save, Send, Upload, X } from "lucide-react";
import clsx from "clsx";
import { ImageEditor, type ImageEditMode } from "@/components/image-editor";
import { clampPage, pageItems, Pagination } from "@/components/pagination";
import { crossfadeIn, pulseFeedback, revealChildren, runScopedMotion } from "@/lib/ui/motion";
import { VIDEO_DURATION_DEFAULT, VIDEO_DURATION_OPTIONS, VIDEO_RATIOS, VIDEO_RESOLUTIONS, clampVideoDuration } from "@/lib/video-settings";
import type { Asset, GenerationJob } from "@/lib/types";
import type { PromptMaterial } from "@/lib/prompt/assembler";
import {
  detectMaterialDraftStart,
  insertMaterialDraftToken,
  nextMaterialDraftToken,
  normalizeMaterialDraftToken,
  type MaterialDraftKind
} from "@/lib/prompt/material-draft";
import { extractMaterialPlaceholders } from "@/lib/prompt/material-placeholders";

type GenerateMode = "image" | "video";
type StudioMode = GenerateMode | ImageEditMode;
type MaterialKind = PromptMaterial["type"];
type ImageGenerateEngine = "jimeng" | "evolink" | "bailian";
type VideoGenerateEngine = "seedance" | "bailian";

type MentionState = {
  start: number;
  query: string;
};

type MaterialDraftTarget = "prompt" | "template";

type MaterialDraftState = {
  target: MaterialDraftTarget;
  index: number;
  query: string;
  activeIndex: number | null;
};

type MaterialDraftOption = {
  token: string;
  label: string;
  caption: string;
  type: MaterialKind;
};

type HealthCapability = {
  id: string;
  engine?: string;
};

type ImageTemplate = {
  id: string;
  name: string;
  prompt: string;
  previewImageUrl?: string;
  settings: {
    engine?: ImageGenerateEngine;
    width?: number;
    height?: number;
    forceSingle?: boolean;
    scale?: number;
    quality?: string;
  };
  sortOrder: number;
  updatedAt?: string;
};

type TemplateForm = {
  name: string;
  prompt: string;
  previewImageUrl: string;
  engine: ImageGenerateEngine;
  jimengInfluence: string;
  evolinkQuality: string;
  size: string;
  sortOrder: string;
};

const jimengInfluenceOptions = [
  { id: "creative", label: "创意 35", scale: 35 },
  { id: "balanced", label: "均衡 50", scale: 50 },
  { id: "precise", label: "贴合 70", scale: 70 },
  { id: "strict", label: "严格 85", scale: 85 }
];

const evolinkQualityOptions = [
  { id: "low", label: "快速", quality: "low" },
  { id: "medium", label: "标准", quality: "medium" },
  { id: "high", label: "精细", quality: "high" }
];

const imageSizePresets = [
  { label: "1:1", width: 2048, height: 2048 },
  { label: "4:3", width: 2304, height: 1728 },
  { label: "16:9", width: 2560, height: 1440 },
  { label: "9:16", width: 1440, height: 2560 }
];

type ImageSizePreset = (typeof imageSizePresets)[number];

type TemplateConsoleSnapshot = {
  mode: GenerateMode;
  imagePrompt: string;
  imageSize: ImageSizePreset;
  imageEngine: ImageGenerateEngine;
  jimengInfluence: string;
  evolinkQuality: string;
};

const materialUploadAccept = "image/*,video/*,audio/*";
const templatePreviewAccept = "image/*";
const MATERIAL_PAGE_SIZE = 6;
const defaultTemplateForm: TemplateForm = {
  name: "",
  prompt: "",
  previewImageUrl: "",
  engine: "jimeng",
  jimengInfluence: jimengInfluenceOptions[1].id,
  evolinkQuality: evolinkQualityOptions[1].id,
  size: imageSizePresets[0].label,
  sortOrder: "0"
};

export function CreateStudio({ initialMode = "image" }: { initialMode?: StudioMode }) {
  const [mode, setMode] = useState<StudioMode>(initialMode);
  const [promptByMode, setPromptByMode] = useState<Record<GenerateMode, string>>({
    image: "",
    video: ""
  });
  const [materials, setMaterials] = useState<PromptMaterial[]>([]);
  const [imageTemplates, setImageTemplates] = useState<ImageTemplate[]>([]);
  const [taskAssets, setTaskAssets] = useState<Asset[]>([]);
  const [recentJobs, setRecentJobs] = useState<GenerationJob[]>([]);
  const [templatesLoading, setTemplatesLoading] = useState(false);
  const [tasksLoading, setTasksLoading] = useState(false);
  const [templateSaving, setTemplateSaving] = useState(false);
  const [templatePreviewUploading, setTemplatePreviewUploading] = useState(false);
  const [templateError, setTemplateError] = useState<string | null>(null);
  const [tasksError, setTasksError] = useState<string | null>(null);
  const [activeTemplateId, setActiveTemplateId] = useState<string | null>(null);
  const [templateEditorOpen, setTemplateEditorOpen] = useState(false);
  const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
  const [previewTemplate, setPreviewTemplate] = useState<ImageTemplate | null>(null);
  const [previewTaskAsset, setPreviewTaskAsset] = useState<Asset | null>(null);
  const [durationNow, setDurationNow] = useState(() => Date.now());
  const [templateForm, setTemplateForm] = useState<TemplateForm>(defaultTemplateForm);
  const [templateRestoreState, setTemplateRestoreState] = useState<TemplateConsoleSnapshot | null>(null);
  const [busy, setBusy] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [imageSize, setImageSize] = useState(imageSizePresets[0]);
  const [imageEngine, setImageEngine] = useState<ImageGenerateEngine>("jimeng");
  const [jimengInfluence, setJimengInfluence] = useState(jimengInfluenceOptions[1].id);
  const [evolinkQuality, setEvolinkQuality] = useState(evolinkQualityOptions[1].id);
  const [videoEngine, setVideoEngine] = useState<VideoGenerateEngine>("seedance");
  const [videoRatio, setVideoRatio] = useState("9:16");
  const [videoDuration, setVideoDuration] = useState(VIDEO_DURATION_DEFAULT);
  const [videoResolution, setVideoResolution] = useState("720p");
  const [mentionState, setMentionState] = useState<MentionState | null>(null);
  const [materialDraft, setMaterialDraft] = useState<MaterialDraftState | null>(null);
  const [activeMentionIndex, setActiveMentionIndex] = useState<number | null>(null);
  const [promptScrollTop, setPromptScrollTop] = useState(0);
  const [templatePromptScrollTop, setTemplatePromptScrollTop] = useState(0);
  const [materialPage, setMaterialPage] = useState(1);
  const studioRef = useRef<HTMLDivElement | null>(null);
  const modePanelRef = useRef<HTMLDivElement | HTMLElement | null>(null);
  const feedbackRef = useRef<HTMLDivElement | null>(null);
  const materialBoardRef = useRef<HTMLDivElement | null>(null);
  const promptRef = useRef<HTMLTextAreaElement | null>(null);
  const templatePromptRef = useRef<HTMLTextAreaElement | null>(null);
  const materialDraftInputRef = useRef<HTMLInputElement | null>(null);

  const isImageEditMode = mode === "inpaint" || mode === "upscale";
  const generateMode: GenerateMode = mode === "video" ? "video" : "image";
  const prompt = promptByMode[generateMode];
  const selectedJimengInfluence = jimengInfluenceOptions.find((option) => option.id === jimengInfluence) || jimengInfluenceOptions[1];
  const selectedEvolinkQuality = evolinkQualityOptions.find((option) => option.id === evolinkQuality) || evolinkQualityOptions[1];
  const selectedTemplateJimengInfluence = jimengInfluenceOptions.find((option) => option.id === templateForm.jimengInfluence) || jimengInfluenceOptions[1];
  const selectedTemplateEvolinkQuality = evolinkQualityOptions.find((option) => option.id === templateForm.evolinkQuality) || evolinkQualityOptions[1];
  const templateFormReady = Boolean(templateForm.name.trim() && templateForm.prompt.trim() && templateForm.previewImageUrl.trim());
  const templateFormPlaceholders = useMemo(() => extractMaterialPlaceholders(templateForm.prompt), [templateForm.prompt]);
  const materialPlaceholders = useMemo(() => extractMaterialPlaceholders(prompt), [prompt]);
  const referencedMaterialLabels = useMemo(() => new Set(materialPlaceholders.map((placeholder) => placeholder.token)), [materialPlaceholders]);
  const missingMaterialPlaceholders = useMemo(() => {
    const existing = new Set(materials.map((material) => normalizeMaterialLabel(material.label)).filter((label): label is string => Boolean(label)));
    return materialPlaceholders.filter((placeholder) => !existing.has(placeholder.token));
  }, [materialPlaceholders, materials]);
  const submitDisabled = busy || !prompt.trim() || missingMaterialPlaceholders.length > 0;
  const submitTitle = missingMaterialPlaceholders.length
    ? `请先上传 ${missingMaterialPlaceholders.map((placeholder) => placeholder.token).join("、")}`
    : generateMode === "image" ? "生成图片" : "生成视频";
  const visibleMaterials = pageItems(materials, materialPage, MATERIAL_PAGE_SIZE);
  const materialPageOffset = (clampPage(materialPage, materials.length, MATERIAL_PAGE_SIZE) - 1) * MATERIAL_PAGE_SIZE;
  const mentionSuggestions = useMemo(() => {
    if (!mentionState) return [];
    return materials.filter((material) => materialMatchesMention(material, mentionState.query)).slice(0, 8);
  }, [materials, mentionState]);
  const materialDraftOptions = useMemo(() => {
    if (!materialDraft) return [];
    return buildMaterialDraftOptions({
      target: materialDraft.target,
      query: materialDraft.query,
      prompt: materialDraft.target === "template" ? templateForm.prompt : prompt,
      materials
    });
  }, [materialDraft, materials, prompt, templateForm.prompt]);
  const taskAssetById = useMemo(() => {
    const map = new Map<string, Asset>();
    for (const asset of taskAssets) map.set(asset.id, asset);
    return map;
  }, [taskAssets]);
  const hasLiveTasks = useMemo(() => recentJobs.some((job) => !isTerminalStatus(job.status)), [recentJobs]);

  useEffect(() => {
    setActiveMentionIndex(null);
  }, [mentionState?.query, mentionSuggestions.length]);

  useEffect(() => {
    if (!materialDraft) return;
    window.requestAnimationFrame(() => materialDraftInputRef.current?.focus());
  }, [materialDraft?.target, materialDraft?.index]);

  useEffect(() => {
    setMaterialPage((page) => clampPage(page, materials.length, MATERIAL_PAGE_SIZE));
  }, [materials.length]);

  useEffect(() => {
    return runScopedMotion(studioRef, (scope) => revealChildren(scope));
  }, []);

  useEffect(() => {
    crossfadeIn(modePanelRef.current);
  }, [mode]);

  useEffect(() => {
    pulseFeedback(feedbackRef.current);
  }, [error, notice]);

  useEffect(() => {
    if (materialBoardRef.current) revealChildren(materialBoardRef.current, ".material-card");
  }, [materials.length, materialPage]);

  useEffect(() => {
    let active = true;
    void fetch("/api/health")
      .then((response) => response.ok ? response.json() : null)
      .then((payload: { capabilities?: HealthCapability[] } | null) => {
        const engine = payload?.capabilities?.find((capability) => capability.id === "image.generate")?.engine;
        if (active && (engine === "evolink" || engine === "jimeng" || engine === "bailian")) setImageEngine(engine);
      })
      .catch(() => undefined);
    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    let active = true;
    void loadImageTemplates(() => active);
    return () => {
      active = false;
    };
  }, []);

  useEffect(() => {
    let active = true;
    void loadTaskModuleData(() => active);
    const timer = window.setInterval(() => {
      if (document.visibilityState === "visible") {
        void loadTaskModuleData(() => active, { silent: true });
      }
    }, 15000);
    return () => {
      active = false;
      window.clearInterval(timer);
    };
  }, []);

  useEffect(() => {
    if (!hasLiveTasks) return undefined;
    setDurationNow(Date.now());
    const timer = window.setInterval(() => {
      setDurationNow(Date.now());
    }, 1000);
    return () => window.clearInterval(timer);
  }, [hasLiveTasks]);

  async function loadImageTemplates(isActive: () => boolean = () => true) {
    setTemplatesLoading(true);
    setTemplateError(null);
    try {
      const response = await fetch("/api/image-templates", { cache: "no-store" });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "读取模板失败");
      const nextTemplates = ((payload.templates || []) as ImageTemplate[]).sort(sortTemplates);
      if (isActive()) {
        setImageTemplates(nextTemplates);
      }
    } catch (err) {
      if (isActive()) setTemplateError(err instanceof Error ? err.message : String(err));
    } finally {
      if (isActive()) setTemplatesLoading(false);
    }
  }

  async function loadTaskModuleData(isActive: () => boolean = () => true, options: { silent?: boolean } = {}) {
    if (!options.silent) setTasksLoading(true);
    setTasksError(null);
    try {
      const [assetResponse, imageResponse, videoResponse] = await Promise.all([
        fetch("/api/assets", { cache: "no-store" }),
        fetch("/api/generations/image", { cache: "no-store" }),
        fetch("/api/generations/video", { cache: "no-store" })
      ]);
      const [assetPayload, imagePayload, videoPayload] = await Promise.all([
        assetResponse.json(),
        imageResponse.json(),
        videoResponse.json()
      ]);
      if (!assetResponse.ok) throw new Error(assetPayload.error || "读取资产失败");
      if (!imageResponse.ok) throw new Error(imagePayload.error || "读取图片任务失败");
      if (!videoResponse.ok) throw new Error(videoPayload.error || "读取视频任务失败");
      const dedupedJobs = new Map<string, GenerationJob>();
      for (const job of [...(imagePayload.jobs || []), ...(videoPayload.jobs || [])] as GenerationJob[]) {
        dedupedJobs.set(job.id, job);
      }
      const nextJobs = [...dedupedJobs.values()].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
      if (isActive()) {
        setTaskAssets((assetPayload.assets || []) as Asset[]);
        setRecentJobs(nextJobs);
      }
    } catch (err) {
      if (isActive()) setTasksError(err instanceof Error ? err.message : String(err));
    } finally {
      if (isActive() && !options.silent) setTasksLoading(false);
    }
  }

  function setPrompt(value: string) {
    setPromptByMode((items) => ({ ...items, [generateMode]: value }));
  }

  function handlePromptInput(value: string, cursor: number) {
    const draft = detectMaterialDraftStart(prompt, value, cursor);
    if (draft) {
      setPrompt(draft.text);
      startMaterialDraft("prompt", draft.index);
      return;
    }
    setPrompt(value);
    updateMention(value, cursor);
  }

  function updateMention(value: string, cursor: number) {
    setMentionState(findMentionAtCursor(value, cursor));
  }

  async function uploadAssetFiles(files: File[]): Promise<Asset[]> {
    const formData = new FormData();
    for (const file of files) formData.append("files", file);
    const response = await fetch("/api/assets/upload", {
      method: "POST",
      body: formData
    });
    const payload = await response.json();
    if (!response.ok) throw new Error(payload.error || "上传失败");
    return payload.assets as Asset[];
  }

  async function uploadFiles(files: FileList | null, options: { targetLabel?: string; expectedType?: MaterialKind } = {}) {
    const selectedFiles = Array.from(files || []);
    const expectedType = options.expectedType;
    if (!selectedFiles.length) return;
    if (expectedType && selectedFiles.some((file) => !fileMatchesMaterialKind(file, expectedType))) {
      setError(`请上传${shortTypeName(expectedType)}素材。`);
      return;
    }
    setUploading(true);
    setError(null);
    setNotice(null);
    try {
      const uploaded = await uploadAssetFiles(selectedFiles);
      if (expectedType && uploaded.some((asset) => materialTypeForAsset(asset) !== expectedType)) {
        throw new Error(`请上传${shortTypeName(expectedType)}素材。`);
      }
      setMaterials((items) => {
        const next = [...items];
        uploaded.forEach((asset, index) => {
          const targetLabel = index === 0 ? normalizeMaterialLabel(options.targetLabel) : undefined;
          const material = materialFromAsset(asset, next, targetLabel);
          const existingIndex = targetLabel ? next.findIndex((item) => normalizeMaterialLabel(item.label) === targetLabel) : -1;
          if (existingIndex >= 0) {
            next[existingIndex] = material;
            return;
          }
          next.push(material);
        });
        return next;
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setUploading(false);
    }
  }

  async function uploadTemplatePreview(files: FileList | null) {
    const file = files?.[0];
    if (!file) return;
    if (!fileMatchesMaterialKind(file, "image")) {
      setTemplateError("模板预览图只能上传图片。");
      return;
    }
    setTemplatePreviewUploading(true);
    setTemplateError(null);
    try {
      const [asset] = await uploadAssetFiles([file]);
      setTemplateForm((form) => ({
        ...form,
        previewImageUrl: asset.url,
        name: form.name || asset.name.replace(/\.[^.]+$/, "")
      }));
    } catch (err) {
      setTemplateError(err instanceof Error ? err.message : String(err));
    } finally {
      setTemplatePreviewUploading(false);
    }
  }

  function materialFromAsset(asset: Asset, existing: PromptMaterial[], preferredLabel?: string): PromptMaterial {
    const type = materialTypeForAsset(asset);
    const normalizedPreferredLabel = normalizeMaterialLabel(preferredLabel);
    return {
      id: asset.id,
      url: asset.url,
      type,
      role: "upload",
      label: normalizedPreferredLabel && materialTypeForLabel(normalizedPreferredLabel) === type
        ? normalizedPreferredLabel
        : nextMaterialLabel(type, existing),
      name: asset.name
    };
  }

  function removeMaterial(index: number) {
    setMaterials((items) => items.filter((_, itemIndex) => itemIndex !== index));
  }

  function insertToken(token?: string) {
    if (!token) return;
    insertAtCursor(token);
  }

  function insertAtCursor(text: string) {
    const textarea = promptRef.current;
    if (!textarea) {
      const joiner = prompt.endsWith("\n") || !prompt.trim() ? "" : "\n";
      setPrompt(`${prompt}${joiner}${text}`);
      return;
    }
    const start = textarea.selectionStart ?? prompt.length;
    const end = textarea.selectionEnd ?? prompt.length;
    const before = prompt.slice(0, start);
    const after = prompt.slice(end);
    const needsLeadingSpace = before.length > 0 && !/[\s，。；：、（(【\[]$/.test(before);
    const needsTrailingSpace = after.length > 0 && !/^[\s，。；：、）)】\]]/.test(after);
    const insertion = `${needsLeadingSpace ? " " : ""}${text}${needsTrailingSpace ? " " : ""}`;
    const nextPrompt = `${before}${insertion}${after}`;
    const nextCursor = before.length + insertion.length;
    setPrompt(nextPrompt);
    window.requestAnimationFrame(() => {
      textarea.focus();
      textarea.setSelectionRange(nextCursor, nextCursor);
    });
  }

  function applyImageTemplate(template: ImageTemplate) {
    if (activeTemplateId === template.id) {
      clearImageTemplateSelection();
      return;
    }
    if (!templateRestoreState) {
      setTemplateRestoreState({
        mode: generateMode,
        imagePrompt: promptByMode.image,
        imageSize,
        imageEngine,
        jimengInfluence,
        evolinkQuality
      });
    }
    applyTemplateToConsole(template, `已应用模板：${template.name}`);
  }

  function clearImageTemplateSelection() {
    const snapshot = templateRestoreState;
    setActiveTemplateId(null);
    setTemplateRestoreState(null);
    setMaterialDraft(null);
    setMentionState(null);
    setPromptScrollTop(0);
    setError(null);
    if (snapshot) {
      setMode(snapshot.mode);
      setPromptByMode((items) => ({ ...items, image: snapshot.imagePrompt }));
      setImageSize(snapshot.imageSize);
      setImageEngine(snapshot.imageEngine);
      setJimengInfluence(snapshot.jimengInfluence);
      setEvolinkQuality(snapshot.evolinkQuality);
    } else {
      setPromptByMode((items) => ({ ...items, image: "" }));
      setImageSize(imageSizePresets[0]);
      setImageEngine("jimeng");
      setJimengInfluence(jimengInfluenceOptions[1].id);
      setEvolinkQuality(evolinkQualityOptions[1].id);
    }
    setNotice("已取消模板选择");
  }

  function applyTemplateToConsole(template: ImageTemplate, message: string) {
    setMode("image");
    setPromptByMode((items) => ({ ...items, image: template.prompt }));
    setActiveTemplateId(template.id);
    setMaterialDraft(null);
    const templateEngine = normalizeImageEngine(template.settings.engine);
    if (templateEngine) setImageEngine(templateEngine);
    const preset = imageSizePresets.find((item) => item.width === template.settings.width && item.height === template.settings.height);
    if (preset) setImageSize(preset);
    const templateInfluence = jimengInfluenceOptions.find((option) => option.scale === template.settings.scale);
    if (templateInfluence) setJimengInfluence(templateInfluence.id);
    const templateQuality = evolinkQualityOptions.find((option) => option.quality === template.settings.quality);
    if (templateQuality) setEvolinkQuality(templateQuality.id);
    setMentionState(null);
    setPromptScrollTop(0);
    setNotice(message);
    setError(null);
  }

  function resetTemplateForm() {
    setTemplateForm(defaultTemplateFormForEngine(imageEngine));
    setEditingTemplateId(null);
    setTemplateError(null);
    setMaterialDraft(null);
    setTemplatePromptScrollTop(0);
  }

  function openTemplateCreator() {
    resetTemplateForm();
    setTemplateEditorOpen(true);
  }

  function openTemplateEditor(template: ImageTemplate) {
    setTemplateForm(formFromTemplate(template));
    setEditingTemplateId(template.id);
    setTemplateError(null);
    setMaterialDraft(null);
    setTemplatePromptScrollTop(0);
    setTemplateEditorOpen(true);
  }

  function closeTemplateEditor() {
    setTemplateEditorOpen(false);
    setEditingTemplateId(null);
    setTemplateError(null);
    setMaterialDraft(null);
    setTemplatePromptScrollTop(0);
  }

  async function saveTemplate() {
    const isEditing = Boolean(editingTemplateId);
    const endpoint = editingTemplateId ? `/api/image-templates/${encodeURIComponent(editingTemplateId)}` : "/api/image-templates";
    setTemplateSaving(true);
    setTemplateError(null);
    try {
      const response = await fetch(endpoint, {
        method: isEditing ? "PATCH" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(templatePayloadFromForm(templateForm))
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "保存模板失败");
      const saved = payload.template as ImageTemplate;
      setImageTemplates((items) => {
        const rest = items.filter((item) => item.id !== saved.id);
        return [...rest, saved].sort(sortTemplates);
      });
      setTemplateForm(formFromTemplate(saved));
      setEditingTemplateId(null);
      setTemplateEditorOpen(false);
      applyTemplateToConsole(saved, isEditing ? "模板已更新并应用。" : "模板已保存并应用。");
    } catch (err) {
      setTemplateError(err instanceof Error ? err.message : String(err));
    } finally {
      setTemplateSaving(false);
    }
  }

  function insertTemplatePlaceholder(type: MaterialKind) {
    const placeholders = extractMaterialPlaceholders(templateForm.prompt).filter((placeholder) => placeholder.type === type);
    const nextIndex = placeholders.reduce((max, placeholder) => Math.max(max, placeholder.index), 0) + 1;
    const token = labelFor(type, nextIndex);
    const textarea = templatePromptRef.current;
    const value = templateForm.prompt;
    if (!textarea) {
      const joiner = value.endsWith("\n") || !value.trim() ? "" : " ";
      setTemplateForm((form) => ({ ...form, prompt: `${value}${joiner}${token} ` }));
      return;
    }
    const start = textarea.selectionStart ?? value.length;
    const end = textarea.selectionEnd ?? value.length;
    const before = value.slice(0, start);
    const after = value.slice(end);
    const needsLeadingSpace = before.length > 0 && !/[\s，。；：、（(【\[]$/.test(before);
    const insertion = `${needsLeadingSpace ? " " : ""}${token} `;
    const nextPrompt = `${before}${insertion}${after}`;
    const nextCursor = before.length + insertion.length;
    setTemplateForm((form) => ({ ...form, prompt: nextPrompt }));
    window.requestAnimationFrame(() => {
      textarea.focus();
      textarea.setSelectionRange(nextCursor, nextCursor);
    });
  }

  function startMaterialDraft(target: MaterialDraftTarget, index: number) {
    setMentionState(null);
    setMaterialDraft({ target, index, query: "", activeIndex: null });
  }

  function updateMaterialDraftQuery(value: string) {
    setMaterialDraft((draft) => draft ? { ...draft, query: value.replace(/^@+/, ""), activeIndex: null } : draft);
  }

  function confirmMaterialDraft(option?: MaterialDraftOption) {
    if (!materialDraft) return;
    const sourcePrompt = materialDraft.target === "template" ? templateForm.prompt : prompt;
    const token = option?.token || normalizeMaterialDraftToken(materialDraft.query, sourcePrompt);
    if (!token) return;
    const next = insertMaterialDraftToken(sourcePrompt, materialDraft.index, token);
    const target = materialDraft.target;
    setMaterialDraft(null);
    setMentionState(null);
    if (target === "template") {
      setTemplateForm((form) => ({ ...form, prompt: next.text }));
      window.requestAnimationFrame(() => {
        templatePromptRef.current?.focus();
        templatePromptRef.current?.setSelectionRange(next.cursor, next.cursor);
      });
      return;
    }
    setPrompt(next.text);
    window.requestAnimationFrame(() => {
      promptRef.current?.focus();
      promptRef.current?.setSelectionRange(next.cursor, next.cursor);
    });
  }

  function handleMaterialDraftKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (!materialDraft) return;
    if (event.key === "Escape") {
      event.preventDefault();
      const target = materialDraft.target;
      setMaterialDraft(null);
      window.requestAnimationFrame(() => {
        (target === "template" ? templatePromptRef.current : promptRef.current)?.focus();
      });
      return;
    }
    if (event.key === "ArrowDown" && materialDraftOptions.length) {
      event.preventDefault();
      setMaterialDraft((draft) => draft ? { ...draft, activeIndex: draft.activeIndex === null ? 0 : (draft.activeIndex + 1) % materialDraftOptions.length } : draft);
      return;
    }
    if (event.key === "ArrowUp" && materialDraftOptions.length) {
      event.preventDefault();
      setMaterialDraft((draft) => draft ? { ...draft, activeIndex: draft.activeIndex === null ? materialDraftOptions.length - 1 : (draft.activeIndex - 1 + materialDraftOptions.length) % materialDraftOptions.length } : draft);
      return;
    }
    if (event.key === "Enter" || event.key === "Tab") {
      event.preventDefault();
      confirmMaterialDraft(materialDraftOptions[materialDraft.activeIndex ?? 0]);
    }
  }

  function handleTemplatePromptInput(value: string, cursor: number) {
    const draft = detectMaterialDraftStart(templateForm.prompt, value, cursor);
    if (draft) {
      setTemplateForm((form) => ({ ...form, prompt: draft.text }));
      startMaterialDraft("template", draft.index);
      return;
    }
    setTemplateForm((form) => ({ ...form, prompt: value }));
  }

  function selectMention(material: PromptMaterial) {
    if (!material.label) return;
    const textarea = promptRef.current;
    const end = textarea?.selectionStart ?? prompt.length;
    const start = mentionState?.start ?? end;
    const before = prompt.slice(0, start);
    const after = prompt.slice(end);
    const needsTrailingSpace = after.length > 0 && !/^[\s，。；：、）)】\]]/.test(after);
    const insertion = `${material.label}${needsTrailingSpace ? " " : ""}`;
    const nextPrompt = `${before}${insertion}${after}`;
    const nextCursor = before.length + insertion.length;
    setPrompt(nextPrompt);
    setMentionState(null);
    window.requestAnimationFrame(() => {
      textarea?.focus();
      textarea?.setSelectionRange(nextCursor, nextCursor);
    });
  }

  function handlePromptKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
    if (!mentionState) return;
    if (event.key === "Escape") {
      setMentionState(null);
      return;
    }
    if (!mentionSuggestions.length) return;
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActiveMentionIndex((index) => index === null ? 0 : (index + 1) % mentionSuggestions.length);
    }
    if (event.key === "ArrowUp") {
      event.preventDefault();
      setActiveMentionIndex((index) => index === null ? mentionSuggestions.length - 1 : (index - 1 + mentionSuggestions.length) % mentionSuggestions.length);
    }
    if (event.key === "Enter" || event.key === "Tab") {
      event.preventDefault();
      selectMention(mentionSuggestions[activeMentionIndex ?? 0] || mentionSuggestions[0]);
    }
  }

  async function submit() {
    if (isImageEditMode) return;
    if (missingMaterialPlaceholders.length) {
      setError(`请先上传 ${missingMaterialPlaceholders.map((placeholder) => placeholder.token).join("、")}。`);
      return;
    }
    setBusy(true);
    setError(null);
    setNotice(null);
    try {
      const endpoint = generateMode === "image" ? "/api/generations/image" : "/api/generations/video";
      if (generateMode === "video" && videoEngine === "bailian") {
        const imageCount = materials.filter((material) => material.type === "image").length;
        if (imageCount < 1 || imageCount > 2 || materials.some((material) => material.type !== "image")) {
          throw new Error("百炼图生视频请上传 1 张首帧图，或按顺序上传 2 张首尾帧图。");
        }
      }
      const body = generateMode === "image"
        ? {
            capability: "image.generate",
            engine: imageEngine,
            prompt,
            materials: materials.filter((material) => material.type === "image"),
            width: imageSize.width,
            height: imageSize.height,
            ...(imageEngine === "evolink"
              ? { quality: selectedEvolinkQuality.quality }
              : { scale: selectedJimengInfluence.scale }),
            force_single: true
          }
        : {
            engine: videoEngine,
            prompt,
            materials,
            settings: {
              ...(videoEngine === "seedance" ? { ratio: videoRatio } : {}),
              duration: videoDuration,
              resolution: videoEngine === "bailian" ? videoResolution.toUpperCase() : videoResolution
            }
          };
      const response = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "提交生成失败");
      const submittedJob = payload.job as GenerationJob | undefined;
      if (submittedJob?.id) {
        setRecentJobs((items) => [submittedJob, ...items.filter((item) => item.id !== submittedJob.id)].sort((a, b) => b.createdAt.localeCompare(a.createdAt)));
      }
      void loadTaskModuleData(() => true, { silent: true });
      setNotice(`${generateMode === "image" ? "图片" : "视频"}生成已提交。任务已进入「结果」，生成完成后结果资产会自动保留。`);
      setPrompt("");
      setActiveTemplateId(null);
      setMaterials([]);
      setMaterialPage(1);
      setMentionState(null);
      setPromptScrollTop(0);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  }

  function renderCreateModeBar() {
    return (
      <div className="create-mode-bar">
        <div className="segmented mode-switch" aria-label="创作类型">
          <button type="button" className={clsx(mode === "image" && "active")} aria-pressed={mode === "image"} onClick={() => setMode("image")}>
            <ImagePlus size={17} />
            图片
          </button>
          <button type="button" className={clsx(mode === "video" && "active")} aria-pressed={mode === "video"} onClick={() => setMode("video")}>
            <Film size={17} />
            视频
          </button>
          <button type="button" className={clsx(mode === "inpaint" && "active")} aria-pressed={mode === "inpaint"} onClick={() => setMode("inpaint")}>
            <Paintbrush size={17} />
            局部重绘
          </button>
          <button type="button" className={clsx(mode === "upscale" && "active")} aria-pressed={mode === "upscale"} onClick={() => setMode("upscale")}>
            <ImageUp size={17} />
            智能超清
          </button>
        </div>
        {!isImageEditMode ? (
          <div className="toolbar create-actions">
            <button
              className="button primary create-submit-button"
              type="button"
              disabled={submitDisabled}
              onClick={submit}
              aria-label={generateMode === "image" ? "生成图片" : "生成视频"}
              title={submitTitle}
            >
              {busy ? <Loader2 className="spin" size={18} /> : <Send size={18} />}
              <span className="create-submit-label">{generateMode === "image" ? "生成图片" : "生成视频"}</span>
            </button>
          </div>
        ) : null}
      </div>
    );
  }

  return (
    <div className={clsx("create-studio", isImageEditMode && "enhance-studio")} ref={studioRef}>
      {isImageEditMode ? (
        <div className="create-workbench-layout" ref={(node) => { modePanelRef.current = node; }} data-animate>
          <section className="panel create-workbench-panel">
            {renderCreateModeBar()}
            <ImageEditor initialMode={mode} hideModeSwitch />
          </section>
        </div>
      ) : (
        <div className="create-workbench-layout with-template-column" ref={(node) => { modePanelRef.current = node; }} data-animate>
          <aside className="panel image-template-column" aria-label="模板选择">
            <div className="image-template-rail-head">
              <h2>模板选择</h2>
              {templatesLoading ? <Loader2 className="spin" size={16} /> : null}
            </div>
            <button className="button template-add-button" type="button" onClick={openTemplateCreator} disabled={templateSaving}>
              <Plus size={16} />
              添加模板
            </button>
            {templateError && !templateEditorOpen ? <div className="callout compact-callout" role="alert">{templateError}</div> : null}
            <div className="image-template-rail-list">
              {imageTemplates.length ? (
                imageTemplates.map((template) => (
                  <article
                    className={clsx("image-template-rail-card", activeTemplateId === template.id && "active")}
                    key={template.id}
                    title={template.name}
                  >
                    <button
                      className="image-template-preview-button"
                      type="button"
                      title="放大预览"
                      aria-label={`放大预览 ${template.name}`}
                      onClick={() => setPreviewTemplate(template)}
                    >
                      {renderImageTemplatePreview(template)}
                    </button>
                    <div className="image-template-card-footer">
                      <div className="image-template-card-copy">
                        <strong>{template.name}</strong>
                      </div>
                      <button
                        className="image-template-edit-button"
                        type="button"
                        title="编辑模板"
                        aria-label={`编辑模板 ${template.name}`}
                        onClick={() => openTemplateEditor(template)}
                      >
                        <Pencil size={14} />
                      </button>
                      <button
                        className="image-template-select-button"
                        type="button"
                        onClick={() => applyImageTemplate(template)}
                        title={`选择模板 ${template.name}`}
                        aria-pressed={activeTemplateId === template.id}
                      >
                        {activeTemplateId === template.id ? <Check size={14} /> : <Plus size={14} />}
                        {activeTemplateId === template.id ? "取消选择" : "选择模板"}
                      </button>
                    </div>
                  </article>
                ))
              ) : !templatesLoading && !templateError ? (
                <div className="template-empty compact">暂无模板</div>
              ) : null}
            </div>
          </aside>
          <section className="panel create-workbench-panel create-center-panel">
            <div className="create-center-head">
              <h2>制作中心</h2>
              {renderCreateModeBar()}
            </div>
            <div className="create-workbench-grid">
              <div className="create-main-column">

        {error || notice ? (
          <div className="studio-messages top-studio-messages" ref={feedbackRef}>
            {error ? <div className="callout" role="alert">{error}</div> : null}
            {notice ? <div className="callout success-callout" role="status" aria-live="polite">{notice}</div> : null}
          </div>
        ) : null}

        <div className="field prompt-field">
          <div className="prompt-label-row">
            <label htmlFor="createPrompt">{generateMode === "image" ? "图片提示词" : "视频提示词"}</label>
            <label className="icon-button prompt-upload-button" title="上传素材" aria-label="上传素材">
              {uploading ? <Loader2 className="spin" size={18} /> : <Upload size={18} />}
              <input
                type="file"
                multiple
                accept={materialUploadAccept}
                onChange={(event) => {
                  void uploadFiles(event.target.files);
                  event.currentTarget.value = "";
                }}
              />
            </label>
          </div>
          <div className="prompt-editor-wrap">
            <div className="prompt-token-layer" aria-hidden="true">
              <div style={{ transform: `translateY(-${promptScrollTop}px)` }}>
                {renderPromptTokenLayer(prompt, materials)}
              </div>
            </div>
            <textarea
              id="createPrompt"
              ref={promptRef}
              value={prompt}
              onChange={(event) => {
                handlePromptInput(event.target.value, event.target.selectionStart);
              }}
              onInput={(event) => handlePromptInput(event.currentTarget.value, event.currentTarget.selectionStart)}
              onClick={(event) => updateMention(event.currentTarget.value, event.currentTarget.selectionStart)}
              onKeyDown={handlePromptKeyDown}
              onKeyUp={(event) => updateMention(event.currentTarget.value, event.currentTarget.selectionStart)}
              onScroll={(event) => setPromptScrollTop(event.currentTarget.scrollTop)}
              placeholder="输入营销内容提示词，键入 @ 选择已上传素材"
            />
            {materialDraft?.target === "prompt" ? renderMaterialDraftPanel(
              materialDraft,
              materialDraftOptions,
              materialDraftInputRef,
              updateMaterialDraftQuery,
              handleMaterialDraftKeyDown,
              confirmMaterialDraft
            ) : null}
            {!materialDraft && mentionState && mentionSuggestions.length ? (
              <div className="mention-popover">
                {mentionSuggestions.map((material, index) => (
                  <button
                    className={clsx("mention-option", index === activeMentionIndex && "active")}
                    type="button"
                    key={`${material.label}-${material.url}`}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      selectMention(material);
                    }}
                  >
                    {renderMaterialPreview(material, "tiny")}
                    <span className="chip-token">{material.label}</span>
                    <span className="chip-name">{material.name || material.url}</span>
                    <span className="mention-kind">{shortTypeName(material.type)}</span>
                  </button>
                ))}
              </div>
            ) : null}
          </div>

          {missingMaterialPlaceholders.length ? (
            <div className="material-placeholder-board" aria-label="待上传模板素材">
              {missingMaterialPlaceholders.map((placeholder) => (
                <label className={clsx("material-placeholder-card", placeholder.type, uploading && "uploading")} key={placeholder.token} title={`上传${placeholder.token}`}>
                  <span className="material-placeholder-icon" aria-hidden="true">
                    {uploading ? <Loader2 className="spin" size={18} /> : <Upload size={18} />}
                  </span>
                  <span className="material-placeholder-copy">
                    <span className="chip-token">{placeholder.token}</span>
                    <span className="material-placeholder-state">待上传{shortTypeName(placeholder.type)}</span>
                  </span>
                  <input
                    type="file"
                    accept={acceptForMaterialKind(placeholder.type)}
                    disabled={uploading}
                    onChange={(event) => {
                      void uploadFiles(event.target.files, { targetLabel: placeholder.token, expectedType: placeholder.type });
                      event.currentTarget.value = "";
                    }}
                  />
                </label>
              ))}
            </div>
          ) : null}

          {materials.length ? (
            <>
              <div className="material-board prompt-material-board" aria-label="已上传素材" ref={materialBoardRef}>
                {visibleMaterials.map((material, index) => (
                  <article
                    className={clsx("material-card", material.type, materialIsReferenced(material, referencedMaterialLabels) ? "referenced" : "missing")}
                    key={`${material.url}-${materialPageOffset + index}`}
                  >
                    <button
                      className="material-card-main"
                      type="button"
                      title={`${material.label || ""} ${material.name || material.url}`}
                      onClick={() => insertToken(material.label)}
                    >
                      {renderMaterialPreview(material, "large")}
                      <span className="material-card-copy">
                        <span className="material-card-head">
                          <span className="chip-token">{material.label}</span>
                          <span className="material-state">{materialIsReferenced(material, referencedMaterialLabels) ? "已引用" : "未引用"}</span>
                        </span>
                        <span className="chip-name">{material.name || material.url}</span>
                      </span>
                    </button>
                    <button
                      className="material-remove"
                      type="button"
                      title="移除素材"
                      onClick={(event) => {
                        event.stopPropagation();
                        removeMaterial(materialPageOffset + index);
                      }}
                    >
                      <X size={14} aria-hidden="true" />
                    </button>
                  </article>
                ))}
              </div>
              <Pagination page={materialPage} pageSize={MATERIAL_PAGE_SIZE} total={materials.length} label="素材分页" onPageChange={setMaterialPage} />
            </>
          ) : null}
        </div>

        <div className="inline-settings">
          {generateMode === "image" ? (
            <>
              <div className="field inline-field">
                <label htmlFor="imageEngine">生图引擎</label>
                <select id="imageEngine" value={imageEngine} onChange={(event) => setImageEngine(normalizeImageEngine(event.target.value) || "jimeng")}>
                  <option value="jimeng">即梦</option>
                  <option value="evolink">Image2</option>
                  <option value="bailian">阿里云百炼</option>
                </select>
              </div>
              <div className="field inline-field">
                <label htmlFor="imageSize">画幅</label>
                <select
                  id="imageSize"
                  value={imageSize.label}
                  onChange={(event) => setImageSize(imageSizePresets.find((item) => item.label === event.target.value) || imageSizePresets[0])}
                >
                  {imageSizePresets.map((preset) => <option key={preset.label}>{preset.label}</option>)}
                </select>
              </div>
              <div className="field inline-field">
                <label htmlFor="imageEngineTuning">{imageEngine === "evolink" ? "生成质量" : imageEngine === "bailian" ? "生成模式" : "文本影响"}</label>
                {imageEngine === "evolink" ? (
                  <select id="imageEngineTuning" value={evolinkQuality} onChange={(event) => setEvolinkQuality(event.target.value)}>
                    {evolinkQualityOptions.map((option) => <option key={option.id} value={option.id}>{option.label}</option>)}
                  </select>
                ) : imageEngine === "bailian" ? (
                  <select id="imageEngineTuning" value="thinking" disabled><option value="thinking">智能推理</option></select>
                ) : (
                  <select id="imageEngineTuning" value={jimengInfluence} onChange={(event) => setJimengInfluence(event.target.value)}>
                    {jimengInfluenceOptions.map((option) => <option key={option.id} value={option.id}>{option.label}</option>)}
                  </select>
                )}
              </div>
            </>
          ) : (
            <>
              <div className="field inline-field">
                <label htmlFor="videoEngine">视频引擎</label>
                <select id="videoEngine" value={videoEngine} onChange={(event) => setVideoEngine(event.target.value === "bailian" ? "bailian" : "seedance")}>
                  <option value="seedance">Seedance</option>
                  <option value="bailian">阿里云百炼</option>
                </select>
              </div>
              {videoEngine === "seedance" ? (
              <div className="field inline-field">
                <label htmlFor="videoRatio">比例</label>
                <select id="videoRatio" value={videoRatio} onChange={(event) => setVideoRatio(event.target.value)}>
                  {VIDEO_RATIOS.map((ratio) => (
                    <option key={ratio} value={ratio}>{ratio === "adaptive" ? "自适应" : ratio}</option>
                  ))}
                </select>
              </div>
              ) : null}
              <div className="field inline-field">
                <label htmlFor="videoDuration">时长</label>
                <select
                  id="videoDuration"
                  value={videoDuration}
                  onChange={(event) => setVideoDuration(clampVideoDuration(event.target.value, videoDuration, { allowAuto: false }))}
                >
                  {(videoEngine === "bailian" ? Array.from({ length: 14 }, (_, index) => index + 2) : VIDEO_DURATION_OPTIONS).map((seconds) => <option key={seconds} value={seconds}>{seconds} 秒</option>)}
                </select>
              </div>
              <div className="field inline-field">
                <label htmlFor="videoResolution">清晰度</label>
                <select id="videoResolution" value={videoResolution} onChange={(event) => setVideoResolution(event.target.value)}>
                  {(videoEngine === "bailian" ? ["720p", "1080p"] : VIDEO_RESOLUTIONS).map((resolution) => <option key={resolution} value={resolution}>{resolution}</option>)}
                </select>
              </div>
            </>
          )}
            </div>
          </div>
          {templateEditorOpen ? (
            <div className="template-editor-backdrop" role="dialog" aria-modal="true" aria-label={editingTemplateId ? "编辑模板" : "添加模板"}>
              <div className="template-editor-dialog">
                <div className="template-editor-head">
                  <div className="template-editor-title">
                    <span className="template-editor-mark" aria-hidden="true">
                      <ImagePlus size={18} />
                    </span>
                    <h2>{editingTemplateId ? "编辑模板" : "添加模板"}</h2>
                  </div>
                  <button
                    className="icon-button"
                    type="button"
                    title="关闭"
                    aria-label="关闭"
                    onClick={closeTemplateEditor}
                    disabled={templateSaving}
                  >
                    <X size={16} />
                  </button>
                </div>
                {templateError ? <div className="callout compact-callout" role="alert">{templateError}</div> : null}
                <div className="template-editor-body">
                  <aside className="template-editor-preview-pane">
                    <div className="template-preview-pane-head">
                      <span>效果预览图</span>
                      <span className={clsx("template-required-pill", templateForm.previewImageUrl && "complete")}>
                        {templateForm.previewImageUrl ? "已上传" : "必填"}
                      </span>
                    </div>
                    <label className={clsx("template-preview-uploader", templateForm.previewImageUrl && "has-image", templatePreviewUploading && "uploading")}>
                      <span className="template-preview-uploader-media" aria-hidden="true">
                        {templatePreviewUploading ? <Loader2 className="spin" size={22} /> : templateForm.previewImageUrl ? <img src={templateForm.previewImageUrl} alt="" /> : <Upload size={22} />}
                      </span>
                      <span>{templateForm.previewImageUrl ? "重新上传" : "点击上传"}</span>
                      <input
                        type="file"
                        accept={templatePreviewAccept}
                        disabled={templatePreviewUploading}
                        onChange={(event) => {
                          void uploadTemplatePreview(event.target.files);
                          event.currentTarget.value = "";
                        }}
                      />
                    </label>
                    <div className="template-preview-meta" aria-label="模板参数预览">
                      <span>{imageEngineLabel(templateForm.engine)}</span>
                      <span>{templateForm.engine === "evolink" ? selectedTemplateEvolinkQuality.label : selectedTemplateJimengInfluence.label}</span>
                      <span>{templateForm.size}</span>
                    </div>
                  </aside>
                  <div className="template-inline-form template-editor-form">
                    <label className="field">
                      <span>模板名称</span>
                      <input value={templateForm.name} onChange={(event) => setTemplateForm((form) => ({ ...form, name: event.target.value }))} />
                    </label>
                    <div className="field template-engine-field">
                      <span>生图引擎</span>
                      <div className="segmented template-engine-choice" aria-label="生图引擎">
                        <button
                          type="button"
                          className={clsx(templateForm.engine === "jimeng" && "active")}
                          aria-pressed={templateForm.engine === "jimeng"}
                          onClick={() => setTemplateForm((form) => ({ ...form, engine: "jimeng" }))}
                        >
                          即梦
                        </button>
                        <button
                          type="button"
                          className={clsx(templateForm.engine === "evolink" && "active")}
                          aria-pressed={templateForm.engine === "evolink"}
                          onClick={() => setTemplateForm((form) => ({ ...form, engine: "evolink" }))}
                        >
                          Image2
                        </button>
                      </div>
                    </div>
                    <label className="field">
                      <span>{templateForm.engine === "evolink" ? "生成质量" : "文本影响"}</span>
                      {templateForm.engine === "evolink" ? (
                        <select value={templateForm.evolinkQuality} onChange={(event) => setTemplateForm((form) => ({ ...form, evolinkQuality: event.target.value }))}>
                          {evolinkQualityOptions.map((option) => <option key={option.id} value={option.id}>{option.label}</option>)}
                        </select>
                      ) : (
                        <select value={templateForm.jimengInfluence} onChange={(event) => setTemplateForm((form) => ({ ...form, jimengInfluence: event.target.value }))}>
                          {jimengInfluenceOptions.map((option) => <option key={option.id} value={option.id}>{option.label}</option>)}
                        </select>
                      )}
                    </label>
                    <label className="field">
                      <span>画幅</span>
                      <select value={templateForm.size} onChange={(event) => setTemplateForm((form) => ({ ...form, size: event.target.value }))}>
                        {imageSizePresets.map((preset) => <option value={preset.label} key={preset.label}>{preset.label}</option>)}
                      </select>
                    </label>
                    <label className="field">
                      <span>排序</span>
                      <input type="number" value={templateForm.sortOrder} onChange={(event) => setTemplateForm((form) => ({ ...form, sortOrder: event.target.value }))} />
                    </label>
                    <label className="field template-prompt-field">
                      <span>预设提示词</span>
                      <div className="template-placeholder-tools" aria-label="插入占位符">
                        <button type="button" onClick={() => insertTemplatePlaceholder("image")}>
                          <Plus size={13} />
                          图片
                        </button>
                        <button type="button" onClick={() => insertTemplatePlaceholder("video")}>
                          <Plus size={13} />
                          视频
                        </button>
                        <button type="button" onClick={() => insertTemplatePlaceholder("audio")}>
                          <Plus size={13} />
                          音频
                        </button>
                      </div>
                      <div className="prompt-editor-wrap template-prompt-editor-wrap">
                        <div className="prompt-token-layer" aria-hidden="true">
                          <div style={{ transform: `translateY(-${templatePromptScrollTop}px)` }}>
                            {renderPromptTokenLayer(templateForm.prompt, [])}
                          </div>
                        </div>
                        <textarea
                          ref={templatePromptRef}
                          value={templateForm.prompt}
                          onChange={(event) => handleTemplatePromptInput(event.target.value, event.target.selectionStart)}
                          onInput={(event) => handleTemplatePromptInput(event.currentTarget.value, event.currentTarget.selectionStart)}
                          onScroll={(event) => setTemplatePromptScrollTop(event.currentTarget.scrollTop)}
                          rows={7}
                          placeholder="例如：以 @图片1 为主体，生成干净高级的商品主视觉"
                        />
                        {materialDraft?.target === "template" ? renderMaterialDraftPanel(
                          materialDraft,
                          materialDraftOptions,
                          materialDraftInputRef,
                          updateMaterialDraftQuery,
                          handleMaterialDraftKeyDown,
                          confirmMaterialDraft
                        ) : null}
                      </div>
                    </label>
                    {templateFormPlaceholders.length ? (
                      <div className="template-placeholder-strip" aria-label="模板占位符">
                        {templateFormPlaceholders.map((placeholder) => (
                          <span className="template-placeholder-chip" key={placeholder.token}>
                            {placeholder.token}
                          </span>
                        ))}
                      </div>
                    ) : null}
                  </div>
                </div>
                <div className="template-editor-actions">
                  <button className="button" type="button" onClick={closeTemplateEditor} disabled={templateSaving}>
                    取消
                  </button>
                  <button className="button primary" type="button" onClick={() => void saveTemplate()} disabled={templateSaving || templatePreviewUploading || !templateFormReady}>
                    {templateSaving ? <Loader2 className="spin" size={18} /> : <Save size={18} />}
                    {editingTemplateId ? "保存修改" : "保存模板"}
                  </button>
                </div>
              </div>
            </div>
          ) : null}
          {previewTemplate ? (
            <div className="template-preview-backdrop" role="dialog" aria-modal="true" aria-label="模板预览">
              <div className="template-preview-dialog">
                <div className="template-preview-dialog-head">
                  <h2>{previewTemplate.name}</h2>
                  <button className="icon-button" type="button" title="关闭" aria-label="关闭" onClick={() => setPreviewTemplate(null)}>
                    <X size={16} />
                  </button>
                </div>
                <div className="template-preview-dialog-media">
                  {previewTemplate.previewImageUrl ? <img src={previewTemplate.previewImageUrl} alt="" /> : <ImagePlus size={40} />}
                </div>
                <div className="template-preview-dialog-actions">
                  {previewTemplate.previewImageUrl ? (
                    <a className="button" href={previewTemplate.previewImageUrl} download>
                      <Download size={16} />
                      下载图片
                    </a>
                  ) : null}
                  <button className="button" type="button" onClick={() => {
                    const template = previewTemplate;
                    setPreviewTemplate(null);
                    openTemplateEditor(template);
                  }}>
                    <Pencil size={16} />
                    编辑模板
                  </button>
                  <button className="button primary" type="button" onClick={() => {
                    applyImageTemplate(previewTemplate);
                    setPreviewTemplate(null);
                  }}>
                    选择模板
                  </button>
                </div>
              </div>
            </div>
          ) : null}
          {previewTaskAsset ? (
            <div className="asset-preview-backdrop" role="presentation" onMouseDown={() => setPreviewTaskAsset(null)}>
              <div className="asset-preview-dialog task-preview-dialog" role="dialog" aria-modal="true" aria-label={`预览 ${previewTaskAsset.name}`} onMouseDown={(event) => event.stopPropagation()}>
                <div className="asset-preview-head">
                  <div>
                    <strong>{previewTaskAsset.name}</strong>
                    <span className="muted compact-hint">任务生成资产</span>
                  </div>
                  <div className="asset-preview-actions">
                    <a className="icon-button" href={assetDownloadUrl(previewTaskAsset)} title="下载" aria-label={`下载 ${previewTaskAsset.name}`}>
                      <Download size={18} />
                    </a>
                    <button className="icon-button" type="button" title="关闭预览" aria-label="关闭预览" onClick={() => setPreviewTaskAsset(null)}>
                      <X size={18} />
                    </button>
                  </div>
                </div>
                <div className="asset-preview-media">
                  {renderTaskAssetPreviewLarge(previewTaskAsset)}
                </div>
              </div>
            </div>
          ) : null}
            </div>
          </section>
          <aside className="panel create-task-column" aria-label="任务模块">
            <div className="create-task-head">
              <div>
                <h2>任务模块</h2>
                <span>{recentJobs.length ? `${recentJobs.length} 个任务` : "任务列表"}</span>
              </div>
              <button
                className="icon-button"
                type="button"
                title="刷新任务"
                aria-label="刷新任务"
                onClick={() => void loadTaskModuleData()}
                disabled={tasksLoading}
              >
                {tasksLoading ? <Loader2 className="spin" size={16} /> : <RefreshCw size={16} />}
              </button>
            </div>
            {tasksError ? <div className="callout compact-callout" role="alert">{tasksError}</div> : null}
            <div className="create-task-list">
              {recentJobs.map((job) => (
                <article className="create-task-card" key={job.id}>
                  {renderTaskThumbnail(job, taskAssetById, setPreviewTaskAsset)}
                  <div className="create-task-body">
                    <h3 title={taskName(job)}>{taskName(job)}</h3>
                    <div className="create-task-meta">
                      <span className={`status ${job.status}`}>{statusLabel(job.status)}</span>
                      <span>{durationLabel(job, durationNow)}</span>
                    </div>
                  </div>
                  <a className="button mini-button create-task-link" href={taskDetailHref(job)}>
                    <ExternalLink size={14} />
                    查看详情
                  </a>
                </article>
              ))}
              {!recentJobs.length && !tasksLoading && !tasksError ? (
                <div className="template-empty compact">暂无任务</div>
              ) : null}
            </div>
          </aside>
        </div>
      )}
    </div>
  );
}

function renderTaskThumbnail(job: GenerationJob, assetById: Map<string, Asset>, onPreview: (asset: Asset) => void) {
  const asset = job.outputAssetIds.map((assetId) => assetById.get(assetId)).find((item): item is Asset => Boolean(item));
  if (!asset) {
    return (
      <div className={clsx("create-task-thumb create-task-thumb-placeholder", isPendingTask(job) && "generating")} aria-hidden="true">
        {isPendingTask(job) ? <Loader2 className="spin" size={18} /> : <ImageIcon size={18} />}
        <span>{isPendingTask(job) ? "生成中" : "无结果"}</span>
      </div>
    );
  }
  const isVideo = asset.kind === "video" || materialTypeForAsset(asset) === "video";
  const isPreviewable = !isVideo;
  const media = isVideo
    ? <video src={asset.url} muted playsInline preload="metadata" />
    : <img src={asset.url} alt="" />;
  if (isPreviewable) {
    return (
      <button className="create-task-thumb create-task-thumb-button" type="button" onClick={() => onPreview(asset)} aria-label={`查看大图 ${asset.name}`}>
        {media}
      </button>
    );
  }
  return <div className="create-task-thumb" aria-hidden="true">{media}</div>;
}

function renderTaskAssetPreviewLarge(asset: Asset) {
  if (asset.kind === "video" || materialTypeForAsset(asset) === "video") {
    return <video src={asset.url} controls playsInline />;
  }
  return <img src={asset.url} alt={asset.name} />;
}

function assetDownloadUrl(asset: Asset) {
  return `/api/assets/${encodeURIComponent(asset.id)}/download`;
}

function isPendingTask(job: GenerationJob) {
  return job.status === "queued" || job.status === "running";
}

function taskName(job: GenerationJob) {
  const text = job.prompt?.trim();
  return text ? text : capabilityLabel(job.capability);
}

function taskDetailHref(job: GenerationJob) {
  return `/assets?view=tasks&taskId=${encodeURIComponent(job.id)}`;
}

function statusLabel(status: GenerationJob["status"]) {
  if (status === "queued") return "排队中";
  if (status === "running") return "生成中";
  if (status === "succeeded") return "已完成";
  if (status === "failed") return "失败";
  if (status === "expired") return "已过期";
  if (status === "cancelled") return "已取消";
  return status;
}

function isTerminalStatus(status: GenerationJob["status"]) {
  return status === "succeeded" || status === "failed" || status === "expired" || status === "cancelled";
}

function capabilityLabel(capability?: GenerationJob["capability"]) {
  if (capability === "image.generate") return "图片生成";
  if (capability === "image.inpaint") return "局部重绘";
  if (capability === "image.upscale") return "智能超清";
  if (capability === "video.generate") return "视频生成";
  return "生成任务";
}

function durationLabel(job: GenerationJob, now: number) {
  const terminal = isTerminalStatus(job.status);
  return `${terminal ? "耗时" : "已耗时"} ${durationValue(job, now)}`;
}

function durationValue(job: GenerationJob, now: number) {
  const start = new Date(job.createdAt).getTime();
  const terminal = isTerminalStatus(job.status);
  const end = terminal ? new Date(job.updatedAt).getTime() : now;
  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return "--";
  return formatDuration(end - start);
}

function formatDuration(ms: number) {
  const totalSeconds = Math.max(0, Math.round(ms / 1000));
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  if (hours) return `${hours}小时${minutes}分`;
  if (minutes) return `${minutes}分${seconds}秒`;
  return `${seconds}秒`;
}

function renderMaterialPreview(material: PromptMaterial, size: "normal" | "tiny" | "large" = "normal") {
  return (
    <span className={clsx("material-preview", size, material.type)} aria-hidden="true">
      {material.type === "image" ? <img src={material.url} alt="" /> : null}
      {material.type === "video" ? <video src={material.url} muted playsInline preload="metadata" /> : null}
      {material.type === "audio" ? <Music size={size === "tiny" ? 13 : size === "large" ? 20 : 15} /> : null}
    </span>
  );
}

function formFromTemplate(template: ImageTemplate): TemplateForm {
  const engine = normalizeImageEngine(template.settings.engine) || "jimeng";
  const jimengInfluence = jimengInfluenceOptions.find((option) => option.scale === template.settings.scale)?.id || jimengInfluenceOptions[1].id;
  const evolinkQuality = evolinkQualityOptions.find((option) => option.quality === template.settings.quality)?.id || evolinkQualityOptions[1].id;
  return {
    name: template.name,
    prompt: template.prompt,
    previewImageUrl: template.previewImageUrl || "",
    engine,
    jimengInfluence,
    evolinkQuality,
    size: sizeLabelFromSettings(template.settings.width, template.settings.height),
    sortOrder: String(template.sortOrder ?? 0)
  };
}

function templatePayloadFromForm(form: TemplateForm) {
  const size = imageSizePresets.find((preset) => preset.label === form.size) || imageSizePresets[0];
  const selectedInfluence = jimengInfluenceOptions.find((option) => option.id === form.jimengInfluence) || jimengInfluenceOptions[1];
  const selectedQuality = evolinkQualityOptions.find((option) => option.id === form.evolinkQuality) || evolinkQualityOptions[1];
  return {
    name: form.name,
    prompt: form.prompt,
    previewImageUrl: form.previewImageUrl,
    settings: {
      engine: form.engine,
      width: size.width,
      height: size.height,
      forceSingle: true,
      ...(form.engine === "evolink"
        ? { quality: selectedQuality.quality }
        : { scale: selectedInfluence.scale })
    },
    sortOrder: Number(form.sortOrder || 0)
  };
}

function defaultTemplateFormForEngine(engine: ImageGenerateEngine): TemplateForm {
  return {
    ...defaultTemplateForm,
    engine,
    jimengInfluence: jimengInfluenceOptions[1].id,
    evolinkQuality: evolinkQualityOptions[1].id
  };
}

function sizeLabelFromSettings(width?: number, height?: number) {
  return imageSizePresets.find((preset) => preset.width === width && preset.height === height)?.label || imageSizePresets[0].label;
}

function normalizeImageEngine(value?: string): ImageGenerateEngine | undefined {
  if (value === "jimeng" || value === "evolink" || value === "bailian") return value;
  return undefined;
}

function imageEngineLabel(engine: ImageGenerateEngine) {
  return engine === "evolink" ? "Image2" : engine === "bailian" ? "百炼" : "即梦";
}

function sortTemplates(a: ImageTemplate, b: ImageTemplate) {
  const order = (a.sortOrder || 0) - (b.sortOrder || 0);
  if (order !== 0) return order;
  return (b.updatedAt || "").localeCompare(a.updatedAt || "");
}

function renderImageTemplatePreview(template: ImageTemplate) {
  return (
    <span className="image-template-preview" aria-hidden="true">
      {template.previewImageUrl ? <img src={template.previewImageUrl} alt="" /> : <ImagePlus size={22} />}
    </span>
  );
}

function renderMaterialDraftPanel(
  draft: MaterialDraftState,
  options: MaterialDraftOption[],
  inputRef: RefObject<HTMLInputElement | null>,
  onQueryChange: (value: string) => void,
  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void,
  onConfirm: (option?: MaterialDraftOption) => void
) {
  return (
    <div className="material-draft-panel" role="group" aria-label="素材占位输入">
      <div className="material-draft-entry">
        <span className="material-draft-prefix" aria-hidden="true">@</span>
        <input
          ref={inputRef}
          value={draft.query}
          onChange={(event) => onQueryChange(event.target.value)}
          onKeyDown={onKeyDown}
          placeholder="图片1 / 视频1 / 音频1"
          aria-label="素材占位名称"
        />
        <button className="material-draft-confirm" type="button" onMouseDown={(event) => event.preventDefault()} onClick={() => onConfirm(options[draft.activeIndex ?? 0])}>
          确定
        </button>
      </div>
      {options.length ? (
        <div className="material-draft-options" aria-label="素材占位候选">
          {options.map((option, index) => (
            <button
              className={clsx("material-draft-option", index === (draft.activeIndex ?? 0) && "active")}
              type="button"
              key={`${option.token}-${option.caption}`}
              onMouseDown={(event) => event.preventDefault()}
              onClick={() => onConfirm(option)}
            >
              <span className="chip-token">{option.token}</span>
              <span>{option.label}</span>
              <span>{option.caption}</span>
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}

function materialTypeForAsset(asset: Asset): MaterialKind {
  const contentType = typeof asset.metadata.contentType === "string" ? asset.metadata.contentType.toLowerCase() : "";
  const url = asset.url.toLowerCase();
  if (asset.kind === "video" || contentType.startsWith("video/") || /\.(mp4|mov|webm)(\?|$)/.test(url)) return "video";
  if (contentType.startsWith("audio/") || /\.(mp3|wav|m4a|aac|flac)(\?|$)/.test(url)) return "audio";
  return "image";
}

function fileMatchesMaterialKind(file: File, type: MaterialKind): boolean {
  const contentType = file.type.toLowerCase();
  const name = file.name.toLowerCase();
  if (type === "image") return contentType.startsWith("image/") || /\.(png|jpe?g|webp|gif|avif)(\?|$)/.test(name);
  if (type === "video") return contentType.startsWith("video/") || /\.(mp4|mov|webm)(\?|$)/.test(name);
  return contentType.startsWith("audio/") || /\.(mp3|wav|m4a|aac|flac)(\?|$)/.test(name);
}

function acceptForMaterialKind(type: MaterialKind): string {
  if (type === "video") return "video/*";
  if (type === "audio") return "audio/*";
  return "image/*";
}

function labelFor(type: MaterialKind, index: number): string {
  if (type === "video") return `@视频${index}`;
  if (type === "audio") return `@音频${index}`;
  return `@图片${index}`;
}

function nextMaterialLabel(type: MaterialKind, existing: PromptMaterial[]): string {
  const used = new Set(existing.map((material) => normalizeMaterialLabel(material.label)).filter((label): label is string => Boolean(label)));
  let index = 1;
  while (used.has(labelFor(type, index))) index += 1;
  return labelFor(type, index);
}

function normalizeMaterialLabel(label?: string): string | undefined {
  const match = label?.trim().match(/^@(图片|图|视频|音频)(\d+)$/);
  if (!match) return undefined;
  const type = match[1] === "视频" ? "video" : match[1] === "音频" ? "audio" : "image";
  return labelFor(type, Number(match[2]));
}

function materialTypeForLabel(label: string): MaterialKind | undefined {
  const normalized = normalizeMaterialLabel(label);
  if (!normalized) return undefined;
  if (normalized.startsWith("@视频")) return "video";
  if (normalized.startsWith("@音频")) return "audio";
  return "image";
}

function materialIsReferenced(material: PromptMaterial, referencedLabels: Set<string>): boolean {
  const label = normalizeMaterialLabel(material.label);
  return Boolean(label && referencedLabels.has(label));
}

function findMentionAtCursor(value: string, cursor: number): MentionState | null {
  const beforeCursor = value.slice(0, cursor);
  const start = beforeCursor.lastIndexOf("@");
  if (start === -1) return null;
  const query = beforeCursor.slice(start + 1);
  if (query.length > 16 || /[\s\n\r，。；：、,.!?！？()[\]{}<>《》"'“”]/.test(query)) return null;
  if (/^(图片|图|视频|音频)\d*$/.test(query)) return null;
  return { start, query };
}

function materialMatchesMention(material: PromptMaterial, query: string): boolean {
  const normalizedQuery = normalizeMentionText(query);
  if (!normalizedQuery) return true;
  return [
    material.label,
    material.label?.replace(/^@/, ""),
    material.name,
    shortTypeName(material.type),
    material.type
  ].filter(Boolean).some((value) => normalizeMentionText(String(value)).includes(normalizedQuery));
}

function buildMaterialDraftOptions(input: { target: MaterialDraftTarget; query: string; prompt: string; materials: PromptMaterial[] }): MaterialDraftOption[] {
  const options: MaterialDraftOption[] = [];
  if (input.target === "prompt") {
    for (const material of input.materials) {
      const token = normalizeMaterialLabel(material.label);
      if (!token || !materialMatchesMention(material, input.query)) continue;
      options.push({
        token,
        label: material.name || token,
        caption: shortTypeName(material.type),
        type: material.type
      });
      if (options.length >= 5) break;
    }
  }

  for (const type of ["image", "video", "audio"] as MaterialDraftKind[]) {
    const token = nextMaterialDraftToken(type, input.prompt);
    const option = {
      token,
      label: `${shortTypeName(type)}占位`,
      caption: input.target === "template" ? "模板素材" : "待上传素材",
      type
    };
    if (materialDraftOptionMatches(option, input.query)) options.push(option);
  }

  return uniqueMaterialDraftOptions(options).slice(0, 8);
}

function materialDraftOptionMatches(option: MaterialDraftOption, query: string): boolean {
  const normalizedQuery = normalizeMentionText(query);
  if (!normalizedQuery) return true;
  return [option.token, option.token.replace(/^@/, ""), option.label, option.caption, shortTypeName(option.type), option.type]
    .some((value) => normalizeMentionText(value).includes(normalizedQuery));
}

function uniqueMaterialDraftOptions(options: MaterialDraftOption[]): MaterialDraftOption[] {
  const seen = new Set<string>();
  return options.filter((option) => {
    if (seen.has(option.token)) return false;
    seen.add(option.token);
    return true;
  });
}

function normalizeMentionText(value: string): string {
  return value.replace(/^@/, "").trim().toLowerCase();
}

function renderPromptTokenLayer(prompt: string, materials: PromptMaterial[]) {
  const materialByLabel = new Map(materials.map((material) => [normalizeMaterialLabel(material.label) || material.label, material]));
  const nodes: ReactNode[] = [];
  let cursor = 0;
  for (const match of prompt.matchAll(/@(图片|图|视频|音频)(\d+)/g)) {
    const index = match.index ?? 0;
    if (index > cursor) nodes.push(prompt.slice(cursor, index));
    const token = match[1] === "图" ? `@图片${match[2]}` : match[0];
    const material = materialByLabel.get(token);
    nodes.push(
      <span className={clsx("prompt-token-card", material ? "linked" : "unbound")} key={`${token}-${index}`}>
        {token}
      </span>
    );
    cursor = index + match[0].length;
  }
  if (cursor < prompt.length) nodes.push(prompt.slice(cursor));
  return nodes.length ? nodes : prompt;
}

function shortTypeName(type: MaterialKind) {
  if (type === "video") return "视频";
  if (type === "audio") return "音频";
  return "图片";
}