"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import {
  AlertTriangle,
  ArrowLeft,
  ChevronDown,
  ChevronUp,
  Clock3,
  Image as ImageIcon,
  Layers,
  Lock,
  Loader2,
  RefreshCw,
  Save,
  Sparkles,
  Trash2,
  Type,
  Upload,
} from "lucide-react";
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 { Progress } from "@/components/ui/progress";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import {
  getAgentWorkflowCategoryLabels,
  getAgentWorkflowCategoryOptionsByBrand,
} from "@/lib/agents/workflow-ui-config";
import {
  AGENT_PSD_TEMPLATE_ALL_CATEGORY_TAG,
  getAgentPsdTemplateCategoryTagOptions,
  normalizeAgentPsdTemplateCategoryTagConfig,
  normalizeAgentPsdTemplateCategoryTags,
} from "@/lib/agents/psd-template-category-tag-config";
import type {
  AgentPsdFont,
  AgentPsdFontListResponse,
  AgentPsdFontMutationResponse,
} from "@/lib/agents/psd-font-config";
import type {
  AgentPsdTemplateMode,
  AgentPsdTemplate,
  AgentPsdTemplateLayerSlot,
  AgentPsdTemplateListResponse,
  AgentPsdTemplateMutationResponse,
} from "@/lib/agents/psd-template-config";
import type { AgentWorkflowUiConfig } from "@/types/agent";

const fetcher = (url: string) => fetch(url, { cache: "no-store" }).then((res) => res.json());

async function fetchPsdTemplateList(url: string): Promise<AgentPsdTemplateListResponse> {
  const response = await fetch(url, { cache: "no-store" });
  const payload = (await response
    .json()
    .catch(() => null)) as Partial<AgentPsdTemplateListResponse> | null;

  if (
    !response.ok ||
    !payload ||
    payload.success !== true ||
    !Array.isArray(payload.templates)
  ) {
    throw new Error(
      String(payload?.error || "").trim() || "PSD 模板读取失败"
    );
  }

  return payload as AgentPsdTemplateListResponse;
}

const SYSTEM_FONT_OPTIONS = [
  { id: "__system_sans", label: "系统无衬线", family: "sans-serif" },
  { id: "__system_serif", label: "系统衬线", family: "serif" },
  { id: "__system_mono", label: "系统等宽", family: "monospace" },
];

const EMPTY_CATEGORY_SELECT_VALUE = "__none__";
const EMPTY_BRAND_SELECT_VALUE = "__unassigned__";
const UNASSIGNED_BRAND_LABEL = "未分类";
const MAX_PSD_TEMPLATE_FILE_SIZE = 80 * 1024 * 1024;
const PSD_TEMPLATE_MODE_OPTIONS: Array<{
  value: AgentPsdTemplateMode;
  label: string;
  description: string;
}> = [
  {
    value: "main",
    label: "主图模式",
    description: "用于主图结果区的 PSD 套版模板。",
  },
  {
    value: "sku",
    label: "SKU图模式",
    description: "用于 SKU 结果区的 PSD 套版模板。",
  },
];

function getPsdTemplateModeLabel(mode?: AgentPsdTemplateMode | null) {
  return mode === "sku" ? "SKU图模式" : "主图模式";
}

function formatUploadFileSize(size: number) {
  if (!Number.isFinite(size) || size <= 0) return "0MB";
  const mb = size / (1024 * 1024);
  if (mb >= 1) return `${mb.toFixed(mb >= 10 ? 0 : 1)}MB`;
  return `${Math.max(1, Math.round(size / 1024))}KB`;
}

function normalizeManagedBrandName(value?: string | null) {
  const normalized = String(value || "").trim();
  if (!normalized || normalized === "未分配品牌") {
    return "";
  }
  return normalized;
}

function getQueuedFontFileKey(file: File) {
  return [file.name, file.size, file.lastModified].join("__");
}

function mergeQueuedFontFiles(current: File[], incoming: File[]) {
  const merged = [...current];
  const seen = new Set(current.map((file) => getQueuedFontFileKey(file)));

  for (const file of incoming) {
    const key = getQueuedFontFileKey(file);
    if (seen.has(key)) {
      continue;
    }
    seen.add(key);
    merged.push(file);
  }

  return merged;
}

function hasTemplateCategoryTag(tags: string[] | undefined, target: string) {
  const normalizedTarget = String(target || "").trim().toLowerCase();
  if (!normalizedTarget) {
    return false;
  }

  return (tags || []).some((tag) => tag.trim().toLowerCase() === normalizedTarget);
}

function toggleTemplateCategoryTag(tags: string[] | undefined, target: string) {
  const normalizedTags = normalizeAgentPsdTemplateCategoryTags(tags);
  const normalizedTarget = normalizeAgentPsdTemplateCategoryTags([target])[0];

  if (!normalizedTarget) {
    return normalizedTags;
  }

  if (hasTemplateCategoryTag(normalizedTags, normalizedTarget)) {
    return normalizedTags.filter((tag) => tag.trim().toLowerCase() !== normalizedTarget.toLowerCase());
  }

  return normalizeAgentPsdTemplateCategoryTags([...normalizedTags, normalizedTarget]);
}

function cloneTemplate(template: AgentPsdTemplate | null) {
  return template ? (JSON.parse(JSON.stringify(template)) as AgentPsdTemplate) : null;
}

function countEditableLayers(template: AgentPsdTemplate | null) {
  return (
    template?.layers.filter((layer) => layer.isEditable && !layer.isSuperLocked)
      .length || 0
  );
}

function countEditableTextLayers(template: AgentPsdTemplate | null) {
  return (
    template?.layers.filter(
      (layer) =>
        layer.isEditable && !layer.isSuperLocked && layer.slotType === "text"
    ).length || 0
  );
}

function hasTemplateParsedCanvas(template: AgentPsdTemplate | null) {
  return Boolean(
    template &&
      Number(template.width || 0) > 1 &&
      Number(template.height || 0) > 1 &&
      String(template.previewUrl || "").trim()
  );
}

function getTemplateParseLabel(template: AgentPsdTemplate | null) {
  if (!template) return "未解析";

  switch (template.parseStatus) {
    case "processing":
      return hasTemplateParsedCanvas(template) ? "补全中" : "解析中";
    case "completed":
      return "已解析";
    case "failed":
      return hasTemplateParsedCanvas(template) ? "补全失败" : "解析失败";
    default:
      return "待解析";
  }
}

function getTemplateParseBadgeVariant(template: AgentPsdTemplate | null) {
  if (!template) return "outline" as const;

  switch (template.parseStatus) {
    case "processing":
      return "secondary" as const;
    case "completed":
      return "default" as const;
    case "failed":
      return "destructive" as const;
    default:
      return "outline" as const;
  }
}

function getTemplateParseProgress(template: AgentPsdTemplate | null) {
  if (!template) return 0;
  if (template.parseStatus === "completed") return 100;
  return Math.max(0, Math.min(100, Number(template.parseProgress || 0)));
}

function getTemplateParseActionLabel(template: AgentPsdTemplate | null) {
  if (template?.parseStatus === "processing") {
    return "补全中";
  }
  return template?.parseStatus === "completed" ? "重新解析" : "解析 PSD";
}

function shouldHydrateDraftTemplate(
  current: AgentPsdTemplate | null,
  next: AgentPsdTemplate | null
) {
  if (!current || !next) return true;
  if (current.id !== next.id) return true;

  return (
    current.parseStatus !== next.parseStatus ||
    getTemplateParseProgress(current) !== getTemplateParseProgress(next) ||
    (current.parseStage || "") !== (next.parseStage || "") ||
    (current.parseError || "") !== (next.parseError || "") ||
    (current.previewUrl || "") !== (next.previewUrl || "") ||
    current.layers.length !== next.layers.length ||
    (current.layers.length === 0 && next.layers.length > 0)
  );
}

