/* ============================================================
   圖層面板 — 全繁體中文介面
   ============================================================ */

function LayersPanel({ layers, activeLayerId, onLayersChange, onActiveLayerChange }) {
  const addLayer = () => {
    pushUndo();
    const id = uid();
    const first = layers[0];
    const w = first ? first.texture.canvas.width : 16;
    const h = first ? first.texture.canvas.height : 16;
    const newCanvas = createPixelCanvas(w, h);
    const newLayer = {
      id,
      name: `圖層 ${layers.length + 1}`,
      visible: true,
      locked: false,
      opacity: 1,
      alphaLock: false,
      texture: { canvas: newCanvas, name: `圖層 ${layers.length + 1}` },
    };
    onLayersChange([newLayer, ...layers]);
    onActiveLayerChange(id);
    showToast('已新增圖層', 'success');
  };

  const deleteLayer = (id) => {
    if (layers.length <= 1) {
      showToast('至少需要一個圖層', 'warning');
      return;
    }
    pushUndo();
    const newLayers = layers.filter(l => l.id !== id);
    onLayersChange(newLayers);
    if (activeLayerId === id) {
      onActiveLayerChange(newLayers[0].id);
    }
    showToast('已刪除圖層', 'info');
  };

  const duplicateLayer = (id) => {
    pushUndo();
    const idx = layers.findIndex(l => l.id === id);
    if (idx < 0) return;
    const src = layers[idx];
    const newId = uid();
    const newCanvas = copyCanvas(src.texture.canvas);
    const newLayer = {
      ...src,
      id: newId,
      name: src.name + ' 副本',
      texture: { canvas: newCanvas, name: src.name + ' 副本' },
    };
    const newLayers = [...layers];
    newLayers.splice(idx + 1, 0, newLayer);
    onLayersChange(newLayers);
    onActiveLayerChange(newId);
    showToast('已複製圖層', 'success');
  };

  const toggleVisible = (id) => {
    onLayersChange(layers.map(l => l.id === id ? { ...l, visible: !l.visible } : l));
  };

  const toggleLock = (id) => {
    onLayersChange(layers.map(l => l.id === id ? { ...l, locked: !l.locked } : l));
    showToast(layers.find(l => l.id === id)?.locked ? '已解鎖圖層' : '已鎖定圖層', 'info');
  };

  const toggleAlphaLock = (id) => {
    onLayersChange(layers.map(l => l.id === id ? { ...l, alphaLock: !l.alphaLock } : l));
    showToast(layers.find(l => l.id === id)?.alphaLock ? '已關閉 Alpha 鎖定' : '已開啟 Alpha 鎖定', 'info');
  };

  const moveLayer = (id, dir) => {
    const idx = layers.findIndex(l => l.id === id);
    if (idx < 0) return;
    const newIdx = idx + dir;
    if (newIdx < 0 || newIdx >= layers.length) return;
    pushUndo();
    const newLayers = [...layers];
    [newLayers[idx], newLayers[newIdx]] = [newLayers[newIdx], newLayers[idx]];
    onLayersChange(newLayers);
  };

  const renameLayer = (id, name) => {
    onLayersChange(layers.map(l => l.id === id ? { ...l, name, texture: { ...l.texture, name } } : l));
  };

  const setOpacity = (id, opacity) => {
    onLayersChange(layers.map(l => l.id === id ? { ...l, opacity } : l));
  };

  const activeLayer = layers.find(l => l.id === activeLayerId);

  return React.createElement('div', { className: 'panel-section', style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    React.createElement('div', { className: 'panel-section__header' },
      React.createElement('span', null, `圖層 (${layers.length})`),
    ),
    React.createElement('div', { className: 'panel-section__body', style: { display: 'flex', flexDirection: 'column', gap: '6px', overflowY: 'auto', flex: 1, minHeight: 0 } },
      React.createElement('div', { className: 'layer-toolbar' },
        React.createElement('button', { className: 'layer-tool-btn', onClick: addLayer, title: '新增圖層' },
          React.createElement(SvgIcon, { name: 'Plus', size: 12 }),
        ),
        React.createElement('button', {
          className: 'layer-tool-btn',
          onClick: () => activeLayerId && duplicateLayer(activeLayerId),
          title: '複製圖層'
        },
          React.createElement(SvgIcon, { name: 'Copy', size: 12 }),
        ),
        React.createElement('button', {
          className: 'layer-tool-btn',
          onClick: () => activeLayerId && deleteLayer(activeLayerId),
          disabled: layers.length <= 1,
          title: '刪除圖層'
        },
          React.createElement(SvgIcon, { name: 'Trash', size: 12 }),
        ),
        React.createElement('button', {
          className: 'layer-tool-btn',
          onClick: () => activeLayerId && moveLayer(activeLayerId, -1),
          title: '上移'
        },
          '▲',
        ),
        React.createElement('button', {
          className: 'layer-tool-btn',
          onClick: () => activeLayerId && moveLayer(activeLayerId, 1),
          title: '下移'
        },
          '▼',
        ),
      ),
      React.createElement('div', { className: 'layers-list' },
        [...layers].map((layer, i) =>
          React.createElement('div', {
            key: layer.id,
            className: 'layer-item' + (layer.id === activeLayerId ? ' active' : ''),
            onClick: () => onActiveLayerChange(layer.id),
          },
            React.createElement('button', {
              className: 'layer-icon-btn' + (layer.visible ? ' active' : ''),
              onClick: (e) => { e.stopPropagation(); toggleVisible(layer.id); },
              title: layer.visible ? '隱藏' : '顯示'
            },
              React.createElement(SvgIcon, { name: layer.visible ? 'Eye' : 'EyeOff', size: 12 }),
            ),
            React.createElement('div', { className: 'layer-item__thumb' },
              React.createElement(LayerThumb, { layer }),
            ),
            React.createElement('input', {
              className: 'layer-item__name',
              style: {
                background: 'transparent',
                border: 'none',
                outline: 'none',
                color: 'var(--text-primary)',
                fontSize: '12px',
                width: '100%',
              },
              value: layer.name,
              onChange: (e) => renameLayer(layer.id, e.target.value),
              onClick: (e) => e.stopPropagation(),
            }),
            React.createElement('button', {
              className: 'layer-icon-btn' + (layer.locked ? ' active' : ''),
              onClick: (e) => { e.stopPropagation(); toggleLock(layer.id); },
              title: layer.locked ? '解鎖' : '鎖定'
            },
              React.createElement(SvgIcon, { name: layer.locked ? 'Lock' : 'Unlock', size: 12 }),
            ),
          )
        ),
      ),
      // 作用中圖層內容
      activeLayer && React.createElement(React.Fragment, null,
        React.createElement('div', { style: { height: '1px', background: 'var(--border-subtle)', margin: '4px 0' } }),
        React.createElement('div', { className: 'props-form' },
          React.createElement('div', { className: 'slider-row' },
            React.createElement('span', { style: { fontSize: '10px', color: 'var(--text-tertiary)', width: '42px', flexShrink: 0 } }, '透明度'),
            React.createElement('input', {
              type: 'range', min: 0, max: 100,
              value: Math.round(activeLayer.opacity * 100),
              onChange: (e) => setOpacity(activeLayer.id, parseInt(e.target.value) / 100),
            }),
            React.createElement('span', { className: 'slider-value' }, `${Math.round(activeLayer.opacity * 100)}%`),
          ),
          React.createElement('div', { className: 'toggle-row' },
            React.createElement('span', { className: 'toggle-label' }, 'Alpha 鎖定'),
            React.createElement('div', {
              className: 'toggle-switch' + (activeLayer.alphaLock ? ' on' : ''),
              onClick: () => toggleAlphaLock(activeLayer.id),
            }),
          ),
        ),
      ),
    ),
  );
}

// 每個圖層的小縮圖
function LayerThumb({ layer }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const ctx = ref.current.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.clearRect(0, 0, ref.current.width, ref.current.height);
    ctx.drawImage(layer.texture.canvas, 0, 0, ref.current.width, ref.current.height);
  });
  return React.createElement('canvas', { ref, width: 28, height: 28 });
}

window.LayersPanel = LayersPanel;