"use client";

import {
  useEffect,
  useMemo,
  useRef,
  useState,
  type ChangeEvent,
  type KeyboardEvent,
  type PointerEvent as ReactPointerEvent
} from "react";
import {
  ArrowDown,
  ArrowUp,
  Check,
  Download,
  Eye,
  EyeOff,
  ImagePlus,
  Loader2,
  Move,
  Pencil,
  Plus,
  RefreshCw,
  RotateCcw,
  RotateCw,
  Search,
  Trash2,
  Upload,
  X
} from "lucide-react";
import clsx from "clsx";

import { assetContentUrl, assetPreviewUrl } from "@/lib/client/asset-urls";
import { waitForJobOutputAssets } from "@/lib/client/generation-result-sync";
import { downloadSeedreamLayerComposition } from "@/lib/client/seedream-layer-compose";
import { downloadFilesAsZip } from "@/lib/client/zip-download";
import type {
  SeedreamCompositionLayer,
  SeedreamLayerBox,
  SeedreamLayerComposition,
  SeedreamLayerDraft,
  SeedreamLayerSource
} from "@/lib/seedream/layer-composition";
import type { Asset, GenerationJob } from "@/lib/types";

export type SeedreamLayerOutput = {
  asset: Asset;
  zIndex: number;
  name: string;
  description?: string;
  size?: [number, number];
  boundingBox?: {
    absolute?: SeedreamLayerBox;
    normalized?: SeedreamLayerBox;
  };
};

type SaveState = "loading" | "saved" | "dirty" | "saving" | "error";

type LayerInteraction = {
  id: string;
  mode: "move" | "resize" | "rotate";
  pointerId: number;
  startX: number;
  startY: number;
  startBox: SeedreamLayerBox;
  startRotation: number;
  startPointerAngle?: number;
};

type EditDialogState = {
  layerId: string;
  prompt: string;
  phase: "idle" | "submitting" | "polling" | "ready";
  job?: GenerationJob;
  result?: Asset;
  error?: string;
};

const baseSelectionID = "__seedream_base__";
const fullLayerBox: SeedreamLayerBox = [0, 0, 1000, 1000];