export function PsdTemplatesSettingsClient({
  backHref,
  backLabel,
}: {
  backHref: string;
  backLabel: string;
}) {
  const {
    data,
    error: templatesRequestError,
    mutate,
    isLoading,
  } = useSWR<AgentPsdTemplateListResponse>(
    "/api/admin/psd-templates",
    fetchPsdTemplateList,
    {
      keepPreviousData: true,
      revalidateOnFocus: false,
      dedupingInterval: 10_000,
    }
  );
  const { data: siteSettingsData, mutate: mutateSiteSettings } = useSWR<{
    agentWorkflowUiConfig?: AgentWorkflowUiConfig;
    agentPsdTemplateCategoryTagConfig?: {
      tags?: string[];
    };
  }>("/api/site-settings", fetcher);
  const { data: fontsData, mutate: mutateFonts } = useSWR<AgentPsdFontListResponse>(
    "/api/admin/psd-fonts",
    fetcher
  );

  const templates = useMemo(() => (data?.success ? data.templates : []), [data]);
  const templateListErrorMessage = useMemo(() => {
    if (templatesRequestError instanceof Error) {
      return templatesRequestError.message.trim() || "PSD 模板读取失败";
    }

    if (!data || data.success) {
      return "";
    }
    return String(data.error || "").trim() || "PSD 模板读取失败";
  }, [data, templatesRequestError]);
  const fonts = useMemo(() => (fontsData?.success ? fontsData.fonts : []), [fontsData]);
  const brandOptions = useMemo(
    () =>
      Array.from(
        new Set(
          [
            ...(siteSettingsData?.agentWorkflowUiConfig?.inputOptions?.brands || []),
            ...templates.map((template) => template.brandName),
            ...fonts.map((font) => font.brandName || ""),
          ]
            .map((item) => String(item || "").trim())
            .filter(Boolean)
        )
      ),
    [siteSettingsData, templates, fonts]
  );
  const managedBrandOptions = useMemo(
    () =>
      Array.from(
        new Set(brandOptions.map((brand) => normalizeManagedBrandName(brand)).filter(Boolean))
      ).sort((left, right) => left.localeCompare(right, "zh-CN")),
    [brandOptions]
  );

  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
  const [draftTemplate, setDraftTemplate] = useState<AgentPsdTemplate | null>(null);
  const [layerKeyword, setLayerKeyword] = useState("");
  const [uploadName, setUploadName] = useState("");
  const [uploadBrandName, setUploadBrandName] = useState("");
  const [uploadMode, setUploadMode] = useState<AgentPsdTemplateMode>("main");
  const [uploadSecondaryCategory, setUploadSecondaryCategory] = useState("");
  const [uploadCategoryTags, setUploadCategoryTags] = useState<string[]>([]);
  const [uploadDescription, setUploadDescription] = useState("");
  const [uploadFile, setUploadFile] = useState<File | null>(null);
  const [fontUploadName, setFontUploadName] = useState("");
  const [fontFamily, setFontFamily] = useState("");
  const [fontUploadBrandName, setFontUploadBrandName] = useState("");
  const [fontUploadFiles, setFontUploadFiles] = useState<File[]>([]);
  const fontFileInputRef = useRef<HTMLInputElement | null>(null);
  const [isCreating, setIsCreating] = useState(false);
  const [isCreatingAndParsing, setIsCreatingAndParsing] = useState(false);
  const [templateUploadPercent, setTemplateUploadPercent] = useState(0);
  const [templateUploadStatus, setTemplateUploadStatus] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [deletingTemplateId, setDeletingTemplateId] = useState<string | null>(null);
  const [isUploadingFont, setIsUploadingFont] = useState(false);
  const [deletingFontId, setDeletingFontId] = useState<string | null>(null);
  const [savingTemplateBrandId, setSavingTemplateBrandId] = useState<string | null>(null);
  const [savingFontBrandId, setSavingFontBrandId] = useState<string | null>(null);
  const [categoryTagDraft, setCategoryTagDraft] = useState("");
  const [isSavingCategoryTags, setIsSavingCategoryTags] = useState(false);
  const [isFontListExpanded, setIsFontListExpanded] = useState(false);
  const [templateBrandDrafts, setTemplateBrandDrafts] = useState<Record<string, string>>({});
  const [fontBrandDrafts, setFontBrandDrafts] = useState<Record<string, string>>({});
  const [parsingTemplateIds, setParsingTemplateIds] = useState<string[]>([]);

  const selectedTemplate = useMemo(
    () => templates.find((template) => template.id === selectedTemplateId) || null,
    [selectedTemplateId, templates]
  );
  const workflowConfig = siteSettingsData?.agentWorkflowUiConfig || null;
  const workflowCategoryLabels = useMemo(
    () => getAgentWorkflowCategoryLabels(workflowConfig),
    [workflowConfig]
  );
  const categoryTagConfig = useMemo(
    () =>
      normalizeAgentPsdTemplateCategoryTagConfig(
        siteSettingsData?.agentPsdTemplateCategoryTagConfig
      ),
    [siteSettingsData?.agentPsdTemplateCategoryTagConfig]
  );
  const availableCategoryTagOptions = useMemo(
    () => getAgentPsdTemplateCategoryTagOptions(categoryTagConfig),
    [categoryTagConfig]
  );
  const draftTemplateCategoryTagOptions = useMemo(
    () =>
      getAgentPsdTemplateCategoryTagOptions(
        categoryTagConfig,
        draftTemplate?.categoryTags || []
      ),
    [categoryTagConfig, draftTemplate?.categoryTags]
  );
  const categoryLevelOptions = useMemo(
    () => [
      {
        key: "third",
        label: workflowCategoryLabels.thirdCategory,
      },
      {
        key: "fourth",
        label: workflowCategoryLabels.fourthCategory,
      },
      {
        key: "fifth",
        label: workflowCategoryLabels.fifthCategory,
      },
    ],
    [workflowCategoryLabels]
  );
  const uploadBrandCategoryOptions = useMemo(() => {
    const options = getAgentWorkflowCategoryOptionsByBrand({
      config: workflowConfig,
      brand: uploadBrandName,
    });
    const currentValue = uploadSecondaryCategory.trim();
    if (
      currentValue &&
      !options.some((option) => option.value.toLowerCase() === currentValue.toLowerCase())
    ) {
      return [{ value: currentValue, level: "custom" as const, levelLabel: "当前值" }, ...options];
    }
    return options;
  }, [workflowConfig, uploadBrandName, uploadSecondaryCategory]);
  const draftBrandCategoryOptions = useMemo(() => {
    const options = getAgentWorkflowCategoryOptionsByBrand({
      config: workflowConfig,
      brand: draftTemplate?.brandName,
    });
    const currentValue = String(draftTemplate?.secondaryCategory || "").trim();
    if (
      currentValue &&
      !options.some((option) => option.value.toLowerCase() === currentValue.toLowerCase())
    ) {
      return [{ value: currentValue, level: "custom" as const, levelLabel: "当前值" }, ...options];
    }
    return options;
  }, [workflowConfig, draftTemplate?.brandName, draftTemplate?.secondaryCategory]);
  const selectableDraftBrandOptions = useMemo(() => {
    const currentBrand = normalizeManagedBrandName(draftTemplate?.brandName);
    return Array.from(new Set([...managedBrandOptions, ...(currentBrand ? [currentBrand] : [])]));
  }, [draftTemplate?.brandName, managedBrandOptions]);
  const groupedTemplates = useMemo(() => {
    const grouped = new Map<string, AgentPsdTemplate[]>();
    templates.forEach((template) => {
      const label = normalizeManagedBrandName(template.brandName) || UNASSIGNED_BRAND_LABEL;
      const current = grouped.get(label) || [];
      current.push(template);
      grouped.set(label, current);
    });

    return Array.from(grouped.entries())
      .sort(([leftLabel], [rightLabel]) => {
        if (leftLabel === UNASSIGNED_BRAND_LABEL) return -1;
        if (rightLabel === UNASSIGNED_BRAND_LABEL) return 1;
        return leftLabel.localeCompare(rightLabel, "zh-CN");
      })
      .map(([label, items]) => ({
        label,
        items,
      }));
  }, [templates]);
  const groupedFonts = useMemo(() => {
    const grouped = new Map<string, AgentPsdFont[]>();
    fonts.forEach((font) => {
      const label = normalizeManagedBrandName(font.brandName) || UNASSIGNED_BRAND_LABEL;
      const current = grouped.get(label) || [];
      current.push(font);
      grouped.set(label, current);
    });

    return Array.from(grouped.entries())
      .sort(([leftLabel], [rightLabel]) => {
        if (leftLabel === UNASSIGNED_BRAND_LABEL) return -1;
        if (rightLabel === UNASSIGNED_BRAND_LABEL) return 1;
        return leftLabel.localeCompare(rightLabel, "zh-CN");
      })
      .map(([label, items]) => ({
        label,
        items,
      }));
  }, [fonts]);

  const fontOptions = useMemo(
    () => [
      ...SYSTEM_FONT_OPTIONS,
      ...fonts.map((font) => ({
        id: font.id,
        label: font.name,
        family: font.family,
      })),
    ],
    [fonts]
  );

  useEffect(() => {
    if (templateListErrorMessage) {
      return;
    }

    if (!templates.length) {
      setSelectedTemplateId(null);
      return;
    }

    if (selectedTemplateId && !templates.some((template) => template.id === selectedTemplateId)) {
      setSelectedTemplateId(null);
    }
  }, [selectedTemplateId, templateListErrorMessage, templates]);

  useEffect(() => {
    if (!selectedTemplate) {
      setDraftTemplate(null);
      setLayerKeyword("");
      return;
    }

    setDraftTemplate((current) =>
      shouldHydrateDraftTemplate(current, selectedTemplate)
        ? cloneTemplate(selectedTemplate)
        : current
    );
  }, [selectedTemplate]);

  useEffect(() => {
    setLayerKeyword("");
  }, [selectedTemplateId]);

  useEffect(() => {
    const hasRunningTask =
      parsingTemplateIds.length > 0 ||
      templates.some((template) => template.parseStatus === "processing");
    if (!hasRunningTask) {
      return;
    }

    const intervalId = window.setInterval(() => {
      void mutate();
    }, 1200);

    return () => {
      window.clearInterval(intervalId);
    };
  }, [mutate, parsingTemplateIds.length, templates]);

  const filteredLayers = useMemo(() => {
    if (!draftTemplate) return [];
    const keyword = layerKeyword.trim().toLowerCase();
    if (!keyword) return draftTemplate.layers;

    return draftTemplate.layers.filter((layer) => {
      const haystack = `${layer.layerName} ${layer.layerPath} ${layer.layerId}`.toLowerCase();
      return haystack.includes(keyword);
    });
  }, [draftTemplate, layerKeyword]);

  function updateDraftLayer(
    layerId: string,
    updater: (layer: AgentPsdTemplateLayerSlot) => AgentPsdTemplateLayerSlot
  ) {
    setDraftTemplate((current) => {
      if (!current) return current;
      return {
        ...current,
        layers: current.layers.map((layer) => (layer.id === layerId ? updater(layer) : layer)),
      };
    });
  }

  function removeDraftLayer(layerId: string) {
    setDraftTemplate((current) => {
      if (!current) return current;
      const nextLayers = current.layers.filter((layer) => layer.id !== layerId);
      return {
        ...current,
        layers: nextLayers,
        layerCount: nextLayers.length,
      };
    });
  }

  function handleTemplateFileChange(event: ChangeEvent<HTMLInputElement>) {
    const nextFile = event.target.files?.[0] || null;
    if (nextFile && nextFile.size > MAX_PSD_TEMPLATE_FILE_SIZE) {
      toast.error(
        `PSD 模板不能超过 80MB，当前文件约 ${formatUploadFileSize(nextFile.size)}`
      );
      event.currentTarget.value = "";
      setUploadFile(null);
      return;
    }

    setUploadFile(nextFile);

    if (nextFile && !uploadName.trim()) {
      setUploadName(nextFile.name.replace(/\.[^.]+$/, ""));
    }
  }

  function handleFontFileChange(event: ChangeEvent<HTMLInputElement>) {
    const nextFiles = Array.from(event.target.files || []);
    if (nextFiles.length === 0) {
      return;
    }

    setFontUploadFiles((current) => mergeQueuedFontFiles(current, nextFiles));

    if (fontUploadFiles.length === 0 && nextFiles.length === 1) {
      const normalizedName = nextFiles[0]?.name.replace(/\.[^.]+$/, "") || "";
      if (normalizedName && !fontUploadName.trim()) {
        setFontUploadName(normalizedName);
      }
      if (normalizedName && !fontFamily.trim()) {
        setFontFamily(normalizedName);
      }
    }

    event.currentTarget.value = "";
  }

  function handleRemoveQueuedFontFile(file: File) {
    setFontUploadFiles((current) =>
      current.filter(
        (item) => getQueuedFontFileKey(item) !== getQueuedFontFileKey(file)
      )
    );
  }

  function handleClearQueuedFontFiles() {
    setFontUploadFiles([]);
    if (fontFileInputRef.current) {
      fontFileInputRef.current.value = "";
    }
  }

  async function saveCategoryTagConfig(nextTags: string[]) {
    const normalized = normalizeAgentPsdTemplateCategoryTagConfig({
      tags: nextTags,
    });

    try {
      setIsSavingCategoryTags(true);
      const response = await fetch("/api/site-settings", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          agentPsdTemplateCategoryTagConfig: normalized,
        }),
      });

      const payload = (await response.json().catch(() => null)) as
        | { error?: string }
        | null;
      if (!response.ok) {
        throw new Error(payload?.error || "品类标签保存失败");
      }

      await mutateSiteSettings();
      return normalized.tags;
    } finally {
      setIsSavingCategoryTags(false);
    }
  }

  async function handleAddCategoryTag() {
    const nextTag = normalizeAgentPsdTemplateCategoryTags([categoryTagDraft])[0];
    if (!nextTag) {
      toast.error("请先输入品类标签");
      return;
    }

    if (nextTag === AGENT_PSD_TEMPLATE_ALL_CATEGORY_TAG) {
      toast.error("“适合所有”是固定标签，无需重复添加");
      return;
    }

    if (hasTemplateCategoryTag(categoryTagConfig.tags, nextTag)) {
      toast.error("该品类标签已存在");
      return;
    }

    try {
      await saveCategoryTagConfig([...categoryTagConfig.tags, nextTag]);
      setCategoryTagDraft("");
      toast.success("品类标签已添加");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "品类标签保存失败");
    }
  }

  async function handleRemoveCategoryTag(tag: string) {
    const normalizedTag = normalizeAgentPsdTemplateCategoryTags([tag])[0];
    if (!normalizedTag || normalizedTag === AGENT_PSD_TEMPLATE_ALL_CATEGORY_TAG) {
      return;
    }

    try {
      await saveCategoryTagConfig(
        categoryTagConfig.tags.filter(
          (item) => item.trim().toLowerCase() !== normalizedTag.toLowerCase()
        )
      );
      toast.success("品类标签已移除");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "品类标签保存失败");
    }
  }

  async function handleCreateTemplate(options?: { parseAfterUpload?: boolean }) {
    const parseAfterUpload = options?.parseAfterUpload === true;
    if (!uploadFile) {
      toast.error("请先选择 PSD / PSB 文件");
      return;
    }

    if (uploadFile.size > MAX_PSD_TEMPLATE_FILE_SIZE) {
      toast.error(
        `PSD 模板不能超过 80MB，当前文件约 ${formatUploadFileSize(uploadFile.size)}`
      );
      return;
    }

    if (!uploadBrandName.trim()) {
      toast.error("请先选择模板品牌");
      return;
    }

    const formData = new FormData();
    formData.set("name", uploadName.trim() || uploadFile.name.replace(/\.[^.]+$/, ""));
    formData.set("brandName", uploadBrandName.trim());
    formData.set("mode", uploadMode);
    formData.set("secondaryCategory", uploadSecondaryCategory.trim());
    uploadCategoryTags.forEach((tag) => {
      formData.append("categoryTags", tag);
    });
    formData.set("description", uploadDescription.trim());
    formData.set("status", "disabled");
    formData.set("file", uploadFile);

    try {
      setIsCreating(!parseAfterUpload);
      setIsCreatingAndParsing(parseAfterUpload);
      setTemplateUploadPercent(0);
      setTemplateUploadStatus("上传中 0%");

      const payload = await new Promise<AgentPsdTemplateMutationResponse>((resolve, reject) => {
        const xhr = new XMLHttpRequest();

        xhr.upload.onprogress = (event) => {
          if (!event.lengthComputable) return;
          const percent = Math.round((event.loaded / event.total) * 100);
          setTemplateUploadPercent(percent);
          setTemplateUploadStatus(`上传中 ${percent}%`);
        };

        xhr.upload.onloadend = () => {
          setTemplateUploadPercent(100);
          setTemplateUploadStatus("文件已上传，正在创建待解析模板...");
        };

        xhr.onload = () => {
          let responsePayload: AgentPsdTemplateMutationResponse | null = null;
          try {
            responsePayload = JSON.parse(xhr.responseText) as AgentPsdTemplateMutationResponse;
          } catch {
            reject(new Error("解析响应失败"));
            return;
          }

          if (xhr.status >= 200 && xhr.status < 300 && responsePayload.success) {
            resolve(responsePayload);
            return;
          }

          reject(new Error(responsePayload.error || "PSD 模板上传失败"));
        };

        xhr.onerror = () =>
          reject(new Error("上传连接被中断，请检查网络或压缩 PSD 后重试"));
        xhr.onabort = () => reject(new Error("上传已取消，请重新选择 PSD 后再试"));
        xhr.ontimeout = () => reject(new Error("上传超时，请检查网络或压缩 PSD 后重试"));

        xhr.open("POST", "/api/admin/psd-templates");
        xhr.timeout = 10 * 60 * 1000;
        xhr.send(formData);
      });

      if (!payload.template) {
        throw new Error(payload.error || "PSD 模板上传失败");
      }

      setTemplateUploadPercent(100);
      setTemplateUploadStatus(
        parseAfterUpload ? "上传完成，正在提交 PSD 解析..." : "上传完成，等待手动解析"
      );
      toast.success(
        parseAfterUpload
          ? "PSD 文件已上传，正在开始解析"
          : "PSD 文件已上传，请点击“解析 PSD”生成模板图层"
      );
      setUploadName("");
      setUploadBrandName("");
      setUploadSecondaryCategory("");
      setUploadCategoryTags([]);
      setUploadDescription("");
      setUploadFile(null);
      await mutate();
      setSelectedTemplateId(payload.template.id);
      setDraftTemplate(cloneTemplate(payload.template));

      if (parseAfterUpload) {
        await handleParseTemplate(payload.template, {
          skipCompletedConfirm: true,
          onStart: () => {
            setTemplateUploadStatus("正在解析 PSD，请稍候...");
          },
          onDone: (template) => {
            setTemplateUploadStatus(
              template.parseStatus === "completed"
                ? "解析完成"
                : "快速解析完成，后台继续补全资产..."
            );
          },
          onError: (message) => {
            setTemplateUploadStatus(`解析失败：${message}`);
          },
        });
      }
    } catch (error) {
      setTemplateUploadPercent(0);
      setTemplateUploadStatus("");
      toast.error(error instanceof Error ? error.message : "PSD 模板上传失败");
    } finally {
      setIsCreating(false);
      setIsCreatingAndParsing(false);
    }
  }

  async function handleUploadFont() {
    if (fontUploadFiles.length === 0) {
      toast.error("请先选择字体文件");
      return;
    }

    const formData = new FormData();
    if (fontUploadFiles.length === 1) {
      formData.set(
        "name",
        fontUploadName.trim() ||
          fontUploadFiles[0]?.name.replace(/\.[^.]+$/, "") ||
          "CustomFont"
      );
    }
    formData.set("family", fontFamily.trim());
    formData.set("brandName", fontUploadBrandName.trim());
    for (const file of fontUploadFiles) {
      formData.append("files", file);
    }

    try {
      setIsUploadingFont(true);
      const response = await fetch("/api/admin/psd-fonts", {
        method: "POST",
        body: formData,
      });
      const payload = (await response.json()) as AgentPsdFontMutationResponse;
      const uploadedFonts = payload.fonts || (payload.font ? [payload.font] : []);
      if (!response.ok || !payload.success || uploadedFonts.length === 0) {
        throw new Error(payload.error || "字体上传失败");
      }

      toast.success(
        uploadedFonts.length > 1
          ? `已批量上传 ${uploadedFonts.length} 个字体`
          : "字体已上传到字体库"
      );
      setFontUploadName("");
      setFontFamily("");
      setFontUploadBrandName("");
      setFontUploadFiles([]);
      if (fontFileInputRef.current) {
        fontFileInputRef.current.value = "";
      }
      await mutateFonts();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "字体上传失败");
    } finally {
      setIsUploadingFont(false);
    }
  }

  async function handleDeleteFont(font: AgentPsdFont) {
    const confirmed = window.confirm(`确认删除字体“${font.name}”吗？`);
    if (!confirmed) return;

    try {
      setDeletingFontId(font.id);
      const response = await fetch(`/api/admin/psd-fonts/${encodeURIComponent(font.id)}`, {
        method: "DELETE",
      });
      const payload = (await response.json()) as AgentPsdFontMutationResponse;
      if (!response.ok || !payload.success) {
        throw new Error(payload.error || "字体删除失败");
      }

      toast.success("字体已删除");
      await mutateFonts();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "字体删除失败");
    } finally {
      setDeletingFontId(null);
    }
  }

  async function handleQuickUpdateFontBrand(font: AgentPsdFont, nextBrandName: string) {
    const normalizedBrandName = normalizeManagedBrandName(nextBrandName);

    try {
      setSavingFontBrandId(font.id);
      const response = await fetch(`/api/admin/psd-fonts/${encodeURIComponent(font.id)}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: font.name,
          family: font.family,
          brandName: normalizedBrandName,
        }),
      });
      const payload = (await response.json()) as AgentPsdFontMutationResponse;
      if (!response.ok || !payload.success || !payload.font) {
        throw new Error(payload.error || "字体品牌更新失败");
      }

      setFontBrandDrafts((current) => {
        const next = { ...current };
        delete next[font.id];
        return next;
      });
      toast.success(normalizedBrandName ? "字体品牌已更新" : "字体已移到未分类");
      await mutateFonts();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "字体品牌更新失败");
    } finally {
      setSavingFontBrandId(null);
    }
  }

  async function handleQuickUpdateTemplateBrand(
    template: AgentPsdTemplate,
    nextBrandName: string
  ) {
    const normalizedBrandName = normalizeManagedBrandName(nextBrandName);
    if (!normalizedBrandName) {
      toast.error("请选择品牌");
      return;
    }

    try {
      setSavingTemplateBrandId(template.id);
      const response = await fetch(
        `/api/admin/psd-templates/${encodeURIComponent(template.id)}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: template.name,
            brandName: normalizedBrandName,
            mode: template.mode,
            secondaryCategory: template.secondaryCategory || "",
            categoryTags: template.categoryTags || [],
            description: template.description || "",
            status: template.status,
            layers: template.layers,
          }),
        }
      );
      const payload = (await response.json()) as AgentPsdTemplateMutationResponse;
      if (!response.ok || !payload.success || !payload.template) {
        throw new Error(payload.error || "模板品牌更新失败");
      }

      setTemplateBrandDrafts((current) => {
        const next = { ...current };
        delete next[template.id];
        return next;
      });
      if (selectedTemplateId === template.id) {
        setDraftTemplate(cloneTemplate(payload.template));
      }
      toast.success("模板品牌已更新");
      await mutate();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "模板品牌更新失败");
    } finally {
      setSavingTemplateBrandId(null);
    }
  }

  async function handleSaveTemplate() {
    if (!draftTemplate) return;

    try {
      setIsSaving(true);
      const response = await fetch(
        `/api/admin/psd-templates/${encodeURIComponent(draftTemplate.id)}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: draftTemplate.name,
            brandName: draftTemplate.brandName,
            mode: draftTemplate.mode,
            secondaryCategory: draftTemplate.secondaryCategory || "",
            categoryTags: draftTemplate.categoryTags || [],
            description: draftTemplate.description || "",
            status: draftTemplate.status,
            layers: draftTemplate.layers,
          }),
        }
      );
      const payload = (await response.json()) as AgentPsdTemplateMutationResponse;

      if (!response.ok || !payload.success || !payload.template) {
        throw new Error(payload.error || "PSD 模板保存失败");
      }

      toast.success("PSD 模板配置已保存");
      setDraftTemplate(cloneTemplate(payload.template));
      await mutate();
      setSelectedTemplateId(payload.template.id);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "PSD 模板保存失败");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleDeleteTemplate(template = selectedTemplate) {
    if (!template) return;
    const confirmed = window.confirm(`确认删除模板“${template.name}”吗？`);
    if (!confirmed) return;

    try {
      setIsDeleting(true);
      setDeletingTemplateId(template.id);
      const response = await fetch(
        `/api/admin/psd-templates/${encodeURIComponent(template.id)}`,
        {
          method: "DELETE",
        }
      );
      const payload = (await response.json()) as AgentPsdTemplateMutationResponse;
      if (!response.ok || !payload.success) {
        throw new Error(payload.error || "PSD 模板删除失败");
      }

      toast.success("PSD 模板已删除");
      if (selectedTemplateId === template.id) {
        setSelectedTemplateId(null);
      }
      await mutate();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "PSD 模板删除失败");
    } finally {
      setIsDeleting(false);
      setDeletingTemplateId(null);
    }
  }

  async function handleParseTemplate(
    template = selectedTemplate,
    options?: {
      skipCompletedConfirm?: boolean;
      onStart?: () => void;
      onDone?: (template: AgentPsdTemplate) => void;
      onError?: (message: string) => void;
    }
  ) {
    if (!template) return;

    const actionLabel = template.parseStatus === "completed" ? "重新解析" : "解析";
    const confirmed =
      template.parseStatus === "completed" && !options?.skipCompletedConfirm
        ? window.confirm(`确认重新解析模板“${template.name}”吗？`)
        : true;
    if (!confirmed) return;

    try {
      options?.onStart?.();
      setParsingTemplateIds((current) =>
        current.includes(template.id) ? current : [...current, template.id]
      );
      await mutate(
        (current) =>
          current
            ? {
                ...current,
                templates: current.templates.map((entry) =>
                  entry.id === template.id
                    ? {
                        ...entry,
                        parseStatus: "processing",
                        parseProgress: Math.max(2, entry.parseProgress || 0),
                        parseStage: `${actionLabel}已提交`,
                        parseError: undefined,
                      }
                    : entry
                ),
              }
            : current,
        { revalidate: false }
      );
      if (draftTemplate?.id === template.id) {
        setDraftTemplate((current) =>
          current
            ? {
                ...current,
                parseStatus: "processing",
                parseProgress: Math.max(2, current.parseProgress || 0),
                parseStage: `${actionLabel}已提交`,
                parseError: undefined,
              }
            : current
        );
      }

      const response = await fetch(
        `/api/admin/psd-templates/${encodeURIComponent(template.id)}/parse`,
        {
          method: "POST",
        }
      );
      const payload = (await response.json()) as AgentPsdTemplateMutationResponse;

      if (!response.ok || !payload.success || !payload.template) {
        throw new Error(payload.error || "PSD 解析失败");
      }

      toast.success(
        payload.template.parseStatus === "completed"
          ? `模板“${payload.template.name}”解析完成`
          : `模板“${payload.template.name}”已完成快速解析，后台继续补全资产`
      );
      setDraftTemplate(cloneTemplate(payload.template));
      await mutate();
      setSelectedTemplateId(payload.template.id);
      options?.onDone?.(payload.template);
    } catch (error) {
      await mutate();
      const message = error instanceof Error ? error.message : "PSD 解析失败";
      options?.onError?.(message);
      toast.error(message);
    } finally {
      setParsingTemplateIds((current) => current.filter((item) => item !== template.id));
    }
  }

  const templateEditorContent = (
    <div className="space-y-6">
                  {draftTemplate ? (
                    <>
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-base">模板基础信息</CardTitle>
                          <CardDescription>启用前请至少配置一个可编辑槽位，文字槽位建议明确字体和字号。</CardDescription>
                        </CardHeader>
                        <CardContent className="grid gap-6 lg:grid-cols-[260px,minmax(0,1fr)]">
                          <div className="space-y-3">
                            <div className="mx-auto w-full max-w-[220px] overflow-hidden rounded-2xl border bg-muted/20">
                              <div
                                className="flex w-full items-center justify-center bg-black/5"
                                style={{
                                  aspectRatio:
                                    hasTemplateParsedCanvas(draftTemplate)
                                      ? `${Math.max(1, draftTemplate.width)} / ${Math.max(1, draftTemplate.height)}`
                                      : "1 / 1",
                                }}
                              >
                                {hasTemplateParsedCanvas(draftTemplate) ? (
                                  <img
                                    src={draftTemplate.previewUrl}
                                    alt={draftTemplate.name}
                                    className="h-full w-full object-contain"
                                  />
                                ) : (
                                  <div className="flex flex-col items-center gap-2 px-6 text-center text-muted-foreground">
                                    <Clock3 className="h-7 w-7" />
                                    <div className="text-sm font-medium">{getTemplateParseLabel(draftTemplate)}</div>
                                    <div className="text-xs">
                                      先完成 PSD 解析，再配置图层和可编辑槽位
                                    </div>
                                  </div>
                                )}
                              </div>
                            </div>
                            <div className="space-y-2 rounded-xl border p-3">
                              <div className="flex items-center justify-between gap-2">
                                <Badge variant={getTemplateParseBadgeVariant(draftTemplate)}>
                                  {getTemplateParseLabel(draftTemplate)}
                                </Badge>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => {
                                    void handleParseTemplate(draftTemplate);
                                  }}
                                  disabled={
                                    draftTemplate.parseStatus === "processing" ||
                                    parsingTemplateIds.includes(draftTemplate.id)
                                  }
                                >
                                  {draftTemplate.parseStatus === "processing" ||
                                  parsingTemplateIds.includes(draftTemplate.id) ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <RefreshCw className="mr-2 h-4 w-4" />
                                  )}
                                  {getTemplateParseActionLabel(draftTemplate)}
                                </Button>
                              </div>
                              <div className="text-xs text-muted-foreground">
                                {draftTemplate.parseStage ||
                                  (draftTemplate.parseStatus === "completed"
                                    ? "解析完成，可开始配置槽位"
                                    : hasTemplateParsedCanvas(draftTemplate)
                                      ? "快速解析已完成，后台正在补全图层缩略图、源图和模板底图"
                                      : "上传完成后需要手动解析，适合批量上传多个 PSD 再逐个处理")}
                              </div>
                              {draftTemplate.parseStatus === "processing" ? (
                                <div className="space-y-2">
                                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                                    <span>{draftTemplate.parseStage || "正在解析 PSD..."}</span>
                                    <span>{getTemplateParseProgress(draftTemplate)}%</span>
                                  </div>
                                  <Progress value={getTemplateParseProgress(draftTemplate)} className="h-2" />
                                </div>
                              ) : null}
                              {draftTemplate.parseError ? (
                                <div className="rounded-xl border border-amber-300/40 bg-amber-50 px-3 py-2 text-xs text-amber-800">
                                  {draftTemplate.parseError}
                                </div>
                              ) : null}
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                              <div className="rounded-xl border p-3">
                                <div className="text-xs text-muted-foreground">画布尺寸</div>
                                <div className="mt-1 text-sm font-medium">
                                  {hasTemplateParsedCanvas(draftTemplate)
                                    ? `${draftTemplate.width} x ${draftTemplate.height}`
                                    : "待解析"}
                                </div>
                              </div>
                              <div className="rounded-xl border p-3">
                                <div className="text-xs text-muted-foreground">当前槽位</div>
                                <div className="mt-1 text-sm font-medium">
                                  {hasTemplateParsedCanvas(draftTemplate)
                                    ? `${countEditableLayers(draftTemplate)} / ${draftTemplate.layers.length}`
                                    : "待解析"}
                                </div>
                              </div>
                            </div>
                          </div>

                          <div className="space-y-4">
                            <div className="grid gap-4 md:grid-cols-2">
                              <div className="space-y-2">
                                <Label htmlFor="draftTemplateName">模板名称</Label>
                                <Input
                                  id="draftTemplateName"
                                  value={draftTemplate.name}
                                  onChange={(event) =>
                                    setDraftTemplate((current) =>
                                      current ? { ...current, name: event.target.value } : current
                                    )
                                  }
                                />
                              </div>
                              <div className="space-y-2">
                                <Label>所属品牌</Label>
                                {selectableDraftBrandOptions.length > 0 ? (
                                  <Select
                                    value={
                                      normalizeManagedBrandName(draftTemplate.brandName) ||
                                      EMPTY_BRAND_SELECT_VALUE
                                    }
                                    onValueChange={(value) =>
                                      setDraftTemplate((current) =>
                                        current
                                          ? {
                                              ...current,
                                              brandName:
                                                value === EMPTY_BRAND_SELECT_VALUE ? "未分配品牌" : value,
                                            }
                                          : current
                                      )
                                    }
                                  >
                                    <SelectTrigger>
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value={EMPTY_BRAND_SELECT_VALUE}>未分类</SelectItem>
                                      {selectableDraftBrandOptions.map((brand) => (
                                        <SelectItem key={brand} value={brand}>
                                          {brand}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                ) : (
                                  <Input
                                    value={draftTemplate.brandName}
                                    onChange={(event) =>
                                      setDraftTemplate((current) =>
                                        current ? { ...current, brandName: event.target.value } : current
                                      )
                                    }
                                    placeholder="请输入品牌名称"
                                  />
                                )}
                              </div>
                              <div className="space-y-2">
                                <Label>套版模式</Label>
                                <Select
                                  value={draftTemplate.mode}
                                  onValueChange={(value) =>
                                    setDraftTemplate((current) =>
                                      current
                                        ? { ...current, mode: value === "sku" ? "sku" : "main" }
                                        : current
                                    )
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {PSD_TEMPLATE_MODE_OPTIONS.map((option) => (
                                      <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <Label>二级分类</Label>
                                {draftBrandCategoryOptions.length > 0 ? (
                                  <Select
                                    value={
                                      String(draftTemplate.secondaryCategory || "").trim() ||
                                      EMPTY_CATEGORY_SELECT_VALUE
                                    }
                                    onValueChange={(value) =>
                                      setDraftTemplate((current) =>
                                        current
                                          ? {
                                              ...current,
                                              secondaryCategory:
                                                value === EMPTY_CATEGORY_SELECT_VALUE ? "" : value,
                                            }
                                          : current
                                      )
                                    }
                                  >
                                    <SelectTrigger>
                                      <SelectValue placeholder="请选择模板分类" />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value={EMPTY_CATEGORY_SELECT_VALUE}>不设置分类</SelectItem>
                                      {categoryLevelOptions.map((group) => {
                                        const groupOptions = draftBrandCategoryOptions.filter(
                                          (option) => option.level === group.key
                                        );
                                        if (groupOptions.length === 0) {
                                          return null;
                                        }

                                        return (
                                          <SelectGroup key={group.key}>
                                            <SelectLabel>{group.label}</SelectLabel>
                                            {groupOptions.map((option) => (
                                              <SelectItem
                                                key={`${group.key}-${option.value}`}
                                                value={option.value}
                                              >
                                                {option.value}
                                              </SelectItem>
                                            ))}
                                          </SelectGroup>
                                        );
                                      })}
                                      {draftBrandCategoryOptions.some(
                                        (option) => option.level === "custom"
                                      ) ? (
                                        <SelectGroup>
                                          <SelectLabel>当前值</SelectLabel>
                                          {draftBrandCategoryOptions
                                            .filter((option) => option.level === "custom")
                                            .map((option) => (
                                              <SelectItem
                                                key={`draft-custom-${option.value}`}
                                                value={option.value}
                                              >
                                                {option.value}
                                              </SelectItem>
                                            ))}
                                        </SelectGroup>
                                      ) : null}
                                    </SelectContent>
                                  </Select>
                                ) : (
                                  <Input
                                    id="draftTemplateSecondaryCategory"
                                    value={draftTemplate.secondaryCategory || ""}
                                    onChange={(event) =>
                                      setDraftTemplate((current) =>
                                        current
                                          ? { ...current, secondaryCategory: event.target.value }
                                          : current
                                      )
                                    }
                                    placeholder="例如：凳子类 / 升降桌类"
                                  />
                                )}
                              </div>
                              <div className="space-y-2 md:col-span-2">
                                <Label>适用品类标签</Label>
                                <div className="flex flex-wrap gap-2">
                                  {draftTemplateCategoryTagOptions.map((tag) => {
                                    const isSelected = hasTemplateCategoryTag(
                                      draftTemplate.categoryTags,
                                      tag
                                    );
                                    return (
                                      <button
                                        key={`draft-category-tag-${tag}`}
                                        type="button"
                                        onClick={() =>
                                          setDraftTemplate((current) =>
                                            current
                                              ? {
                                                  ...current,
                                                  categoryTags: toggleTemplateCategoryTag(
                                                    current.categoryTags,
                                                    tag
                                                  ),
                                                }
                                              : current
                                          )
                                        }
                                        className={`rounded-full border px-3 py-1 text-sm transition ${
                                          isSelected
                                            ? "border-orange-400 bg-orange-500/10 text-orange-600"
                                            : "border-border bg-background text-muted-foreground hover:border-orange-300/50 hover:text-foreground"
                                        }`}
                                      >
                                        {tag}
                                      </button>
                                    );
                                  })}
                                </div>
                                <p className="text-xs text-muted-foreground">
                                  可多选。勾选“适合所有”后，模板会在所有品类下都显示；未设置标签的旧模板仍会保持可见，避免影响现有使用。
                                </p>
                              </div>
                            </div>

                            <div className="grid gap-4 md:grid-cols-2">
                              <div className="space-y-2">
                                <Label>启用状态</Label>
                                <Select
                                  value={draftTemplate.status}
                                  onValueChange={(value) =>
                                    setDraftTemplate((current) =>
                                      current
                                        ? {
                                            ...current,
                                            status: value === "active" ? "active" : "disabled",
                                          }
                                        : current
                                    )
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="disabled">停用</SelectItem>
                                    <SelectItem
                                      value="active"
                                      disabled={draftTemplate.parseStatus !== "completed"}
                                    >
                                      启用
                                    </SelectItem>
                                  </SelectContent>
                                  </Select>
                              </div>
                            </div>

                            <div className="space-y-2">
                              <Label htmlFor="draftTemplateDescription">模板说明</Label>
                              <Textarea
                                id="draftTemplateDescription"
                                value={draftTemplate.description || ""}
                                onChange={(event) =>
                                  setDraftTemplate((current) =>
                                    current ? { ...current, description: event.target.value } : current
                                  )
                                }
                                rows={4}
                                placeholder="说明该模板用于什么结果图、适合哪个业务场景"
                              />
                            </div>

                            <div className="flex flex-wrap items-center gap-3">
                              <Badge variant="secondary">品牌：{draftTemplate.brandName}</Badge>
                              <Badge variant="secondary">模式：{getPsdTemplateModeLabel(draftTemplate.mode)}</Badge>
                              {draftTemplate.secondaryCategory ? (
                                <Badge variant="secondary">分类：{draftTemplate.secondaryCategory}</Badge>
                              ) : null}
                              {(draftTemplate.categoryTags || []).map((tag) => (
                                <Badge key={`draft-template-tag-${tag}`} variant="secondary">
                                  品类：{tag}
                                </Badge>
                              ))}
                              <Badge variant="outline">文件：{draftTemplate.fileName}</Badge>
                              <Badge variant={getTemplateParseBadgeVariant(draftTemplate)}>
                                {getTemplateParseLabel(draftTemplate)}
                              </Badge>
                              <Badge variant="secondary">
                                当前图层数：
                                {hasTemplateParsedCanvas(draftTemplate)
                                  ? draftTemplate.layers.length
                                  : "待解析"}
                              </Badge>
                              <Button
                                variant="destructive"
                                size="sm"
                                onClick={() => {
                                  void handleDeleteTemplate();
                                }}
                                disabled={isDeleting}
                              >
                                {isDeleting ? (
                                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                ) : (
                                  <Trash2 className="mr-2 h-4 w-4" />
                                )}
                                删除模板
                              </Button>
                            </div>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader>
                          <div className="flex flex-wrap items-center justify-between gap-3">
                            <div>
                              <CardTitle className="text-base">槽位配置</CardTitle>
                              <CardDescription>
                                图片槽位可配置默认结果图和填充方式，文字槽位可配置字体、字号、颜色和换行区域。
                              </CardDescription>
                            </div>
                            <div className="w-full md:w-[280px]">
                              <Input
                                value={layerKeyword}
                                onChange={(event) => setLayerKeyword(event.target.value)}
                                placeholder="按图层名 / 路径筛选"
                              />
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          {draftTemplate.parseStatus !== "completed" ? (
                            <div className="rounded-2xl border border-dashed p-8 text-center">
                              <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-muted">
                                <RefreshCw className="h-6 w-6 text-muted-foreground" />
                              </div>
                              <div className="mt-4 text-base font-medium">先解析 PSD，再配置槽位</div>
                              <div className="mt-2 text-sm text-muted-foreground">
                                {hasTemplateParsedCanvas(draftTemplate)
                                  ? "快速解析已经返回图层结构，后台正在补全缩略图、源图和底图，完成后这里会自动开放完整配置。"
                                  : "当前模板还没有生成图层结构、缩略图和字体识别结果，完成解析后这里会自动显示可编辑配置项。"}
                              </div>
                              <div className="mt-4 flex justify-center">
                                <Button
                                  variant="outline"
                                  onClick={() => {
                                    void handleParseTemplate(draftTemplate);
                                  }}
                                  disabled={
                                    draftTemplate.parseStatus === "processing" ||
                                    parsingTemplateIds.includes(draftTemplate.id)
                                  }
                                >
                                  {draftTemplate.parseStatus === "processing" ||
                                  parsingTemplateIds.includes(draftTemplate.id) ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <RefreshCw className="mr-2 h-4 w-4" />
                                  )}
                                  {getTemplateParseActionLabel(draftTemplate)}
                                </Button>
                              </div>
                              {draftTemplate.parseStatus === "processing" ? (
                                <div className="mx-auto mt-4 max-w-md space-y-2">
                                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                                    <span>{draftTemplate.parseStage || "正在解析 PSD..."}</span>
                                    <span>{getTemplateParseProgress(draftTemplate)}%</span>
                                  </div>
                                  <Progress value={getTemplateParseProgress(draftTemplate)} className="h-2" />
                                </div>
                              ) : null}
                              {draftTemplate.parseError ? (
                                <div className="mx-auto mt-4 max-w-xl rounded-xl border border-amber-300/40 bg-amber-50 px-4 py-3 text-left text-xs text-amber-800">
                                  <div className="flex items-start gap-2">
                                    <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                                    <span>{draftTemplate.parseError}</span>
                                  </div>
                                </div>
                              ) : null}
                            </div>
                          ) : (
                            <ScrollArea className="h-[680px] pr-4">
                              <div className="space-y-4">
                                {filteredLayers.length === 0 ? (
                                  <div className="rounded-xl border border-dashed p-6 text-sm text-muted-foreground">
                                    {draftTemplate.layers.length === 0
                                      ? "当前模板已没有保留图层，可重新解析 PSD，或直接保存当前删除结果。"
                                      : "当前筛选条件下没有图层，请换个关键词试试。"}
                                  </div>
                                ) : (
                                  filteredLayers.map((layer, index) => (
                                    <div key={layer.id} className="rounded-2xl border p-4">
                                    <div className="flex flex-wrap items-start justify-between gap-3">
                                      <div className="flex min-w-0 items-start gap-3">
                                        <div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border bg-muted/20">
                                          {layer.previewUrl ? (
                                            <img
                                              src={layer.previewUrl}
                                              alt={`${layer.layerName} 预览`}
                                              className="h-full w-full object-contain"
                                            />
                                          ) : (
                                            <div className="text-[10px] text-muted-foreground">无预览</div>
                                          )}
                                        </div>
                                        <div className="min-w-0 space-y-1">
                                          <div className="flex flex-wrap items-center gap-2">
                                            <Badge variant="outline">#{index + 1}</Badge>
                                            <span className="text-sm font-medium">{layer.layerName}</span>
                                            <Badge variant="secondary">
                                              {layer.width} x {layer.height}
                                            </Badge>
                                            <Badge variant={layer.slotType === "text" ? "default" : "outline"}>
                                              {layer.slotType === "text" ? "文字槽位" : "图片槽位"}
                                            </Badge>
                                            {layer.isSuperLocked ? (
                                              <Badge className="gap-1 border-amber-300/60 bg-amber-100 text-amber-800 hover:bg-amber-100">
                                                <Lock className="h-3 w-3" />
                                                超级锁
                                              </Badge>
                                            ) : null}
                                            {layer.slotType === "image" && layer.maskUrl ? (
                                              <Badge variant="outline">已生成蒙版</Badge>
                                            ) : null}
                                          </div>
                                          <div className="text-xs text-muted-foreground">{layer.layerPath}</div>
                                          <div className="text-[11px] text-muted-foreground">
                                            坐标：({layer.x}, {layer.y}) · layerId: {layer.layerId}
                                          </div>
                                        </div>
                                      </div>

                                      <div className="flex flex-wrap items-center justify-end gap-2">
                                        <div className="flex items-center gap-2 rounded-full border px-3 py-1">
                                          <Layers className="h-4 w-4 text-muted-foreground" />
                                          <span className="text-xs text-muted-foreground">
                                            深度 {layer.depth}
                                          </span>
                                        </div>
                                        <Button
                                          type="button"
                                          variant="outline"
                                          size="sm"
                                          className="text-destructive hover:text-destructive"
                                          onClick={() => {
                                            if (
                                              typeof window !== "undefined" &&
                                              !window.confirm(
                                                `确认删除图层“${layer.layerName}”吗？删除后需要保存模板才会正式生效。`
                                              )
                                            ) {
                                              return;
                                            }
                                            removeDraftLayer(layer.id);
                                          }}
                                        >
                                          <Trash2 className="mr-1.5 h-4 w-4" />
                                          删除图层
                                        </Button>
                                      </div>
                                    </div>

                                    <Separator className="my-4" />

                                    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                                      <div className="space-y-2 rounded-xl border p-3">
                                        <div className="text-sm font-medium">槽位类型</div>
                                        <Select
                                          value={layer.slotType}
                                          onValueChange={(value) =>
                                            updateDraftLayer(layer.id, (current) => {
                                              if (value === "text" && current.slotType === "image") {
                                                return {
                                                  ...current,
                                                  slotType: "text",
                                                  styleSource: "auto",
                                                  defaultText: current.layerName,
                                                  placeholder: current.layerName,
                                                  fontFamily: "sans-serif",
                                                  fontLabel: "系统无衬线",
                                                  fontSize: Math.max(
                                                    16,
                                                    Math.min(current.height, Math.round(current.height * 0.78))
                                                  ),
                                                  lineHeight: 1.2,
                                                  letterSpacing: 0,
                                                  fontWeight: 500,
                                                  textColor: "#111111",
                                                  textAlign: "left",
                                                  paddingX: 0,
                                                  paddingY: 0,
                                                  maxLines: 4,
                                                };
                                              }

                                              if (value === "image" && current.slotType === "text") {
                                                return {
                                                  ...current,
                                                  slotType: "image",
                                                  isDefaultResultSource: false,
                                                  allowUserUploadOverride: true,
                                                  replaceMode: "cover",
                                                };
                                              }

                                              return current;
                                            })
                                          }
                                        >
                                          <SelectTrigger>
                                            <SelectValue />
                                          </SelectTrigger>
                                          <SelectContent>
                                            <SelectItem value="image">图片槽位</SelectItem>
                                            <SelectItem value="text">文字槽位</SelectItem>
                                          </SelectContent>
                                        </Select>
                                      </div>

                                      <div className="flex items-center justify-between rounded-xl border p-3">
                                        <div className="space-y-0.5">
                                          <div className="flex items-center gap-1.5 text-sm font-medium">
                                            <Lock className="h-4 w-4 text-amber-600" />
                                            超级锁
                                          </div>
                                          <div className="text-xs text-muted-foreground">
                                            开启后用户前台无法选中、编辑、拖动或临时删除该图层，鼠标点击会自动穿透到下方图层。
                                          </div>
                                        </div>
                                        <Switch
                                          checked={layer.isSuperLocked === true}
                                          onCheckedChange={(checked) =>
                                            updateDraftLayer(layer.id, (current) => {
                                              if (current.slotType === "image") {
                                                return {
                                                  ...current,
                                                  isSuperLocked: checked,
                                                  isRequired: checked ? false : current.isRequired,
                                                  isDefaultResultSource: checked
                                                    ? false
                                                    : current.isDefaultResultSource,
                                                  allowUserUploadOverride: checked
                                                    ? false
                                                    : current.allowUserUploadOverride,
                                                };
                                              }

                                              return {
                                                ...current,
                                                isSuperLocked: checked,
                                                isRequired: checked ? false : current.isRequired,
                                              };
                                            })
                                          }
                                        />
                                      </div>

                                      <div className="flex items-center justify-between rounded-xl border p-3">
                                        <div className="space-y-0.5">
                                          <div className="text-sm font-medium">可编辑</div>
                                          <div className="text-xs text-muted-foreground">
                                            {layer.slotType === "text" ? "允许用户输入文字" : "允许用户上传图片"}
                                          </div>
                                        </div>
                                        <Switch
                                          checked={layer.isEditable}
                                          disabled={layer.isSuperLocked === true}
                                          onCheckedChange={(checked) =>
                                            updateDraftLayer(layer.id, (current) =>
                                              current.slotType === "image"
                                                ? {
                                                    ...current,
                                                    isEditable: checked,
                                                    isRequired: checked ? current.isRequired : false,
                                                    isDefaultResultSource: checked
                                                      ? current.isDefaultResultSource
                                                      : false,
                                                    allowUserUploadOverride: checked
                                                      ? current.allowUserUploadOverride
                                                      : false,
                                                  }
                                                : {
                                                    ...current,
                                                    isEditable: checked,
                                                    isRequired: checked ? current.isRequired : false,
                                                  }
                                            )
                                          }
                                        />
                                      </div>

                                      <div className="flex items-center justify-between rounded-xl border p-3">
                                        <div className="space-y-0.5">
                                          <div className="text-sm font-medium">必传</div>
                                          <div className="text-xs text-muted-foreground">
                                            渲染前必须给这个槽位分配内容
                                          </div>
                                        </div>
                                        <Switch
                                          checked={layer.isEditable && layer.isRequired}
                                          disabled={!layer.isEditable || layer.isSuperLocked === true}
                                          onCheckedChange={(checked) =>
                                            updateDraftLayer(layer.id, (current) => ({
                                              ...current,
                                              isRequired: current.isEditable ? checked : false,
                                            }))
                                          }
                                        />
                                      </div>

                                      {layer.slotType === "image" ? (
                                        <div className="flex items-center justify-between rounded-xl border p-3">
                                          <div className="space-y-0.5">
                                            <div className="text-sm font-medium">默认结果图槽位</div>
                                            <div className="text-xs text-muted-foreground">
                                              打开结果区弹层时自动带入当前结果图
                                            </div>
                                          </div>
                                          <Switch
                                            checked={layer.isEditable && layer.isDefaultResultSource}
                                            disabled={!layer.isEditable || layer.isSuperLocked === true}
                                            onCheckedChange={(checked) =>
                                              setDraftTemplate((current) => {
                                                if (!current) return current;
                                                return {
                                                  ...current,
                                                  layers: current.layers.map((item) =>
                                                    item.slotType === "image"
                                                      ? item.id === layer.id
                                                        ? {
                                                            ...item,
                                                            isDefaultResultSource: item.isEditable
                                                              ? checked
                                                              : false,
                                                          }
                                                        : {
                                                            ...item,
                                                            isDefaultResultSource: false,
                                                          }
                                                      : item
                                                  ),
                                                };
                                              })
                                            }
                                          />
                                        </div>
                                      ) : (
                                        <div className="rounded-xl border p-3">
                                          <div className="text-sm font-medium">文字默认值</div>
                                          <div className="mt-1 text-xs text-muted-foreground">
                                            作为弹层里的初始文案，也可在用户侧继续修改
                                          </div>
                                          <Textarea
                                            className="mt-3"
                                            rows={3}
                                            value={layer.defaultText || ""}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? { ...current, defaultText: event.target.value }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>
                                      )}
                                    </div>

                                    {layer.slotType === "image" ? (
                                      <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                                        <div className="flex items-center justify-between rounded-xl border p-3">
                                          <div className="space-y-0.5">
                                            <div className="text-sm font-medium">允许手动覆盖</div>
                                            <div className="text-xs text-muted-foreground">
                                              用户可以重新上传替换这个槽位
                                            </div>
                                          </div>
                                          <Switch
                                            checked={layer.isEditable && layer.allowUserUploadOverride}
                                            disabled={!layer.isEditable || layer.isSuperLocked === true}
                                            onCheckedChange={(checked) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "image"
                                                  ? {
                                                      ...current,
                                                      allowUserUploadOverride: current.isEditable
                                                        ? checked
                                                        : false,
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">填充模式</div>
                                          <Select
                                            value={layer.replaceMode}
                                            disabled={!layer.isEditable || layer.isSuperLocked === true}
                                            onValueChange={(value) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "image"
                                                  ? {
                                                      ...current,
                                                      replaceMode:
                                                        value === "contain" || value === "stretch"
                                                          ? value
                                                          : "cover",
                                                    }
                                                  : current
                                              )
                                            }
                                          >
                                            <SelectTrigger>
                                              <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                              <SelectItem value="cover">裁切铺满</SelectItem>
                                              <SelectItem value="contain">完整显示</SelectItem>
                                              <SelectItem value="stretch">强制拉伸</SelectItem>
                                            </SelectContent>
                                          </Select>
                                        </div>
                                      </div>
                                    ) : (
                                      <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">字体</div>
                                          <Select
                                            value={
                                              layer.fontId ||
                                              SYSTEM_FONT_OPTIONS.find(
                                                (option) => option.family === layer.fontFamily
                                              )?.id ||
                                              "__system_sans"
                                            }
                                            onValueChange={(value) =>
                                              updateDraftLayer(layer.id, (current) => {
                                                if (current.slotType !== "text") return current;
                                                const systemFont = SYSTEM_FONT_OPTIONS.find(
                                                  (option) => option.id === value
                                                );
                                                if (systemFont) {
                                                  return {
                                                    ...current,
                                                    fontId: undefined,
                                                    fontFamily: systemFont.family,
                                                    fontLabel: systemFont.label,
                                                    styleSource: "custom",
                                                  };
                                                }

                                                const uploadedFont = fonts.find((font) => font.id === value);
                                                return uploadedFont
                                                  ? {
                                                      ...current,
                                                      fontId: uploadedFont.id,
                                                      fontFamily: uploadedFont.family,
                                                      fontLabel: uploadedFont.name,
                                                      styleSource: "custom",
                                                    }
                                                  : current;
                                              })
                                            }
                                          >
                                            <SelectTrigger>
                                              <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                              {fontOptions.map((option) => (
                                                <SelectItem key={option.id} value={option.id}>
                                                  {option.label}
                                                </SelectItem>
                                              ))}
                                            </SelectContent>
                                          </Select>
                                          {layer.detectedFontName ? (
                                            <div className="text-xs text-muted-foreground">
                                              PSD识别字体：{layer.detectedFontName}
                                            </div>
                                          ) : null}
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">字号</div>
                                          <Input
                                            type="number"
                                            min={10}
                                            max={300}
                                            value={layer.fontSize}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      fontSize: Math.max(10, Number(event.target.value) || 10),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">行高倍率</div>
                                          <Input
                                            type="number"
                                            min={1}
                                            max={3}
                                            step="0.1"
                                            value={layer.lineHeight}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      lineHeight: Math.max(
                                                        1,
                                                        Number(event.target.value) || 1
                                                      ),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">字重</div>
                                          <Input
                                            type="number"
                                            min={100}
                                            max={900}
                                            step={100}
                                            value={layer.fontWeight}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      fontWeight: Math.max(
                                                        100,
                                                        Math.min(900, Number(event.target.value) || 500)
                                                      ),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">文字颜色</div>
                                          <Input
                                            value={layer.textColor}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      textColor: event.target.value,
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">对齐</div>
                                          <Select
                                            value={layer.textAlign}
                                            onValueChange={(value) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      textAlign:
                                                        value === "center" || value === "right"
                                                          ? value
                                                          : "left",
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          >
                                            <SelectTrigger>
                                              <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                              <SelectItem value="left">左对齐</SelectItem>
                                              <SelectItem value="center">居中</SelectItem>
                                              <SelectItem value="right">右对齐</SelectItem>
                                            </SelectContent>
                                          </Select>
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">左右内边距</div>
                                          <Input
                                            type="number"
                                            min={0}
                                            max={200}
                                            value={layer.paddingX}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      paddingX: Math.max(0, Number(event.target.value) || 0),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">上下内边距</div>
                                          <Input
                                            type="number"
                                            min={0}
                                            max={200}
                                            value={layer.paddingY}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      paddingY: Math.max(0, Number(event.target.value) || 0),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">最多行数</div>
                                          <Input
                                            type="number"
                                            min={1}
                                            max={20}
                                            value={layer.maxLines}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      maxLines: Math.max(1, Number(event.target.value) || 1),
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="space-y-2 rounded-xl border p-3">
                                          <div className="text-sm font-medium">字间距</div>
                                          <Input
                                            type="number"
                                            min={-10}
                                            max={50}
                                            step="0.5"
                                            value={layer.letterSpacing}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? {
                                                      ...current,
                                                      letterSpacing: Number(event.target.value) || 0,
                                                      styleSource: "custom",
                                                    }
                                                  : current
                                              )
                                            }
                                          />
                                        </div>

                                        <div className="rounded-xl border p-3 md:col-span-2 xl:col-span-4">
                                          <div className="text-sm font-medium">输入提示文案</div>
                                          <Textarea
                                            className="mt-3"
                                            rows={2}
                                            value={layer.placeholder || ""}
                                            onChange={(event) =>
                                              updateDraftLayer(layer.id, (current) =>
                                                current.slotType === "text"
                                                  ? { ...current, placeholder: event.target.value }
                                                  : current
                                              )
                                            }
                                            placeholder="例如：输入品牌名 / 活动主题 / 卖点标题"
                                          />
                                        </div>
                                      </div>
                                    )}
                                    </div>
                                  ))
                                )}
                              </div>
                            </ScrollArea>
                          )}
                        </CardContent>
                      </Card>
                    </>
                  ) : (
                    <Card>
                      <CardContent className="flex min-h-[480px] flex-col items-center justify-center gap-4 text-center">
                        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted">
                          <ImageIcon className="h-8 w-8 text-muted-foreground" />
                        </div>
                        <div>
                          <div className="text-base font-medium">还没有选中的模板</div>
                          <div className="mt-2 text-sm text-muted-foreground">
                            先在左侧上传一个 PSD 模板，或者从已有模板里选择一个开始配置。
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  )}
                </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
      <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto px-6 py-4">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-rose-600 shadow-lg shadow-orange-500/20">
                <Sparkles className="h-5 w-5 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-semibold tracking-tight">PSD 模板配置</h1>
                <p className="text-sm text-muted-foreground">
                  上传 PSD 模板、管理字体库、配置图片和文字槽位，并在风格化结果区直接套版导出
                </p>
              </div>
            </div>

            <div className="flex items-center gap-2">
              <Button asChild variant="outline" size="sm">
                <Link href={backHref}>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  {backLabel}
                </Link>
              </Button>
              <Button
                onClick={handleSaveTemplate}
                disabled={!draftTemplate || isSaving}
                size="sm"
                className="bg-gradient-to-r from-orange-600 to-rose-600 hover:from-orange-500 hover:to-rose-500"
              >
                {isSaving ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Save className="mr-2 h-4 w-4" />
                )}
                保存模板
              </Button>
            </div>
          </div>
        </div>
      </header>

      <div className="border-b bg-muted/30">
        <div className="container mx-auto px-6 py-3">
          <div className="flex flex-wrap items-center gap-4">
            <Badge variant="secondary" className="font-mono">
              {templates.length}
            </Badge>
            <span className="text-sm text-muted-foreground">模板数量</span>
            <Badge variant="secondary" className="font-mono">
              {fonts.length}
            </Badge>
            <span className="text-sm text-muted-foreground">字体数量</span>
            <Badge variant="secondary" className="font-mono">
              {countEditableLayers(draftTemplate)}
            </Badge>
            <span className="text-sm text-muted-foreground">当前可编辑槽位</span>
            <Badge variant="secondary" className="font-mono">
              {countEditableTextLayers(draftTemplate)}
            </Badge>
            <span className="text-sm text-muted-foreground">当前文字槽位</span>
            {draftTemplate ? (
              <>
                <Badge variant={draftTemplate.status === "active" ? "default" : "outline"}>
                  {draftTemplate.status === "active" ? "已启用" : "未启用"}
                </Badge>
                <Badge variant={getTemplateParseBadgeVariant(draftTemplate)}>
                  {getTemplateParseLabel(draftTemplate)}
                </Badge>
                <span className="text-sm text-muted-foreground">
                  {hasTemplateParsedCanvas(draftTemplate)
                    ? `${draftTemplate.width} x ${draftTemplate.height}`
                    : "等待解析后显示尺寸"}
                </span>
              </>
            ) : null}
          </div>
        </div>
      </div>

      <div className="container mx-auto px-6 py-6">
        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">品类标签</CardTitle>
              <CardDescription>
                管理 PSD 模板可绑定的品类标签。前端会根据用户当前选择的产品品类筛选模板。
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="psdCategoryTagDraft">新增标签</Label>
                <div className="flex gap-2">
                  <Input
                    id="psdCategoryTagDraft"
                    value={categoryTagDraft}
                    onChange={(event) => setCategoryTagDraft(event.target.value)}
                    onKeyDown={(event) => {
                      if (event.key === "Enter") {
                        event.preventDefault();
                        void handleAddCategoryTag();
                      }
                    }}
                    placeholder="例如：椅子类 / 沙发类 / 餐边柜类"
                    disabled={isSavingCategoryTags}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      void handleAddCategoryTag();
                    }}
                    disabled={isSavingCategoryTags || !categoryTagDraft.trim()}
                  >
                    添加标签
                  </Button>
                </div>
              </div>

              <div className="space-y-2">
                <Label>当前标签</Label>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="default">{AGENT_PSD_TEMPLATE_ALL_CATEGORY_TAG}</Badge>
                  {categoryTagConfig.tags.map((tag) => (
                    <div
                      key={tag}
                      className="inline-flex items-center gap-2 rounded-full border bg-background px-3 py-1 text-sm"
                    >
                      <span>{tag}</span>
                      <button
                        type="button"
                        className="text-muted-foreground transition hover:text-foreground"
                        onClick={() => {
                          void handleRemoveCategoryTag(tag);
                        }}
                        disabled={isSavingCategoryTags}
                      >
                        删除
                      </button>
                    </div>
                  ))}
                </div>
                <p className="text-xs text-muted-foreground">
                  “适合所有”是固定标签，会让模板在所有品类下都显示；自定义标签删除后，不会再出现在新模板选择项中。
                </p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">上传新模板</CardTitle>
              <CardDescription>支持 PSD / PSB，建议图层命名清晰，便于后台配置图片位和文字位。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="psdTemplateName">模板名称</Label>
                <Input
                  id="psdTemplateName"
                  value={uploadName}
                  onChange={(event) => setUploadName(event.target.value)}
                  placeholder="例如：主图包装模板"
                />
              </div>
              <div className="space-y-2">
                <Label>所属品牌</Label>
                {managedBrandOptions.length > 0 ? (
                  <Select value={uploadBrandName} onValueChange={setUploadBrandName}>
                    <SelectTrigger>
                      <SelectValue placeholder="请选择品牌" />
                    </SelectTrigger>
                    <SelectContent>
                      {managedBrandOptions.map((brand) => (
                        <SelectItem key={brand} value={brand}>
                          {brand}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ) : (
                  <Input
                    value={uploadBrandName}
                    onChange={(event) => setUploadBrandName(event.target.value)}
                    placeholder="请输入品牌名称"
                  />
                )}
              </div>
              <div className="space-y-2">
                <Label>套版模式</Label>
                <Select
                  value={uploadMode}
                  onValueChange={(value) => setUploadMode(value === "sku" ? "sku" : "main")}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {PSD_TEMPLATE_MODE_OPTIONS.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <p className="text-xs text-muted-foreground">
                  {PSD_TEMPLATE_MODE_OPTIONS.find((option) => option.value === uploadMode)?.description}
                </p>
              </div>
              <div className="space-y-2">
                <Label>二级分类</Label>
                {uploadBrandCategoryOptions.length > 0 ? (
                  <Select
                    value={uploadSecondaryCategory.trim() || EMPTY_CATEGORY_SELECT_VALUE}
                    onValueChange={(value) =>
                      setUploadSecondaryCategory(
                        value === EMPTY_CATEGORY_SELECT_VALUE ? "" : value
                      )
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="请选择模板分类" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value={EMPTY_CATEGORY_SELECT_VALUE}>不设置分类</SelectItem>
                      {categoryLevelOptions.map((group) => {
                        const groupOptions = uploadBrandCategoryOptions.filter(
                          (option) => option.level === group.key
                        );
                        if (groupOptions.length === 0) {
                          return null;
                        }

                        return (
                          <SelectGroup key={group.key}>
                            <SelectLabel>{group.label}</SelectLabel>
                            {groupOptions.map((option) => (
                              <SelectItem key={`${group.key}-${option.value}`} value={option.value}>
                                {option.value}
                              </SelectItem>
                            ))}
                          </SelectGroup>
                        );
                      })}
                      {uploadBrandCategoryOptions.some((option) => option.level === "custom") ? (
                        <SelectGroup>
                          <SelectLabel>当前值</SelectLabel>
                          {uploadBrandCategoryOptions
                            .filter((option) => option.level === "custom")
                            .map((option) => (
                              <SelectItem key={`custom-${option.value}`} value={option.value}>
                                {option.value}
                              </SelectItem>
                            ))}
                        </SelectGroup>
                      ) : null}
                    </SelectContent>
                  </Select>
                ) : (
                  <Input
                    id="psdTemplateSecondaryCategory"
                    value={uploadSecondaryCategory}
                    onChange={(event) => setUploadSecondaryCategory(event.target.value)}
                    placeholder="例如：凳子类 / 升降桌类"
                  />
                )}
                <p className="text-xs text-muted-foreground">
                  会优先读取当前品牌下已配置的分类层级作为选项；开启前台模板二级分类后，会按这里的分类分组展示模板。
                </p>
              </div>
              <div className="space-y-2">
                <Label>适用品类标签</Label>
                <div className="flex flex-wrap gap-2">
                  {availableCategoryTagOptions.map((tag) => {
                    const isSelected = hasTemplateCategoryTag(uploadCategoryTags, tag);
                    return (
                      <button
                        key={tag}
                        type="button"
                        onClick={() =>
                          setUploadCategoryTags((current) =>
                            toggleTemplateCategoryTag(current, tag)
                          )
                        }
                        className={`rounded-full border px-3 py-1 text-sm transition ${
                          isSelected
                            ? "border-orange-400 bg-orange-500/10 text-orange-600"
                            : "border-border bg-background text-muted-foreground hover:border-orange-300/50 hover:text-foreground"
                        }`}
                      >
                        {tag}
                      </button>
                    );
                  })}
                </div>
                <p className="text-xs text-muted-foreground">
                  可多选。前端会根据用户当前选择的产品品类筛选模板；勾选“适合所有”后，这个模板会在所有品类下都显示。
                </p>
              </div>
              <div className="space-y-2">
                <Label htmlFor="psdTemplateDescription">模板说明</Label>
                <Textarea
                  id="psdTemplateDescription"
                  value={uploadDescription}
                  onChange={(event) => setUploadDescription(event.target.value)}
                  placeholder="说明该模板适合哪个结果图场景"
                  rows={3}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="psdTemplateFile">PSD 文件</Label>
                <Input
                  id="psdTemplateFile"
                  type="file"
                  accept=".psd,.psb"
                  onChange={handleTemplateFileChange}
                />
                <p className="text-xs text-muted-foreground">
                  {uploadFile ? `已选择：${uploadFile.name}` : "支持 80MB 以内 PSD / PSB 文件"}
                </p>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <Button
                  onClick={() => {
                    void handleCreateTemplate();
                  }}
                  disabled={isCreating || isCreatingAndParsing}
                  variant="outline"
                  className="w-full"
                >
                  {isCreating ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Upload className="mr-2 h-4 w-4" />
                  )}
                  仅上传文件
                </Button>
                <Button
                  onClick={() => {
                    void handleCreateTemplate({ parseAfterUpload: true });
                  }}
                  disabled={isCreating || isCreatingAndParsing}
                  className="w-full bg-gradient-to-r from-orange-600 to-rose-600 hover:from-orange-500 hover:to-rose-500"
                >
                  {isCreatingAndParsing ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Sparkles className="mr-2 h-4 w-4" />
                  )}
                  上传并解析
                </Button>
              </div>
              {templateUploadStatus ? (
                <div className="space-y-2 rounded-xl border border-dashed p-3">
                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <span>{templateUploadStatus}</span>
                    <span>{templateUploadPercent}%</span>
                  </div>
                  <Progress value={templateUploadPercent} className="h-2" />
                </div>
              ) : null}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">字体库</CardTitle>
              <CardDescription>上传 TTF / OTF / WOFF / WOFF2，供 PSD 文字槽位渲染使用。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="psdFontName">字体名称</Label>
                <Input
                  id="psdFontName"
                  value={fontUploadName}
                  onChange={(event) => setFontUploadName(event.target.value)}
                  disabled={fontUploadFiles.length > 1}
                  placeholder="例如：思源黑体-中黑"
                />
                {fontUploadFiles.length > 1 ? (
                  <p className="text-xs text-muted-foreground">
                    批量上传时会自动使用每个文件名作为字体名称，这一项不再单独生效。
                  </p>
                ) : null}
              </div>
              <div className="space-y-2">
                <Label htmlFor="psdFontFamily">CSS 字体族</Label>
                <Input
                  id="psdFontFamily"
                  value={fontFamily}
                  onChange={(event) => setFontFamily(event.target.value)}
                  placeholder="例如：SourceHanSansCN-Medium"
                />
              </div>
              <div className="space-y-2">
                <Label>所属品牌</Label>
                {managedBrandOptions.length > 0 ? (
                  <Select
                    value={fontUploadBrandName.trim() || EMPTY_BRAND_SELECT_VALUE}
                    onValueChange={(value) =>
                      setFontUploadBrandName(value === EMPTY_BRAND_SELECT_VALUE ? "" : value)
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="选择品牌分类（可选）" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value={EMPTY_BRAND_SELECT_VALUE}>暂不分类</SelectItem>
                      {managedBrandOptions.map((brand) => (
                        <SelectItem key={brand} value={brand}>
                          {brand}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ) : (
                  <Input
                    value={fontUploadBrandName}
                    onChange={(event) => setFontUploadBrandName(event.target.value)}
                    placeholder="输入品牌分类（可选）"
                  />
                )}
              </div>
              <div className="space-y-2">
                <Label htmlFor="psdFontFile">字体文件</Label>
                <Input
                  ref={fontFileInputRef}
                  id="psdFontFile"
                  type="file"
                  accept=".ttf,.otf,.woff,.woff2"
                  multiple
                  onChange={handleFontFileChange}
                  onClick={(event) => {
                    event.currentTarget.value = "";
                  }}
                />
                <p className="text-xs text-muted-foreground">
                  {fontUploadFiles.length > 0
                    ? fontUploadFiles.length === 1
                      ? `已选择：${fontUploadFiles[0]?.name || ""}`
                      : `已选择 ${fontUploadFiles.length} 个字体文件：${fontUploadFiles
                          .map((file) => file.name)
                          .join("、")}`
                    : "支持一次多选，也支持多次继续添加字体文件后再批量上传"}
                </p>
                <p className="text-xs text-muted-foreground">
                  {fontUploadFiles.length > 1
                    ? "批量上传时会使用每个文件名作为字体名称；如果填写了 CSS 字体族，会批量应用到这一批字体。"
                    : "单个上传时可自定义字体名称和 CSS 字体族。"}
                </p>
                {fontUploadFiles.length > 0 ? (
                  <div className="space-y-2 rounded-xl border border-dashed p-3">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-xs font-medium text-muted-foreground">
                        待上传文件队列
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-7 px-2 text-xs"
                        onClick={handleClearQueuedFontFiles}
                      >
                        清空已选
                      </Button>
                    </div>
                    <div className="space-y-2">
                      {fontUploadFiles.map((file) => (
                        <div
                          key={getQueuedFontFileKey(file)}
                          className="flex items-center justify-between gap-3 rounded-lg border bg-background/60 px-3 py-2"
                        >
                          <div className="min-w-0">
                            <div className="truncate text-sm">{file.name}</div>
                            <div className="text-[11px] text-muted-foreground">
                              {(file.size / 1024 / 1024).toFixed(2)} MB
                            </div>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 shrink-0"
                            onClick={() => handleRemoveQueuedFontFile(file)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                ) : null}
              </div>
              <Button onClick={handleUploadFont} disabled={isUploadingFont} className="w-full" variant="outline">
                {isUploadingFont ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Type className="mr-2 h-4 w-4" />
                )}
                {fontUploadFiles.length > 1 ? "批量上传到字体库" : "上传到字体库"}
              </Button>

              <Separator />

              <Collapsible open={isFontListExpanded} onOpenChange={setIsFontListExpanded}>
                <div className="rounded-2xl border border-dashed p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <div className="text-sm font-medium">已上传字体列表</div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        默认收起，按品牌分类查看字体归属。
                      </div>
                    </div>
                    <CollapsibleTrigger asChild>
                      <Button type="button" variant="outline" size="sm">
                        {isFontListExpanded ? (
                          <>
                            收起列表
                            <ChevronUp className="ml-2 h-4 w-4" />
                          </>
                        ) : (
                          <>
                            展开列表（{fonts.length}）
                            <ChevronDown className="ml-2 h-4 w-4" />
                          </>
                        )}
                      </Button>
                    </CollapsibleTrigger>
                  </div>

                  <CollapsibleContent className="mt-4 space-y-4">
                    {fonts.length === 0 ? (
                      <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
                        还没有上传字体，文字槽位目前只能使用系统基础字体。
                      </div>
                    ) : (
                      groupedFonts.map((group) => (
                        <div key={group.label} className="space-y-3 rounded-2xl border bg-background/60 p-3">
                          <div className="flex items-center justify-between gap-3">
                            <div className="text-sm font-medium">{group.label}</div>
                            <div className="text-xs text-muted-foreground">{group.items.length} 个字体</div>
                          </div>
                          <div className="space-y-3">
                            {group.items.map((font) => {
                              const fontBrandDraft =
                                fontBrandDrafts[font.id] ?? normalizeManagedBrandName(font.brandName);
                              const isUnassignedFont = !normalizeManagedBrandName(font.brandName);

                              return (
                                <div key={font.id} className="rounded-2xl border p-3">
                                  <div className="flex items-start justify-between gap-3">
                                    <div className="min-w-0">
                                      <div className="truncate text-sm font-medium">{font.name}</div>
                                      <div className="mt-1 text-xs text-muted-foreground">{font.family}</div>
                                      <div className="mt-1 text-[11px] text-muted-foreground">{font.fileName}</div>
                                      <div className="mt-2 text-[11px] text-muted-foreground">
                                        品牌：{normalizeManagedBrandName(font.brandName) || UNASSIGNED_BRAND_LABEL}
                                      </div>
                                    </div>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => handleDeleteFont(font)}
                                      disabled={deletingFontId === font.id}
                                    >
                                      {deletingFontId === font.id ? (
                                        <Loader2 className="h-4 w-4 animate-spin" />
                                      ) : (
                                        <Trash2 className="h-4 w-4" />
                                      )}
                                    </Button>
                                  </div>

                                  {isUnassignedFont || fontBrandDrafts[font.id] ? (
                                    <div className="mt-3 flex flex-col gap-2 sm:flex-row">
                                      <div className="min-w-0 flex-1">
                                        {managedBrandOptions.length > 0 ? (
                                          <Select
                                            value={fontBrandDraft || EMPTY_BRAND_SELECT_VALUE}
                                            onValueChange={(value) =>
                                              setFontBrandDrafts((current) => ({
                                                ...current,
                                                [font.id]:
                                                  value === EMPTY_BRAND_SELECT_VALUE ? "" : value,
                                              }))
                                            }
                                          >
                                            <SelectTrigger>
                                              <SelectValue placeholder="选择品牌分类" />
                                            </SelectTrigger>
                                            <SelectContent>
                                              <SelectItem value={EMPTY_BRAND_SELECT_VALUE}>暂不分类</SelectItem>
                                              {managedBrandOptions.map((brand) => (
                                                <SelectItem key={`${font.id}-${brand}`} value={brand}>
                                                  {brand}
                                                </SelectItem>
                                              ))}
                                            </SelectContent>
                                          </Select>
                                        ) : (
                                          <Input
                                            value={fontBrandDraft}
                                            onChange={(event) =>
                                              setFontBrandDrafts((current) => ({
                                                ...current,
                                                [font.id]: event.target.value,
                                              }))
                                            }
                                            placeholder="输入品牌分类"
                                          />
                                        )}
                                      </div>
                                      <Button
                                        type="button"
                                        variant="outline"
                                        onClick={() =>
                                          void handleQuickUpdateFontBrand(font, fontBrandDraft)
                                        }
                                        disabled={savingFontBrandId === font.id}
                                      >
                                        {savingFontBrandId === font.id ? (
                                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        ) : null}
                                        保存分类
                                      </Button>
                                    </div>
                                  ) : null}
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      ))
                    )}
                  </CollapsibleContent>
                </div>
              </Collapsible>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">模板列表</CardTitle>
              <CardDescription>按品牌查看模板，选择一个模板继续配置槽位。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {templateListErrorMessage && templates.length > 0 ? (
                <div className="flex items-start gap-3 rounded-xl border border-amber-300/30 bg-amber-500/5 p-4 text-sm text-amber-100">
                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <div>{`${templateListErrorMessage}，当前先显示上次成功加载的模板列表。`}</div>
                    <Button
                      className="mt-3"
                      onClick={() => void mutate()}
                      size="sm"
                      type="button"
                      variant="outline"
                    >
                      重新加载
                    </Button>
                  </div>
                </div>
              ) : null}
              {isLoading && templates.length === 0 ? (
                <div className="space-y-3">
                  {Array.from({ length: 3 }).map((_, index) => (
                    <div
                      key={`psd-template-list-loading-${index}`}
                      className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground"
                    >
                      正在加载 PSD 模板列表...
                    </div>
                  ))}
                </div>
              ) : templateListErrorMessage ? (
                <div className="rounded-xl border border-dashed border-amber-300/30 bg-amber-500/5 p-4 text-sm text-amber-100">
                  <div>{templateListErrorMessage}</div>
                  <Button
                    className="mt-3"
                    onClick={() => void mutate()}
                    size="sm"
                    type="button"
                    variant="outline"
                  >
                    重新加载
                  </Button>
                </div>
              ) : templates.length === 0 ? (
                <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
                  还没有 PSD 模板，先上传一个模板开始配置。
                </div>
              ) : (
                groupedTemplates.map((group) => (
                  <div key={group.label} className="space-y-3 rounded-2xl border bg-background/50 p-3">
                    <div className="flex items-center justify-between gap-3">
                      <div className="text-sm font-medium">{group.label}</div>
                      <div className="text-xs text-muted-foreground">{group.items.length} 个模板</div>
                    </div>
                    <div className="space-y-3">
                      {group.items.map((template) => {
                        const isActive = template.id === selectedTemplateId;
                        const isParsing =
                          template.parseStatus === "processing" ||
                          parsingTemplateIds.includes(template.id);
                        const isUnassignedTemplate = !normalizeManagedBrandName(template.brandName);
                        const templateBrandDraft =
                          templateBrandDrafts[template.id] ?? normalizeManagedBrandName(template.brandName);

                        return (
                          <div
                            key={template.id}
                            role="button"
                            tabIndex={0}
                            onClick={() => setSelectedTemplateId(template.id)}
                            onKeyDown={(event) => {
                              if (event.key === "Enter" || event.key === " ") {
                                event.preventDefault();
                                setSelectedTemplateId(template.id);
                              }
                            }}
                            className={`w-full rounded-2xl border p-4 text-left transition ${
                              isActive
                                ? "border-orange-400/50 bg-orange-500/10"
                                : "border-border bg-background hover:border-orange-300/40 hover:bg-muted/30"
                            }`}
                          >
                            <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                              <div className="flex min-w-0 gap-4">
                                <div className="h-24 w-24 shrink-0 overflow-hidden rounded-2xl border bg-muted/20">
                                  <img
                                    src={template.previewUrl}
                                    alt={template.name}
                                    className="h-full w-full object-cover"
                                  />
                                </div>
                                <div className="min-w-0">
                                  <div className="truncate text-sm font-medium">{template.name}</div>
                                  <div className="mt-1 text-xs text-muted-foreground">
                                    {hasTemplateParsedCanvas(template)
                                      ? `${template.width} x ${template.height} · ${template.layerCount} 图层`
                                      : "待解析完成后生成尺寸和图层"}
                                  </div>
                                  <div className="mt-1 text-xs text-muted-foreground">
                                    品牌：{normalizeManagedBrandName(template.brandName) || UNASSIGNED_BRAND_LABEL}
                                  </div>
                                  <div className="mt-1 text-xs text-muted-foreground">
                                    模式：{getPsdTemplateModeLabel(template.mode)}
                                  </div>
                                  {template.secondaryCategory ? (
                                    <div className="mt-1 text-xs text-muted-foreground">
                                      二级分类：{template.secondaryCategory}
                                    </div>
                                  ) : null}
                                  {template.categoryTags?.length ? (
                                    <div className="mt-2 flex flex-wrap gap-1.5">
                                      {template.categoryTags.map((tag) => (
                                        <Badge key={`${template.id}-${tag}`} variant="secondary">
                                          {tag}
                                        </Badge>
                                      ))}
                                    </div>
                                  ) : null}
                                  {template.description ? (
                                    <div className="mt-2 line-clamp-2 text-xs text-muted-foreground">
                                      {template.description}
                                    </div>
                                  ) : null}
                                </div>
                              </div>
                              <div className="flex flex-wrap items-center gap-2 xl:justify-end">
                                <Badge variant={template.status === "active" ? "default" : "outline"}>
                                  {template.status === "active" ? "启用" : "停用"}
                                </Badge>
                                <Badge variant={getTemplateParseBadgeVariant(template)}>
                                  {getTemplateParseLabel(template)}
                                </Badge>
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  onClick={(event) => {
                                    event.stopPropagation();
                                    void handleParseTemplate(template);
                                  }}
                                  disabled={isParsing}
                                >
                                  {isParsing ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <RefreshCw className="mr-2 h-4 w-4" />
                                  )}
                                  {getTemplateParseActionLabel(template)}
                                </Button>
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  className="h-8 px-2 text-rose-500 hover:text-rose-600"
                                  onClick={(event) => {
                                    event.stopPropagation();
                                    void handleDeleteTemplate(template);
                                  }}
                                  disabled={isDeleting}
                                >
                                  {deletingTemplateId === template.id ? (
                                    <Loader2 className="h-4 w-4 animate-spin" />
                                  ) : (
                                    <Trash2 className="h-4 w-4" />
                                  )}
                                </Button>
                              </div>
                            </div>

                            {isUnassignedTemplate ? (
                              <div
                                className="mt-3 flex flex-col gap-2 sm:flex-row"
                                onClick={(event) => event.stopPropagation()}
                              >
                                <div className="min-w-0 flex-1">
                                  {managedBrandOptions.length > 0 ? (
                                    <Select
                                      value={templateBrandDraft || EMPTY_BRAND_SELECT_VALUE}
                                      onValueChange={(value) =>
                                        setTemplateBrandDrafts((current) => ({
                                          ...current,
                                          [template.id]:
                                            value === EMPTY_BRAND_SELECT_VALUE ? "" : value,
                                        }))
                                      }
                                    >
                                      <SelectTrigger>
                                        <SelectValue placeholder="给未分类模板设置品牌" />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value={EMPTY_BRAND_SELECT_VALUE}>请选择品牌</SelectItem>
                                        {managedBrandOptions.map((brand) => (
                                          <SelectItem key={`${template.id}-${brand}`} value={brand}>
                                            {brand}
                                          </SelectItem>
                                        ))}
                                      </SelectContent>
                                    </Select>
                                  ) : (
                                    <Input
                                      value={templateBrandDraft}
                                      onChange={(event) =>
                                        setTemplateBrandDrafts((current) => ({
                                          ...current,
                                          [template.id]: event.target.value,
                                        }))
                                      }
                                      placeholder="输入品牌名称"
                                    />
                                  )}
                                </div>
                                <Button
                                  type="button"
                                  variant="outline"
                                  onClick={() =>
                                    void handleQuickUpdateTemplateBrand(template, templateBrandDraft)
                                  }
                                  disabled={savingTemplateBrandId === template.id}
                                >
                                  {savingTemplateBrandId === template.id ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : null}
                                  保存品牌分类
                                </Button>
                              </div>
                            ) : null}

                            {template.parseStatus === "processing" ? (
                              <div className="mt-3 space-y-2 rounded-xl border border-dashed p-3">
                                <div className="flex items-center justify-between text-xs text-muted-foreground">
                                  <span>{template.parseStage || "正在解析 PSD..."}</span>
                                  <span>{getTemplateParseProgress(template)}%</span>
                                </div>
                                <Progress value={getTemplateParseProgress(template)} className="h-2" />
                              </div>
                            ) : null}
                            {template.parseStatus !== "processing" &&
                            template.parseStage &&
                            (template.parseStatus !== "completed" || Boolean(template.parseError)) ? (
                              <div className="mt-2 text-xs text-muted-foreground">
                                {template.parseStage}
                              </div>
                            ) : null}
                            {template.parseError ? (
                              <div className="mt-2 rounded-xl border border-amber-300/40 bg-amber-50 px-3 py-2 text-xs text-amber-800">
                                {template.parseError}
                              </div>
                            ) : null}

                            {isActive && draftTemplate?.id === template.id ? (
                              <div
                                className="mt-4 rounded-2xl border border-orange-200/70 bg-background p-4 shadow-sm"
                                onClick={(event) => event.stopPropagation()}
                              >
                                {templateEditorContent}
                              </div>
                            ) : null}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))
              )}
            </CardContent>
          </Card>
        </div>


      </div>
    </div>
  );
}