import React, { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
import { LabelTemplate, PaperConfig, ImportData, RecordRow, ExportRangeConfig, CutLineConfig } from './types';
import {
  stripTemplateForStorage,
  normalizeTemplate,
  DEFAULT_PAPER_CONFIG,
  DEFAULT_EXPORT_RANGE,
  DEFAULT_CUT_LINE_CONFIG,
  exportRangeEquals,
  buildPrintablePages,
  extractTemplateVariables,
  buildAutoVariableMapping,
  applyRowVariableMapping,
  type PrintableLabel,
} from './utils';
import { LabelDesigner } from './components/LabelDesigner';
import { PropSidebar } from './components/PropSidebar';
import { ExportSidebar } from './components/ExportSidebar';
import { MobileExportView } from './components/MobileExportView';
import { MobileDesignView } from './components/MobileDesignView';
import { LayoutPreview } from './components/PreviewGrid';
import { CanvasLabelImage } from './components/CanvasLabelImage';
import { renderLabelToDataUrl } from './labelRenderer';
import { exportLabelsPdfAsync, type PdfExportProgress } from './pdfExport';
import { useIsMobile } from './hooks/useIsMobile';
import { useUndoRedo } from './hooks/useUndoRedo';
import { useAppDialog } from './components/AppDialog';
import { AnchoredMenu } from './components/AnchoredMenu';
import {
  FileDown,
  Code,
  Loader2,
  Plus,
  Upload,
  Printer,
  Pencil,
  Trash2,
  MoreHorizontal,
  Undo2,
  Redo2,
  X,
} from 'lucide-react';
import logoUrl from './assets/logo.svg';

const TEMPLATE_PREVIEW_MAX_W = 220;
const TEMPLATE_PREVIEW_MAX_H = 132;

const EMPTY_TEMPLATE_PLACEHOLDER: LabelTemplate = {
  id: '__placeholder__',
  name: '',
  width: 70,
  height: 40,
  elements: [],
  paper: DEFAULT_PAPER_CONFIG,
  cutLine: DEFAULT_CUT_LINE_CONFIG,
};

function fitTemplatePreviewSize(widthMm: number, heightMm: number) {
  const scale = Math.min(
    TEMPLATE_PREVIEW_MAX_W / widthMm,
    TEMPLATE_PREVIEW_MAX_H / heightMm
  );
  return {
    displayWidthPx: widthMm * scale,
    displayHeightPx: heightMm * scale,
  };
}

export default function App() {
  const { showAlert, showConfirm } = useAppDialog();

  // --- 1. Templates Storage & Initial States ---
  const [templates, setTemplates] = useState<LabelTemplate[]>(() => {
    try {
      const saved = localStorage.getItem('label_templates_list_v2');
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed)) {
          return parsed.map((t: LabelTemplate) => normalizeTemplate(t));
        }
      }
    } catch (e) { }
    return [];
  });

  const [selectedTemplateId, setSelectedTemplateId] = useState<string>(() => {
    try {
      const savedList = localStorage.getItem('label_templates_list_v2');
      const savedId = localStorage.getItem('selected_label_template_id_v2');
      if (!savedList || !savedId) return '';
      const parsed = JSON.parse(savedList);
      if (Array.isArray(parsed) && parsed.some((t: LabelTemplate) => t.id === savedId)) {
        return savedId;
      }
    } catch (e) { }
    return '';
  });

  const hasTemplates = templates.length > 0;

  const activeTemplate = useMemo(() => {
    if (!hasTemplates) return null;
    return templates.find((t) => t.id === selectedTemplateId) ?? templates[0];
  }, [templates, selectedTemplateId, hasTemplates]);

  const workingTemplate = activeTemplate ?? EMPTY_TEMPLATE_PLACEHOLDER;

  // --- 2. Workflow Step Manager ---
  // Step 1: 'template-select' (Templates select/import + Associate excel data sources)
  // Step 2: 'template-design' (Visual designer workspace canvas)
  // Step 3: 'print-view' (Final pagination & print setting alignments grid)
  const [workflowStep, setWorkflowStep] = useState<'template-select' | 'template-design' | 'print-view'>('template-select');

  // --- 3. 排版导出会话数据（不持久化，每次进入排版页重新上传） ---
  const [importData, setImportData] = useState<ImportData | null>(null);
  const [variableColumnMapping, setVariableColumnMapping] = useState<Record<string, string>>({});
  const [previewSnapshot, setPreviewSnapshot] = useState<{
    pages: (PrintableLabel | null)[][];
    gridCols: number;
    labelsPerPage: number;
    totalPages: number;
    selectedCount: number;
    paper: PaperConfig;
    exportRange: ExportRangeConfig;
  } | null>(null);
  const [draftExportRange, setDraftExportRange] = useState<ExportRangeConfig>(DEFAULT_EXPORT_RANGE);
  const [appliedExportData, setAppliedExportData] = useState<{
    fileName: string;
    currentSheet: string;
    rows: RecordRow[];
    mapping: Record<string, string>;
    exportRange: ExportRangeConfig;
  } | null>(null);
  const [previewLayoutStale, setPreviewLayoutStale] = useState(false);
  const isMobile = useIsMobile();

  const [pdfGenerating, setPdfGenerating] = useState(false);
  const [pdfProgress, setPdfProgress] = useState<PdfExportProgress>({
    done: 0,
    total: 0,
    page: 0,
    totalPages: 0,
    phase: 'render',
  });

  // --- 5. Selection and Active item states ---
  const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
  const [activeRowIndex, setActiveRowIndex] = useState<number>(0);
  // Modal / Inline input values for template creations
  const [showAddTmplForm, setShowAddTmplForm] = useState<boolean>(false);
  const [newTmplName, setNewTmplName] = useState<string>('');
  const [newTmplW, setNewTmplW] = useState<number>(75);
  const [newTmplH, setNewTmplH] = useState<number>(45);
  const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
  const [editTmplName, setEditTmplName] = useState<string>('');
  const [templateMenuId, setTemplateMenuId] = useState<string | null>(null);
  const templateMenuAnchorRef = useRef<HTMLDivElement | null>(null);
  const [headerTemplateMenuOpen, setHeaderTemplateMenuOpen] = useState(false);
  const headerTemplateMenuRef = useRef<HTMLDivElement | null>(null);
  const importTemplateInputRef = useRef<HTMLInputElement | null>(null);
  const designHistory = useUndoRedo<LabelTemplate>();
  const skipDesignHistoryRef = useRef(false);
  const designHistorySessionRef = useRef<{ step: string; templateId: string | null }>({
    step: '',
    templateId: null,
  });

  const paper = workingTemplate.paper ?? DEFAULT_PAPER_CONFIG;
  const cutLine = workingTemplate.cutLine ?? DEFAULT_CUT_LINE_CONFIG;

  // Save template list changes（不将完整行数据写入模板列表，避免 localStorage 膨胀）
  const saveTemplatesToStorage = (updatedList: LabelTemplate[]) => {
    setTemplates(updatedList);
    try {
      const stripped = updatedList.map(stripTemplateForStorage);
      localStorage.setItem('label_templates_list_v2', JSON.stringify(stripped));
    } catch (e) { }
  };

  // Modify active template elements
  const handleTemplateChange = (updated: LabelTemplate) => {
    const updatedList = templates.map(t => t.id === updated.id ? updated : t);
    saveTemplatesToStorage(updatedList);
  };

  const handleDesignTemplateChange = useCallback(
    (updated: LabelTemplate) => {
      if (
        !skipDesignHistoryRef.current &&
        workflowStep === 'template-design' &&
        activeTemplate &&
        updated.id === activeTemplate.id
      ) {
        designHistory.record(activeTemplate, updated);
      }
      skipDesignHistoryRef.current = false;
      handleTemplateChange(updated);
    },
    [workflowStep, activeTemplate, designHistory, templates]
  );

  const handleDesignUndo = useCallback(() => {
    if (!activeTemplate) return;
    const previous = designHistory.undo(activeTemplate);
    if (!previous) return;
    skipDesignHistoryRef.current = true;
    handleTemplateChange(previous);
  }, [activeTemplate, designHistory, templates]);

  const handleDesignRedo = useCallback(() => {
    if (!activeTemplate) return;
    const next = designHistory.redo(activeTemplate);
    if (!next) return;
    skipDesignHistoryRef.current = true;
    handleTemplateChange(next);
  }, [activeTemplate, designHistory, templates]);

  useEffect(() => {
    if (workflowStep !== 'template-design' || !activeTemplate?.id) return;
    const needReset =
      designHistorySessionRef.current.step !== 'template-design' ||
      designHistorySessionRef.current.templateId !== activeTemplate.id;
    if (needReset) {
      designHistory.reset();
      designHistorySessionRef.current = {
        step: workflowStep,
        templateId: activeTemplate.id,
      };
    }
  }, [workflowStep, activeTemplate?.id, designHistory]);

  useEffect(() => {
    if (workflowStep !== 'template-design') return;
    const onKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement | null;
      if (
        target &&
        (target.tagName === 'INPUT' ||
          target.tagName === 'TEXTAREA' ||
          target.tagName === 'SELECT' ||
          target.isContentEditable)
      ) {
        return;
      }
      const mod = e.metaKey || e.ctrlKey;
      if (!mod) return;
      if (e.key === 'z' && !e.shiftKey) {
        e.preventDefault();
        handleDesignUndo();
      } else if (e.key === 'y' || (e.key === 'z' && e.shiftKey) || (e.key === 'Z' && e.shiftKey)) {
        e.preventDefault();
        handleDesignRedo();
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [workflowStep, handleDesignUndo, handleDesignRedo]);

  // Save active template selected state and sync its dataset
  const handleSelectTemplate = (id: string) => {
    setSelectedTemplateId(id);
    setSelectedElementIds([]);
    try {
      localStorage.setItem('selected_label_template_id_v2', id);
    } catch (e) { }

    setActiveRowIndex(0);
  };

  useEffect(() => {
    if (!hasTemplates) {
      if (selectedTemplateId) setSelectedTemplateId('');
      if (workflowStep !== 'template-select') setWorkflowStep('template-select');
      return;
    }
    if (!templates.some((t) => t.id === selectedTemplateId)) {
      handleSelectTemplate(templates[0].id!);
    }
  }, [hasTemplates, templates, selectedTemplateId, workflowStep]);

  const handlePaperChange = (updated: PaperConfig) => {
    if (!activeTemplate) return;
    handleTemplateChange({ ...activeTemplate, paper: updated });
  };

  const handleCutLineChange = (next: CutLineConfig) => {
    if (!activeTemplate) return;
    handleTemplateChange({ ...activeTemplate, cutLine: next });
  };

  const openPrintView = (templateId?: string) => {
    if (!hasTemplates) return;
    if (templateId) {
      handleSelectTemplate(templateId);
    }
    setImportData(null);
    setVariableColumnMapping({});
    setPreviewSnapshot(null);
    setAppliedExportData(null);
    setPreviewLayoutStale(false);
    setActiveRowIndex(0);
    setDraftExportRange(DEFAULT_EXPORT_RANGE);
    setWorkflowStep('print-view');
  };

  const handleDataLoaded = (data: ImportData) => {
    setImportData(data);
    setPreviewSnapshot(null);
    setAppliedExportData(null);
    setPreviewLayoutStale(false);
    setActiveRowIndex(0);
    setDraftExportRange(DEFAULT_EXPORT_RANGE);
    if (!activeTemplate) return;
    const vars = extractTemplateVariables(activeTemplate);
    setVariableColumnMapping(buildAutoVariableMapping(vars, data.columns));
  };

  const handleClearData = () => {
    setImportData(null);
    setVariableColumnMapping({});
    setPreviewSnapshot(null);
    setAppliedExportData(null);
    setPreviewLayoutStale(false);
    setActiveRowIndex(0);
    setDraftExportRange(DEFAULT_EXPORT_RANGE);
  };

  const handleMappingChange = (mapping: Record<string, string>) => {
    setVariableColumnMapping(mapping);
  };

  // Add customized new template
  const handleAddTemplateSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newTmplName.trim()) {
      await showAlert('请先输入合法的模板名', { variant: 'warning' });
      return;
    }
    const newId = `custom_tmpl_${Date.now()}`;
    const newTmpl: LabelTemplate = {
      id: newId,
      name: `${newTmplName}`,
      width: Math.max(10, Number(newTmplW) || 70),
      height: Math.max(10, Number(newTmplH) || 40),
      elements: [
        {
          id: `desc_welcome`,
          type: 'text',
          name: '主文字内容',
          x: 5,
          y: 5,
          width: Math.max(10, newTmplW - 10),
          height: 10,
          content: '{变量}',
          fontSize: 12,
          textAlign: 'center',
          fontWeight: 'bold',
          barcodeFormat: 'CODE128',
          showText: false,
          fontFamily: 'sans'
        }
      ],
      paper: DEFAULT_PAPER_CONFIG,
      cutLine: DEFAULT_CUT_LINE_CONFIG,
    };

    const list = [...templates, newTmpl];
    saveTemplatesToStorage(list);
    handleSelectTemplate(newId);
    setNewTmplName('');
    setShowAddTmplForm(false);
    setWorkflowStep('template-design');
  };

  const closeAddTemplateDialog = () => {
    setShowAddTmplForm(false);
    setNewTmplName('');
    setNewTmplW(75);
    setNewTmplH(45);
  };

  const openEditTemplateDialog = (tmpl: LabelTemplate) => {
    setEditingTemplateId(tmpl.id!);
    setEditTmplName(tmpl.name);
  };

  const closeEditTemplateDialog = () => {
    setEditingTemplateId(null);
    setEditTmplName('');
  };

  const closeTemplateMenu = () => setTemplateMenuId(null);

  const handleEditTemplateSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!editingTemplateId) return;
    const trimmed = editTmplName.trim();
    if (!trimmed) {
      await showAlert('请先输入合法的模板名', { variant: 'warning' });
      return;
    }
    const target = templates.find((t) => t.id === editingTemplateId);
    if (!target) {
      closeEditTemplateDialog();
      return;
    }
    saveTemplatesToStorage(
      templates.map((t) => (t.id === editingTemplateId ? { ...t, name: trimmed } : t))
    );
    closeEditTemplateDialog();
  };

  // Export templates list or single active template as standard json
  const handleExportTemplate = (tmpl: LabelTemplate) => {
    const dataStr = JSON.stringify(normalizeTemplate(tmpl), null, 2);
    const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
    const exportFileDefaultName = `${tmpl.name?.replace(/\s+/g, '_') || tmpl.id}_${Date.now()}.lad`;

    const linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    linkElement.click();
  };

  // Import custom template JSON uploader
  const handleImportTemplate = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = async (event) => {
      try {
        const parsed = JSON.parse(event.target?.result as string);
        if (parsed.width && parsed.height && Array.isArray(parsed.elements)) {
          const newId = `imported_${Date.now()}`;
          const newTmpl = normalizeTemplate({
            id: newId,
            name: parsed.name || `导入外部模板_${Date.now()}`,
            width: Number(parsed.width) || 70,
            height: Number(parsed.height) || 40,
            elements: parsed.elements,
            variableList: parsed.variableList,
            variableDefaults: parsed.variableDefaults,
            paper: parsed.paper,
            cutLine: parsed.cutLine,
            showPdfCutLines: parsed.showPdfCutLines,
          });
          const list = [...templates, newTmpl];
          saveTemplatesToStorage(list);
          handleSelectTemplate(newId);
          await showAlert('模板读取解析成功，已追加至库中。', { variant: 'success' });
        } else {
          await showAlert('模板格式错误：外部模板必须至少包含 width, height, 以及 elements 分组', {
            variant: 'error',
          });
        }
      } catch (err) {
        await showAlert('文件解码失败，请确保您上传的是合法的模板文件。', {
          variant: 'error',
        });
      }
    };
    reader.readAsText(file);
    e.target.value = ''; // clears input
  };

  // Delete customized template
  const handleDeleteTemplate = async (idToDelete: string) => {
    const confirmed = await showConfirm('您确定要彻底删除该标签模板吗？此步骤无法逆转。', {
      title: '删除模板',
      confirmLabel: '删除',
      variant: 'error',
    });
    if (!confirmed) return;

    const remaining = templates.filter((t) => t.id !== idToDelete);
    saveTemplatesToStorage(remaining);

    if (selectedTemplateId === idToDelete) {
      if (remaining.length > 0) {
        handleSelectTemplate(remaining[0].id!);
      } else {
        setSelectedTemplateId('');
        try {
          localStorage.removeItem('selected_label_template_id_v2');
        } catch (e) { }
        setWorkflowStep('template-select');
      }
    }
  };

  const dataColumns = importData?.columns ?? [];
  const activeRows = importData?.rows ?? [];

  const templateVariables = useMemo(
    () => extractTemplateVariables(workingTemplate),
    [workingTemplate]
  );

  const mappedRows = useMemo(
    () =>
      activeRows.map((row) =>
        applyRowVariableMapping(
          row,
          variableColumnMapping,
          templateVariables,
          workingTemplate.variableDefaults
        )
      ),
    [activeRows, variableColumnMapping, templateVariables, workingTemplate.variableDefaults]
  );

  const layoutResult = useMemo(
    () => buildPrintablePages(mappedRows, paper, workingTemplate, draftExportRange),
    [mappedRows, paper, workingTemplate, draftExportRange]
  );

  const {
    pages: printablePages,
    gridCols: gridInfoCols,
    gridRows: gridInfoRows,
    labelsPerPage,
    totalPages,
    selectedCount,
  } = layoutResult;

  const gridInfo = useMemo(
    () => ({ cols: gridInfoCols, rows: gridInfoRows }),
    [gridInfoCols, gridInfoRows]
  );

  const appliedMappedRows = useMemo(() => {
    if (!appliedExportData) return [];
    return appliedExportData.rows.map((row) =>
      applyRowVariableMapping(
        row,
        appliedExportData.mapping,
        templateVariables,
        workingTemplate.variableDefaults
      )
    );
  }, [appliedExportData, templateVariables, workingTemplate.variableDefaults]);

  const appliedExportRange = appliedExportData?.exportRange ?? DEFAULT_EXPORT_RANGE;

  const appliedLayoutResult = useMemo(
    () => buildPrintablePages(appliedMappedRows, paper, workingTemplate, appliedExportRange),
    [appliedMappedRows, paper, workingTemplate, appliedExportRange]
  );

  const dataStale = useMemo(() => {
    if (!importData) return appliedExportData !== null;
    if (!appliedExportData) return true;
    if (
      importData.fileName !== appliedExportData.fileName ||
      importData.currentSheet !== appliedExportData.currentSheet ||
      importData.rows !== appliedExportData.rows
    ) {
      return true;
    }
    const draftKeys = Object.keys(variableColumnMapping).sort();
    const appliedKeys = Object.keys(appliedExportData.mapping).sort();
    if (draftKeys.length !== appliedKeys.length) return true;
    if (draftKeys.some((key) => variableColumnMapping[key] !== appliedExportData.mapping[key])) {
      return true;
    }
    return !exportRangeEquals(draftExportRange, appliedExportData.exportRange);
  }, [importData, variableColumnMapping, appliedExportData, draftExportRange]);

  // 移动端导出页实时同步数据，无需手动「应用数据」
  useLayoutEffect(() => {
    if (!isMobile || workflowStep !== 'print-view') return;
    if (!importData || activeRows.length === 0) return;

    const nextExportRange = { ...draftExportRange };
    setAppliedExportData({
      fileName: importData.fileName,
      currentSheet: importData.currentSheet,
      rows: importData.rows,
      mapping: { ...variableColumnMapping },
      exportRange: nextExportRange,
    });
    setPreviewSnapshot({
      pages: layoutResult.pages,
      gridCols: layoutResult.gridCols,
      labelsPerPage: layoutResult.labelsPerPage,
      totalPages: layoutResult.totalPages,
      selectedCount: layoutResult.selectedCount,
      paper,
      exportRange: nextExportRange,
    });
    setPreviewLayoutStale(false);
  }, [
    isMobile,
    workflowStep,
    importData,
    activeRows,
    variableColumnMapping,
    draftExportRange,
    layoutResult,
    paper,
  ]);

  const handleApplyData = async () => {
    if (!importData || activeRows.length === 0) {
      await showAlert('请先上传 Excel 或 CSV 数据。', { variant: 'warning' });
      return;
    }
    if (selectedCount === 0) {
      await showAlert('当前数据范围内没有可预览的标签，请调整范围设置。', { variant: 'warning' });
      return;
    }
    const nextExportRange = { ...draftExportRange };
    setAppliedExportData({
      fileName: importData.fileName,
      currentSheet: importData.currentSheet,
      rows: importData.rows,
      mapping: { ...variableColumnMapping },
      exportRange: nextExportRange,
    });
    setPreviewSnapshot({
      pages: layoutResult.pages,
      gridCols: layoutResult.gridCols,
      labelsPerPage: layoutResult.labelsPerPage,
      totalPages: layoutResult.totalPages,
      selectedCount: layoutResult.selectedCount,
      paper,
      exportRange: nextExportRange,
    });
    setPreviewLayoutStale(false);
  };

  const handleRedrawPreview = async () => {
    if (!appliedExportData) {
      await showAlert('请先应用数据后再重新绘制预览。', { variant: 'warning' });
      return;
    }
    if (appliedLayoutResult.selectedCount === 0) {
      await showAlert('当前数据范围内没有可预览的标签，请调整范围设置。', { variant: 'warning' });
      return;
    }
    setPreviewSnapshot({
      pages: appliedLayoutResult.pages,
      gridCols: appliedLayoutResult.gridCols,
      labelsPerPage: appliedLayoutResult.labelsPerPage,
      totalPages: appliedLayoutResult.totalPages,
      selectedCount: appliedLayoutResult.selectedCount,
      paper,
      exportRange: appliedExportRange,
    });
    setPreviewLayoutStale(false);
  };

  useEffect(() => {
    if (previewSnapshot !== null && appliedExportData !== null) {
      setPreviewLayoutStale(true);
    }
  }, [workingTemplate.elements, workingTemplate.width, workingTemplate.height]);

  useEffect(() => {
    if (workflowStep !== 'print-view') return;
    if (!appliedExportData) return;

    const layout = buildPrintablePages(
      appliedMappedRows,
      paper,
      workingTemplate,
      appliedExportData.exportRange
    );

    setPreviewSnapshot({
      pages: layout.pages,
      gridCols: layout.gridCols,
      labelsPerPage: layout.labelsPerPage,
      totalPages: layout.totalPages,
      selectedCount: layout.selectedCount,
      paper,
      exportRange: appliedExportData.exportRange,
    });
    setPreviewLayoutStale(false);
  }, [
    paper,
    workflowStep,
    appliedExportData,
    appliedMappedRows,
    workingTemplate.width,
    workingTemplate.height,
  ]);

  const pdfExportImage = useMemo(() => {
    const hasCode = workingTemplate.elements.some(
      (e) => e.type === 'barcode' || e.type === 'qrcode'
    );
    return hasCode
      ? { imageFormat: 'png' as const, jsPdfFormat: 'PNG' as const, scale: 10 }
      : { imageFormat: 'jpeg' as const, jsPdfFormat: 'JPEG' as const, scale: 10 };
  }, [workingTemplate.elements]);

  const exportPdf = async () => {
    if (!activeTemplate) return;
    if (!appliedExportData) {
      await showAlert('请先应用数据后再导出 PDF。', { variant: 'warning' });
      return;
    }
    if (appliedLayoutResult.selectedCount === 0) {
      await showAlert('当前数据范围内没有可排版的标签，请调整范围设置。', { variant: 'warning' });
      return;
    }

    const labelTotal = appliedLayoutResult.selectedCount;
    const exportTotalPages = appliedLayoutResult.totalPages;

    setPdfGenerating(true);
    setPdfProgress({
      done: 0,
      total: labelTotal,
      page: 0,
      totalPages: exportTotalPages,
      phase: 'render',
    });

    const safeName = activeTemplate.name.replace(/[^\w\u4e00-\u9fa5-]+/g, '_').slice(0, 40) || 'labels';
    const progressLastUpdate = { current: 0 };

    try {
      await exportLabelsPdfAsync({
        paper,
        template: activeTemplate,
        printablePages: appliedLayoutResult.pages,
        gridCols: appliedLayoutResult.gridCols,
        cutLine,
        filename: `${safeName}_${exportTotalPages}页.pdf`,
        imageFormat: pdfExportImage.jsPdfFormat,
        renderLabel: (label) =>
          renderLabelToDataUrl({
            widthMm: activeTemplate.width,
            heightMm: activeTemplate.height,
            elements: activeTemplate.elements,
            rowData: label.row,
            rowIndex: label.sourceIndex,
            showBorder: false,
            mode: 'output',
            scale: pdfExportImage.scale,
            imageFormat: pdfExportImage.imageFormat,
            jpegQuality: 0.9,
          }),
        onProgress: (progress) => {
          const now = Date.now();
          const isDone = progress.done >= progress.total || progress.phase === 'save';
          if (isDone || now - progressLastUpdate.current >= 150) {
            progressLastUpdate.current = now;
            setPdfProgress(progress);
          }
        },
      });
    } catch (e) {
      console.error('PDF export failed', e);
      await showAlert('PDF 生成失败，请重试。', { variant: 'error' });
    } finally {
      setPdfGenerating(false);
    }
  };

  return (
    <div
      className={`flex flex-col font-sans h-dvh max-h-dvh overflow-hidden ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile)
        ? 'bg-[#323232] text-[#e8e8e8]'
        : workflowStep === 'print-view' && isMobile
          ? 'bg-[#323232] text-[#e8e8e8]'
          : 'bg-slate-50 text-slate-800'
        }`}
    >
      {/* 
        =========================================
        SCREEN HEADER
        =========================================
      */}
      {workflowStep === 'template-select' && (
        <header
          className={`no-print bg-indigo-700 border-b border-indigo-900 shrink-0 shadow flex flex-wrap items-center justify-between gap-4 mobile-template-header app-header-sticky ${isMobile && workflowStep === 'template-select' && hasTemplates
            ? 'mobile-template-header-row'
            : ''
            } px-4 py-3 md:px-6 md:py-4`}
        >
          {/* Title logo and slogan description */}
          <div
            className={`flex items-center gap-3 min-w-0 ${isMobile && workflowStep === 'template-select' && hasTemplates ? 'flex-1' : ''
              }`}
          >
            <img src={logoUrl} alt="" className="w-10 h-10" aria-hidden />
            <div className="min-w-0">
              <h1 className="text-[18px] font-bold tracking-wider flex items-center gap-2 text-slate-100 uppercase">
                <span className="truncate">标签设计生成器</span>
              </h1>
              <p className="text-[11px] text-slate-400">
                所见即所得
              </p>
            </div>
          </div>

          {workflowStep === 'template-select' && hasTemplates && (
            <div
              className={`flex items-center gap-2 shrink-0 ${isMobile ? 'ml-auto' : 'flex-wrap'
                }`}
            >
              {isMobile ? (
                <>
                  <input
                    ref={importTemplateInputRef}
                    type="file"
                    accept=".lad"
                    onChange={handleImportTemplate}
                    className="hidden"
                  />
                  <div ref={headerTemplateMenuRef} className="relative shrink-0">
                    <button
                      type="button"
                      onClick={() => setHeaderTemplateMenuOpen((open) => !open)}
                      className="mobile-header-menu-btn"
                      aria-expanded={headerTemplateMenuOpen}
                      aria-haspopup="menu"
                      aria-label="更多"
                    >
                      <MoreHorizontal className="w-5 h-5 shrink-0" />
                    </button>
                    <AnchoredMenu
                      open={headerTemplateMenuOpen}
                      onClose={() => setHeaderTemplateMenuOpen(false)}
                      anchorRef={headerTemplateMenuRef}
                      className="min-w-[148px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
                    >
                      <button
                        type="button"
                        role="menuitem"
                        onClick={() => {
                          setHeaderTemplateMenuOpen(false);
                          setShowAddTmplForm(true);
                        }}
                        className="inline-flex items-center gap-3 w-full px-3 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 cursor-pointer"
                      >
                        <Plus className="w-4 h-4 shrink-0" />
                        新建模板
                      </button>
                      <button
                        type="button"
                        role="menuitem"
                        onClick={() => {
                          setHeaderTemplateMenuOpen(false);
                          importTemplateInputRef.current?.click();
                        }}
                        className="inline-flex items-center gap-3 w-full px-3 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 cursor-pointer"
                      >
                        <Upload className="w-4 h-4 shrink-0" />
                        导入模板
                      </button>
                    </AnchoredMenu>
                  </div>
                </>
              ) : (
                <>
                  <button
                    type="button"
                    onClick={() => setShowAddTmplForm(true)}
                    className="inline-flex items-center gap-1.5 px-4 py-2 bg-indigo-600 text-white rounded-xl text-xs font-semibold whitespace-nowrap transition hover:bg-indigo-800 shadow-sm cursor-pointer"
                  >
                    <Plus className="w-4 h-4 shrink-0" />
                    新建模板
                  </button>
                  <label
                    className="inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-800 text-white rounded-xl font-semibold whitespace-nowrap transition shadow-sm cursor-pointer px-4 py-2 text-xs"
                  >
                    <Upload className="w-4 h-4 shrink-0" />
                    导入模板
                    <input
                      type="file"
                      accept=".lad"
                      onChange={handleImportTemplate}
                      className="hidden"
                    />
                  </label>
                </>
              )}
            </div>
          )}
        </header>
      )}

      {/* Primary Workspace scroll container */}
      <main
        className={`no-print flex-1 flex flex-col w-full min-h-0 ${workflowStep === 'template-design' || workflowStep === 'print-view'
          ? 'overflow-hidden'
          : 'overflow-y-auto scrollbar-hide overscroll-contain p-4 md:p-6 max-w-[1720px] mx-auto gap-6'
          }`}
      >

        {/* ========================================================
            STEP 1: Template Selection, Import, and Excel binds dashboard
            ======================================================== */}
        {workflowStep === 'template-select' && (
          <div className="space-y-4 md:space-y-6">
            {hasTemplates ? (
              <div>
                <h2 className="text-base font-bold text-gray-900">标签模板库</h2>
                <p className="text-xs text-gray-400 mt-1">
                  {isMobile
                    ? '选择模板 → 上传 Excel → 关联变量 → 排版生成标签'
                    : '选择模板规格后进行设计与排版导出，或使用右上角按钮新建、导入模板。'}
                </p>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center text-center px-6 py-16 md:py-24">
                {/* <div className="w-16 h-16 rounded-2xl bg-indigo-50 flex items-center justify-center mb-5 border border-indigo-100">
                  <img src={logoUrl} alt="" className="w-12 h-12" aria-hidden />
                </div> */}
                <h2 className="text-lg font-bold text-gray-900">还没有标签模板</h2>
                <p className="text-sm text-gray-500 mt-2 max-w-md leading-relaxed">
                  {isMobile
                    ? '导入已有模板，或在电脑端设计标签模板'
                    : '创建模板开始可视化设计，或导入已有的模板文件。'}
                </p>
                <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-3">
                  <button
                    type="button"
                    onClick={() => setShowAddTmplForm(true)}
                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-semibold transition shadow-sm cursor-pointer"
                  >
                    <Plus className="w-4 h-4 shrink-0" />
                    新建模板
                  </button>
                  <label className="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-white border border-gray-200 hover:border-indigo-300 text-gray-700 rounded-xl text-sm font-semibold transition shadow-sm cursor-pointer shrink-0">
                    <Upload className="w-4 h-4 shrink-0" />
                    导入模板
                    <input
                      type="file"
                      accept=".lad"
                      onChange={handleImportTemplate}
                      className="hidden"
                    />
                  </label>
                </div>
              </div>
            )}

            {hasTemplates && (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {templates.map((tmpl) => {
                  const isActive = tmpl.id === selectedTemplateId;
                  const { displayWidthPx, displayHeightPx } = fitTemplatePreviewSize(
                    tmpl.width,
                    tmpl.height
                  );

                  return (
                    <div
                      key={tmpl.id}
                      onClick={() => handleSelectTemplate(tmpl.id!)}
                      className={`bg-white border rounded-2xl p-5 shadow-xs transition-all flex flex-col cursor-pointer relative overflow-visible group select-none ${isActive
                        // ? 'ring-2 ring-indigo-500 border-indigo-500 bg-indigo-50/5'
                        ? 'border-gray-200 hover:shadow-md hover:border-indigo-200'
                        : 'border-gray-200 hover:shadow-md hover:border-indigo-200'
                        }`}
                    >
                      {/* {isActive && (
                        <div
                          className="absolute top-0 right-0 py-1.5 px-3 text-[10px] font-bold rounded-bl-xl text-white"
                          style={{ backgroundColor: '#6366f1' }}
                        >
                          当前选中
                        </div>
                      )} */}

                      <div className="space-y-1 mb-3 min-w-0">
                        <h3 className="text-sm font-bold text-gray-900 mt-1 leading-snug truncate">
                          {tmpl.name}
                        </h3>
                        <p className="text-[10px] text-gray-400 flex items-center gap-1">
                          <span className="text-[10px] font-mono font-extrabold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100">
                            {tmpl.width} × {tmpl.height} mm
                          </span>
                        </p>
                      </div>

                      {/* Preview */}
                      <div
                        className="rounded-xl bg-gray-50 p-3 overflow-hidden flex items-center justify-center"
                        style={{
                          minHeight: `${TEMPLATE_PREVIEW_MAX_H + 24}px`,
                        }}
                      >
                        <div
                          className="bg-white shadow-sm shrink-0 overflow-hidden"
                          style={{
                            width: `${displayWidthPx}px`,
                            height: `${displayHeightPx}px`,
                          }}
                        >
                          <CanvasLabelImage
                            widthMm={tmpl.width}
                            heightMm={tmpl.height}
                            elements={tmpl.elements}
                            rowData={null}
                            rowIndex={0}
                            showBorder={true}
                            variableDefaults={tmpl.variableDefaults ?? null}
                          />
                        </div>
                      </div>

                      {/* Actions */}
                      <div className={`flex flex-wrap items-center gap-2 mt-4 text-xs ${isMobile ? 'mobile-template-actions' : ''}`}>
                        {!isMobile && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handleSelectTemplate(tmpl.id!);
                              setWorkflowStep('template-design');
                            }}
                            className="shrink-0 whitespace-nowrap inline-flex items-center gap-1 px-3 py-1.5 bg-gray-50 text-indigo-700 border border-gray-100 hover:border-indigo-300 hover:bg-indigo-50 rounded-lg text-[11px] font-bold transition-colors cursor-pointer"
                          >
                            <Code className="w-3.5 h-3.5 shrink-0" />
                            设计
                          </button>
                        )}
                        {isMobile && (
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation();
                              handleSelectTemplate(tmpl.id!);
                              setWorkflowStep('template-design');
                            }}
                            className="mobile-secondary-btn flex-1 min-w-0 justify-center min-h-[44px] px-3 py-2.5 rounded-xl text-[13px] font-semibold"
                          >
                            <Code className="w-4 h-4 shrink-0" />
                            设计
                          </button>
                        )}
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            openPrintView(tmpl.id!);
                          }}
                          className={`inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white transition shadow-xs cursor-pointer ${isMobile
                            ? 'mobile-primary-btn flex-1 min-w-0 justify-center min-h-[44px] px-4 py-2.5 rounded-xl text-[13px] font-semibold'
                            : 'shrink-0 whitespace-nowrap px-3 py-1.5 rounded-lg text-[11px] font-bold'
                            }`}
                        >
                          <Printer className={`${isMobile ? 'w-4 h-4' : 'w-3.5 h-3.5'} shrink-0`} />
                          {isMobile ? '生成' : '排版导出'}
                        </button>
                        <div
                          ref={templateMenuId === tmpl.id ? templateMenuAnchorRef : null}
                          className="relative shrink-0"
                        >
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation();
                              setTemplateMenuId((id) => (id === tmpl.id ? null : tmpl.id!));
                            }}
                            className={`bg-gray-50 text-gray-600 hover:bg-gray-100 active:bg-gray-200 border border-gray-100 hover:border-gray-300 inline-flex items-center justify-center gap-1 transition cursor-pointer ${isMobile
                              ? 'mobile-icon-btn min-h-[44px] px-3 rounded-xl text-[13px] font-medium'
                              : 'shrink-0 whitespace-nowrap px-2.5 py-1.5 rounded-lg text-[11px] font-semibold'
                              }`}
                            aria-expanded={templateMenuId === tmpl.id}
                            aria-haspopup="menu"
                          >
                            <MoreHorizontal className={`${isMobile ? 'w-5 h-5' : 'w-4 h-4'} shrink-0`} />
                          </button>
                          <AnchoredMenu
                            open={templateMenuId === tmpl.id}
                            onClose={closeTemplateMenu}
                            anchorRef={templateMenuAnchorRef}
                            className="min-w-[120px] py-1 bg-white border border-gray-200 rounded-xl shadow-lg"
                          >
                            <button
                              type="button"
                              role="menuitem"
                              onClick={(e) => {
                                e.stopPropagation();
                                closeTemplateMenu();
                                openEditTemplateDialog(tmpl);
                              }}
                              className="inline-flex items-center gap-3 w-full px-3 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 cursor-pointer"
                            >
                              <Pencil className="w-4 h-4 shrink-0" />
                              编辑
                            </button>
                            <button
                              type="button"
                              role="menuitem"
                              onClick={(e) => {
                                e.stopPropagation();
                                closeTemplateMenu();
                                handleExportTemplate(tmpl);
                              }}
                              className="inline-flex items-center gap-3 w-full px-3 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 cursor-pointer"
                            >
                              <FileDown className="w-4 h-4 shrink-0" />
                              导出
                            </button>
                            <button
                              type="button"
                              role="menuitem"
                              onClick={(e) => {
                                e.stopPropagation();
                                closeTemplateMenu();
                                void handleDeleteTemplate(tmpl.id!);
                              }}
                              className="inline-flex items-center gap-3 w-full px-3 py-2.5 text-left text-sm text-rose-600 hover:bg-rose-50 active:bg-rose-100 cursor-pointer"
                            >
                              <Trash2 className="w-4 h-4 shrink-0" />
                              删除
                            </button>
                          </AnchoredMenu>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

        {/* ========================================================
            STEP 2: The visual drag-and-drop label designer
            ======================================================== */}
        {workflowStep === 'template-design' && isMobile && hasTemplates && activeTemplate && (
          <MobileDesignView
            template={activeTemplate}
            paper={paper}
            selectedElementIds={selectedElementIds}
            onSelectElements={setSelectedElementIds}
            onChangeTemplate={handleDesignTemplateChange}
            canUndo={designHistory.canUndo}
            canRedo={designHistory.canRedo}
            onUndo={handleDesignUndo}
            onRedo={handleDesignRedo}
            onBack={() => setWorkflowStep('template-select')}
            onExport={() => openPrintView()}
          />
        )}

        {workflowStep === 'template-design' && !isMobile && hasTemplates && activeTemplate && (
          <div className="flex-1 flex flex-col min-h-0">
            {/* Options bar — Photoshop style */}
            <div className="ps-options-bar">
              <button
                onClick={() => setWorkflowStep('template-select')}
                className="text-[#aaa] hover:text-white transition cursor-pointer"
              >
                ← 返回
              </button>
              <span className="text-[#666]">|</span>
              <span className="font-medium text-[#e8e8e8] truncate max-w-[200px]">
                {activeTemplate.name}
              </span>
              <span className="text-[#666] text-[10px]">
                {activeTemplate.width} × {activeTemplate.height} mm
              </span>
              <div className="flex-1" />
              <div className="flex items-center gap-1">
                <button
                  type="button"
                  onClick={handleDesignUndo}
                  disabled={!designHistory.canUndo}
                  title="撤销 (Ctrl+Z)"
                  className="inline-flex items-center justify-center w-7 h-7 text-[#ccc] hover:text-white hover:bg-[#444] rounded transition cursor-pointer disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[#ccc]"
                >
                  <Undo2 className="w-3.5 h-3.5" />
                </button>
                <button
                  type="button"
                  onClick={handleDesignRedo}
                  disabled={!designHistory.canRedo}
                  title="恢复 (Ctrl+Shift+Z / Ctrl+Y)"
                  className="inline-flex items-center justify-center w-7 h-7 text-[#ccc] hover:text-white hover:bg-[#444] rounded transition cursor-pointer disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-[#ccc]"
                >
                  <Redo2 className="w-3.5 h-3.5" />
                </button>
              </div>
              <span className="hidden md:inline text-[10px] text-[#666]">
                Shift/Ctrl+点击多选
              </span>
              <button
                onClick={() => openPrintView()}
                className="inline-flex items-center gap-1 px-3 py-1 bg-[#31a8ff] hover:bg-[#2890d8] text-white text-[11px] font-semibold transition cursor-pointer"
              >
                <FileDown className="w-3 h-3" />
                排版导出
              </button>
            </div>

            {/* Workspace: toolbar + canvas + panels */}
            <div className="flex-1 flex min-h-0">
              <LabelDesigner
                template={activeTemplate}
                onChange={handleDesignTemplateChange}
                selectedElementIds={selectedElementIds}
                onSelectElements={setSelectedElementIds}
              />
              <PropSidebar
                template={activeTemplate}
                onChangeTemplate={handleDesignTemplateChange}
                selectedElementIds={selectedElementIds}
                onSelectElements={setSelectedElementIds}
                activeTab="element"
                onChangeTab={() => { }}
                paper={paper}
              />
            </div>
          </div>
        )}

        {/* ========================================================
            STEP 3: Pagination layouts & Printed grids configuration
            ======================================================== */}
        {workflowStep === 'print-view' && isMobile && hasTemplates && activeTemplate && (
          <MobileExportView
            template={activeTemplate}
            templateName={activeTemplate.name ?? '标签'}
            templateVariables={templateVariables}
            importData={importData}
            onDataLoaded={handleDataLoaded}
            onClear={handleClearData}
            dataColumns={dataColumns}
            variableColumnMapping={variableColumnMapping}
            onChangeMapping={handleMappingChange}
            paper={previewSnapshot?.paper ?? paper}
            onChangePaper={handlePaperChange}
            rows={mappedRows}
            draftExportRange={draftExportRange}
            onChangeDraftExportRange={setDraftExportRange}
            cutLine={cutLine}
            onChangeCutLine={handleCutLineChange}
            printablePages={previewSnapshot?.pages ?? []}
            gridCols={previewSnapshot?.gridCols ?? gridInfo.cols}
            labelsPerPage={previewSnapshot?.labelsPerPage ?? labelsPerPage}
            totalPages={previewSnapshot?.totalPages ?? totalPages}
            selectedCount={previewSnapshot?.selectedCount ?? selectedCount}
            draftTotalPages={totalPages}
            draftSelectedCount={selectedCount}
            totalRowCount={activeRows.length}
            previewReady={previewSnapshot !== null}
            previewLayoutStale={previewLayoutStale}
            activeRowIndex={activeRowIndex}
            onSelectRowIndex={setActiveRowIndex}
            pdfGenerating={pdfGenerating}
            onBack={() => setWorkflowStep('template-select')}
            onExportPdf={exportPdf}
          />
        )}

        {workflowStep === 'print-view' && !isMobile && hasTemplates && activeTemplate && (
          <div className="flex-1 flex flex-col min-h-0 print-view-shell">
            <div className="ps-options-bar">
              <button
                type="button"
                onClick={() => setWorkflowStep('template-select')}
                className="text-[#aaa] hover:text-white transition cursor-pointer"
              >
                ← 返回
              </button>
              <span className="text-[#666]">|</span>
              <span className="font-medium text-[#e8e8e8] truncate max-w-[180px]">
                {activeTemplate.name}
              </span>
              <span className="text-[#666] text-[10px]">
                {gridInfo.cols}×{gridInfo.rows} · {totalPages} 页 ·{' '}
                {selectedCount < activeRows.length
                  ? `${selectedCount}/${activeRows.length} 行`
                  : `${activeRows.length} 行`}
              </span>
              <div className="flex-1" />
              <button
                type="button"
                onClick={() => setWorkflowStep('template-design')}
                className="inline-flex items-center gap-1 px-2.5 py-1 border border-[#555] hover:border-[#777] text-[#ccc] hover:text-white text-[10px] transition cursor-pointer"
              >
                修改模板
              </button>
              <button
                type="button"
                onClick={exportPdf}
                disabled={
                  !appliedExportData || appliedLayoutResult.selectedCount === 0 || pdfGenerating
                }
                className={`inline-flex items-center gap-1.5 px-3 py-1 text-[11px] font-semibold transition cursor-pointer ${appliedExportData && appliedLayoutResult.selectedCount > 0 && !pdfGenerating
                  ? 'bg-[#31a8ff] hover:bg-[#2890d8] text-white'
                  : 'bg-[#444] text-[#666] cursor-not-allowed'
                  }`}
              >
                {pdfGenerating ? (
                  <Loader2 className="w-3 h-3 shrink-0 animate-spin" />
                ) : (
                  <FileDown className="w-3 h-3 shrink-0" />
                )}
                {pdfGenerating ? '生成中…' : '生成并保存 PDF'}
              </button>
            </div>

            <div className="flex-1 flex min-h-0 print-view-body overflow-hidden">
              <LayoutPreview
                paper={previewSnapshot !== null ? previewSnapshot.paper : paper}
                template={activeTemplate}
                printablePages={previewSnapshot?.pages ?? []}
                gridCols={previewSnapshot?.gridCols ?? gridInfo.cols}
                labelsPerPage={previewSnapshot?.labelsPerPage ?? labelsPerPage}
                totalPages={previewSnapshot?.totalPages ?? totalPages}
                selectedCount={previewSnapshot?.selectedCount ?? selectedCount}
                totalRowCount={activeRows.length}
                draftTotalPages={totalPages}
                draftSelectedCount={selectedCount}
                previewReady={previewSnapshot !== null}
                previewLayoutStale={previewLayoutStale}
                cutLine={cutLine}
                activeRowIndex={activeRowIndex}
                onSelectRowIndex={setActiveRowIndex}
              />
              <ExportSidebar
                importData={importData}
                onDataLoaded={handleDataLoaded}
                onClear={handleClearData}
                templateName={activeTemplate.name ?? '标签'}
                templateVariables={templateVariables}
                dataColumns={dataColumns}
                variableColumnMapping={variableColumnMapping}
                onChangeMapping={handleMappingChange}
                paper={paper}
                onChangePaper={handlePaperChange}
                template={activeTemplate}
                rows={mappedRows}
                draftExportRange={draftExportRange}
                onChangeDraftExportRange={setDraftExportRange}
                cutLine={cutLine}
                onChangeCutLine={handleCutLineChange}
                previewReady={previewSnapshot !== null}
                dataStale={dataStale}
                previewLayoutStale={previewLayoutStale}
                dataApplied={appliedExportData !== null}
                onApplyData={handleApplyData}
                onRedrawPreview={handleRedrawPreview}
                draftSelectedCount={selectedCount}
              />
            </div>
          </div>
        )}
      </main>

      {editingTemplateId && (
        <div
          className="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4"
          onClick={closeEditTemplateDialog}
          role="presentation"
        >
          <div
            className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden"
            onClick={(e) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-label="重命名模板"
          >
            <form onSubmit={handleEditTemplateSubmit} className="px-6 py-5 space-y-4">
              <div>
                <label className="block text-[11px] font-semibold text-gray-500 mb-1.5">
                  模板名称
                </label>
                <input
                  type="text"
                  required
                  autoFocus
                  placeholder="请输入模板名称"
                  value={editTmplName}
                  onChange={(e) => setEditTmplName(e.target.value)}
                  className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:border-indigo-400 focus:outline-none"
                />
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={closeEditTemplateDialog}
                  className="px-4 py-2 border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg text-sm font-medium cursor-pointer"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-semibold cursor-pointer"
                >
                  保存
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {showAddTmplForm && (
        <div
          className="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4"
          onClick={closeAddTemplateDialog}
          role="presentation"
        >
          <div
            className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden"
            onClick={(e) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-labelledby="add-template-dialog-title"
          >
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
              <h3
                id="add-template-dialog-title"
                className="text-sm font-bold text-gray-900"
              >
                新建模板
              </h3>
              <button
                type="button"
                onClick={closeAddTemplateDialog}
                className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition cursor-pointer"
                aria-label="关闭"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
            <form onSubmit={handleAddTemplateSubmit} className="px-6 py-5 space-y-4">
              <div>
                <label className="block text-[11px] font-semibold text-gray-500 mb-1.5">
                  模板名称
                </label>
                <input
                  type="text"
                  required
                  autoFocus
                  placeholder="如: 电商仓外贴标 70x40"
                  value={newTmplName}
                  onChange={(e) => setNewTmplName(e.target.value)}
                  className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:border-indigo-400 focus:outline-none"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-semibold text-gray-500 mb-1.5">
                    标签宽度 (mm)
                  </label>
                  <input
                    type="number"
                    required
                    min="10"
                    max="150"
                    value={newTmplW}
                    onChange={(e) => setNewTmplW(Number(e.target.value))}
                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-mono focus:border-indigo-400 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-semibold text-gray-500 mb-1.5">
                    标签高度 (mm)
                  </label>
                  <input
                    type="number"
                    required
                    min="10"
                    max="150"
                    value={newTmplH}
                    onChange={(e) => setNewTmplH(Number(e.target.value))}
                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-mono focus:border-indigo-400 focus:outline-none"
                  />
                </div>
              </div>
              <div className="flex justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={closeAddTemplateDialog}
                  className="px-4 py-2 border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg text-sm font-medium cursor-pointer"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-semibold cursor-pointer"
                >
                  创建并进入设计
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {pdfGenerating && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-950/70 backdrop-blur-sm">
          <div className="bg-white rounded-2xl shadow-2xl px-8 py-6 flex flex-col items-center gap-4 min-w-[280px]">
            <Loader2 className="w-10 h-10 text-indigo-600 animate-spin" />
            <div className="text-center">
              <p className="text-sm font-bold text-gray-900">
                {pdfProgress.phase === 'save' ? '正在保存 PDF 文件…' : '正在生成 PDF'}
              </p>
              <p className="text-xs text-gray-500 mt-1">
                {pdfProgress.phase === 'save'
                  ? '即将完成，请稍候'
                  : `第 ${pdfProgress.page} / ${pdfProgress.totalPages} 页 · ${pdfProgress.done} / ${pdfProgress.total} 张标签`}
              </p>
            </div>
            <div className="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden">
              <div
                className="h-full bg-indigo-600 transition-all duration-200"
                style={{
                  width: pdfProgress.total
                    ? `${(pdfProgress.done / pdfProgress.total) * 100}%`
                    : '0%',
                }}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}