export function SeedreamLayerResultViewer({
  jobId,
  outputs,
  assetLibrary
}: {
  jobId: string;
  outputs: SeedreamLayerOutput[];
  assetLibrary: Asset[];
}) {
  const ordered = useMemo(() => [...outputs].sort((left, right) => left.zIndex - right.zIndex), [outputs]);
  const base = (ordered.find((output) => output.zIndex === 0) || ordered[0]) as SeedreamLayerOutput;
  const providerLayers = useMemo(() => ordered.filter((output) => output !== base), [base, ordered]);
  const baseSize: [number, number] = base.size || [1, 1];
  const outputSignature = `${jobId}:${ordered.map((output) => [output.asset.id, output.zIndex, output.size, output.boundingBox?.normalized, output.boundingBox?.absolute].join(":"))}`;
  const assetLibrarySignature = assetLibrary.map((asset) => `${asset.id}:${asset.updatedAt}`).join("|");
  const initialDraft = useMemo(() => initialLayerDraft(base, providerLayers, baseSize), [base, baseSize, providerLayers]);
  const [draft, setDraft] = useState<SeedreamLayerDraft>(initialDraft);
  const [assetCache, setAssetCache] = useState<Map<string, Asset>>(() => assetMap([...assetLibrary, ...ordered.map((output) => output.asset)]));
  const [selectedId, setSelectedId] = useState<string>(providerLayers[0] ? `provider-${providerLayers[0].asset.id}` : baseSelectionID);
  const [interaction, setInteraction] = useState<LayerInteraction | null>(null);
  const [saveState, setSaveState] = useState<SaveState>("loading");
  const [saveError, setSaveError] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [actionNotice, setActionNotice] = useState<string | null>(null);
  const [libraryOpen, setLibraryOpen] = useState(false);
  const [libraryQuery, setLibraryQuery] = useState("");
  const [uploading, setUploading] = useState(false);
  const [zipDownloading, setZipDownloading] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [editDialog, setEditDialog] = useState<EditDialogState | null>(null);
  const previewRef = useRef<HTMLDivElement>(null);
  const uploadInputRef = useRef<HTMLInputElement>(null);
  const editAbortRef = useRef<AbortController | null>(null);
  const hydratedRef = useRef(false);
  const draftRef = useRef(draft);
  const versionRef = useRef(0);
  const lastSavedRef = useRef(serializeDraft(initialDraft));
  const savingRef = useRef(false);
  const pendingSaveRef = useRef(false);

  const selectedLayer = draft.layers.find((layer) => layer.id === selectedId);
  const baseAsset = assetCache.get(draft.baseAssetId) || base.asset;
  const displayLayers = draft.layers;
  const listLayers = [...displayLayers].reverse();
  const previewMaximumWidth = Math.max(1, 560 * baseSize[0] / baseSize[1]);
  const currentSerializedDraft = serializeDraft(draft);
  const libraryAssets = useMemo(() => {
    const query = libraryQuery.trim().toLocaleLowerCase();
    return [...assetCache.values()]
      .filter((asset) => isLayerAsset(asset) && asset.id !== draft.baseAssetId)
      .filter((asset) => !query || `${asset.name} ${asset.tags.join(" ")}`.toLocaleLowerCase().includes(query))
      .sort((left, right) => right.createdAt.localeCompare(left.createdAt))
      .slice(0, 80);
  }, [assetCache, draft.baseAssetId, libraryQuery]);

  useEffect(() => {
    setAssetCache((current) => assetMap([...current.values(), ...assetLibrary, ...ordered.map((output) => output.asset)]));
  }, [assetLibrarySignature, outputSignature]);

  useEffect(() => {
    let active = true;
    hydratedRef.current = false;
    setSaveState("loading");
    setSaveError(null);
    setActionError(null);
    setActionNotice(null);
    setInteraction(null);
    setLibraryOpen(false);
    setEditDialog(null);
    editAbortRef.current?.abort();

    async function load() {
      try {
        const [compositionResponse, assetsResponse] = await Promise.all([
          fetch(`/api/layer-compositions/${encodeURIComponent(jobId)}`, { cache: "no-store" }),
          fetch("/api/assets", { cache: "no-store" })
        ]);
        const compositionPayload = await readJSON(compositionResponse);
        if (!compositionResponse.ok) throw new Error(payloadError(compositionPayload, "读取图层工程失败"));
        const assetsPayload = assetsResponse.ok ? await readJSON(assetsResponse) : {};
        if (!active) return;
        const loadedAssets = Array.isArray(assetsPayload.assets) ? assetsPayload.assets as Asset[] : [];
        setAssetCache((current) => assetMap([...current.values(), ...loadedAssets, ...ordered.map((output) => output.asset)]));
        let composition = isLayerComposition(compositionPayload.composition)
          ? compositionPayload.composition
          : null;
        if (!composition) {
          let initializeResponse = await putLayerComposition(jobId, 0, initialDraft);
          if (initializeResponse.status === 409) {
            initializeResponse = await fetch(`/api/layer-compositions/${encodeURIComponent(jobId)}`, { cache: "no-store" });
          }
          const initializePayload = await readJSON(initializeResponse);
          if (!initializeResponse.ok) throw new Error(payloadError(initializePayload, "初始化图层工程失败"));
          if (!isLayerComposition(initializePayload.composition)) throw new Error("初始化图层工程返回数据不完整");
          composition = initializePayload.composition;
        }
        const nextDraft = composition ? draftFromComposition(composition) : initialDraft;
        versionRef.current = composition?.version || 0;
        draftRef.current = nextDraft;
        lastSavedRef.current = serializeDraft(nextDraft);
        setDraft(nextDraft);
        setSelectedId(nextDraft.layers[0]?.id || baseSelectionID);
        setSaveState("saved");
      } catch (error) {
        if (!active) return;
        draftRef.current = initialDraft;
        lastSavedRef.current = "";
        versionRef.current = 0;
        setDraft(initialDraft);
        setSelectedId(initialDraft.layers[0]?.id || baseSelectionID);
        setSaveState("error");
        setSaveError(errorMessage(error, "读取图层工程失败；当前仍可临时编辑"));
      } finally {
        if (active) hydratedRef.current = true;
      }
    }

    void load();
    return () => {
      active = false;
      editAbortRef.current?.abort();
    };
  }, [jobId, outputSignature]);

  useEffect(() => {
    draftRef.current = draft;
    if (!hydratedRef.current || currentSerializedDraft === lastSavedRef.current) return;
    setSaveState((current) => current === "saving" ? current : "dirty");
    const timer = window.setTimeout(() => void saveCurrentDraft(), 650);
    return () => window.clearTimeout(timer);
  }, [currentSerializedDraft, jobId]);

  useEffect(() => {
    return () => {
      if (!hydratedRef.current || serializeDraft(draftRef.current) === lastSavedRef.current) return;
      if (savingRef.current) {
        pendingSaveRef.current = true;
        return;
      }
      const pending = draftRef.current;
      void fetch(`/api/layer-compositions/${encodeURIComponent(jobId)}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ version: versionRef.current, ...pending }),
        keepalive: true
      }).catch(() => undefined);
    };
  }, [jobId]);

  async function saveCurrentDraft() {
    if (!hydratedRef.current) return;
    if (savingRef.current) {
      pendingSaveRef.current = true;
      return;
    }
    const target = draftRef.current;
    const targetSerialized = serializeDraft(target);
    if (targetSerialized === lastSavedRef.current) {
      setSaveState("saved");
      return;
    }
    savingRef.current = true;
    pendingSaveRef.current = false;
    let savedSuccessfully = false;
    setSaveState("saving");
    setSaveError(null);
    try {
      let response = await putLayerComposition(jobId, versionRef.current, target);
      if (response.status === 409) {
        const latest = await fetch(`/api/layer-compositions/${encodeURIComponent(jobId)}`, { cache: "no-store" });
        const latestPayload = await readJSON(latest);
        if (!latest.ok) throw new Error(payloadError(latestPayload, "同步图层工程版本失败"));
        versionRef.current = isLayerComposition(latestPayload.composition) ? latestPayload.composition.version : 0;
        response = await putLayerComposition(jobId, versionRef.current, target);
      }
      const payload = await readJSON(response);
      if (!response.ok) throw new Error(payloadError(payload, "保存图层工程失败"));
      if (!isLayerComposition(payload.composition)) throw new Error("保存图层工程返回数据不完整");
      versionRef.current = payload.composition.version;
      lastSavedRef.current = targetSerialized;
      savedSuccessfully = true;
      setSaveState("saved");
    } catch (error) {
      setSaveState("error");
      setSaveError(errorMessage(error, "保存图层工程失败"));
    } finally {
      savingRef.current = false;
      if (savedSuccessfully && (pendingSaveRef.current || serializeDraft(draftRef.current) !== lastSavedRef.current)) {
        pendingSaveRef.current = false;
        window.setTimeout(() => void saveCurrentDraft(), 120);
      }
    }
  }

  function updateDraft(updater: (current: SeedreamLayerDraft) => SeedreamLayerDraft) {
    setDraft((current) => {
      const next = updater(current);
      draftRef.current = next;
      return next;
    });
  }

  function updateLayer(id: string, updater: (layer: SeedreamCompositionLayer) => SeedreamCompositionLayer) {
    updateDraft((current) => ({
      ...current,
      layers: current.layers.map((layer) => layer.id === id ? updater(layer) : layer)
    }));
  }

  function toggleVisibility(id: string) {
    if (id === baseSelectionID) {
      updateDraft((current) => ({ ...current, baseVisible: !current.baseVisible }));
      return;
    }
    updateLayer(id, (layer) => ({ ...layer, visible: !layer.visible }));
  }

  function reorderLayer(id: string, direction: -1 | 1) {
    updateDraft((current) => {
      const index = current.layers.findIndex((layer) => layer.id === id);
      const nextIndex = index + direction;
      if (index < 0 || nextIndex < 0 || nextIndex >= current.layers.length) return current;
      const layers = [...current.layers];
      [layers[index], layers[nextIndex]] = [layers[nextIndex], layers[index]];
      return { ...current, layers };
    });
  }

  function scaleLayer(id: string, factor: number) {
    updateLayer(id, (layer) => ({ ...layer, box: scaleLayerBox(layer.box, factor) }));
  }

  function rotateLayer(id: string, delta: number) {
    updateLayer(id, (layer) => ({ ...layer, rotation: normalizeRotation(layer.rotation + delta) }));
  }

  function resetLayout() {
    const providerBoxes = new Map(providerLayers.map((output, index) => [output.asset.id, initialLayerBox(output, baseSize, index)]));
    updateDraft((current) => ({
      ...current,
      baseVisible: true,
      layers: current.layers.map((layer) => ({
        ...layer,
        visible: true,
        rotation: 0,
        box: providerBoxes.get(layer.assetId) || centeredLayerBox()
      }))
    }));
    setInteraction(null);
    setActionError(null);
    setActionNotice("已重置当前图层布局，新增图层仍会保留。");
  }

  function removeLayer(id: string) {
    const layer = draft.layers.find((item) => item.id === id);
    if (!layer) return;
    updateDraft((current) => ({ ...current, layers: current.layers.filter((item) => item.id !== id) }));
    setSelectedId(baseSelectionID);
    setActionNotice(`已从工程移除“${layer.name}”，原素材仍保留在素材库。`);
  }

  function startInteraction(event: ReactPointerEvent<HTMLElement>, layer: SeedreamCompositionLayer, mode: LayerInteraction["mode"]) {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    setSelectedId(layer.id);
    let startPointerAngle: number | undefined;
    if (mode === "rotate" && previewRef.current) {
      const bounds = previewRef.current.getBoundingClientRect();
      const centerX = bounds.left + ((layer.box[0] + layer.box[2]) / 2000) * bounds.width;
      const centerY = bounds.top + ((layer.box[1] + layer.box[3]) / 2000) * bounds.height;
      startPointerAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
    }
    setInteraction({
      id: layer.id,
      mode,
      pointerId: event.pointerId,
      startX: event.clientX,
      startY: event.clientY,
      startBox: layer.box,
      startRotation: layer.rotation,
      startPointerAngle
    });
  }

  function continueInteraction(event: ReactPointerEvent<HTMLDivElement>) {
    if (!interaction || interaction.pointerId !== event.pointerId || !previewRef.current) return;
    event.preventDefault();
    const bounds = previewRef.current.getBoundingClientRect();
    if (!bounds.width || !bounds.height) return;
    if (interaction.mode === "rotate") {
      const centerX = bounds.left + ((interaction.startBox[0] + interaction.startBox[2]) / 2000) * bounds.width;
      const centerY = bounds.top + ((interaction.startBox[1] + interaction.startBox[3]) / 2000) * bounds.height;
      const pointerAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
      const delta = (pointerAngle - (interaction.startPointerAngle || 0)) * 180 / Math.PI;
      updateLayer(interaction.id, (layer) => ({ ...layer, rotation: normalizeRotation(interaction.startRotation + delta) }));
      return;
    }
    const deltaX = (event.clientX - interaction.startX) / bounds.width * 1000;
    const deltaY = (event.clientY - interaction.startY) / bounds.height * 1000;
    const box = interaction.mode === "move"
      ? moveLayerBox(interaction.startBox, deltaX, deltaY)
      : resizeLayerBox(interaction.startBox, deltaX, deltaY);
    updateLayer(interaction.id, (layer) => ({ ...layer, box }));
  }

  function finishInteraction(event: ReactPointerEvent<HTMLDivElement>) {
    if (interaction?.pointerId === event.pointerId) setInteraction(null);
  }

  function handleLayerKeyDown(event: KeyboardEvent<HTMLButtonElement>, id: string) {
    const direction = event.key === "ArrowLeft"
      ? [-1, 0]
      : event.key === "ArrowRight"
        ? [1, 0]
        : event.key === "ArrowUp"
          ? [0, -1]
          : event.key === "ArrowDown"
            ? [0, 1]
            : null;
    if (!direction) return;
    event.preventDefault();
    const step = event.shiftKey ? 50 : 10;
    updateLayer(id, (layer) => ({ ...layer, box: moveLayerBox(layer.box, direction[0] * step, direction[1] * step) }));
  }

  async function exportComposition() {
    setExporting(true);
    setActionError(null);
    try {
      await downloadSeedreamLayerComposition({
        width: baseSize[0],
        height: baseSize[1],
        fileName: `seedream-composition-${jobId}.png`,
        items: [
          { url: assetContentUrl(baseAsset), visible: draft.baseVisible, box: fullLayerBox, rotation: 0 },
          ...draft.layers.map((layer) => {
            const asset = assetCache.get(layer.assetId);
            return asset ? { url: assetContentUrl(asset), visible: layer.visible, box: layer.box, rotation: layer.rotation } : null;
          }).filter((item): item is { url: string; visible: boolean; box: SeedreamLayerBox; rotation: number } => Boolean(item))
        ]
      });
    } catch (error) {
      setActionError(errorMessage(error, "导出合成图片失败"));
    } finally {
      setExporting(false);
    }
  }

  async function downloadAll() {
    setZipDownloading(true);
    setActionError(null);
    try {
      const items = [
        { asset: baseAsset, name: `00-底图-${baseAsset.name}` },
        ...draft.layers.map((layer, index) => ({ asset: assetCache.get(layer.assetId), name: `${String(index + 1).padStart(2, "0")}-${layer.name}` }))
      ].filter((item): item is { asset: Asset; name: string } => Boolean(item.asset));
      await downloadFilesAsZip(items.map((item) => ({ name: safeDownloadName(item.name, item.asset.name), url: assetContentUrl(item.asset) })), `seedream-layer-project-${jobId}.zip`);
    } catch (error) {
      setActionError(errorMessage(error, "打包下载失败"));
    } finally {
      setZipDownloading(false);
    }
  }

  async function handleLayerUpload(event: ChangeEvent<HTMLInputElement>) {
    const files = Array.from(event.target.files || []);
    event.target.value = "";
    if (!files.length) return;
    if (files.some((file) => !file.type.startsWith("image/"))) {
      setActionError("新增图层只支持图片文件。");
      return;
    }
    setUploading(true);
    setActionError(null);
    try {
      const formData = new FormData();
      files.forEach((file) => formData.append("files", file));
      const response = await fetch("/api/assets/upload", { method: "POST", body: formData });
      const payload = await readJSON(response);
      if (!response.ok) throw new Error(payloadError(payload, "上传图层失败"));
      const uploaded = Array.isArray(payload.assets) ? payload.assets as Asset[] : [];
      if (!uploaded.length) throw new Error("上传成功，但没有返回可用图片素材");
      setAssetCache((current) => assetMap([...current.values(), ...uploaded]));
      const additions = await Promise.all(uploaded.map((asset) => layerFromAsset(asset, "upload", baseSize)));
      updateDraft((current) => ({ ...current, layers: [...current.layers, ...additions] }));
      setSelectedId(additions[additions.length - 1].id);
      setLibraryOpen(false);
      setActionNotice(`已新增 ${additions.length} 个图层。`);
    } catch (error) {
      setActionError(errorMessage(error, "上传图层失败"));
    } finally {
      setUploading(false);
    }
  }

  async function addLibraryAsset(asset: Asset) {
    setActionError(null);
    const layer = await layerFromAsset(asset, "library", baseSize);
    updateDraft((current) => ({ ...current, layers: [...current.layers, layer] }));
    setSelectedId(layer.id);
    setLibraryOpen(false);
    setActionNotice(`已把“${asset.name}”加入图层工程。`);
  }

  function openLayerEdit(layer: SeedreamCompositionLayer) {
    setActionError(null);
    setEditDialog({ layerId: layer.id, prompt: "", phase: "idle" });
  }

  async function submitLayerEdit() {
    if (!editDialog) return;
    const layer = draftRef.current.layers.find((item) => item.id === editDialog.layerId);
    const asset = layer ? assetCache.get(layer.assetId) : undefined;
    const instruction = editDialog.prompt.trim();
    if (!layer || !asset) {
      setEditDialog((current) => current ? { ...current, error: "当前图层素材不存在" } : current);
      return;
    }
    if (!instruction) {
      setEditDialog((current) => current ? { ...current, error: "请先填写编辑指令" } : current);
      return;
    }
    const controller = new AbortController();
    editAbortRef.current?.abort();
    editAbortRef.current = controller;
    setEditDialog((current) => current ? { ...current, phase: "submitting", error: undefined, result: undefined, job: undefined } : current);
    try {
      const response = await fetch("/api/generations/image", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          capability: "image.generate",
          engine: "seedream",
          prompt: `请编辑 @图片1：${instruction}`,
          materials: [{ id: asset.id, url: asset.url, name: asset.name, label: "@图片1", type: "image" }],
          settings: {
            size: "1.5K",
            outputFormat: "png",
            optimizeMode: "standard",
            imageCount: 1,
            creationMode: "interactive"
          }
        }),
        signal: controller.signal
      });
      const payload = await readJSON(response);
      if (!response.ok) throw new Error(payloadError(payload, "提交图层编辑失败"));
      const submitted = payload.job as GenerationJob | undefined;
      if (!submitted?.id) throw new Error("图层编辑任务返回数据不完整");
      setEditDialog((current) => current ? { ...current, phase: "polling", job: submitted } : current);
      const completed = await waitForImageJob(submitted.id, controller.signal);
      if (completed.status !== "succeeded") throw new Error(completed.error?.message || "图层编辑失败");
      setEditDialog((current) => current ? { ...current, phase: "polling", job: completed } : current);
      await resolveLayerEditResult(completed, controller.signal);
    } catch (error) {
      if (controller.signal.aborted) return;
      setEditDialog((current) => current ? { ...current, phase: "idle", error: errorMessage(error, "图层编辑失败") } : current);
    }
  }

  async function retryLayerEditResultSync() {
    const job = editDialog?.job;
    if (!job?.id || job.status !== "succeeded") return;
    const controller = new AbortController();
    editAbortRef.current?.abort();
    editAbortRef.current = controller;
    setEditDialog((current) => current ? { ...current, phase: "polling", error: undefined } : current);
    try {
      await resolveLayerEditResult(job, controller.signal);
    } catch (error) {
      if (controller.signal.aborted) return;
      setEditDialog((current) => current ? { ...current, phase: "idle", error: errorMessage(error, "同步编辑结果失败") } : current);
    }
  }

  async function resolveLayerEditResult(job: GenerationJob, signal: AbortSignal) {
    const assets = await waitForJobOutputAssets(job, signal);
    const result = assets[0];
    if (!result) throw new Error("编辑任务已完成，但结果素材同步超时；请点击“重新同步结果”，不会重复计费");
    setAssetCache((current) => assetMap([...current.values(), ...assets]));
    setEditDialog((current) => current ? { ...current, phase: "ready", job, result, error: undefined } : current);
  }

  function applyEditResult(mode: "replace" | "add") {
    if (!editDialog?.result || !editDialog.job) return;
    const source = draftRef.current.layers.find((layer) => layer.id === editDialog.layerId);
    if (!source) return;
    if (mode === "replace") {
      updateLayer(source.id, (layer) => ({
        ...layer,
        assetId: editDialog.result!.id,
        source: "seedream-edit",
        editJobId: editDialog.job!.id,
        originalAssetId: layer.originalAssetId || layer.assetId
      }));
      setActionNotice(`已用即梦编辑结果替换“${source.name}”。`);
    } else {
      const addition: SeedreamCompositionLayer = {
        ...source,
        id: newLayerID(),
        assetId: editDialog.result.id,
        name: `${source.name} 编辑版`,
        source: "seedream-edit",
        editJobId: editDialog.job.id,
        originalAssetId: source.assetId
      };
      updateDraft((current) => {
        const index = current.layers.findIndex((layer) => layer.id === source.id);
        const layers = [...current.layers];
        layers.splice(index + 1, 0, addition);
        return { ...current, layers };
      });
      setSelectedId(addition.id);
      setActionNotice(`已把即梦编辑结果作为新图层加入工程。`);
    }
    setEditDialog(null);
  }

  const selectedAsset = selectedLayer ? assetCache.get(selectedLayer.assetId) : undefined;
  const editBusy = editDialog?.phase === "submitting" || editDialog?.phase === "polling";
  const canRetryEditResultSync = editDialog?.phase !== "ready" && editDialog?.job?.status === "succeeded" && !editDialog.result;

  return (
    <div className="seedream-layer-project">
      <div className="seedream-layer-project-status" aria-live="polite">
        <span className={clsx("seedream-layer-save-state", `is-${saveState}`)}>
          {saveState === "loading" || saveState === "saving" ? <Loader2 className="spin" size={12} /> : saveState === "saved" ? <Check size={12} /> : null}
          {saveStateLabel(saveState)}
        </span>
        {saveState === "error" ? <button type="button" onClick={() => void saveCurrentDraft()}>重试保存</button> : null}
        <small>图层位置、层级、显隐和旋转会保存到数据库</small>
      </div>

      <div className="seedream-layer-viewer">
        <div className="seedream-layer-preview-column">
          <div className="seedream-layer-editor-toolbar">
            <span><Move size={13} />拖动、缩放或旋转选中图层；方向键可微调</span>
            <div>
              <button className="button mini-button" type="button" disabled={!selectedLayer} onClick={() => selectedLayer && scaleLayer(selectedLayer.id, 0.9)}>缩小</button>
              <button className="button mini-button" type="button" disabled={!selectedLayer} onClick={() => selectedLayer && scaleLayer(selectedLayer.id, 1.1)}>放大</button>
              <button className="button mini-button icon-only" title="向左旋转 90°" aria-label="向左旋转 90°" type="button" disabled={!selectedLayer} onClick={() => selectedLayer && rotateLayer(selectedLayer.id, -90)}><RotateCcw size={13} /></button>
              <button className="button mini-button icon-only" title="向右旋转 90°" aria-label="向右旋转 90°" type="button" disabled={!selectedLayer} onClick={() => selectedLayer && rotateLayer(selectedLayer.id, 90)}><RotateCw size={13} /></button>
              <button className="button mini-button" type="button" onClick={resetLayout}><RotateCcw size={13} />重置布局</button>
            </div>
          </div>
          <div
            ref={previewRef}
            className={clsx("seedream-layer-preview", interaction && "is-editing")}
            style={{ aspectRatio: `${baseSize[0]} / ${baseSize[1]}`, width: `min(100%, ${previewMaximumWidth}px)` }}
            onPointerMove={continueInteraction}
            onPointerUp={finishInteraction}
            onPointerCancel={finishInteraction}
            onClick={() => setSelectedId(baseSelectionID)}
          >
            {draft.baseVisible ? <img className="seedream-layer-base" src={assetPreviewUrl(baseAsset)} alt={base.name} draggable={false} /> : null}
            {displayLayers.map((layer, stackIndex) => {
              const asset = assetCache.get(layer.assetId);
              if (!asset || !layer.visible) return null;
              return (
                <button
                  type="button"
                  key={layer.id}
                  className={clsx("seedream-layer-overlay", selectedId === layer.id && "selected")}
                  aria-label={`移动${layer.name}图层`}
                  style={{
                    left: `${layer.box[0] / 10}%`,
                    top: `${layer.box[1] / 10}%`,
                    width: `${(layer.box[2] - layer.box[0]) / 10}%`,
                    height: `${(layer.box[3] - layer.box[1]) / 10}%`,
                    zIndex: stackIndex + 1,
                    transform: `rotate(${layer.rotation}deg)`
                  }}
                  onPointerDown={(event) => startInteraction(event, layer, "move")}
                  onKeyDown={(event) => handleLayerKeyDown(event, layer.id)}
                  onClick={(event) => { event.stopPropagation(); setSelectedId(layer.id); }}
                >
                  <img src={assetPreviewUrl(asset)} alt="" draggable={false} />
                  <span className="seedream-layer-rotation-stem" aria-hidden="true" />
                  <span className="seedream-layer-rotation-handle" title="拖动旋转" aria-hidden="true" onPointerDown={(event) => startInteraction(event, layer, "rotate")}><RotateCw size={10} /></span>
                  <span className="seedream-layer-resize-handle" aria-hidden="true" onPointerDown={(event) => startInteraction(event, layer, "resize")} />
                </button>
              );
            })}
          </div>
          {selectedLayer ? (
            <div className="seedream-layer-inspector" aria-live="polite">
              <strong>{selectedLayer.name}</strong>
              <span>X {Math.round(selectedLayer.box[0] / 10)}%</span>
              <span>Y {Math.round(selectedLayer.box[1] / 10)}%</span>
              <span>宽 {Math.round((selectedLayer.box[2] - selectedLayer.box[0]) / 10)}%</span>
              <span>高 {Math.round((selectedLayer.box[3] - selectedLayer.box[1]) / 10)}%</span>
              <label>
                旋转
                <input type="number" min={-180} max={180} step={1} value={Math.round(selectedLayer.rotation)} onChange={(event) => updateLayer(selectedLayer.id, (layer) => ({ ...layer, rotation: normalizeRotation(Number(event.target.value) || 0) }))} />°
              </label>
            </div>
          ) : <div className="seedream-layer-inspector"><strong>底图</strong><span>固定在画布底部</span></div>}
          <div className="seedream-layer-preview-actions">
            <span>合成导出采用当前显隐、位置、尺寸、旋转和层级</span>
            <div>
              <button className="button mini-button" type="button" disabled={exporting} onClick={() => void exportComposition()}>
                {exporting ? <Loader2 className="spin" size={14} /> : <Download size={14} />}
                导出合成 PNG
              </button>
              <button className="button mini-button" type="button" disabled={zipDownloading} onClick={() => void downloadAll()}>
                {zipDownloading ? <Loader2 className="spin" size={14} /> : <Download size={14} />}
                工程素材 ZIP
              </button>
            </div>
          </div>
          {saveError ? <div className="seedream-layer-download-error" role="alert">{saveError}</div> : null}
          {actionError ? <div className="seedream-layer-download-error" role="alert">{actionError}</div> : null}
          {actionNotice ? <div className="seedream-layer-action-notice" role="status">{actionNotice}</div> : null}
        </div>

        <div className="seedream-layer-list-column">
          <div className="seedream-layer-list-head">
            <div><span>图层</span><small>上方图层优先显示</small></div>
            <button className="button mini-button" type="button" onClick={() => setLibraryOpen((open) => !open)}><Plus size={13} />添加图层</button>
          </div>
          {libraryOpen ? (
            <div className="seedream-layer-library">
              <div className="seedream-layer-library-actions">
                <button className="button mini-button primary" type="button" disabled={uploading} onClick={() => uploadInputRef.current?.click()}>
                  {uploading ? <Loader2 className="spin" size={13} /> : <Upload size={13} />}上传新图片
                </button>
                <label><Search size={13} /><input value={libraryQuery} onChange={(event) => setLibraryQuery(event.target.value)} placeholder="搜索素材库" /></label>
                <button className="icon-button" type="button" title="关闭素材库" aria-label="关闭素材库" onClick={() => setLibraryOpen(false)}><X size={14} /></button>
              </div>
              <input ref={uploadInputRef} type="file" accept="image/*" multiple hidden onChange={(event) => void handleLayerUpload(event)} />
              <div className="seedream-layer-library-grid">
                {libraryAssets.map((asset) => (
                  <button type="button" key={asset.id} onClick={() => void addLibraryAsset(asset)}>
                    <img src={assetPreviewUrl(asset)} alt="" />
                    <span title={asset.name}>{asset.name}</span>
                    <small><ImagePlus size={11} />加入</small>
                  </button>
                ))}
                {!libraryAssets.length ? <div className="seedream-layer-library-empty">暂无匹配图片，可直接上传新图片。</div> : null}
              </div>
            </div>
          ) : null}

          <div className="seedream-layer-list" aria-label="拆分图层列表">
            {listLayers.map((layer) => {
              const asset = assetCache.get(layer.assetId);
              const orderIndex = draft.layers.findIndex((item) => item.id === layer.id);
              return (
                <article
                  className={clsx(selectedId === layer.id && "active")}
                  key={layer.id}
                  tabIndex={0}
                  aria-current={selectedId === layer.id ? "true" : undefined}
                  onClick={() => setSelectedId(layer.id)}
                  onKeyDown={(event) => {
                    if (event.key === "Enter" || event.key === " ") {
                      event.preventDefault();
                      setSelectedId(layer.id);
                    }
                  }}
                >
                  <button className="seedream-layer-visibility" type="button" title={layer.visible ? "隐藏图层" : "显示图层"} aria-label={layer.visible ? `隐藏${layer.name}` : `显示${layer.name}`} onClick={(event) => { event.stopPropagation(); toggleVisibility(layer.id); }}>
                    {layer.visible ? <Eye size={15} /> : <EyeOff size={15} />}
                  </button>
                  <span className="seedream-layer-thumb">{asset ? <img src={assetPreviewUrl(asset)} alt="" /> : <ImagePlus size={15} />}</span>
                  <span className="seedream-layer-copy">
                    <strong>{layer.name}</strong>
                    <small>{layerSourceLabel(layer.source)} · {Math.round(layer.rotation)}°</small>
                  </span>
                  <span className="seedream-layer-order-actions">
                    <button type="button" title="上移一层" aria-label={`上移${layer.name}`} disabled={orderIndex === draft.layers.length - 1} onClick={(event) => { event.stopPropagation(); reorderLayer(layer.id, 1); }}><ArrowUp size={13} /></button>
                    <button type="button" title="下移一层" aria-label={`下移${layer.name}`} disabled={orderIndex === 0} onClick={(event) => { event.stopPropagation(); reorderLayer(layer.id, -1); }}><ArrowDown size={13} /></button>
                  </span>
                  <span className="seedream-layer-row-actions">
                    <button type="button" title="用即梦编辑此图层" aria-label={`用即梦编辑${layer.name}`} onClick={(event) => { event.stopPropagation(); openLayerEdit(layer); }}><Pencil size={13} /></button>
                    <button type="button" title="从工程移除" aria-label={`移除${layer.name}`} onClick={(event) => { event.stopPropagation(); removeLayer(layer.id); }}><Trash2 size={13} /></button>
                    {asset ? <a href={assetContentUrl(asset)} title={`下载 ${layer.name}`} aria-label={`下载 ${layer.name}`} onClick={(event) => event.stopPropagation()}><Download size={13} /></a> : null}
                  </span>
                </article>
              );
            })}
            <article className={clsx(selectedId === baseSelectionID && "active")} tabIndex={0} onClick={() => setSelectedId(baseSelectionID)}>
              <button className="seedream-layer-visibility" type="button" title={draft.baseVisible ? "隐藏底图" : "显示底图"} aria-label={draft.baseVisible ? "隐藏底图" : "显示底图"} onClick={(event) => { event.stopPropagation(); toggleVisibility(baseSelectionID); }}>
                {draft.baseVisible ? <Eye size={15} /> : <EyeOff size={15} />}
              </button>
              <span className="seedream-layer-thumb"><img src={assetPreviewUrl(baseAsset)} alt="" /></span>
              <span className="seedream-layer-copy"><strong>底图</strong><small>固定画布</small></span>
              <span className="seedream-layer-fixed">固定</span>
              <span className="seedream-layer-row-actions"><a href={assetContentUrl(baseAsset)} title="下载底图" aria-label="下载底图" onClick={(event) => event.stopPropagation()}><Download size={13} /></a></span>
            </article>
          </div>
        </div>
      </div>

      {editDialog ? (
        <div className="seedream-layer-edit-backdrop" role="presentation">
          <div className="seedream-layer-edit-dialog" role="dialog" aria-modal="true" aria-labelledby="seedream-layer-edit-title">
            <header>
              <div>
                <span>Seedream 5.0 Pro</span>
                <h3 id="seedream-layer-edit-title">编辑图层：{draft.layers.find((layer) => layer.id === editDialog.layerId)?.name}</h3>
              </div>
              <button className="icon-button" type="button" disabled={editBusy} aria-label="关闭图层编辑" title={editBusy ? "任务提交中" : "关闭"} onClick={() => setEditDialog(null)}><X size={16} /></button>
            </header>
            <div className="seedream-layer-edit-body">
              <div className="seedream-layer-edit-preview">
                {editDialog.result ? <img src={assetPreviewUrl(editDialog.result)} alt="即梦编辑结果" /> : selectedAsset ? <img src={assetPreviewUrl(selectedAsset)} alt="待编辑图层" /> : <ImagePlus size={20} />}
                <span>{editDialog.result ? "编辑结果" : "当前图层"}</span>
              </div>
              <label>
                编辑指令
                <textarea
                  value={editDialog.prompt}
                  disabled={editBusy || editDialog.phase === "ready"}
                  onChange={(event) => setEditDialog((current) => current ? { ...current, prompt: event.target.value, error: undefined } : current)}
                  placeholder="例如：把杯子的颜色改成蓝色，保持透明背景和主体位置"
                />
              </label>
              <p>{canRetryEditResultSync ? "编辑任务已经完成，重新同步只读取现有结果，不会再次提交任务或计费。" : "会新建一个 Seedream 交互编辑任务，并按当前 Seedream 5.0 Pro 费率计费。模型可能改变透明边缘，请在替换前预览结果。"}</p>
              {editDialog.phase === "polling" ? <div className="seedream-layer-edit-progress"><Loader2 className="spin" size={14} />{editDialog.job?.status === "succeeded" ? "任务已完成，正在同步结果素材" : "结果生成中"}，任务 {editDialog.job?.id}</div> : null}
              {editDialog.error ? <div className="seedream-layer-download-error" role="alert">{editDialog.error}</div> : null}
            </div>
            <footer>
              {editDialog.phase === "ready" ? (
                <>
                  <button className="button" type="button" onClick={() => applyEditResult("add")}><Plus size={14} />作为新图层</button>
                  <button className="button primary" type="button" onClick={() => applyEditResult("replace")}><Check size={14} />替换当前图层</button>
                </>
              ) : (
                <button className="button primary" type="button" disabled={editBusy || (!canRetryEditResultSync && !editDialog.prompt.trim())} onClick={() => void (canRetryEditResultSync ? retryLayerEditResultSync() : submitLayerEdit())}>
                  {editBusy ? <Loader2 className="spin" size={14} /> : canRetryEditResultSync ? <RefreshCw size={14} /> : <Pencil size={14} />}
                  {editDialog.phase === "polling" ? (editDialog.job?.status === "succeeded" ? "同步结果" : "等待结果") : canRetryEditResultSync ? "重新同步结果" : "开始编辑"}
                </button>
              )}
            </footer>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function initialLayerDraft(base: SeedreamLayerOutput, layers: SeedreamLayerOutput[], baseSize: [number, number]): SeedreamLayerDraft {
  return {
    baseAssetId: base.asset.id,
    baseVisible: true,
    layers: layers.map((layer, index) => ({
      id: `provider-${layer.asset.id}`,
      assetId: layer.asset.id,
      name: layer.name,
      description: layer.description,
      visible: true,
      box: initialLayerBox(layer, baseSize, index),
      rotation: 0,
      source: "provider"
    }))
  };
}

function initialLayerBox(layer: SeedreamLayerOutput, baseSize: [number, number], index: number): SeedreamLayerBox {
  const normalized = layer.boundingBox?.normalized;
  if (normalized) return sanitizeLayerBox(normalized);
  const absolute = layer.boundingBox?.absolute;
  if (absolute && baseSize[0] > 1 && baseSize[1] > 1) {
    return sanitizeLayerBox([
      absolute[0] / baseSize[0] * 1000,
      absolute[1] / baseSize[1] * 1000,
      absolute[2] / baseSize[0] * 1000,
      absolute[3] / baseSize[1] * 1000
    ]);
  }
  if (layer.size && baseSize[0] > 1 && baseSize[1] > 1) {
    const width = Math.min(900, Math.max(80, layer.size[0] / baseSize[0] * 1000));
    const height = Math.min(900, Math.max(80, layer.size[1] / baseSize[1] * 1000));
    const offset = Math.min(index * 22, 120);
    return sanitizeLayerBox([(1000 - width) / 2 + offset, (1000 - height) / 2 + offset, (1000 + width) / 2 + offset, (1000 + height) / 2 + offset]);
  }
  return centeredLayerBox(index);
}

function sanitizeLayerBox(value: SeedreamLayerBox): SeedreamLayerBox {
  const scale = Math.max(...value.map((item) => Math.abs(item))) <= 1 ? 1000 : 1;
  const left = clamp(value[0] * scale, 0, 980);
  const top = clamp(value[1] * scale, 0, 980);
  const right = clamp(value[2] * scale, left + 20, 1000);
  const bottom = clamp(value[3] * scale, top + 20, 1000);
  return [left, top, right, bottom];
}

function centeredLayerBox(index = 0): SeedreamLayerBox {
  const offset = Math.min(index * 20, 100);
  return [150 + offset, 150 + offset, 850, 850];
}

function moveLayerBox(box: SeedreamLayerBox, deltaX: number, deltaY: number): SeedreamLayerBox {
  const width = box[2] - box[0];
  const height = box[3] - box[1];
  const left = clamp(box[0] + deltaX, 0, 1000 - width);
  const top = clamp(box[1] + deltaY, 0, 1000 - height);
  return [left, top, left + width, top + height];
}

function resizeLayerBox(box: SeedreamLayerBox, deltaX: number, deltaY: number): SeedreamLayerBox {
  const width = box[2] - box[0];
  const height = box[3] - box[1];
  const requestedFactor = Math.max((width + deltaX) / width, (height + deltaY) / height);
  const factor = clamp(requestedFactor, Math.max(20 / width, 20 / height), Math.min((1000 - box[0]) / width, (1000 - box[1]) / height));
  return [box[0], box[1], box[0] + width * factor, box[1] + height * factor];
}

function scaleLayerBox(box: SeedreamLayerBox, requestedFactor: number): SeedreamLayerBox {
  const width = box[2] - box[0];
  const height = box[3] - box[1];
  const factor = clamp(requestedFactor, Math.max(20 / width, 20 / height), Math.min(1000 / width, 1000 / height));
  const nextWidth = width * factor;
  const nextHeight = height * factor;
  const centerX = (box[0] + box[2]) / 2;
  const centerY = (box[1] + box[3]) / 2;
  const left = clamp(centerX - nextWidth / 2, 0, 1000 - nextWidth);
  const top = clamp(centerY - nextHeight / 2, 0, 1000 - nextHeight);
  return [left, top, left + nextWidth, top + nextHeight];
}

async function layerFromAsset(asset: Asset, source: SeedreamLayerSource, baseSize: [number, number]): Promise<SeedreamCompositionLayer> {
  const size = await imageDimensions(asset).catch(() => undefined);
  return {
    id: newLayerID(),
    assetId: asset.id,
    name: asset.name || "新增图层",
    visible: true,
    box: size ? fittedLayerBox(size, baseSize) : centeredLayerBox(),
    rotation: 0,
    source
  };
}

function fittedLayerBox(size: [number, number], baseSize: [number, number]): SeedreamLayerBox {
  if (size[0] <= 0 || size[1] <= 0 || baseSize[0] <= 0 || baseSize[1] <= 0) return centeredLayerBox();
  const relativeAspect = (size[0] / size[1]) / (baseSize[0] / baseSize[1]);
  const width = relativeAspect >= 1 ? 720 : Math.max(100, 720 * relativeAspect);
  const height = relativeAspect >= 1 ? Math.max(100, 720 / relativeAspect) : 720;
  return [(1000 - width) / 2, (1000 - height) / 2, (1000 + width) / 2, (1000 + height) / 2];
}

function imageDimensions(asset: Asset) {
  return new Promise<[number, number]>((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve([image.naturalWidth, image.naturalHeight]);
    image.onerror = () => reject(new Error("读取图片尺寸失败"));
    image.src = assetPreviewUrl(asset);
  });
}

function normalizeRotation(value: number) {
  let rotation = value % 360;
  if (rotation > 180) rotation -= 360;
  if (rotation <= -180) rotation += 360;
  return Math.round(rotation * 1000) / 1000;
}

function clamp(value: number, minimum: number, maximum: number) {
  return Math.min(maximum, Math.max(minimum, value));
}

function assetMap(assets: Asset[]) {
  return new Map(assets.map((asset) => [asset.id, asset]));
}

function isLayerAsset(asset: Asset) {
  return asset.kind === "image" || asset.kind === "reference" || asset.kind === "mask";
}

function newLayerID() {
  const value = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
    ? crypto.randomUUID()
    : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
  return `layer-${value}`;
}

function serializeDraft(draft: SeedreamLayerDraft) {
  return JSON.stringify(draft);
}

function draftFromComposition(composition: SeedreamLayerComposition): SeedreamLayerDraft {
  return {
    baseAssetId: composition.baseAssetId,
    baseVisible: composition.baseVisible,
    layers: composition.layers.map((layer) => ({ ...layer, box: [...layer.box] as SeedreamLayerBox }))
  };
}

function isLayerComposition(value: unknown): value is SeedreamLayerComposition {
  if (!value || typeof value !== "object") return false;
  const record = value as Record<string, unknown>;
  return typeof record.jobId === "string"
    && typeof record.baseAssetId === "string"
    && typeof record.baseVisible === "boolean"
    && typeof record.version === "number"
    && Array.isArray(record.layers);
}

function putLayerComposition(jobId: string, version: number, draft: SeedreamLayerDraft) {
  return fetch(`/api/layer-compositions/${encodeURIComponent(jobId)}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ version, ...draft })
  });
}

