"use client";

import { formatDistanceToNow } from "date-fns";
import { zhCN } from "date-fns/locale";
import {
  ArrowLeft,
  Bone,
  Box,
  Boxes,
  ChevronDown,
  ChevronUp,
  Download,
  Eye,
  EyeOff,
  Grid3X3,
  History,
  Home,
  ImagePlus,
  Images,
  Layers3,
  LayoutGrid,
  Loader2,
  Maximize,
  Package,
  Palette,
  PenLine,
  Play,
  PlusCircle,
  RefreshCw,
  RotateCw,
  Scissors,
  Settings2,
  Sparkles,
  Sun,
  WandSparkles,
  X,
} from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import useSWR from "swr";
import {
  type Model3DLayer,
  type Model3DStats,
  Model3DViewer,
  type Model3DViewerSettings,
} from "@/components/canvas/model3d/Model3DViewer";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn, fetcher } from "@/lib/utils";
import {
  canvasService,
  type Model3DTaskStatus,
  model3DGenerationService,
} from "@/services/canvas";
import { canvasSelectors, useCanvasStore } from "@/store/canvas";

type GenerationMode = "text" | "image" | "multiview" | "batch";
type TaskMode =
  | GenerationMode
  | "convert"
  | "refine"
  | "texture"
  | "stylize"
  | "rigcheck"
  | "rig"
  | "retarget"
  | "segment"
  | "complete"
  | "lowpoly";

type TaskRecord = {
  taskId: string;
  status: Model3DTaskStatus;
  mode: TaskMode;
  prompt: string;
  modelVersion: string;
  createdAt: number;
  progress?: number | null;
  modelUrl?: string | null;
  previewImageUrl?: string | null;
  error?: string | null;
  sourceTaskId?: string | null;
  exportFormat?: string | null;
};

type TaskRecordApiEntity = {
  taskId?: unknown;
  status?: unknown;
  mode?: unknown;
  prompt?: unknown;
  modelVersion?: unknown;
  progress?: unknown;
  modelUrl?: unknown;
  previewImageUrl?: unknown;
  error?: unknown;
  sourceTaskId?: unknown;
  exportFormat?: unknown;
  createdAt?: unknown;
};

type MultiViewSlot = {
  id: string;
  file: File | null;
  previewUrl: string | null;
};

const MODEL_VERSION_OPTIONS = [
  "Turbo-v1.0-20250506",
  "v3.1-20260211",
  "v3.0-20250812",
  "v2.5-20250123",
  "v2.0-20240919",
  "v1.4-20240625",
] as const;

const ENV_PRESET_OPTIONS: Model3DViewerSettings["envPreset"][] = [
  "city",
  "sunset",
  "studio",
  "dawn",
  "night",
  "warehouse",
  "forest",
  "apartment",
  "park",
  "lobby",
];

const EXPORT_FORMAT_OPTIONS = [
  "GLTF",
  "USDZ",
  "FBX",
  "OBJ",
  "STL",
  "3MF",
] as const;
const STYLE_OPTIONS = ["lego", "voxel", "voronoi", "minecraft"] as const;
const RIG_TYPE_OPTIONS = [
  "biped",
  "quadruped",
  "hexapod",
  "octopod",
  "avian",
  "serpentine",
  "aquatic",
  "others",
] as const;
const RIG_SPEC_OPTIONS = ["tripo", "mixamo"] as const;
const RIG_FORMAT_OPTIONS = ["glb", "fbx"] as const;
const ANIMATION_OPTIONS = [
  "preset:idle",
  "preset:walk",
  "preset:run",
  "preset:jump",
  "preset:turn",
  "preset:slash",
  "preset:shoot",
  "preset:hurt",
  "preset:fall",
] as const;
const FINAL_TASK_STATUS = new Set<Model3DTaskStatus>([
  "success",
  "failed",
  "banned",
  "expired",
  "cancelled",
  "unknown",
]);
const TASK_MODE_SET = new Set<TaskMode>([
  "text",
  "image",
  "multiview",
  "batch",
  "convert",
  "refine",
  "texture",
  "stylize",
  "rigcheck",
  "rig",
  "retarget",
  "segment",
  "complete",
  "lowpoly",
]);
const TASK_HISTORY_LIMIT = 40;
const TASK_HISTORY_STORAGE_PREFIX = "canvas-model3d-task-history-v2";

function normalizeTaskStatus(status: string | undefined): Model3DTaskStatus {
  switch (status) {
    case "queued":
    case "running":
    case "success":
    case "failed":
    case "banned":
    case "expired":
    case "cancelled":
    case "unknown":
      return status;
    default:
      return "unknown";
  }
}

function extractModelFormat(modelUrl?: string | null): string {
  const value = String(modelUrl || "").toLowerCase();
  if (!value) return "3d";
  if (value.includes(".gltf")) return "gltf";
  if (value.includes(".glb")) return "glb";
  if (value.includes(".usdz")) return "usdz";
  if (value.includes(".fbx")) return "fbx";
  if (value.includes(".obj")) return "obj";
  if (value.includes(".stl")) return "stl";
  if (value.includes(".3mf")) return "3mf";
  return "3d";
}

function createMultiViewSlots(count = 4): MultiViewSlot[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `slot_${index + 1}`,
    file: null,
    previewUrl: null,
  }));
}

function createBatchImageSlots(count = 10): MultiViewSlot[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `batch_slot_${index + 1}`,
    file: null,
    previewUrl: null,
  }));
}

function modeLabel(mode: TaskMode) {
  switch (mode) {
    case "text":
      return "文生3D";
    case "image":
      return "图生3D";
    case "multiview":
      return "多视图3D";
    case "batch":
      return "批量图生3D";
    case "convert":
      return "格式转换";
    case "refine":
      return "模型精修";
    case "texture":
      return "纹理重绘";
    case "stylize":
      return "风格化";
    case "rigcheck":
      return "可绑定检测";
    case "rig":
      return "自动绑定";
    case "retarget":
      return "动作重定向";
    case "segment":
      return "网格分割";
    case "complete":
      return "网格补全";
    case "lowpoly":
      return "低模优化";
    default:
      return mode;
  }
}

function statusLabel(status: Model3DTaskStatus) {
  switch (status) {
    case "queued":
      return "排队中";
    case "running":
      return "生成中";
    case "success":
      return "成功";
    case "failed":
      return "失败";
    case "banned":
      return "审核拦截";
    case "expired":
      return "已过期";
    case "cancelled":
      return "已取消";
    default:
      return "未知";
  }
}

function makeStorageKey(projectId: string) {
  return `${TASK_HISTORY_STORAGE_PREFIX}:${projectId}`;
}

function normalizeTaskMode(mode: unknown): TaskMode {
  const value = String(mode || "").trim() as TaskMode;
  return TASK_MODE_SET.has(value) ? value : "text";
}

function toTaskTimestamp(value: unknown): number {
  if (value instanceof Date) return value.getTime();
  if (typeof value === "number" && Number.isFinite(value)) return value;
  if (typeof value === "string" && value.trim()) {
    const parsed = Date.parse(value);
    if (Number.isFinite(parsed)) return parsed;
  }
  return Date.now();
}

function normalizeTaskRecord(raw: TaskRecord): TaskRecord {
  return {
    ...raw,
    taskId: String(raw.taskId || "").trim(),
    status: normalizeTaskStatus(raw.status),
    mode: normalizeTaskMode(raw.mode),
    prompt: String(raw.prompt || "").trim(),
    modelVersion: String(raw.modelVersion || "").trim(),
    createdAt: toTaskTimestamp(raw.createdAt),
    progress:
      raw.progress === undefined || raw.progress === null
        ? null
        : Number.isFinite(Number(raw.progress))
          ? Number(raw.progress)
          : null,
    modelUrl: raw.modelUrl ? String(raw.modelUrl).trim() : null,
    previewImageUrl: raw.previewImageUrl
      ? String(raw.previewImageUrl).trim()
      : null,
    error: raw.error ? String(raw.error).trim() : null,
    sourceTaskId: raw.sourceTaskId ? String(raw.sourceTaskId).trim() : null,
    exportFormat: raw.exportFormat ? String(raw.exportFormat).trim() : null,
  };
}

