import React, { useState, useEffect, useMemo } from 'react';
import {
  Printer,
  Grid,
  Edit3,
  Copy,
  Clipboard,
  Trash2,
  CheckSquare,
  Square,
  Sliders,
  HelpCircle,
  Plus,
  RotateCcw,
  Layers,
  AlignLeft,
  AlignCenter,
  AlignRight,
  Bold,
  Italic,
  Underline,
  Eye,
  Save,
  Sparkles,
  CheckCircle2,
  Ban,
  ArrowUpToLine,
  FoldVertical,
  ArrowDownToLine,
  Hash,
  Bookmark,
  X,
  Smartphone,
  Monitor,
  Move
} from 'lucide-react';

// ==========================================
// CONSTANTS & PRESETS
// ==========================================

const A4_WIDTH_MM = 210;
const A4_HEIGHT_MM = 297;

const DEFAULT_GRID_PRESETS = [
  {
    id: '8x3-zero',
    name: '8 × 3 Zero Margin (70 × 37.1mm)',
    rows: 8,
    cols: 3,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    gapX: 0,
    gapY: 0,
    padding: 3,
    offsetX: 0,
    offsetY: 0
  },
  {
    id: '8x3-margin',
    name: '8 × 3 Standard Margin (66 × 33.8mm)',
    rows: 8,
    cols: 3,
    marginTop: 13,
    marginBottom: 13,
    marginLeft: 6,
    marginRight: 6,
    gapX: 0,
    gapY: 0,
    padding: 3,
    offsetX: 0,
    offsetY: 0
  },
  {
    id: '7x3-standard',
    name: '7 × 3 Address Labels (63.5 × 38.1mm)',
    rows: 7,
    cols: 3,
    marginTop: 15.1,
    marginBottom: 15.1,
    marginLeft: 7.2,
    marginRight: 7.2,
    gapX: 2.5,
    gapY: 0,
    padding: 3.5,
    offsetX: 0,
    offsetY: 0
  },
  {
    id: '10x4-small',
    name: '10 × 4 Small Return (52.5 × 29.7mm)',
    rows: 10,
    cols: 4,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    gapX: 0,
    gapY: 0,
    padding: 2,
    offsetX: 0,
    offsetY: 0
  },
  {
    id: '4x2-shipping',
    name: '4 × 2 Large Shipping (105 × 74.25mm)',
    rows: 4,
    cols: 2,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    gapX: 0,
    gapY: 0,
    padding: 5,
    offsetX: 0,
    offsetY: 0
  }
];

const FONT_OPTIONS = [
  {
    id: 'sans-tc',
    label: '黑體 / Sans-Serif (繁體中文 + EN)',
    family: '"PingFang HK", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", "Inter", system-ui, sans-serif'
  },
  {
    id: 'serif-tc',
    label: '宋體・明體 / Serif (繁體中文 + EN)',
    family: '"Noto Serif TC", "Songti TC", "PMingLiU", "Times New Roman", Georgia, serif'
  },
  {
    id: 'rounded-tc',
    label: '圓體・現代 / Clean UI (繁體 + EN)',
    family: '"PingFang HK", "Microsoft JhengHei UI", "Helvetica Neue", Arial, sans-serif'
  },
  {
    id: 'mono',
    label: '等寬字體 / Monospace (Code / SKU)',
    family: '"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Noto Sans TC", monospace'
  }
];

const DEFAULT_LABEL_DESIGN = {
  blocks: [
    {
      id: 'b1',
      text: '收件人：陳大文 先生\nFlat A, 12/F, Tower 1\nKwai Chung, N.T., Hong Kong',
      fontId: 'sans-tc',
      fontSize: 12,
      color: '#0f172a',
      bold: true,
      italic: false,
      underline: false,
      alignX: 'center'
    }
  ],
  alignY: 'middle',
  bgColor: '#ffffff',
  showBorder: false,
  borderColor: '#0f172a',
  borderWidth: 1
};

const QUICK_TEMPLATES = [
  {
    name: '香港地址標籤 (Address)',
    design: {
      blocks: [
        {
          id: 't1-1',
          text: '陳大文 先生 收',
          fontId: 'sans-tc',
          fontSize: 13,
          color: '#0f172a',
          bold: true,
          italic: false,
          underline: false,
          alignX: 'left'
        },
        {
          id: 't1-2',
          text: '香港九龍彌敦道 100 號\n商業大廈 15 樓 A 室\nTel: 9123 4567',
          fontId: 'sans-tc',
          fontSize: 10,
          color: '#334155',
          bold: false,
          italic: false,
          underline: false,
          alignX: 'left'
        }
      ],
      alignY: 'middle',
      bgColor: '#ffffff',
      showBorder: false,
      borderColor: '#0f172a',
      borderWidth: 1
    }
  },
  {
    name: '產品標價 / SKU (Product)',
    design: {
      blocks: [
        {
          id: 't2-1',
          text: '精選台灣高山烏龍茶 (150g)',
          fontId: 'serif-tc',
          fontSize: 11,
          color: '#1e293b',
          bold: true,
          italic: false,
          underline: false,
          alignX: 'center'
        },
        {
          id: 't2-2',
          text: 'SKU: TW-TEA-089   HK$ 168.00\nBest Before: 2027.12.31',
          fontId: 'mono',
          fontSize: 9,
          color: '#475569',
          bold: false,
          italic: false,
          underline: false,
          alignX: 'center'
        }
      ],
      alignY: 'middle',
      bgColor: '#ffffff',
      showBorder: true,
      borderColor: '#94a3b8',
      borderWidth: 1
    }
  },
  {
    name: '檔案分類 (Folder Tag)',
    design: {
      blocks: [
        {
          id: 't3-1',
          text: '2026 年度財務報表 & 發票\nFY2026 Financial & Invoices',
          fontId: 'sans-tc',
          fontSize: 12,
          color: '#1e3a8a',
          bold: true,
          italic: false,
          underline: true,
          alignX: 'center'
        }
      ],
      alignY: 'middle',
      bgColor: '#f8fafc',
      showBorder: true,
      borderColor: '#1e3a8a',
      borderWidth: 1.5
    }
  }
];

const cloneDesign = (design) => JSON.parse(JSON.stringify(design));