async function readJSON(response: Response): Promise<Record<string, unknown>> {
  return response.json().catch(() => ({})) as Promise<Record<string, unknown>>;
}

function payloadError(payload: Record<string, unknown>, fallback: string) {
  return typeof payload.error === "string" && payload.error.trim() ? payload.error : fallback;
}

function errorMessage(error: unknown, fallback: string) {
  return error instanceof Error && error.message ? error.message : fallback;
}

function saveStateLabel(state: SaveState) {
  if (state === "loading") return "读取工程";
  if (state === "saving") return "正在保存";
  if (state === "dirty") return "等待保存";
  if (state === "error") return "保存失败";
  return "已自动保存";
}

function layerSourceLabel(source: SeedreamLayerSource) {
  if (source === "upload") return "上传图层";
  if (source === "library") return "素材库";
  if (source === "seedream-edit") return "即梦编辑";
  return "原始拆分";
}

function safeDownloadName(label: string, originalName: string) {
  const extension = originalName.includes(".") ? originalName.slice(originalName.lastIndexOf(".")) : ".png";
  const sanitized = label.replace(/[\\/:*?"<>|]/g, "-").slice(0, 120);
  return sanitized.toLocaleLowerCase().endsWith(extension.toLocaleLowerCase()) ? sanitized : `${sanitized}${extension}`;
}

async function waitForImageJob(jobId: string, signal: AbortSignal): Promise<GenerationJob> {
  const deadline = Date.now() + 10 * 60 * 1000;
  while (Date.now() < deadline) {
    await abortableDelay(1800, signal);
    const response = await fetch(`/api/generations/image/${encodeURIComponent(jobId)}`, { cache: "no-store", signal });
    const payload = await readJSON(response);
    if (!response.ok) throw new Error(payloadError(payload, "读取图层编辑任务失败"));
    const job = payload.job as GenerationJob | undefined;
    if (!job) throw new Error("图层编辑任务返回数据不完整");
    if (["succeeded", "failed", "expired", "cancelled"].includes(job.status)) return job;
  }
  throw new Error("图层编辑等待超时，任务仍可在任务模块中查看");
}

function abortableDelay(milliseconds: number, signal: AbortSignal) {
  return new Promise<void>((resolve, reject) => {
    if (signal.aborted) {
      reject(new DOMException("Aborted", "AbortError"));
      return;
    }
    const timer = window.setTimeout(resolve, milliseconds);
    signal.addEventListener("abort", () => {
      window.clearTimeout(timer);
      reject(new DOMException("Aborted", "AbortError"));
    }, { once: true });
  });
}