function mapApiEntityToTaskRecord(entity: TaskRecordApiEntity): TaskRecord | null {
  const taskId = String(entity?.taskId || "").trim();
  if (!taskId) return null;

  return normalizeTaskRecord({
    taskId,
    status: normalizeTaskStatus(String(entity?.status || "")),
    mode: normalizeTaskMode(entity?.mode),
    prompt: String(entity?.prompt || "").trim(),
    modelVersion: String(entity?.modelVersion || "").trim(),
    createdAt: toTaskTimestamp(entity?.createdAt),
    progress:
      entity?.progress === undefined || entity?.progress === null
        ? null
        : Number(entity.progress),
    modelUrl: entity?.modelUrl ? String(entity.modelUrl).trim() : null,
    previewImageUrl: entity?.previewImageUrl
      ? String(entity.previewImageUrl).trim()
      : null,
    error: entity?.error ? String(entity.error).trim() : null,
    sourceTaskId: entity?.sourceTaskId ? String(entity.sourceTaskId).trim() : null,
    exportFormat: entity?.exportFormat ? String(entity.exportFormat).trim() : null,
  });
}

function taskRecordChanged(prev: TaskRecord, next: TaskRecord) {
  return (
    prev.status !== next.status ||
    prev.progress !== next.progress ||
    prev.modelUrl !== next.modelUrl ||
    prev.previewImageUrl !== next.previewImageUrl ||
    prev.error !== next.error ||
    prev.prompt !== next.prompt ||
    prev.modelVersion !== next.modelVersion ||
    prev.sourceTaskId !== next.sourceTaskId ||
    prev.exportFormat !== next.exportFormat
  );
}