export default function App() {
  // ==========================================
  // STATE MANAGEMENT WITH LOCALSTORAGE
  // ==========================================

  // Grid Config State
  const [gridConfig, setGridConfig] = useState(() => {
    try {
      const saved = localStorage.getItem('a4_label_grid_config');
      return saved ? JSON.parse(saved) : DEFAULT_GRID_PRESETS[0];
    } catch {
      return DEFAULT_GRID_PRESETS[0];
    }
  });

  // Custom Saved Presets
  const [customPresets, setCustomPresets] = useState(() => {
    try {
      const saved = localStorage.getItem('a4_label_custom_presets');
      return saved ? JSON.parse(saved) : [];
    } catch {
      return [];
    }
  });

  // Slots Data: dictionary keyed by slot index (0 to rows*cols - 1)
  // { used: boolean, hasContent: boolean, design: LabelDesign }
  const [slotsData, setSlotsData] = useState(() => {
    try {
      const saved = localStorage.getItem('a4_label_slots_data');
      if (saved) return JSON.parse(saved);
    } catch {
      // ignore error
    }
    return {
      0: { used: false, hasContent: true, design: cloneDesign(DEFAULT_LABEL_DESIGN) },
      1: { used: false, hasContent: true, design: cloneDesign(DEFAULT_LABEL_DESIGN) },
      2: { used: true, hasContent: false, design: cloneDesign(DEFAULT_LABEL_DESIGN) },
      3: { used: true, hasContent: false, design: cloneDesign(DEFAULT_LABEL_DESIGN) }
    };
  });

  // Currently selected slot indices for editing or batch operation
  const [selectedSlots, setSelectedSlots] = useState([0]);

  // Active Editor Design
  const [activeDesign, setActiveDesign] = useState(() => {
    return cloneDesign(DEFAULT_LABEL_DESIGN);
  });

  // Interaction mode on the A4 sheet: 'select' (pick slots to edit/print) | 'used' (mark already peeled stickers)
  const [sheetClickMode, setSheetClickMode] = useState('select');
  const [multiSelectToggle, setMultiSelectToggle] = useState(false);

  // Clipboard for copying & pasting between slots
  const [clipboardDesign, setClipboardDesign] = useState(null);

  // Print Test Cutline Mode
  const [printTestGrid, setPrintTestGrid] = useState(false);

  // Mobile Tab Navigation ('sheet' | 'editor' | 'grid')
  const [mobileTab, setMobileTab] = useState('sheet');

  // Modals & Notifications
  const [showHelpModal, setShowHelpModal] = useState(false);
  const [showSavePresetModal, setShowSavePresetModal] = useState(false);
  const [showSequenceModal, setShowSequenceModal] = useState(false);
  const [newPresetName, setNewPresetName] = useState('');
  const [toastMsg, setToastMsg] = useState(null);

  // Numbering sequence generator state
  const [seqPrefix, setSeqPrefix] = useState('#');
  const [seqStart, setSeqStart] = useState(1);
  const [seqDigits, setSeqDigits] = useState(3);

  // ==========================================
  // EFFECTS & PERSISTENCE
  // ==========================================

  // Inject Google Fonts for Traditional Chinese & English
  useEffect(() => {
    const linkId = 'a4-label-google-fonts';
    if (!document.getElementById(linkId)) {
      const link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      link.href =
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@400;600;700&family=Roboto+Mono:wght@400;600;700&display=swap';
      document.head.appendChild(link);
    }
  }, []);

  useEffect(() => {
    try {
      localStorage.setItem('a4_label_grid_config', JSON.stringify(gridConfig));
    } catch {}
  }, [gridConfig]);

  useEffect(() => {
    try {
      localStorage.setItem('a4_label_slots_data', JSON.stringify(slotsData));
    } catch {}
  }, [slotsData]);

  useEffect(() => {
    try {
      localStorage.setItem('a4_label_custom_presets', JSON.stringify(customPresets));
    } catch {}
  }, [customPresets]);

  const showToast = (msg) => {
    setToastMsg(msg);
    setTimeout(() => {
      setToastMsg((prev) => (prev === msg ? null : prev));
    }, 2600);
  };

  // ==========================================
  // COMPUTED METRICS
  // ==========================================

  const totalSlots = gridConfig.rows * gridConfig.cols;

  const labelDimensions = useMemo(() => {
    const usableWidth =
      A4_WIDTH_MM -
      gridConfig.marginLeft -
      gridConfig.marginRight -
      (gridConfig.cols - 1) * gridConfig.gapX;
    const usableHeight =
      A4_HEIGHT_MM -
      gridConfig.marginTop -
      gridConfig.marginBottom -
      (gridConfig.rows - 1) * gridConfig.gapY;

    const width = Math.max(10, usableWidth / gridConfig.cols);
    const height = Math.max(8, usableHeight / gridConfig.rows);

    return {
      width: Number(width.toFixed(2)),
      height: Number(height.toFixed(2))
    };
  }, [gridConfig]);

  const sheetStats = useMemo(() => {
    let usedCount = 0;
    let printCount = 0;
    let availableEmptyCount = 0;

    for (let i = 0; i < totalSlots; i++) {
      const slot = slotsData[i];
      if (slot?.used) {
        usedCount++;
      } else if (slot?.hasContent) {
        printCount++;
      } else {
        availableEmptyCount++;
      }
    }

    return { usedCount, printCount, availableEmptyCount };
  }, [slotsData, totalSlots]);

  // ==========================================
  // SLOT & DESIGN HANDLERS
  // ==========================================

  // Synchronize editor changes to currently selected active slots automatically
  const updateActiveDesignAndSync = (updater) => {
    setActiveDesign((prevDesign) => {
      const nextDesign = typeof updater === 'function' ? updater(prevDesign) : updater;

      if (selectedSlots.length > 0) {
        setSlotsData((prevSlots) => {
          const updated = { ...prevSlots };
          selectedSlots.forEach((slotIdx) => {
            if (slotIdx < totalSlots) {
              const existing = updated[slotIdx] || { used: false };
              if (!existing.used) {
                updated[slotIdx] = {
                  ...existing,
                  hasContent: true,
                  design: cloneDesign(nextDesign)
                };
              }
            }
          });
          return updated;
        });
      }
      return nextDesign;
    });
  };

  // Handle clicking a slot on the A4 visualizer
  const handleSlotClick = (index, event) => {
    const isShiftOrCmd = event.shiftKey || event.metaKey || event.ctrlKey || multiSelectToggle;

    if (sheetClickMode === 'used') {
      // Toggle "Used / Peeled Sticker" status directly
      setSlotsData((prev) => {
        const current = prev[index] || {
          used: false,
          hasContent: false,
          design: cloneDesign(activeDesign)
        };
        const nextUsed = !current.used;
        return {
          ...prev,
          [index]: {
            ...current,
            used: nextUsed,
            hasContent: nextUsed ? false : current.hasContent
          }
        };
      });
      return;
    }

    // Normal Select / Edit Mode
    if (isShiftOrCmd) {
      setSelectedSlots((prev) => {
        if (prev.includes(index)) {
          return prev.length > 1 ? prev.filter((i) => i !== index) : prev;
        }
        return [...prev, index];
      });
    } else {
      setSelectedSlots([index]);
      const targetSlot = slotsData[index];
      if (targetSlot && targetSlot.hasContent && targetSlot.design) {
        setActiveDesign(cloneDesign(targetSlot.design));
      } else if (targetSlot && !targetSlot.used && !targetSlot.hasContent) {
        // When clicking an empty available slot, populate it with current active design or select it
        setSlotsData((prev) => ({
          ...prev,
          [index]: {
            used: false,
            hasContent: true,
            design: cloneDesign(activeDesign)
          }
        }));
      }
    }
  };

  // Apply current editor design to all selected slots
  const applyToSelectedSlots = () => {
    if (selectedSlots.length === 0) {
      showToast('請先選擇至少一個標籤格 (Select a slot first)');
      return;
    }
    setSlotsData((prev) => {
      const next = { ...prev };
      let count = 0;
      selectedSlots.forEach((idx) => {
        if (!next[idx]?.used) {
          next[idx] = {
            used: false,
            hasContent: true,
            design: cloneDesign(activeDesign)
          };
          count++;
        }
      });
      showToast(`已套用設計至 ${count} 個標籤格 (Applied to ${count} slots)`);
      return next;
    });
  };

  // Fill all available (non-used) slots with current design
  const fillAllAvailableSlots = () => {
    setSlotsData((prev) => {
      const next = { ...prev };
      let count = 0;
      for (let i = 0; i < totalSlots; i++) {
        if (!next[i]?.used) {
          next[i] = {
            used: false,
            hasContent: true,
            design: cloneDesign(activeDesign)
          };
          count++;
        }
      }
      showToast(`已填滿全部 ${count} 個可用標籤格 (Filled ${count} available slots)`);
      return next;
    });
  };

  // Toggle Used state for currently selected slots
  const toggleUsedForSelected = () => {
    if (selectedSlots.length === 0) return;
    setSlotsData((prev) => {
      const next = { ...prev };
      const firstSlotUsed = Boolean(next[selectedSlots[0]]?.used);
      const targetUsedState = !firstSlotUsed;

      selectedSlots.forEach((idx) => {
        const existing = next[idx] || { design: cloneDesign(activeDesign) };
        next[idx] = {
          ...existing,
          used: targetUsedState,
          hasContent: targetUsedState ? false : existing.hasContent
        };
      });
      showToast(
        targetUsedState
          ? `已將 ${selectedSlots.length} 格標記為「已撕除/已用」(Marked as Used)`
          : `已將 ${selectedSlots.length} 格恢復為「可用」(Marked Available)`
      );
      return next;
    });
  };

  // Clear content from selected slots (keep used status intact)
  const clearSelectedSlotsContent = () => {
    setSlotsData((prev) => {
      const next = { ...prev };
      selectedSlots.forEach((idx) => {
        if (next[idx]) {
          next[idx] = { ...next[idx], hasContent: false };
        }
      });
      showToast(`已清除所選標籤內容 (Cleared ${selectedSlots.length} slots)`);
      return next;
    });
  };

  // Reset entire sheet
  const resetWholeSheet = () => {
    setSlotsData({});
    setSelectedSlots([0]);
    showToast('已清空整張標籤紙狀態 (Sheet Reset)');
  };

  // Copy & Paste between slots
  const handleCopyDesign = () => {
    setClipboardDesign(cloneDesign(activeDesign));
    showToast('已複製目前標籤設計 (Copied label design)');
  };

  const handlePasteDesign = () => {
    if (!clipboardDesign) {
      showToast('剪貼簿尚無複製的設計 (Clipboard is empty)');
      return;
    }
    updateActiveDesignAndSync(cloneDesign(clipboardDesign));
    showToast(`已貼上至 ${selectedSlots.length} 個所選格 (Pasted to selected slots)`);
  };

  // Select All Available Slots
  const selectAllAvailable = () => {
    const avail = [];
    for (let i = 0; i < totalSlots; i++) {
      if (!slotsData[i]?.used) avail.push(i);
    }
    setSelectedSlots(avail);
    showToast(`已全選 ${avail.length} 個可用格 (Selected ${avail.length} available slots)`);
  };

  // Generate Sequential Labels across selected slots
  const handleApplySequence = () => {
    const sortedTargets = [...selectedSlots]
      .filter((idx) => !slotsData[idx]?.used)
      .sort((a, b) => a - b);

    if (sortedTargets.length === 0) {
      showToast('請先選擇可用的標籤格 (No available slots selected)');
      setShowSequenceModal(false);
      return;
    }

    setSlotsData((prev) => {
      const next = { ...prev };
      sortedTargets.forEach((slotIdx, orderIdx) => {
        const numStr = String(Number(seqStart) + orderIdx).padStart(Number(seqDigits), '0');
        const seqLabel = `${seqPrefix}${numStr}`;
        const cloned = cloneDesign(activeDesign);
        if (cloned.blocks.length > 0) {
          cloned.blocks[0].text = `${cloned.blocks[0].text}\n${seqLabel}`;
        }
        next[slotIdx] = {
          used: false,
          hasContent: true,
          design: cloned
        };
      });
      return next;
    });

    setShowSequenceModal(false);
    showToast(`已產生 ${sortedTargets.length} 個序號標籤 (Generated ${sortedTargets.length} serial labels)`);
  };

  // ==========================================
  // TEXT BLOCK EDITOR HANDLERS
  // ==========================================

  const handleBlockChange = (blockId, field, value) => {
    updateActiveDesignAndSync((prev) => ({
      ...prev,
      blocks: prev.blocks.map((b) => (b.id === blockId ? { ...b, [field]: value } : b))
    }));
  };

  const addTextBlock = () => {
    updateActiveDesignAndSync((prev) => ({
      ...prev,
      blocks: [
        ...prev.blocks,
        {
          id: `b-${Date.now()}`,
          text: '新增文字行 / New Text Line',
          fontId: 'sans-tc',
          fontSize: 10,
          color: '#0f172a',
          bold: false,
          italic: false,
          underline: false,
          alignX: 'center'
        }
      ]
    }));
  };

  const removeTextBlock = (blockId) => {
    updateActiveDesignAndSync((prev) => {
      if (prev.blocks.length <= 1) return prev;
      return {
        ...prev,
        blocks: prev.blocks.filter((b) => b.id !== blockId)
      };
    });
  };

  // Save Custom Grid Preset
  const handleSaveCustomPreset = () => {
    if (!newPresetName.trim()) return;
    const preset = {
      ...gridConfig,
      id: `custom-${Date.now()}`,
      name: `${newPresetName.trim()} (${gridConfig.rows}×${gridConfig.cols})`
    };
    setCustomPresets((prev) => [...prev, preset]);
    setGridConfig(preset);
    setNewPresetName('');
    setShowSavePresetModal(false);
    showToast('已儲存自訂版面規格 (Saved custom grid preset)');
  };

  // Trigger Native Print
  const handleTriggerPrint = (testGridOnly = false) => {
    setPrintTestGrid(testGridOnly);
    setTimeout(() => {
      window.print();
    }, 120);
  };

  // Helper to resolve font family CSS string
  const getFontFamilyCSS = (fontId) => {
    const found = FONT_OPTIONS.find((f) => f.id === fontId);
    return found ? found.family : FONT_OPTIONS[0].family;
  };

  // Render content inside a label cell (shared between screen mini-preview, live editor, and print output)
  const renderLabelContent = (design, scaleRatio = 1, isPrint = false) => {
    if (!design) return null;

    const justifyMap = {
      top: 'flex-start',
      middle: 'center',
      bottom: 'flex-end'
    };

    const paddingMm = gridConfig.padding * scaleRatio;

    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          backgroundColor: design.bgColor || '#ffffff',
          padding: isPrint ? `${gridConfig.padding}mm` : `${paddingMm}px`,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: justifyMap[design.alignY || 'middle'],
          boxSizing: 'border-box',
          overflow: 'hidden',
          position: 'relative'
        }}
      >
        <div
          style={{
            width: '100%',
            height: design.showBorder ? '100%' : 'auto',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: justifyMap[design.alignY || 'middle'],
            border: design.showBorder
              ? `${Math.max(0.5, (design.borderWidth || 1) * (isPrint ? 1 : scaleRatio * 0.35))}px solid ${
                  design.borderColor || '#0f172a'
                }`
              : 'none',
            padding: design.showBorder ? (isPrint ? '1.5mm' : `${1.5 * scaleRatio}px`) : 0,
            boxSizing: 'border-box',
            borderRadius: design.showBorder ? '2px' : '0px'
          }}
        >
          {design.blocks.map((block) => {
            // Convert pt to scaled pixels on screen, or true pt in print
            const fontSizeStyle = isPrint
              ? `${block.fontSize}pt`
              : `${Math.max(5, block.fontSize * 1.333 * (scaleRatio / 3.78))}px`;

            return (
              <div
                key={block.id}
                style={{
                  fontFamily: getFontFamilyCSS(block.fontId),
                  fontSize: fontSizeStyle,
                  color: block.color || '#000000',
                  fontWeight: block.bold ? 700 : 400,
                  fontStyle: block.italic ? 'italic' : 'normal',
                  textDecoration: block.underline ? 'underline' : 'none',
                  textAlign: block.alignX || 'center',
                  lineHeight: 1.28,
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  marginBottom: isPrint ? '0.6mm' : `${0.6 * scaleRatio}px`
                }}
              >
                {block.text}
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-100 text-slate-800 flex flex-col font-sans select-none">
      {/* ==========================================
          EXACT-SCALE NATIVE PRINT STYLESHEET
         ========================================== */}
      <style>{`
        @media print {
          @page {
            size: A4 portrait;
            margin: 0mm !important;
          }
          html, body {
            width: 210mm !important;
            height: 297mm !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #ffffff !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            overflow: hidden !important;
          }
          .no-print {
            display: none !important;
          }
          .print-only-sheet {
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 210mm !important;
            height: 297mm !important;
            box-sizing: border-box !important;
            transform: translate(${gridConfig.offsetX || 0}mm, ${gridConfig.offsetY || 0}mm) !important;
          }
        }
        @media screen {
          .print-only-sheet {
            display: none !important;
          }
        }
        /* Diagonal hatch pattern for used/peeled sticker slots */
        .used-slot-hatch {
          background-image: repeating-linear-gradient(
            -45deg,
            rgba(148, 163, 184, 0.16),
            rgba(148, 163, 184, 0.16) 6px,
            rgba(241, 245, 249, 0.6) 6px,
            rgba(241, 245, 249, 0.6) 12px
          );
        }
      `}</style>

      {/* ==========================================
          TOP NAVIGATION BAR (HIDDEN IN PRINT)
         ========================================== */}
      <header className="no-print bg-white border-b border-slate-200 sticky top-0 z-30 shadow-xs">
        <div className="max-w-7xl mx-auto px-3 sm:px-6 h-16 flex items-center justify-between gap-2">
          {/* App Brand */}
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-sm shadow-indigo-200 shrink-0">
              <Printer className="w-5 h-5" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="font-bold text-slate-900 text-base sm:text-lg tracking-tight leading-tight">
                  A4 Label Studio
                </h1>
                <span className="hidden md:inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-200">
                  {gridConfig.rows} × {gridConfig.cols} ({labelDimensions.width}×{labelDimensions.height}mm)
                </span>
              </div>
              <p className="text-xs text-slate-500 hidden sm:block">
                A4 貼紙精準排版列印工具 • 支援局部已用貼紙跳格 & 繁體中文
              </p>
            </div>
          </div>

          {/* Right Action Controls */}
          <div className="flex items-center gap-1.5 sm:gap-2.5">
            <button
              onClick={() => setShowHelpModal(true)}
              className="p-2 sm:px-3 sm:py-2 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-100 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition"
              title="列印設定教學 (iPhone AirPrint / Mac / Windows)"
            >
              <HelpCircle className="w-4 h-4 text-indigo-600" />
              <span className="hidden lg:inline">列印對位指南</span>
            </button>

            <button
              onClick={() => handleTriggerPrint(true)}
              className="px-2.5 py-2 rounded-lg border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition shadow-2xs"
              title="印出極細邊框測試紙，與實體標籤紙疊合對光檢查位置"
            >
              <Grid className="w-4 h-4 text-slate-500" />
              <span className="hidden sm:inline">列印對位測試格</span>
            </button>

            <button
              onClick={() => handleTriggerPrint(false)}
              className="px-3.5 sm:px-5 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold text-xs sm:text-sm flex items-center gap-2 shadow-sm shadow-indigo-200 transition cursor-pointer"
            >
              <Printer className="w-4 h-4" />
              <span>列印標籤 ({sheetStats.printCount})</span>
            </button>
          </div>
        </div>

        {/* Mobile Switcher Tabs (Only visible on < lg screens) */}
        <div className="flex lg:hidden border-t border-slate-200 bg-slate-50">
          <button
            onClick={() => setMobileTab('sheet')}
            className={`flex-1 py-2.5 text-xs font-semibold flex items-center justify-center gap-1.5 border-b-2 transition ${
              mobileTab === 'sheet'
                ? 'border-indigo-600 text-indigo-600 bg-white'
                : 'border-transparent text-slate-600'
            }`}
          >
            <Layers className="w-4 h-4" />
            <span>1. 選擇貼紙位置 ({sheetStats.printCount}/{totalSlots})</span>
          </button>
          <button
            onClick={() => setMobileTab('editor')}
            className={`flex-1 py-2.5 text-xs font-semibold flex items-center justify-center gap-1.5 border-b-2 transition ${
              mobileTab === 'editor'
                ? 'border-indigo-600 text-indigo-600 bg-white'
                : 'border-transparent text-slate-600'
            }`}
          >
            <Edit3 className="w-4 h-4" />
            <span>2. 編輯文字與字型</span>
          </button>
          <button
            onClick={() => setMobileTab('grid')}
            className={`flex-1 py-2.5 text-xs font-semibold flex items-center justify-center gap-1.5 border-b-2 transition ${
              mobileTab === 'grid'
                ? 'border-indigo-600 text-indigo-600 bg-white'
                : 'border-transparent text-slate-600'
            }`}
          >
            <Sliders className="w-4 h-4" />
            <span>3. 規格 ({gridConfig.rows}×{gridConfig.cols})</span>
          </button>
        </div>
      </header>

      {/* Toast Notification Banner */}
      {toastMsg && (
        <div className="no-print fixed bottom-5 left-1/2 -translate-x-1/2 z-50 bg-slate-900/95 text-white px-4 py-2.5 rounded-full shadow-lg text-xs sm:text-sm font-medium flex items-center gap-2 animate-fade-in">
          <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
          <span>{toastMsg}</span>
        </div>
      )}

      {/* ==========================================
          MAIN WORKSPACE (DESKTOP SPLIT / MOBILE TABS)
         ========================================== */}
      <main className="no-print flex-1 max-w-7xl w-full mx-auto px-3 sm:px-6 py-4 sm:py-6 grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        {/* LEFT COLUMN: LABEL DESIGN EDITOR & GRID SETTINGS (5 cols on Desktop) */}
        <div
          className={`lg:col-span-5 space-y-5 ${
            mobileTab === 'sheet' ? 'hidden lg:block' : 'block'
          }`}
        >
          {/* PANEL A: RICH LABEL EDITOR */}
          <div
            className={`bg-white rounded-2xl border border-slate-200/90 shadow-xs overflow-hidden ${
              mobileTab === 'grid' ? 'hidden lg:block' : 'block'
            }`}
          >
            {/* Editor Header */}
            <div className="px-4 py-3.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Edit3 className="w-4 h-4 text-indigo-600" />
                <h2 className="font-bold text-slate-800 text-sm">
                  標籤內容與字型設計 (Label Editor)
                </h2>
              </div>
              <span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-800">
                正編輯 {selectedSlots.length} 格
              </span>
            </div>

            <div className="p-4 space-y-4">
              {/* REAL-TIME SINGLE LABEL WYSIWYG PREVIEW */}
              <div>
                <div className="flex items-center justify-between text-xs text-slate-500 mb-1.5">
                  <span className="font-medium flex items-center gap-1">
                    <Eye className="w-3.5 h-3.5 text-indigo-500" />
                    單張標籤即時預覽 ({labelDimensions.width}mm × {labelDimensions.height}mm)
                  </span>
                  <span>比例實況模擬</span>
                </div>

                {/* Scaled Single Label Preview Box */}
                <div className="w-full bg-slate-100 rounded-xl p-4 flex items-center justify-center border border-slate-200/80 shadow-inner">
                  <div
                    style={{
                      width: '100%',
                      maxWidth: '330px',
                      aspectRatio: `${labelDimensions.width} / ${labelDimensions.height}`
                    }}
                    className="bg-white rounded-md shadow-md border border-slate-300 overflow-hidden relative transition-all"
                  >
                    {renderLabelContent(activeDesign, 3.8, false)}
                  </div>
                </div>
              </div>

              {/* Quick Templates Bar */}
              <div>
                <label className="block text-xs font-semibold text-slate-500 mb-1.5">
                  快速範本 (Quick Templates):
                </label>
                <div className="flex flex-wrap gap-1.5">
                  {QUICK_TEMPLATES.map((tpl, idx) => (
                    <button
                      key={idx}
                      onClick={() => {
                        updateActiveDesignAndSync(cloneDesign(tpl.design));
                        showToast(`已載入範本：${tpl.name}`);
                      }}
                      className="text-xs px-2.5 py-1.5 rounded-lg bg-slate-100 hover:bg-indigo-50 hover:text-indigo-700 text-slate-700 font-medium transition flex items-center gap-1 border border-slate-200/80"
                    >
                      <Sparkles className="w-3 h-3 text-indigo-500" />
                      {tpl.name}
                    </button>
                  ))}
                </div>
              </div>

              {/* TEXT BLOCKS LIST */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <label className="text-xs font-semibold text-slate-700">
                    文字段落與獨立字型設定 ({activeDesign.blocks.length})
                  </label>
                  <button
                    onClick={addTextBlock}
                    className="text-xs font-semibold text-indigo-600 hover:text-indigo-800 flex items-center gap-1 px-2 py-1 rounded-md hover:bg-indigo-50 transition"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    新增文字區塊
                  </button>
                </div>

                {activeDesign.blocks.map((block, bIdx) => (
                  <div
                    key={block.id}
                    className="p-3 rounded-xl bg-slate-50 border border-slate-200 space-y-2.5"
                  >
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-semibold text-slate-600">
                        段落 #{bIdx + 1}
                      </span>
                      {activeDesign.blocks.length > 1 && (
                        <button
                          onClick={() => removeTextBlock(block.id)}
                          className="text-xs text-rose-600 hover:text-rose-700 flex items-center gap-1"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                          移除
                        </button>
                      )}
                    </div>

                    {/* Multi-line Textarea */}
                    <textarea
                      rows={2}
                      value={block.text}
                      onChange={(e) => handleBlockChange(block.id, 'text', e.target.value)}
                      placeholder="輸入繁體中文或英文內容 (支援多行 Enter 換行)..."
                      className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 select-text"
                      style={{ fontFamily: getFontFamilyCSS(block.fontId) }}
                    />

                    {/* Font Family Selector */}
                    <div className="grid grid-cols-1 sm:grid-cols-12 gap-2 items-center">
                      <div className="sm:col-span-7">
                        <select
                          value={block.fontId}
                          onChange={(e) => handleBlockChange(block.id, 'fontId', e.target.value)}
                          className="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                        >
                          {FONT_OPTIONS.map((f) => (
                            <option key={f.id} value={f.id}>
                              {f.label}
                            </option>
                          ))}
                        </select>
                      </div>

                      {/* Font Size Input + Slider */}
                      <div className="sm:col-span-5 flex items-center gap-1.5">
                        <span className="text-xs text-slate-500 shrink-0">大小:</span>
                        <input
                          type="range"
                          min="6"
                          max="48"
                          step="0.5"
                          value={block.fontSize}
                          onChange={(e) =>
                            handleBlockChange(block.id, 'fontSize', parseFloat(e.target.value) || 10)
                          }
                          className="w-full accent-indigo-600"
                        />
                        <div className="flex items-center bg-white border border-slate-300 rounded-md px-1.5 py-0.5 shrink-0">
                          <input
                            type="number"
                            min="5"
                            max="72"
                            value={block.fontSize}
                            onChange={(e) =>
                              handleBlockChange(
                                block.id,
                                'fontSize',
                                Math.max(5, parseFloat(e.target.value) || 10)
                              )
                            }
                            className="w-10 text-xs font-semibold text-center focus:outline-none"
                          />
                          <span className="text-[10px] text-slate-400">pt</span>
                        </div>
                      </div>
                    </div>

                    {/* Formatting Toolbar: Bold, Italic, Underline, Align X, Color */}
                    <div className="flex flex-wrap items-center justify-between gap-2 pt-1 border-t border-slate-200/80">
                      {/* Style toggles */}
                      <div className="flex items-center gap-1">
                        <button
                          type="button"
                          onClick={() => handleBlockChange(block.id, 'bold', !block.bold)}
                          className={`p-1.5 rounded-md border text-xs transition ${
                            block.bold
                              ? 'bg-indigo-600 text-white border-indigo-600'
                              : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'
                          }`}
                          title="粗體 (Bold)"
                        >
                          <Bold className="w-3.5 h-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() => handleBlockChange(block.id, 'italic', !block.italic)}
                          className={`p-1.5 rounded-md border text-xs transition ${
                            block.italic
                              ? 'bg-indigo-600 text-white border-indigo-600'
                              : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'
                          }`}
                          title="斜體 (Italic)"
                        >
                          <Italic className="w-3.5 h-3.5" />
                        </button>
                        <button
                          type="button"
                          onClick={() =>
                            handleBlockChange(block.id, 'underline', !block.underline)
                          }
                          className={`p-1.5 rounded-md border text-xs transition ${
                            block.underline
                              ? 'bg-indigo-600 text-white border-indigo-600'
                              : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'
                          }`}
                          title="底線 (Underline)"
                        >
                          <Underline className="w-3.5 h-3.5" />
                        </button>
                      </div>

                      {/* Horizontal Alignment */}
                      <div className="flex items-center bg-white rounded-md border border-slate-300 p-0.5">
                        {[
                          { id: 'left', icon: AlignLeft, label: '靠左' },
                          { id: 'center', icon: AlignCenter, label: '置中' },
                          { id: 'right', icon: AlignRight, label: '靠右' }
                        ].map((al) => {
                          const Icon = al.icon;
                          return (
                            <button
                              key={al.id}
                              type="button"
                              onClick={() => handleBlockChange(block.id, 'alignX', al.id)}
                              className={`p-1.5 rounded-xs transition ${
                                block.alignX === al.id
                                  ? 'bg-indigo-100 text-indigo-700 font-semibold'
                                  : 'text-slate-600 hover:bg-slate-100'
                              }`}
                              title={al.label}
                            >
                              <Icon className="w-3.5 h-3.5" />
                            </button>
                          );
                        })}
                      </div>

                      {/* Font Color Picker */}
                      <label className="flex items-center gap-1.5 text-xs text-slate-600 cursor-pointer bg-white px-2 py-1 rounded-md border border-slate-300">
                        <span>字色</span>
                        <input
                          type="color"
                          value={block.color}
                          onChange={(e) => handleBlockChange(block.id, 'color', e.target.value)}
                          className="w-5 h-5 rounded-xs cursor-pointer border-0 p-0 bg-transparent"
                        />
                      </label>
                    </div>
                  </div>
                ))}
              </div>

              {/* GLOBAL LABEL APPEARANCE: Vertical Align, Background Color, Border */}
              <div className="pt-2 border-t border-slate-200 grid grid-cols-1 sm:grid-cols-2 gap-3">
                {/* Vertical Alignment */}
                <div>
                  <label className="block text-xs font-semibold text-slate-600 mb-1">
                    垂直對齊 (Vertical Align)
                  </label>
                  <div className="flex bg-slate-100 p-1 rounded-lg border border-slate-200">
                    {[
                      { id: 'top', label: '靠上', icon: ArrowUpToLine },
                      { id: 'middle', label: '垂直置中', icon: FoldVertical },
                      { id: 'bottom', label: '靠下', icon: ArrowDownToLine }
                    ].map((v) => {
                      const Icon = v.icon;
                      return (
                        <button
                          key={v.id}
                          type="button"
                          onClick={() =>
                            updateActiveDesignAndSync((prev) => ({ ...prev, alignY: v.id }))
                          }
                          className={`flex-1 py-1.5 text-xs font-medium rounded-md flex items-center justify-center gap-1 transition ${
                            activeDesign.alignY === v.id
                              ? 'bg-white text-indigo-700 shadow-2xs'
                              : 'text-slate-600 hover:text-slate-900'
                          }`}
                        >
                          <Icon className="w-3.5 h-3.5" />
                          <span>{v.label}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                {/* Background & Optional Inner Border */}
                <div className="flex flex-col justify-between">
                  <label className="block text-xs font-semibold text-slate-600 mb-1">
                    底色與裝飾外框 (Background & Frame)
                  </label>
                  <div className="flex items-center gap-2">
                    <label className="flex items-center gap-1.5 text-xs bg-slate-50 border border-slate-300 rounded-lg px-2.5 py-1.5 cursor-pointer">
                      <span>底色</span>
                      <input
                        type="color"
                        value={activeDesign.bgColor || '#ffffff'}
                        onChange={(e) =>
                          updateActiveDesignAndSync((prev) => ({
                            ...prev,
                            bgColor: e.target.value
                          }))
                        }
                        className="w-5 h-5 border-0 p-0 bg-transparent cursor-pointer"
                      />
                    </label>

                    <button
                      type="button"
                      onClick={() =>
                        updateActiveDesignAndSync((prev) => ({
                          ...prev,
                          showBorder: !prev.showBorder
                        }))
                      }
                      className={`flex-1 py-1.5 px-2.5 rounded-lg border text-xs font-medium transition flex items-center justify-center gap-1.5 ${
                        activeDesign.showBorder
                          ? 'bg-indigo-50 border-indigo-400 text-indigo-700'
                          : 'bg-white border-slate-300 text-slate-600'
                      }`}
                    >
                      <Square className="w-3.5 h-3.5" />
                      <span>{activeDesign.showBorder ? '已啟用邊框' : '加上內邊框'}</span>
                    </button>
                  </div>
                </div>
              </div>

              {/* BATCH REPLICATION BUTTONS IN EDITOR */}
              <div className="pt-3 border-t border-slate-200 flex flex-wrap gap-2">
                <button
                  type="button"
                  onClick={fillAllAvailableSlots}
                  className="flex-1 py-2 px-3 rounded-xl bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-semibold text-xs flex items-center justify-center gap-1.5 border border-indigo-200 transition"
                >
                  <Layers className="w-4 h-4" />
                  <span>填滿整頁所有可用格 ({sheetStats.availableEmptyCount + sheetStats.printCount} 格)</span>
                </button>

                <button
                  type="button"
                  onClick={() => setShowSequenceModal(true)}
                  className="py-2 px-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs flex items-center justify-center gap-1.5 border border-slate-200 transition"
                  title="自動產生連號標籤 (#001, #002...)"
                >
                  <Hash className="w-4 h-4 text-indigo-600" />
                  <span>自動連號</span>
                </button>
              </div>
            </div>
          </div>

          {/* PANEL B: A4 GRID CONFIGURATION & CALIBRATION ENGINE */}
          <div
            className={`bg-white rounded-2xl border border-slate-200/90 shadow-xs overflow-hidden ${
              mobileTab === 'editor' ? 'hidden lg:block' : 'block'
            }`}
          >
            <div className="px-4 py-3.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Sliders className="w-4 h-4 text-indigo-600" />
                <h2 className="font-bold text-slate-800 text-sm">
                  A4 標籤紙網格規格與微調 (Sheet Setup)
                </h2>
              </div>
              <button
                onClick={() => setShowSavePresetModal(true)}
                className="text-xs font-semibold text-indigo-600 hover:text-indigo-800 flex items-center gap-1"
              >
                <Bookmark className="w-3.5 h-3.5" />
                儲存規格
              </button>
            </div>

            <div className="p-4 space-y-4">
              {/* Preset Selector Dropdown */}
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1">
                  快速選擇標籤紙規格 (預設 8×3 無邊距):
                </label>
                <select
                  value={gridConfig.id || 'custom'}
                  onChange={(e) => {
                    const allPresets = [...DEFAULT_GRID_PRESETS, ...customPresets];
                    const found = allPresets.find((p) => p.id === e.target.value);
                    if (found) {
                      setGridConfig(found);
                      setSelectedSlots([0]);
                      showToast(`已切換規格：${found.name}`);
                    }
                  }}
                  className="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-xs sm:text-sm font-medium text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <optgroup label="常用標準規格 (Standard A4 Presets)">
                    {DEFAULT_GRID_PRESETS.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </optgroup>
                  {customPresets.length > 0 && (
                    <optgroup label="我儲存的自訂規格 (Saved Custom Presets)">
                      {customPresets.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.name}
                        </option>
                      ))}
                    </optgroup>
                  )}
                </select>
              </div>

              {/* Rows, Columns, and Calculated Label Size */}
              <div className="grid grid-cols-3 gap-2.5 bg-slate-50 p-3 rounded-xl border border-slate-200">
                <div>
                  <label className="block text-[11px] font-semibold text-slate-500 mb-1">
                    橫列數 (Rows)
                  </label>
                  <input
                    type="number"
                    min="1"
                    max="25"
                    value={gridConfig.rows}
                    onChange={(e) =>
                      setGridConfig((prev) => ({
                        ...prev,
                        id: 'custom',
                        rows: Math.max(1, Math.min(25, parseInt(e.target.value, 10) || 1))
                      }))
                    }
                    className="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-sm font-bold text-slate-900"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-semibold text-slate-500 mb-1">
                    直欄數 (Columns)
                  </label>
                  <input
                    type="number"
                    min="1"
                    max="10"
                    value={gridConfig.cols}
                    onChange={(e) =>
                      setGridConfig((prev) => ({
                        ...prev,
                        id: 'custom',
                        cols: Math.max(1, Math.min(10, parseInt(e.target.value, 10) || 1))
                      }))
                    }
                    className="w-full rounded-lg border border-slate-300 bg-white px-2.5 py-1.5 text-sm font-bold text-slate-900"
                  />
                </div>
                <div className="flex flex-col justify-center pl-1">
                  <span className="text-[11px] font-semibold text-slate-500">單格計算尺寸</span>
                  <span className="text-xs sm:text-sm font-bold text-indigo-600 mt-0.5">
                    {labelDimensions.width} × {labelDimensions.height} mm
                  </span>
                  <span className="text-[10px] text-slate-400">共 {totalSlots} 格 / A4</span>
                </div>
              </div>

              {/* Margins & Gaps in millimeters */}
              <div>
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-xs font-semibold text-slate-700">
                    紙張邊距與間距 (單位: mm 毫米)
                  </span>
                  <button
                    type="button"
                    onClick={() =>
                      setGridConfig((prev) => ({
                        ...prev,
                        marginTop: 0,
                        marginBottom: 0,
                        marginLeft: 0,
                        marginRight: 0,
                        gapX: 0,
                        gapY: 0
                      }))
                    }
                    className="text-[11px] text-indigo-600 hover:underline font-medium"
                  >
                    全部設為 0mm (無邊距)
                  </button>
                </div>

                <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
                  {[
                    { key: 'marginTop', label: '上邊距 Top' },
                    { key: 'marginBottom', label: '下邊距 Bot' },
                    { key: 'marginLeft', label: '左邊距 Left' },
                    { key: 'marginRight', label: '右邊距 Right' },
                    { key: 'gapX', label: '水平間距 GapX' },
                    { key: 'gapY', label: '垂直間距 GapY' },
                    { key: 'padding', label: '內縮安全距 Pad' }
                  ].map((item) => (
                    <div key={item.key}>
                      <label className="block text-[10px] font-medium text-slate-500 truncate">
                        {item.label}
                      </label>
                      <input
                        type="number"
                        step="0.5"
                        min="0"
                        max="50"
                        value={gridConfig[item.key]}
                        onChange={(e) =>
                          setGridConfig((prev) => ({
                            ...prev,
                            id: 'custom',
                            [item.key]: Math.max(0, parseFloat(e.target.value) || 0)
                          }))
                        }
                        className="w-full rounded-lg border border-slate-300 bg-white px-2 py-1 text-xs font-semibold text-slate-800"
                      />
                    </div>
                  ))}
                </div>
              </div>

              {/* Printer Physical Offset Calibration */}
              <div className="pt-3 border-t border-slate-200">
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-xs font-semibold text-slate-700 flex items-center gap-1.5">
                    <Move className="w-3.5 h-3.5 text-indigo-600" />
                    印表機進紙偏移補償 (Print Calibration Offset)
                  </span>
                  {(gridConfig.offsetX !== 0 || gridConfig.offsetY !== 0) && (
                    <button
                      onClick={() =>
                        setGridConfig((prev) => ({ ...prev, offsetX: 0, offsetY: 0 }))
                      }
                      className="text-[11px] text-slate-500 hover:text-slate-800"
                    >
                      歸零
                    </button>
                  )}
                </div>
                <p className="text-[11px] text-slate-500 mb-2">
                  若印表機印出位置整體偏左或偏下，可在此微調 X / Y 毫米補償：
                </p>
                <div className="grid grid-cols-2 gap-3">
                  <div className="flex items-center justify-between bg-slate-50 px-2.5 py-1.5 rounded-lg border border-slate-200">
                    <span className="text-xs text-slate-600">水平偏移 X (mm):</span>
                    <input
                      type="number"
                      step="0.5"
                      min="-20"
                      max="20"
                      value={gridConfig.offsetX || 0}
                      onChange={(e) =>
                        setGridConfig((prev) => ({
                          ...prev,
                          offsetX: parseFloat(e.target.value) || 0
                        }))
                      }
                      className="w-16 rounded border border-slate-300 bg-white px-1.5 py-0.5 text-xs font-bold text-center"
                    />
                  </div>
                  <div className="flex items-center justify-between bg-slate-50 px-2.5 py-1.5 rounded-lg border border-slate-200">
                    <span className="text-xs text-slate-600">垂直偏移 Y (mm):</span>
                    <input
                      type="number"
                      step="0.5"
                      min="-20"
                      max="20"
                      value={gridConfig.offsetY || 0}
                      onChange={(e) =>
                        setGridConfig((prev) => ({
                          ...prev,
                          offsetY: parseFloat(e.target.value) || 0
                        }))
                      }
                      className="w-16 rounded border border-slate-300 bg-white px-1.5 py-0.5 text-xs font-bold text-center"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ==========================================
            RIGHT COLUMN: INTERACTIVE A4 SHEET VISUALIZER (7 cols on Desktop)
           ========================================== */}
        <div
          className={`lg:col-span-7 flex flex-col gap-4 ${
            mobileTab !== 'sheet' ? 'hidden lg:flex' : 'flex'
          }`}
        >
          {/* Sheet Control Bar */}
          <div className="bg-white rounded-2xl border border-slate-200/90 p-3.5 shadow-xs space-y-3">
            {/* Top Row: Interaction Mode Switcher */}
            <div className="flex flex-wrap items-center justify-between gap-2">
              <div className="flex items-center bg-slate-100 p-1 rounded-xl border border-slate-200">
                <button
                  type="button"
                  onClick={() => setSheetClickMode('select')}
                  className={`px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition ${
                    sheetClickMode === 'select'
                      ? 'bg-white text-indigo-700 shadow-2xs'
                      : 'text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <Edit3 className="w-3.5 h-3.5" />
                  <span>選取與編輯模式 (Select / Print)</span>
                </button>

                <button
                  type="button"
                  onClick={() => setSheetClickMode('used')}
                  className={`px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition ${
                    sheetClickMode === 'used'
                      ? 'bg-amber-500 text-white shadow-2xs'
                      : 'text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <Ban className="w-3.5 h-3.5" />
                  <span>標記「已撕除貼紙」模式</span>
                </button>
              </div>

              {/* Multi-Select Toggle for iPhone / Touch Devices */}
              {sheetClickMode === 'select' && (
                <button
                  type="button"
                  onClick={() => setMultiSelectToggle((prev) => !prev)}
                  className={`px-3 py-1.5 rounded-xl text-xs font-semibold border flex items-center gap-1.5 transition ${
                    multiSelectToggle
                      ? 'bg-indigo-600 text-white border-indigo-600'
                      : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'
                  }`}
                  title="開啟後在手機點選多個格子可同時選取，無須按住 Shift"
                >
                  <CheckSquare className="w-3.5 h-3.5" />
                  <span>多格連選: {multiSelectToggle ? '開啟中' : '關閉'}</span>
                </button>
              )}
            </div>

            {/* Second Row: Quick Batch Operations */}
            <div className="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-100 text-xs">
              <div className="flex flex-wrap items-center gap-1.5">
                <button
                  type="button"
                  onClick={handleCopyDesign}
                  className="px-2.5 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium flex items-center gap-1 transition"
                >
                  <Copy className="w-3.5 h-3.5" />
                  <span>複製</span>
                </button>
                <button
                  type="button"
                  onClick={handlePasteDesign}
                  disabled={!clipboardDesign}
                  className={`px-2.5 py-1.5 rounded-lg font-medium flex items-center gap-1 transition ${
                    clipboardDesign
                      ? 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700'
                      : 'bg-slate-50 text-slate-400 cursor-not-allowed'
                  }`}
                >
                  <Clipboard className="w-3.5 h-3.5" />
                  <span>貼上</span>
                </button>
                <button
                  type="button"
                  onClick={applyToSelectedSlots}
                  className="px-2.5 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium flex items-center gap-1 transition"
                >
                  <Sparkles className="w-3.5 h-3.5" />
                  <span>套用目前設計至所選格</span>
                </button>
                <button
                  type="button"
                  onClick={toggleUsedForSelected}
                  className="px-2.5 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium flex items-center gap-1 transition"
                >
                  <Ban className="w-3.5 h-3.5 text-slate-500" />
                  <span>切換已用/可用</span>
                </button>
              </div>

              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  onClick={selectAllAvailable}
                  className="px-2.5 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 font-medium"
                >
                  全選可用
                </button>
                <button
                  type="button"
                  onClick={clearSelectedSlotsContent}
                  className="px-2.5 py-1.5 rounded-lg text-rose-600 hover:bg-rose-50 font-medium"
                >
                  清除所選
                </button>
                <button
                  type="button"
                  onClick={resetWholeSheet}
                  className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100"
                  title="重設整張貼紙狀態"
                >
                  <RotateCcw className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Status Legend Bar */}
            <div className="flex flex-wrap items-center justify-between gap-2 bg-slate-50 px-3 py-2 rounded-xl text-[11px] text-slate-600">
              <div className="flex flex-wrap items-center gap-3">
                <span className="flex items-center gap-1.5">
                  <span className="w-3 h-3 rounded-xs bg-emerald-500 inline-block"></span>
                  待列印格: <strong>{sheetStats.printCount}</strong>
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-3 h-3 rounded-xs bg-white border border-slate-300 inline-block"></span>
                  空白可用: <strong>{sheetStats.availableEmptyCount}</strong>
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="w-3 h-3 rounded-xs bg-slate-300 inline-block"></span>
                  已撕除/跳過: <strong>{sheetStats.usedCount}</strong>
                </span>
              </div>
              <span className="text-slate-400 hidden sm:inline">
                {sheetClickMode === 'used'
                  ? '💡 點擊已經撕掉的貼紙格，列印時會自動留白不噴墨'
                  : '💡 點擊任一格即可指派列印位置或編輯'}
              </span>
            </div>
          </div>

          {/* INTERACTIVE A4 SHEET CANVAS CONTAINER */}
          <div className="bg-slate-200/75 rounded-2xl p-3 sm:p-6 flex flex-col items-center justify-center border border-slate-300/80 shadow-inner">
            {/* A4 Aspect Ratio Paper (210mm : 297mm) */}
            <div
              style={{
                width: '100%',
                maxWidth: '540px',
                aspectRatio: '210 / 297',
                paddingTop: `${(gridConfig.marginTop / A4_HEIGHT_MM) * 100}%`,
                paddingBottom: `${(gridConfig.marginBottom / A4_HEIGHT_MM) * 100}%`,
                paddingLeft: `${(gridConfig.marginLeft / A4_WIDTH_MM) * 100}%`,
                paddingRight: `${(gridConfig.marginRight / A4_WIDTH_MM) * 100}%`
              }}
              className="bg-white shadow-xl rounded-xs relative transition-all duration-200 border border-slate-300"
            >
              {/* The Grid inside A4 */}
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  display: 'grid',
                  gridTemplateRows: `repeat(${gridConfig.rows}, minmax(0, 1fr))`,
                  gridTemplateColumns: `repeat(${gridConfig.cols}, minmax(0, 1fr))`,
                  columnGap: `${(gridConfig.gapX / A4_WIDTH_MM) * 100}%`,
                  rowGap: `${(gridConfig.gapY / A4_HEIGHT_MM) * 100}%`
                }}
              >
                {Array.from({ length: totalSlots }).map((_, index) => {
                  const rowNum = Math.floor(index / gridConfig.cols) + 1;
                  const colNum = (index % gridConfig.cols) + 1;
                  const slot = slotsData[index];
                  const isUsed = Boolean(slot?.used);
                  const hasContent = Boolean(slot?.hasContent && !isUsed);
                  const isSelected = selectedSlots.includes(index);

                  return (
                    <div
                      key={index}
                      onClick={(e) => handleSlotClick(index, e)}
                      className={`relative group cursor-pointer transition-all overflow-hidden select-none ${
                        isSelected
                          ? 'ring-2 ring-indigo-600 z-10 shadow-sm'
                          : 'border border-dashed border-slate-300 hover:border-indigo-400'
                      } ${
                        isUsed
                          ? 'used-slot-hatch bg-slate-100/90'
                          : hasContent
                          ? 'bg-white'
                          : 'bg-slate-50/40 hover:bg-indigo-50/30'
                      }`}
                    >
                      {/* Coordinate Badge (Top-Left) */}
                      <div
                        className={`absolute top-0.5 left-1 z-20 flex items-center gap-1 px-1 py-0.2 rounded text-[9px] font-mono leading-tight pointer-events-none ${
                          isSelected
                            ? 'bg-indigo-600 text-white font-bold'
                            : isUsed
                            ? 'text-slate-400'
                            : hasContent
                            ? 'bg-emerald-600/90 text-white font-semibold'
                            : 'text-slate-400 group-hover:text-indigo-600'
                        }`}
                      >
                        <span>#{index + 1}</span>
                        <span className="hidden sm:inline opacity-75">
                          (R{rowNum}C{colNum})
                        </span>
                      </div>

                      {/* Slot Body Content */}
                      {isUsed ? (
                        <div className="w-full h-full flex flex-col items-center justify-center text-slate-400 pointer-events-none">
                          <Ban className="w-3.5 h-3.5 opacity-50" />
                          <span className="text-[9px] font-medium mt-0.5">已撕除 / 略過</span>
                        </div>
                      ) : hasContent ? (
                        <div className="w-full h-full pointer-events-none">
                          {renderLabelContent(slot.design, 1.85, false)}
                        </div>
                      ) : (
                        <div className="w-full h-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition pointer-events-none">
                          <span className="text-[10px] text-indigo-600 font-medium bg-indigo-50/90 px-1.5 py-0.5 rounded">
                            + 點擊放入標籤
                          </span>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Bottom Mobile Helper to jump to Editor */}
            <div className="mt-4 flex lg:hidden w-full max-w-md justify-between gap-2">
              <button
                onClick={() => setMobileTab('editor')}
                className="flex-1 py-2.5 px-4 rounded-xl bg-indigo-600 text-white font-semibold text-xs flex items-center justify-center gap-2 shadow-sm"
              >
                <Edit3 className="w-4 h-4" />
                <span>編輯所選標籤文字 ({selectedSlots.length} 格)</span>
              </button>
            </div>
          </div>
        </div>
      </main>

      {/* ==========================================
          DEDICATED @MEDIA PRINT A4 OUTPUT CONTAINER
          (100% True Millimeter Physical Dimensions)
         ========================================== */}
      <div
        className="print-only-sheet"
        style={{
          paddingTop: `${gridConfig.marginTop}mm`,
          paddingBottom: `${gridConfig.marginBottom}mm`,
          paddingLeft: `${gridConfig.marginLeft}mm`,
          paddingRight: `${gridConfig.marginRight}mm`
        }}
      >
        <div
          style={{
            width: '100%',
            height: '100%',
            display: 'grid',
            gridTemplateRows: `repeat(${gridConfig.rows}, ${labelDimensions.height}mm)`,
            gridTemplateColumns: `repeat(${gridConfig.cols}, ${labelDimensions.width}mm)`,
            columnGap: `${gridConfig.gapX}mm`,
            rowGap: `${gridConfig.gapY}mm`
          }}
        >
          {Array.from({ length: totalSlots }).map((_, index) => {
            const slot = slotsData[index];
            const isUsed = Boolean(slot?.used);
            const hasContent = Boolean(slot?.hasContent && !isUsed);

            return (
              <div
                key={index}
                style={{
                  width: `${labelDimensions.width}mm`,
                  height: `${labelDimensions.height}mm`,
                  boxSizing: 'border-box',
                  overflow: 'hidden',
                  border: printTestGrid ? '0.2mm dashed #94a3b8' : 'none',
                  position: 'relative'
                }}
              >
                {/* Render nothing if sticker is marked as Used/Peeled */}
                {!isUsed && hasContent && renderLabelContent(slot.design, 1, true)}

                {/* If printing test alignment sheet, print subtle coordinate numbers */}
                {printTestGrid && !hasContent && (
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '7pt',
                      color: '#cbd5e1',
                      fontFamily: 'monospace'
                    }}
                  >
                    #{index + 1} ({labelDimensions.width}×{labelDimensions.height}mm)
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* ==========================================
          MODALS (HELP GUIDE, SAVE PRESET, SERIAL GENERATOR)
         ========================================== */}

      {/* 1. Save Custom Preset Modal */}
      {showSavePresetModal && (
        <div className="no-print fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-5 shadow-xl border border-slate-200 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-bold text-slate-900 text-base">儲存自訂標籤紙規格</h3>
              <button
                onClick={() => setShowSavePresetModal(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-600"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <p className="text-xs text-slate-600">
              將目前的 {gridConfig.rows} 列 × {gridConfig.cols} 欄 ({labelDimensions.width}×
              {labelDimensions.height}mm) 儲存至瀏覽器，方便日後直接選用：
            </p>
            <input
              type="text"
              value={newPresetName}
              onChange={(e) => setNewPresetName(e.target.value)}
              placeholder="例如：文具店 8x3 白底貼紙"
              className="w-full rounded-xl border border-slate-300 px-3.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 select-text"
              autoFocus
            />
            <div className="flex justify-end gap-2 pt-2">
              <button
                onClick={() => setShowSavePresetModal(false)}
                className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100"
              >
                取消
              </button>
              <button
                onClick={handleSaveCustomPreset}
                className="px-4 py-2 rounded-xl text-xs font-semibold bg-indigo-600 text-white hover:bg-indigo-700 flex items-center gap-1.5"
              >
                <Save className="w-4 h-4" />
                儲存規格
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 2. Sequential Numbering Modal */}
      {showSequenceModal && (
        <div className="no-print fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-5 shadow-xl border border-slate-200 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-bold text-slate-900 text-base flex items-center gap-2">
                <Hash className="w-5 h-5 text-indigo-600" />
                自動連號標籤產生器 (Serial Numbering)
              </h3>
              <button
                onClick={() => setShowSequenceModal(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-600"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <p className="text-xs text-slate-600">
              在目前已選取的 <strong>{selectedSlots.length} 個標籤格</strong>
              中，保留目前文字設計並在末尾自動加上遞增序號：
            </p>
            <div className="grid grid-cols-3 gap-3">
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1">
                  前綴字元 (Prefix)
                </label>
                <input
                  type="text"
                  value={seqPrefix}
                  onChange={(e) => setSeqPrefix(e.target.value)}
                  className="w-full rounded-lg border border-slate-300 px-2.5 py-1.5 text-sm font-mono select-text"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1">
                  起始數字 (Start)
                </label>
                <input
                  type="number"
                  value={seqStart}
                  onChange={(e) => setSeqStart(parseInt(e.target.value, 10) || 1)}
                  className="w-full rounded-lg border border-slate-300 px-2.5 py-1.5 text-sm font-mono"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1">
                  位數補零 (Digits)
                </label>
                <input
                  type="number"
                  min="1"
                  max="6"
                  value={seqDigits}
                  onChange={(e) => setSeqDigits(parseInt(e.target.value, 10) || 3)}
                  className="w-full rounded-lg border border-slate-300 px-2.5 py-1.5 text-sm font-mono"
                />
              </div>
            </div>
            <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs text-slate-600">
              預覽範例：
              <span className="font-mono font-bold text-indigo-700 ml-1">
                {seqPrefix}
                {String(seqStart).padStart(seqDigits, '0')}
              </span>
              ,{' '}
              <span className="font-mono font-bold text-indigo-700">
                {seqPrefix}
                {String(Number(seqStart) + 1).padStart(seqDigits, '0')}
              </span>
              ...
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <button
                onClick={() => setShowSequenceModal(false)}
                className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100"
              >
                取消
              </button>
              <button
                onClick={handleApplySequence}
                className="px-4 py-2 rounded-xl text-xs font-semibold bg-indigo-600 text-white hover:bg-indigo-700"
              >
                產生連號至所選格
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 3. Print Calibration & OS Setup Help Modal */}
      {showHelpModal && (
        <div className="no-print fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full p-5 sm:p-6 shadow-xl border border-slate-200 space-y-4 max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between border-b border-slate-200 pb-3">
              <div className="flex items-center gap-2">
                <Printer className="w-5 h-5 text-indigo-600" />
                <h3 className="font-bold text-slate-900 text-base">
                  1:1 精準列印設定指南 (iPhone / Mac / Windows)
                </h3>
              </div>
              <button
                onClick={() => setShowHelpModal(false)}
                className="p-1 rounded-lg text-slate-400 hover:text-slate-600"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4 text-xs sm:text-sm text-slate-600 leading-relaxed">
              <div className="p-3.5 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-950">
                <p className="font-bold mb-1">💡 為什麼要確認「100% 實際大小」？</p>
                <p className="text-xs">
                  無邊距標籤紙 (如 8×3 滿版 A4) 需要 100% 物理尺寸輸出。如果瀏覽器自動勾選「符合頁面大小 (Fit to Page)」，格線會往內縮約 3%~5%。
                </p>
              </div>

              <div className="space-y-2">
                <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                  <Monitor className="w-4 h-4 text-indigo-600" />
                  Mac / Windows (Chrome, Edge, Safari) 設定：
                </h4>
                <ul className="list-disc pl-5 space-y-1 text-xs">
                  <li>
                    <strong>紙張尺寸 (Paper Size)：</strong> 選擇 <code className="bg-slate-100 px-1 rounded">A4 (210 × 297 mm)</code>
                  </li>
                  <li>
                    <strong>邊界 (Margins)：</strong> 選擇 <code className="bg-slate-100 px-1 rounded">無 (None)</code> 或 <code className="bg-slate-100 px-1 rounded">預設值</code>
                  </li>
                  <li>
                    <strong>縮放比例 (Scale)：</strong> 選擇 <code className="bg-slate-100 px-1 rounded">100%</code> 或 <code className="bg-slate-100 px-1 rounded">實際大小 (Actual Size)</code>（請勿選擇「符合可列印區域」）
                  </li>
                  <li>
                    <strong>頁首與頁尾 (Headers & Footers)：</strong> 取消勾選，避免瀏覽器在紙張上下印出網址與日期。
                  </li>
                </ul>
              </div>

              <div className="space-y-2">
                <h4 className="font-bold text-slate-900 flex items-center gap-1.5">
                  <Smartphone className="w-4 h-4 text-indigo-600" />
                  iPhone / iPad (iOS AirPrint) 設定：
                </h4>
                <ul className="list-disc pl-5 space-y-1 text-xs">
                  <li>點擊頂部「列印標籤」按鈕後，會直接呼叫 iOS 系統 AirPrint 選單。</li>
                  <li>選擇您的連線印表機，確認紙張大小為 <strong>A4</strong>，即可直接輸出。</li>
                  <li>若印表機本身有硬體無邊距列印 (Borderless Printing) 選項，建議開啟以獲得最完整的邊緣輸出。</li>
                </ul>
              </div>

              <div className="p-3 rounded-xl bg-slate-100 border border-slate-200 text-xs">
                <strong>🎯 省紙小撇步：</strong> 首次使用新規格貼紙時，可先放一張普通 A4 白紙，點擊頂部「<strong>列印對位測試格</strong>」，印出後與貼紙疊在一起對著燈光看，若有 1~2mm 偏差，可在左下角「印表機進紙偏移補償」輸入毫米數微調。
              </div>
            </div>

            <div className="flex justify-end pt-2 border-t border-slate-200">
              <button
                onClick={() => setShowHelpModal(false)}
                className="px-5 py-2 rounded-xl bg-indigo-600 text-white font-semibold text-xs hover:bg-indigo-700"
              >
                了解，開始排版
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}