export default function CanvasModel3DPage() {
  const router = useRouter();
  const routeParams = useParams();
  const id = String(routeParams?.id || "");
  const legacyHistoryStorageKey = useMemo(() => makeStorageKey(id), [id]);
  const { data: session } = useSession();
  const user = session?.user;

  const viewport = useCanvasStore(canvasSelectors.viewport);
  const addNode = useCanvasStore((state) => state.addNode);
  const getCanvasState = useCanvasStore((state) => state.getCanvasState);

  const [mode, setMode] = useState<GenerationMode>("text");
  const [prompt, setPrompt] = useState("");
  const [negativePrompt, setNegativePrompt] = useState("");
  const [modelVersion, setModelVersion] = useState<
    (typeof MODEL_VERSION_OPTIONS)[number]
  >("Turbo-v1.0-20250506");
  const [faceLimit, setFaceLimit] = useState(120_000);
  const [texture, setTexture] = useState(true);
  const [pbr, setPbr] = useState(true);
  const [autoSize, setAutoSize] = useState(false);
  const [quad, setQuad] = useState(false);
  const [generateParts, setGenerateParts] = useState(false);
  const [smartLowPoly, setSmartLowPoly] = useState(false);
  const [geometryQuality, setGeometryQuality] = useState<
    "standard" | "detailed"
  >("standard");
  const [textureQuality, setTextureQuality] = useState<"standard" | "detailed">(
    "standard"
  );
  const [textureAlignment, setTextureAlignment] = useState<
    "original_image" | "geometry"
  >("original_image");
  const [orientation, setOrientation] = useState<"default" | "align_image">(
    "default"
  );
  const [modelSeed, setModelSeed] = useState("");
  const [textureSeed, setTextureSeed] = useState("");

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [uploadingImage, setUploadingImage] = useState(false);
  const [referenceImage, setReferenceImage] = useState<File | null>(null);
  const [referencePreviewUrl, setReferencePreviewUrl] = useState<string | null>(
    null
  );
  const [multiViewSlots, setMultiViewSlots] = useState<MultiViewSlot[]>(() =>
    createMultiViewSlots()
  );
  const [batchImageSlots, setBatchImageSlots] = useState<MultiViewSlot[]>(() =>
    createBatchImageSlots()
  );

  const [taskHistory, setTaskHistory] = useState<TaskRecord[]>([]);
  const [currentTask, setCurrentTask] = useState<TaskRecord | null>(null);
  const [autoDownloadTaskId, setAutoDownloadTaskId] = useState<string | null>(
    null
  );

  const [advancedOpen, setAdvancedOpen] = useState(false);

  // Viewer Settings
  const [viewerSettings, setViewerSettings] = useState<Model3DViewerSettings>({
    envPreset: "city",
    lightIntensity: 1,
    autoRotate: false,
    showGrid: true,
    wireframe: false,
  });
  const [viewerStats, setViewerStats] = useState<Model3DStats>({
    triangles: 0,
    vertices: 0,
    meshCount: 0,
  });
  const [viewerLayers, setViewerLayers] = useState<Model3DLayer[]>([]);
  const [layerVisibility, setLayerVisibility] = useState<
    Record<string, boolean>
  >({});
  const [isolatedLayerId, setIsolatedLayerId] = useState<string | null>(null);

  // Post Processing States
  const [exportFormat, setExportFormat] =
    useState<(typeof EXPORT_FORMAT_OPTIONS)[number]>("GLTF");
  const [stylizeStyle, setStylizeStyle] =
    useState<(typeof STYLE_OPTIONS)[number]>("lego");
  const [stylizeBlockSize, setStylizeBlockSize] = useState(80);
  const [texturePromptText, setTexturePromptText] = useState("");
  const [rigType, setRigType] =
    useState<(typeof RIG_TYPE_OPTIONS)[number]>("biped");
  const [rigSpec, setRigSpec] =
    useState<(typeof RIG_SPEC_OPTIONS)[number]>("tripo");
  const [rigFormat, setRigFormat] =
    useState<(typeof RIG_FORMAT_OPTIONS)[number]>("glb");
  const [retargetAnimation, setRetargetAnimation] =
    useState<(typeof ANIMATION_OPTIONS)[number]>("preset:walk");
  const [retargetBake, setRetargetBake] = useState(true);
  const [retargetExportWithGeometry, setRetargetExportWithGeometry] =
    useState(false);
  const [retargetInPlace, setRetargetInPlace] = useState(false);
  const [completionPartNames, setCompletionPartNames] = useState("");
  const [lowpolyFaceLimit, setLowpolyFaceLimit] = useState(30_000);
  const [lowpolyQuad, setLowpolyQuad] = useState(false);
  const [lowpolyBake, setLowpolyBake] = useState(true);

  // UI States
  const [activeTab, setActiveTab] = useState<"create" | "edit" | "scene">(
    "create"
  );

  const pollAttemptsRef = useRef(0);
  const multiViewSlotsRef = useRef<MultiViewSlot[]>([]);
  const batchImageSlotsRef = useRef<MultiViewSlot[]>([]);

  // Fetch site settings for Logo
  const { data: siteSettingsData } = useSWR("/api/site-settings", fetcher);
  const { data: membershipSummary } = useSWR<{
    summary?: {
      currentCredits?: number;
    };
  } | null>("/api/user/membership-summary", async (url: string) => {
    const response = await fetch(url, { cache: "no-store" });
    if (!response.ok) return null;
    return response.json();
  });

  const siteLogo = siteSettingsData?.siteLogo;
  const siteLogoDark = siteSettingsData?.siteLogoDark;
  const siteName = siteSettingsData?.siteName || "SparkAI";
  const pointsLabel = useMemo(() => {
    const rawValue = Number(membershipSummary?.summary?.currentCredits ?? 0);
    const normalized = Number.isFinite(rawValue) ? Math.max(0, rawValue) : 0;
    return normalized.toLocaleString("en-US");
  }, [membershipSummary?.summary?.currentCredits]);
  const userAvatarFallback = useMemo(() => {
    const fromName = String(user?.name || "").trim();
    if (fromName) return fromName.charAt(0).toUpperCase();
    const fromEmail = String(user?.email || "").trim();
    if (fromEmail) return fromEmail.charAt(0).toUpperCase();
    return "U";
  }, [user?.email, user?.name]);

  // Display logo logic (prefer dark mode logo since we are in dark theme)
  const displayLogo =
    siteLogoDark && siteLogoDark.trim() !== "" ? siteLogoDark : siteLogo;

  // Effect hooks for data loading and cleanup
  useEffect(() => {
    console.log("CanvasModel3DPage mounted - v3.0 Dark Mode");
  }, []);

  useEffect(() => {
    const html = document.documentElement;
    const body = document.body;
    const prevHtmlOverscrollX = html.style.overscrollBehaviorX;
    const prevBodyOverscrollX = body.style.overscrollBehaviorX;

    html.style.overscrollBehaviorX = "none";
    body.style.overscrollBehaviorX = "none";

    const preventHistorySwipe = (event: WheelEvent) => {
      if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
      if (event.cancelable) {
        event.preventDefault();
      }
    };

    window.addEventListener("wheel", preventHistorySwipe, { passive: false });

    return () => {
      window.removeEventListener("wheel", preventHistorySwipe);
      html.style.overscrollBehaviorX = prevHtmlOverscrollX;
      body.style.overscrollBehaviorX = prevBodyOverscrollX;
    };
  }, []);

  const persistTaskRecord = useCallback(
    async (task: TaskRecord) => {
      if (!id) return;
      try {
        const response = await fetch(`/api/canvas/${id}/model3d-assets`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            asset: {
              taskId: task.taskId,
              status: task.status,
              mode: task.mode,
              prompt: task.prompt,
              modelVersion: task.modelVersion,
              progress: task.progress ?? null,
              modelUrl: task.modelUrl ?? null,
              previewImageUrl: task.previewImageUrl ?? null,
              error: task.error ?? null,
              sourceTaskId: task.sourceTaskId ?? null,
              exportFormat: task.exportFormat ?? null,
              createdAt: task.createdAt,
            },
          }),
        });
        if (!response.ok) {
          const payload = await response.json().catch(() => ({}));
          throw new Error(payload?.error || `HTTP ${response.status}`);
        }
      } catch (error) {
        console.error("[Model3DPage] 持久化 3D 资产失败:", error);
      }
    },
    [id]
  );

  useEffect(() => {
    if (!id) return;
    let cancelled = false;

    const migrateLegacyHistory = async () => {
      if (typeof window === "undefined") return [] as TaskRecord[];
      const raw = window.localStorage.getItem(legacyHistoryStorageKey);
      if (!raw) return [] as TaskRecord[];

      try {
        const parsed = JSON.parse(raw) as TaskRecord[];
        if (!Array.isArray(parsed)) {
          window.localStorage.removeItem(legacyHistoryStorageKey);
          return [] as TaskRecord[];
        }

        const normalized = parsed
          .filter((item) => item && typeof item.taskId === "string")
          .map((item) => normalizeTaskRecord(item))
          .slice(0, TASK_HISTORY_LIMIT);

        for (const item of normalized) {
          await persistTaskRecord(item);
        }
        window.localStorage.removeItem(legacyHistoryStorageKey);
        return normalized;
      } catch {
        window.localStorage.removeItem(legacyHistoryStorageKey);
        return [] as TaskRecord[];
      }
    };

    const loadTaskHistory = async () => {
      try {
        const response = await fetch(`/api/canvas/${id}/model3d-assets`, {
          cache: "no-store",
        });
        const payload = (await response.json().catch(() => ({}))) as {
          success?: boolean;
          error?: string;
          data?: TaskRecordApiEntity[];
        };
        if (!response.ok || payload?.success === false) {
          throw new Error(payload?.error || "加载 3D 资产失败");
        }
        const list: TaskRecordApiEntity[] = Array.isArray(payload?.data)
          ? payload.data
          : [];

        let normalized = list
          .map((item) => mapApiEntityToTaskRecord(item))
          .filter((item): item is TaskRecord => Boolean(item))
          .slice(0, TASK_HISTORY_LIMIT);

        if (normalized.length === 0) {
          normalized = await migrateLegacyHistory();
        } else if (typeof window !== "undefined") {
          window.localStorage.removeItem(legacyHistoryStorageKey);
        }

        if (cancelled) return;
        setTaskHistory(normalized);
        const pending = normalized.find(
          (item) => !FINAL_TASK_STATUS.has(item.status)
        );
        setCurrentTask(pending || normalized[0] || null);
      } catch (error) {
        console.error("[Model3DPage] 加载 3D 资产库失败:", error);
        const migrated = await migrateLegacyHistory();
        if (cancelled) return;
        setTaskHistory(migrated);
        const pending = migrated.find(
          (item) => !FINAL_TASK_STATUS.has(item.status)
        );
        setCurrentTask(pending || migrated[0] || null);
      }
    };

    void loadTaskHistory();
    return () => {
      cancelled = true;
    };
  }, [id, legacyHistoryStorageKey, persistTaskRecord]);

  useEffect(() => {
    if (!referenceImage) {
      if (referencePreviewUrl) {
        URL.revokeObjectURL(referencePreviewUrl);
      }
      setReferencePreviewUrl(null);
      return;
    }
    const objectUrl = URL.createObjectURL(referenceImage);
    setReferencePreviewUrl((prev) => {
      if (prev) URL.revokeObjectURL(prev);
      return objectUrl;
    });
    return () => {
      URL.revokeObjectURL(objectUrl);
    };
  }, [referenceImage]);

  useEffect(() => {
    multiViewSlotsRef.current = multiViewSlots;
  }, [multiViewSlots]);

  useEffect(() => {
    batchImageSlotsRef.current = batchImageSlots;
  }, [batchImageSlots]);

  useEffect(() => {
    return () => {
      for (const slot of multiViewSlotsRef.current) {
        if (slot.previewUrl) URL.revokeObjectURL(slot.previewUrl);
      }
      for (const slot of batchImageSlotsRef.current) {
        if (slot.previewUrl) URL.revokeObjectURL(slot.previewUrl);
      }
    };
  }, []);

  const upsertTaskHistory = useCallback(
    (next: TaskRecord, options?: { persist?: boolean }) => {
      const normalized = normalizeTaskRecord(next);
      setTaskHistory((prev) => {
        const index = prev.findIndex((item) => item.taskId === normalized.taskId);
        if (index >= 0) {
          const updated = [...prev];
          updated[index] = { ...updated[index], ...normalized };
          return updated.slice(0, TASK_HISTORY_LIMIT);
        }
        return [normalized, ...prev].slice(0, TASK_HISTORY_LIMIT);
      });

      if (options?.persist !== false) {
        void persistTaskRecord(normalized);
      }
    },
    [persistTaskRecord]
  );

  const effectiveLayerVisibility = useMemo(() => {
    if (!isolatedLayerId) return layerVisibility;
    const next: Record<string, boolean> = {};
    for (const layer of viewerLayers) {
      next[layer.id] =
        layer.id === isolatedLayerId && layerVisibility[layer.id] !== false;
    }
    return next;
  }, [isolatedLayerId, layerVisibility, viewerLayers]);

  const currentModelUrl = currentTask?.modelUrl || null;
  const currentPreviewImage =
    currentTask?.previewImageUrl ||
    (mode === "image" ? referencePreviewUrl : null) ||
    (mode === "multiview"
      ? multiViewSlots.find((slot) => slot.previewUrl)?.previewUrl
      : null) ||
    (mode === "batch"
      ? batchImageSlots.find((slot) => slot.previewUrl)?.previewUrl
      : null) ||
    null;

  // Polling logic
  useEffect(() => {
    if (!currentTask || FINAL_TASK_STATUS.has(currentTask.status)) {
      return;
    }

    pollAttemptsRef.current = 0;
    let cancelled = false;

    const runPoll = async () => {
      if (cancelled) return;
      pollAttemptsRef.current += 1;

      const result = await model3DGenerationService.getTask(currentTask.taskId);
      if (!result.success || !result.data) {
        const failMessage = result.error || "任务查询失败";
        const failedRecord: TaskRecord = {
          ...currentTask,
          status: "failed",
          error: failMessage,
        };
        setCurrentTask(failedRecord);
        upsertTaskHistory(failedRecord);
        toast.error(failMessage);
        return;
      }

      const status = normalizeTaskStatus(result.data.status);
      const nextRecord: TaskRecord = {
        ...currentTask,
        status,
        progress: result.data.progress ?? null,
        modelUrl: result.data.modelUrl ?? currentTask.modelUrl ?? null,
        previewImageUrl:
          result.data.previewImageUrl ?? currentTask.previewImageUrl ?? null,
        error:
          status === "failed" ? result.data.errorMessage || "任务失败" : null,
      };
      if (taskRecordChanged(currentTask, nextRecord)) {
        setCurrentTask(nextRecord);
        upsertTaskHistory(nextRecord);
      }

      if (status === "success") {
        toast.success(`${modeLabel(nextRecord.mode)}任务已完成`);
        if (
          autoDownloadTaskId &&
          autoDownloadTaskId === nextRecord.taskId &&
          nextRecord.modelUrl
        ) {
          const link = document.createElement("a");
          link.href = nextRecord.modelUrl;
          link.download = `tripo-model-${nextRecord.taskId}.${extractModelFormat(nextRecord.modelUrl)}`;
          link.click();
          setAutoDownloadTaskId(null);
        }
      }

      if (pollAttemptsRef.current >= 360 && !FINAL_TASK_STATUS.has(status)) {
        const timeoutRecord: TaskRecord = {
          ...nextRecord,
          status: "failed",
          error: "任务轮询超时，请稍后重试",
        };
        setCurrentTask(timeoutRecord);
        upsertTaskHistory(timeoutRecord);
        toast.error("任务轮询超时，请稍后重试");
      }
    };

    void runPoll();
    const timer = window.setInterval(() => {
      void runPoll();
    }, 2000);

    return () => {
      cancelled = true;
      window.clearInterval(timer);
    };
  }, [autoDownloadTaskId, currentTask, upsertTaskHistory]);

  // File handling functions
  const handleMultiViewFileChange = (index: number, file: File | null) => {
    setMultiViewSlots((prev) => {
      const next = [...prev];
      const target = next[index];
      if (!target) return prev;
      if (target.previewUrl) URL.revokeObjectURL(target.previewUrl);
      next[index] = {
        ...target,
        file,
        previewUrl: file ? URL.createObjectURL(file) : null,
      };
      return next;
    });
  };

  const clearMultiViewSlot = (index: number) => {
    handleMultiViewFileChange(index, null);
  };

  const setBatchFiles = (files: File[]) => {
    const nextFiles = files.slice(0, 10);
    setBatchImageSlots((prev) => {
      for (const slot of prev) {
        if (slot.previewUrl) URL.revokeObjectURL(slot.previewUrl);
      }
      return createBatchImageSlots().map((slot, index) => {
        const file = nextFiles[index] || null;
        return {
          ...slot,
          file,
          previewUrl: file ? URL.createObjectURL(file) : null,
        };
      });
    });
  };

  const handleBatchPickerChange = (files: FileList | null) => {
    const nextFiles = files ? Array.from(files) : [];
    setBatchFiles(nextFiles);
  };

  const handleBatchFileChange = (index: number, file: File | null) => {
    setBatchImageSlots((prev) => {
      const next = [...prev];
      const target = next[index];
      if (!target) return prev;
      if (target.previewUrl) URL.revokeObjectURL(target.previewUrl);
      next[index] = {
        ...target,
        file,
        previewUrl: file ? URL.createObjectURL(file) : null,
      };
      return next;
    });
  };

  const clearBatchSlot = (index: number) => {
    handleBatchFileChange(index, null);
  };

  // Task submission functions
  const buildGenerationPayload = (
    taskType: "text_to_model" | "image_to_model" | "multiview_to_model"
  ) => {
    const payload: Record<string, any> = {
      taskType,
      prompt: prompt.trim(),
      negativePrompt: negativePrompt.trim(),
      modelVersion,
      faceLimit,
      texture,
      pbr,
      autoSize,
      quad,
      generateParts,
      smartLowPoly,
      geometryQuality,
      textureQuality,
      modelSeed: modelSeed.trim() ? Number(modelSeed) : undefined,
      textureSeed: textureSeed.trim() ? Number(textureSeed) : undefined,
    };

    if (taskType === "image_to_model" || taskType === "multiview_to_model") {
      payload.textureAlignment = textureAlignment;
      payload.orientation = orientation;
    }
    return payload;
  };

  const submitTask = async (params: {
    payload: Record<string, any>;
    mode: TaskMode;
    promptText: string;
    sourceTaskId?: string | null;
    exportFormat?: string | null;
  }) => {
    const createResult = await model3DGenerationService.createTask(
      params.payload
    );
    if (!createResult.success || !createResult.data?.taskId) {
      throw new Error(createResult.error || "创建任务失败");
    }

    const newTask: TaskRecord = {
      taskId: createResult.data.taskId,
      status: normalizeTaskStatus(createResult.data.status),
      prompt: params.promptText,
      mode: params.mode,
      modelVersion,
      createdAt: Date.now(),
      sourceTaskId: params.sourceTaskId || null,
      exportFormat: params.exportFormat || null,
    };
    setCurrentTask(newTask);
    upsertTaskHistory(newTask);
    return newTask;
  };

  const getReadyTask = () => {
    if (!currentTask || currentTask.status !== "success") {
      toast.error("请先完成一个成功任务");
      return null;
    }
    return currentTask;
  };

  const submitDerivedTask = async (params: {
    payload: Record<string, any>;
    mode: TaskMode;
    promptText: string;
    sourceTaskId: string;
    successMessage: string;
  }) => {
    setIsSubmitting(true);
    try {
      await submitTask({
        payload: params.payload,
        mode: params.mode,
        promptText: params.promptText,
        sourceTaskId: params.sourceTaskId,
      });
      toast.success(params.successMessage);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "提交任务失败");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleGenerate = async () => {
    const normalizedPrompt = prompt.trim();
    if (mode === "text" && !normalizedPrompt) {
      toast.error("请输入提示词");
      return;
    }
    if (mode === "image" && !referenceImage) {
      toast.error("图生3D请先上传参考图");
      return;
    }
    const selectedMultiFiles = multiViewSlots
      .map((slot) => slot.file)
      .filter(Boolean) as File[];
    const selectedBatchFiles = batchImageSlots
      .map((slot) => slot.file)
      .filter(Boolean) as File[];
    if (mode === "multiview" && selectedMultiFiles.length < 2) {
      toast.error("多视图生成至少上传 2 张图片");
      return;
    }
    if (mode === "batch" && selectedBatchFiles.length < 1) {
      toast.error("批量图生请至少上传 1 张图片");
      return;
    }

    setIsSubmitting(true);
    setUploadingImage(false);
    try {
      if (mode === "text") {
        await submitTask({
          payload: buildGenerationPayload("text_to_model"),
          mode: "text",
          promptText: normalizedPrompt,
        });
        toast.success("已提交文生3D任务");
        return;
      }

      if (mode === "image") {
        setUploadingImage(true);
        const uploadResult = await model3DGenerationService.uploadImage(
          referenceImage as File
        );
        if (!uploadResult.success || !uploadResult.data) {
          throw new Error(uploadResult.error || "上传参考图失败");
        }
        const payload = buildGenerationPayload("image_to_model");
        if (uploadResult.data.imageToken) {
          payload.imageToken = uploadResult.data.imageToken;
        } else if (uploadResult.data.file) {
          payload.file = uploadResult.data.file;
        } else {
          throw new Error("参考图上传未返回可用 token");
        }
        await submitTask({
          payload,
          mode: "image",
          promptText: normalizedPrompt || "图生3D",
        });
        toast.success("已提交图生3D任务");
        return;
      }

      if (mode === "batch") {
        setUploadingImage(true);
        let successCount = 0;
        for (const file of selectedBatchFiles.slice(0, 10)) {
          const uploadResult = await model3DGenerationService.uploadImage(file);
          if (!uploadResult.success || !uploadResult.data) {
            throw new Error(uploadResult.error || `上传失败: ${file.name}`);
          }
          const payload = buildGenerationPayload("image_to_model");
          if (uploadResult.data.imageToken) {
            payload.imageToken = uploadResult.data.imageToken;
          } else if (uploadResult.data.file) {
            payload.file = uploadResult.data.file;
          } else {
            throw new Error(`图片未返回可用 token: ${file.name}`);
          }
          await submitTask({
            payload,
            mode: "batch",
            promptText: `${normalizedPrompt || "批量图生3D"} · ${file.name}`,
          });
          successCount += 1;
        }
        toast.success(`已提交 ${successCount} 个批量图生3D任务`);
        return;
      }

      setUploadingImage(true);
      const uploadResults = await Promise.all(
        selectedMultiFiles.map(async (file) =>
          model3DGenerationService.uploadImage(file)
        )
      );
      const filesPayload: Array<Record<string, any>> = [];
      for (const result of uploadResults) {
        if (!result.success || !result.data) {
          throw new Error(result.error || "上传多视图图片失败");
        }
        if (result.data.imageToken) {
          filesPayload.push({
            type: "jpg",
            file_token: result.data.imageToken,
          });
        } else if (result.data.file) {
          filesPayload.push(result.data.file);
        }
      }
      if (filesPayload.length < 2) {
        throw new Error("多视图图片上传失败，请重试");
      }
      const payload = buildGenerationPayload("multiview_to_model");
      payload.files = filesPayload;
      await submitTask({
        payload,
        mode: "multiview",
        promptText: normalizedPrompt || "多视图3D",
      });
      toast.success("已提交多视图3D任务");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "创建任务失败");
    } finally {
      setUploadingImage(false);
      setIsSubmitting(false);
    }
  };

  const handleImportToCanvas = async () => {
    if (!currentModelUrl || !currentTask || currentTask.status !== "success") {
      toast.error("暂无可导入的 3D 模型");
      return;
    }

    const viewportX = viewport.x || 0;
    const viewportY = viewport.y || 0;
    const viewportZoom = viewport.zoom || 1;
    const stageWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
    const stageHeight =
      typeof window !== "undefined" ? window.innerHeight : 720;
    const targetWidth = 380;
    const targetHeight = 300;
    const x = (stageWidth * 0.48 - viewportX) / viewportZoom - targetWidth / 2;
    const y =
      (stageHeight * 0.45 - viewportY) / viewportZoom - targetHeight / 2;

    addNode({
      type: "model3d",
      position: { x, y },
      size: { width: targetWidth, height: targetHeight },
      data: {
        src: currentModelUrl,
        previewImage: currentTask.previewImageUrl || undefined,
        prompt: currentTask.prompt,
        modelVersion: currentTask.modelVersion,
        format: extractModelFormat(currentModelUrl),
        status: "completed",
        metadata: {
          taskId: currentTask.taskId,
          mode: currentTask.mode,
          sourceTaskId: currentTask.sourceTaskId,
          progress: currentTask.progress,
          triangles: viewerStats.triangles,
          vertices: viewerStats.vertices,
          meshCount: viewerStats.meshCount,
        },
      },
      connections: [],
    });

    try {
      await canvasService.saveCanvasState(id, getCanvasState());
    } catch (error) {
      console.error("[Model3DPage] 保存画布失败:", error);
    }
    toast.success("3D 模型已导入画布");
  };

  const handleDownloadCurrent = () => {
    if (!currentModelUrl) {
      toast.error("暂无可下载的 3D 模型");
      return;
    }
    const link = document.createElement("a");
    link.href = currentModelUrl;
    link.download = `tripo-model-${currentTask?.taskId || "result"}.${extractModelFormat(
      currentModelUrl
    )}`;
    link.click();
  };

  const handleConvertAndDownload = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    setIsSubmitting(true);
    try {
      const baseTaskId = readyTask.taskId;
      const payload: Record<string, any> = {
        taskType: "convert_model",
        originalModelTaskId: baseTaskId,
        format: exportFormat,
        textureSize: 4096,
        textureFormat: "JPEG",
      };
      const task = await submitTask({
        payload,
        mode: "convert",
        promptText: `${modeLabel(readyTask.mode)} -> ${exportFormat}`,
        sourceTaskId: baseTaskId,
        exportFormat,
      });
      setAutoDownloadTaskId(task.taskId);
      toast.success(`已提交${exportFormat}转换任务，完成后自动下载`);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "格式转换失败");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleRefineModel = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    setIsSubmitting(true);
    try {
      const payload: Record<string, any> = {
        taskType: "refine_model",
        draftModelTaskId: readyTask.taskId,
      };
      await submitTask({
        payload,
        mode: "refine",
        promptText: `精修任务（来源 ${readyTask.taskId.slice(0, 8)}）`,
        sourceTaskId: readyTask.taskId,
      });
      toast.success("已提交模型精修任务");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "提交精修任务失败");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleTextureModel = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "texture_model",
        originalModelTaskId: readyTask.taskId,
        texture,
        pbr,
        textureQuality,
        textureAlignment,
        modelSeed: modelSeed.trim() ? Number(modelSeed) : undefined,
        textureSeed: textureSeed.trim() ? Number(textureSeed) : undefined,
        texturePromptText: texturePromptText.trim() || undefined,
      },
      mode: "texture",
      promptText: `纹理重绘（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交纹理重绘任务",
    });
  };

  const handleStylizeModel = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "stylize_model",
        originalModelTaskId: readyTask.taskId,
        style: stylizeStyle,
        blockSize: Number.isFinite(stylizeBlockSize)
          ? stylizeBlockSize
          : undefined,
      },
      mode: "stylize",
      promptText: `风格化 ${stylizeStyle}（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交风格化任务",
    });
  };

  const handleRigCheck = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "animate_prerigcheck",
        originalModelTaskId: readyTask.taskId,
      },
      mode: "rigcheck",
      promptText: `可绑定检测（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交可绑定检测任务",
    });
  };

  const handleRigModel = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "animate_rig",
        originalModelTaskId: readyTask.taskId,
        outFormat: rigFormat,
        rigType,
        spec: rigSpec,
      },
      mode: "rig",
      promptText: `自动绑定 ${rigType}（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交自动绑定任务",
    });
  };

  const handleRetargetAnimation = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "animate_retarget",
        originalModelTaskId: readyTask.taskId,
        animation: retargetAnimation,
        outFormat: rigFormat,
        bakeAnimation: retargetBake,
        exportWithGeometry: retargetExportWithGeometry,
        animateInPlace: retargetInPlace,
      },
      mode: "retarget",
      promptText: `动作 ${retargetAnimation}（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交动作重定向任务",
    });
  };

  const handleMeshSegmentation = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "mesh_segmentation",
        originalModelTaskId: readyTask.taskId,
      },
      mode: "segment",
      promptText: `网格分割（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交网格分割任务",
    });
  };

  const handleMeshCompletion = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    const parts = completionPartNames
      .split(",")
      .map((item) => item.trim())
      .filter(Boolean);

    await submitDerivedTask({
      payload: {
        taskType: "mesh_completion",
        originalModelTaskId: readyTask.taskId,
        partNames: parts.length ? parts : undefined,
      },
      mode: "complete",
      promptText: `网格补全（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交网格补全任务",
    });
  };

  const handleLowpolyOptimize = async () => {
    const readyTask = getReadyTask();
    if (!readyTask) return;

    await submitDerivedTask({
      payload: {
        taskType: "highpoly_to_lowpoly",
        originalModelTaskId: readyTask.taskId,
        faceLimit: Number.isFinite(lowpolyFaceLimit)
          ? lowpolyFaceLimit
          : undefined,
        quad: lowpolyQuad,
        bake: lowpolyBake,
      },
      mode: "lowpoly",
      promptText: `低模优化（来源 ${readyTask.taskId.slice(0, 8)}）`,
      sourceTaskId: readyTask.taskId,
      successMessage: "已提交低模优化任务",
    });
  };

  const handleSelectTask = (task: TaskRecord) => {
    setCurrentTask(task);
    if (task.status === "success" && task.modelUrl) {
      setViewerLayers([]);
      setLayerVisibility({});
      setIsolatedLayerId(null);
    }
  };

  const handleClearHistory = async () => {
    const prevTaskHistory = taskHistory;
    const prevCurrentTask = currentTask;
    setTaskHistory([]);
    setCurrentTask(null);

    try {
      const response = await fetch(`/api/canvas/${id}/model3d-assets`, {
        method: "DELETE",
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok || payload?.success === false) {
        throw new Error(payload?.error || "清空资产库失败");
      }
      if (typeof window !== "undefined") {
        window.localStorage.removeItem(legacyHistoryStorageKey);
      }
      toast.success("资产库已清空");
    } catch (error) {
      setTaskHistory(prevTaskHistory);
      setCurrentTask(prevCurrentTask);
      toast.error(error instanceof Error ? error.message : "清空资产库失败");
    }
  };

  const handleLayersChange = useCallback((layers: Model3DLayer[]) => {
    setViewerLayers(layers);
    setLayerVisibility((prev) => {
      const next: Record<string, boolean> = {};
      for (const layer of layers) {
        next[layer.id] = prev[layer.id] !== false;
      }
      return next;
    });
    setIsolatedLayerId((prev) =>
      prev && layers.some((layer) => layer.id === prev) ? prev : null
    );
  }, []);

  const importDisabled =
    !currentTask || currentTask.status !== "success" || !currentModelUrl;
  const activeStatusLabel = currentTask
    ? statusLabel(currentTask.status)
    : "未开始";
  const activePromptSummary = currentTask?.prompt?.trim() || "尚未创建任务";

  return (
    <div className="flex h-dvh w-full flex-col overflow-hidden bg-zinc-950 text-zinc-100">
      {/* Top Navigation Bar */}
      <header className="flex h-14 shrink-0 items-center justify-between border-white/10 border-b bg-zinc-950 px-4">
        <div className="flex items-center gap-6">
          {/* Logo & Brand */}
          <div
            className="flex cursor-pointer items-center gap-2 transition-opacity hover:opacity-80"
            onClick={() => router.push("/")}
          >
            {displayLogo ? (
              <img
                alt={siteName}
                className="h-6 w-6 object-contain"
                src={displayLogo}
              />
            ) : (
              <div className="flex h-6 w-6 items-center justify-center rounded-md bg-yellow-500/10">
                <Sparkles className="h-4 w-4 text-yellow-500" />
              </div>
            )}
            <span className="font-bold text-lg text-white tracking-tight">
              {siteName}
            </span>
          </div>

          {/* Divider */}
          <div className="h-4 w-[1px] bg-white/10" />

          {/* Nav Links */}
          <nav className="flex items-center gap-1">
            <Button
              className="h-8 gap-1 px-2 text-zinc-400 hover:bg-white/5 hover:text-white"
              variant="ghost"
            >
              3D 工作台
              <ChevronDown className="h-3 w-3 opacity-50" />
            </Button>
          </nav>
        </div>

        <div className="flex items-center gap-3">
          {/* DCC Bridge (Mock) */}
          <Button
            className="hidden h-8 gap-2 text-zinc-400 hover:bg-white/5 hover:text-white sm:flex"
            variant="ghost"
          >
            <Download className="h-4 w-4" />
            <span className="text-xs">DCC Bridge</span>
          </Button>

          <div className="flex h-8 items-center rounded-full bg-blue-500/10 px-3 text-blue-400">
            <span className="font-medium text-xs">积分</span>
            <span className="ml-1 font-semibold text-sm">{pointsLabel}</span>
          </div>

          {/* User Profile */}
          <div className="ml-1 h-8 w-8 overflow-hidden rounded-full border border-white/10 bg-zinc-800">
            {user?.image ? (
              <img
                alt={user.name || "User"}
                className="h-full w-full object-cover"
                src={user.image}
              />
            ) : (
              <div className="flex h-full w-full items-center justify-center font-semibold text-xs text-zinc-200">
                {userAvatarFallback}
              </div>
            )}
          </div>
        </div>
      </header>

      <div className="flex flex-1 overflow-hidden">
        {/* 1. Left Nav Sidebar (Icon only) */}
        <aside className="z-30 flex w-16 flex-col items-center border-white/10 border-r bg-zinc-950 py-4">
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  className="mb-6 h-10 w-10 rounded-xl text-zinc-400 hover:bg-white/10 hover:text-white"
                  onClick={() => router.push(`/canvas/${id}`)}
                  size="icon"
                  variant="ghost"
                >
                  <ArrowLeft className="h-5 w-5" />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="right">返回画布</TooltipContent>
            </Tooltip>

            <div className="flex flex-col gap-4">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    className={cn(
                      "h-10 w-10 rounded-xl",
                      activeTab === "create"
                        ? "bg-yellow-500 text-black hover:bg-yellow-400"
                        : "text-zinc-400 hover:bg-white/10 hover:text-white"
                    )}
                    onClick={() => setActiveTab("create")}
                    size="icon"
                    variant={activeTab === "create" ? "default" : "ghost"}
                  >
                    <Sparkles className="h-5 w-5" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="right">生成模型</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    className={cn(
                      "h-10 w-10 rounded-xl",
                      activeTab === "edit"
                        ? "bg-yellow-500 text-black hover:bg-yellow-400"
                        : "text-zinc-400 hover:bg-white/10 hover:text-white"
                    )}
                    onClick={() => setActiveTab("edit")}
                    size="icon"
                    variant={activeTab === "edit" ? "default" : "ghost"}
                  >
                    <WandSparkles className="h-5 w-5" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="right">编辑与优化</TooltipContent>
              </Tooltip>

              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    className={cn(
                      "h-10 w-10 rounded-xl",
                      activeTab === "scene"
                        ? "bg-yellow-500 text-black hover:bg-yellow-400"
                        : "text-zinc-400 hover:bg-white/10 hover:text-white"
                    )}
                    onClick={() => setActiveTab("scene")}
                    size="icon"
                    variant={activeTab === "scene" ? "default" : "ghost"}
                  >
                    <Layers3 className="h-5 w-5" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="right">场景层级</TooltipContent>
              </Tooltip>
            </div>

            <div className="mt-auto flex flex-col gap-4">
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 font-bold text-xs text-yellow-500">
                    {pointsLabel}
                  </div>
                </TooltipTrigger>
                <TooltipContent side="right">可用积分</TooltipContent>
              </Tooltip>
            </div>
          </TooltipProvider>
        </aside>

        {/* 2. Left Tool Panel (Expandable Content) */}
        <div className="z-20 flex w-80 flex-col border-white/10 border-r bg-zinc-900/50 backdrop-blur-sm">
          <div className="flex h-14 items-center border-white/10 border-b px-4">
            <h2 className="font-semibold text-sm text-white">
              {activeTab === "create" && "生成模型"}
              {activeTab === "edit" && "模型编辑"}
              {activeTab === "scene" && "场景管理"}
            </h2>
          </div>
          <ScrollArea className="flex-1">
            <div className="space-y-6 p-4">
              {activeTab === "create" && (
                <>
                  <div className="grid grid-cols-4 gap-1 rounded-lg bg-zinc-950 p-1">
                    {[
                      { id: "text", label: "文生", icon: PenLine },
                      { id: "image", label: "图生", icon: ImagePlus },
                      { id: "multiview", label: "多视", icon: Box },
                      { id: "batch", label: "批量", icon: Images },
                    ].map((m) => (
                      <button
                        className={cn(
                          "flex flex-col items-center justify-center gap-1 rounded-md py-2 text-[10px] transition-all",
                          mode === m.id
                            ? "bg-zinc-800 text-white shadow-sm"
                            : "text-zinc-500 hover:text-zinc-300"
                        )}
                        key={m.id}
                        onClick={() => setMode(m.id as any)}
                      >
                        <m.icon className="h-4 w-4" />
                        {m.label}
                      </button>
                    ))}
                  </div>

                  <div className="space-y-3">
                    <div className="space-y-2">
                      <Label className="text-xs text-zinc-400">提示词</Label>
                      <Textarea
                        className="min-h-24 resize-none border-white/10 bg-zinc-950 text-sm text-zinc-300 placeholder:text-zinc-700 focus-visible:ring-yellow-500/50"
                        onChange={(e) => setPrompt(e.target.value)}
                        placeholder="描述你想生成的3D模型..."
                        value={prompt}
                      />
                    </div>

                    {mode === "image" && (
                      <div className="space-y-2">
                        <Label className="text-xs text-zinc-400">参考图</Label>
                        <label className="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-white/10 border-dashed bg-zinc-950 px-3 py-6 text-xs text-zinc-500 transition-colors hover:bg-zinc-900/50">
                          {referencePreviewUrl ? (
                            <div className="relative w-full">
                              <img
                                alt="ref"
                                className="h-32 w-full rounded-md object-contain"
                                src={referencePreviewUrl}
                              />
                              <Button
                                className="-right-2 -top-2 absolute h-6 w-6 rounded-full"
                                onClick={(e) => {
                                  e.preventDefault();
                                  setReferenceImage(null);
                                }}
                                size="icon"
                                variant="destructive"
                              >
                                <X className="h-3 w-3" />
                              </Button>
                            </div>
                          ) : (
                            <>
                              <PlusCircle className="h-6 w-6" />
                              <span>点击上传图片</span>
                            </>
                          )}
                          <Input
                            accept="image/*"
                            className="hidden"
                            onChange={(e) =>
                              setReferenceImage(e.target.files?.[0] || null)
                            }
                            type="file"
                          />
                        </label>
                      </div>
                    )}

                    {/* Multiview slots simplified for brevity, following same dark theme pattern */}
                    {mode === "multiview" && (
                      <div className="grid grid-cols-2 gap-2">
                        {multiViewSlots.map((slot, i) => (
                          <label
                            className="relative flex aspect-square cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-white/10 border-dashed bg-zinc-950 hover:bg-zinc-900"
                            key={slot.id}
                          >
                            {slot.previewUrl ? (
                              <img
                                className="h-full w-full object-cover"
                                src={slot.previewUrl}
                              />
                            ) : (
                              <span className="text-xs text-zinc-600">
                                视图 {i + 1}
                              </span>
                            )}
                            <Input
                              accept="image/*"
                              className="hidden"
                              onChange={(e) =>
                                handleMultiViewFileChange(
                                  i,
                                  e.target.files?.[0] || null
                                )
                              }
                              type="file"
                            />
                          </label>
                        ))}
                      </div>
                    )}

                    <Collapsible
                      onOpenChange={setAdvancedOpen}
                      open={advancedOpen}
                    >
                      <CollapsibleTrigger asChild>
                        <Button
                          className="w-full justify-between border-white/10 bg-transparent text-zinc-400 hover:bg-white/5 hover:text-white"
                          variant="outline"
                        >
                          高级参数
                          {advancedOpen ? (
                            <ChevronUp className="h-4 w-4" />
                          ) : (
                            <ChevronDown className="h-4 w-4" />
                          )}
                        </Button>
                      </CollapsibleTrigger>
                      <CollapsibleContent className="space-y-4 pt-4">
                        <div className="space-y-2">
                          <Label className="text-xs text-zinc-400">
                            模型版本
                          </Label>
                          <Select
                            onValueChange={(v) => setModelVersion(v as any)}
                            value={modelVersion}
                          >
                            <SelectTrigger className="border-white/10 bg-zinc-950 text-zinc-300">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent className="border-zinc-800 bg-zinc-950 text-zinc-300">
                              {MODEL_VERSION_OPTIONS.map((v) => (
                                <SelectItem
                                  className="focus:bg-zinc-800 focus:text-white"
                                  key={v}
                                  value={v}
                                >
                                  {v}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                        {/* Toggles */}
                        <div className="space-y-3 rounded-lg border border-white/10 bg-zinc-950 p-3">
                          <div className="flex items-center justify-between text-xs text-zinc-400">
                            <span>PBR 材质</span>
                            <Switch
                              checked={pbr}
                              className="data-[state=checked]:bg-yellow-500"
                              onCheckedChange={setPbr}
                            />
                          </div>
                          <div className="flex items-center justify-between text-xs text-zinc-400">
                            <span>四边面优化</span>
                            <Switch
                              checked={quad}
                              className="data-[state=checked]:bg-yellow-500"
                              onCheckedChange={setQuad}
                            />
                          </div>
                          <div className="flex items-center justify-between text-xs text-zinc-400">
                            <span>智能低模</span>
                            <Switch
                              checked={smartLowPoly}
                              className="data-[state=checked]:bg-yellow-500"
                              onCheckedChange={setSmartLowPoly}
                            />
                          </div>
                        </div>
                      </CollapsibleContent>
                    </Collapsible>

                    <Button
                      className="w-full bg-yellow-500 text-black hover:bg-yellow-400"
                      disabled={isSubmitting}
                      onClick={handleGenerate}
                      size="lg"
                    >
                      {isSubmitting ? (
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      ) : (
                        <Sparkles className="mr-2 h-4 w-4" />
                      )}
                      {isSubmitting ? "生成中..." : "开始生成"}
                    </Button>
                  </div>
                </>
              )}

              {activeTab === "edit" && (
                <div className="space-y-6">
                  <div className="grid grid-cols-2 gap-2">
                    <Button
                      className="w-full gap-2 border border-white/10 bg-zinc-800 text-zinc-200 hover:bg-zinc-700"
                      disabled={importDisabled}
                      onClick={handleImportToCanvas}
                      variant="secondary"
                    >
                      <PlusCircle className="h-4 w-4" /> 导入画布
                    </Button>
                    <Button
                      className="w-full gap-2 border border-white/10 bg-zinc-800 text-zinc-200 hover:bg-zinc-700"
                      disabled={!currentModelUrl}
                      onClick={handleDownloadCurrent}
                      variant="secondary"
                    >
                      <Download className="h-4 w-4" /> 下载
                    </Button>
                  </div>

                  <Separator className="bg-white/10" />

                  <div className="space-y-3">
                    <h4 className="flex items-center gap-2 font-medium text-xs text-zinc-400">
                      <Package className="h-3.5 w-3.5" /> 格式转换
                    </h4>
                    <div className="flex gap-2">
                      <Select
                        onValueChange={(v) => setExportFormat(v as any)}
                        value={exportFormat}
                      >
                        <SelectTrigger className="flex-1 border-white/10 bg-zinc-950 text-zinc-300">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="border-zinc-800 bg-zinc-950 text-zinc-300">
                          {EXPORT_FORMAT_OPTIONS.map((f) => (
                            <SelectItem
                              className="focus:bg-zinc-800 focus:text-white"
                              key={f}
                              value={f}
                            >
                              {f}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <Button
                        className="border-white/10 bg-transparent text-zinc-300 hover:bg-white/10"
                        disabled={
                          isSubmitting ||
                          !currentTask ||
                          currentTask.status !== "success"
                        }
                        onClick={handleConvertAndDownload}
                        variant="outline"
                      >
                        转换
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h4 className="mb-2 font-medium text-xs text-zinc-400">
                      常用操作
                    </h4>
                    <Button
                      className="w-full justify-start border-white/10 bg-transparent text-zinc-300 hover:bg-white/10"
                      disabled={
                        isSubmitting ||
                        !currentTask ||
                        currentTask.status !== "success"
                      }
                      onClick={handleRefineModel}
                      variant="outline"
                    >
                      <Sparkles className="mr-2 h-4 w-4" /> 模型精修
                    </Button>
                    <Button
                      className="w-full justify-start border-white/10 bg-transparent text-zinc-300 hover:bg-white/10"
                      disabled={
                        isSubmitting ||
                        !currentTask ||
                        currentTask.status !== "success"
                      }
                      onClick={handleTextureModel}
                      variant="outline"
                    >
                      <Palette className="mr-2 h-4 w-4" /> 纹理重绘
                    </Button>
                    <Button
                      className="w-full justify-start border-white/10 bg-transparent text-zinc-300 hover:bg-white/10"
                      disabled={
                        isSubmitting ||
                        !currentTask ||
                        currentTask.status !== "success"
                      }
                      onClick={handleRigModel}
                      variant="outline"
                    >
                      <Bone className="mr-2 h-4 w-4" /> 自动绑定
                    </Button>
                  </div>
                </div>
              )}

              {activeTab === "scene" && (
                <div className="space-y-4">
                  <div className="rounded-lg border border-white/10 bg-zinc-950 p-4">
                    <div className="grid grid-cols-2 gap-4 text-center">
                      <div>
                        <div className="font-bold text-lg text-white">
                          {viewerStats.triangles.toLocaleString()}
                        </div>
                        <div className="text-xs text-zinc-500">面数</div>
                      </div>
                      <div>
                        <div className="font-bold text-lg text-white">
                          {viewerStats.vertices.toLocaleString()}
                        </div>
                        <div className="text-xs text-zinc-500">顶点</div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h4 className="font-medium text-xs text-zinc-400">
                      网格列表 ({viewerLayers.length})
                    </h4>
                    {viewerLayers.map((layer) => (
                      <div
                        className="flex items-center justify-between rounded-md bg-zinc-900 p-2 text-xs text-zinc-300"
                        key={layer.id}
                      >
                        <span className="truncate">{layer.name}</span>
                        <div className="flex gap-1">
                          <Button
                            className="h-6 w-6 hover:text-white"
                            onClick={() =>
                              setLayerVisibility((prev) => ({
                                ...prev,
                                [layer.id]: prev[layer.id] === false,
                              }))
                            }
                            size="icon"
                            variant="ghost"
                          >
                            {layerVisibility[layer.id] === false ? (
                              <EyeOff className="h-3 w-3" />
                            ) : (
                              <Eye className="h-3 w-3" />
                            )}
                          </Button>
                          <Button
                            className="h-6 w-6 hover:text-white"
                            onClick={() =>
                              setIsolatedLayerId((prev) =>
                                prev === layer.id ? null : layer.id
                              )
                            }
                            size="icon"
                            variant="ghost"
                          >
                            <Maximize className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </ScrollArea>
        </div>

        {/* 3. Main Viewer Area */}
        <div className="relative flex-1 bg-black">
          <Model3DViewer
            layerVisibility={effectiveLayerVisibility}
            modelUrl={currentModelUrl}
            onLayersChange={handleLayersChange}
            onStatsChange={setViewerStats}
            previewImageUrl={currentPreviewImage}
            settings={viewerSettings}
          />

          {/* Floating Toolbar */}
          <div className="-translate-x-1/2 absolute bottom-8 left-1/2 z-10 flex items-center gap-2 rounded-full border border-white/10 bg-zinc-900/80 p-2 shadow-2xl backdrop-blur-md">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    className="h-8 w-8 rounded-full text-zinc-300 hover:text-white"
                    onClick={() =>
                      setViewerSettings((prev) => ({
                        ...prev,
                        showGrid: !prev.showGrid,
                      }))
                    }
                    size="icon"
                    variant={viewerSettings.showGrid ? "secondary" : "ghost"}
                  >
                    <Grid3X3 className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>网格</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    className="h-8 w-8 rounded-full text-zinc-300 hover:text-white"
                    onClick={() =>
                      setViewerSettings((prev) => ({
                        ...prev,
                        autoRotate: !prev.autoRotate,
                      }))
                    }
                    size="icon"
                    variant={viewerSettings.autoRotate ? "secondary" : "ghost"}
                  >
                    <RotateCw className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>自动旋转</TooltipContent>
              </Tooltip>
              <Separator className="h-4 bg-white/20" orientation="vertical" />
              <div className="flex items-center gap-2 px-2">
                <Sun className="h-3 w-3 text-zinc-400" />
                <Slider
                  className="w-20"
                  max={2}
                  min={0.2}
                  onValueChange={(v) =>
                    setViewerSettings((prev) => ({
                      ...prev,
                      lightIntensity: v[0] || 1,
                    }))
                  }
                  step={0.1}
                  value={[viewerSettings.lightIntensity]}
                />
              </div>
            </TooltipProvider>
          </div>
        </div>

        {/* 4. Right Assets Panel */}
        <div className="z-20 flex w-72 flex-col border-white/10 border-l bg-zinc-900/50 backdrop-blur-sm">
          <div className="flex h-14 items-center justify-between border-white/10 border-b px-4">
            <h2 className="font-semibold text-sm text-white">资产库</h2>
            <Button
              className="h-8 w-8 text-zinc-400 hover:text-white"
              onClick={handleClearHistory}
              size="icon"
              variant="ghost"
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
          <ScrollArea className="flex-1">
            <div className="grid grid-cols-2 gap-2 p-3">
              {taskHistory.map((task) => (
                <button
                  className={cn(
                    "group relative aspect-square overflow-hidden rounded-lg border border-white/5 bg-zinc-950 transition-all hover:border-yellow-500/50",
                    currentTask?.taskId === task.taskId &&
                      "border-yellow-500 ring-1 ring-yellow-500/20"
                  )}
                  key={task.taskId}
                  onClick={() => handleSelectTask(task)}
                >
                  {task.previewImageUrl ? (
                    <img
                      alt="preview"
                      className="h-full w-full object-cover transition-transform group-hover:scale-110"
                      src={task.previewImageUrl}
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center text-zinc-700">
                      <Box className="h-8 w-8" />
                    </div>
                  )}
                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-2 pt-6">
                    <div className="flex items-center justify-between">
                      <Badge
                        className="h-4 px-1 text-[9px]"
                        variant={
                          task.status === "success" ? "default" : "secondary"
                        }
                      >
                        {statusLabel(task.status)}
                      </Badge>
                    </div>
                  </div>
                </button>
              ))}
              {taskHistory.length === 0 && (
                <div className="col-span-2 py-10 text-center text-xs text-zinc-500">
                  暂无历史记录
                </div>
              )}
            </div>
          </ScrollArea>
        </div>
      </div>
    </div>
  );
}