ttrpg-tools/src/components/md-deck/editor-panel/LayerEditorPanel.tsx

import { For, createSignal, onCleanup, onMount } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';
import alignLeftIcon from './icons/align-left.png';
import alignCenterIcon from './icons/align-center.png';
import alignRightIcon from './icons/align-right.png';

export interface LayerEditorPanelProps {
  store: DeckStore;
}

const ORIENTATION_OPTIONS = [
  { value: 'n', label: '↑ 北' },
  { value: 'e', label: '→ 东' },
  { value: 's', label: '↓ 南' },
  { value: 'w', label: '← 西' }
] as const;

const ALIGN_OPTIONS = [
  { value: '', label: '默认', icon: alignCenterIcon },
  { value: 'l', label: '左对齐', icon: alignLeftIcon },
  { value: 'c', label: '居中', icon: alignCenterIcon },
  { value: 'r', label: '右对齐', icon: alignRightIcon }
] as const;

const FONT_PRESETS = [3, 5, 8, 12] as const;

function OrientationIcon(value: string): string {
  switch (value) {
    case 'n': return '↑';
    case 'e': return '→';
    case 's': return '↓';
    case 'w': return '←';
    default: return '↑';
  }
}

function AlignIconSrc(value: string): string {
  switch (value) {
    case 'l': return alignLeftIcon;
    case 'r': return alignRightIcon;
    default: return alignCenterIcon;
  }
}

function LayerEditorPanel(props: LayerEditorPanelProps) {
  const { store } = props;
  const [openDropdown, setOpenDropdown] = createSignal<string | null>(null);
  let dropdownRef: HTMLDivElement | undefined;

  const currentLayerConfigs = () => 
    store.state.activeSide === 'front' 
      ? store.state.frontLayerConfigs 
      : store.state.backLayerConfigs;

  const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
    const updateFn = store.state.activeSide === 'front' 
      ? store.actions.updateFrontLayerConfig 
      : store.actions.updateBackLayerConfig;
    updateFn(layerProp, { orientation });
    setOpenDropdown(null);
  };

  const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
    const updateFn = store.state.activeSide === 'front' 
      ? store.actions.updateFrontLayerConfig 
      : store.actions.updateBackLayerConfig;
    updateFn(layerProp, { fontSize });
  };

  const updateLayerAlign = (layerProp: string, align?: 'l' | 'c' | 'r') => {
    const updateFn = store.state.activeSide === 'front' 
      ? store.actions.updateFrontLayerConfig 
      : store.actions.updateBackLayerConfig;
    updateFn(layerProp, { align });
    setOpenDropdown(null);
  };

  const toggleLayerVisible = (layerProp: string) => {
    const toggleFn = store.state.activeSide === 'front' 
      ? store.actions.toggleFrontLayerVisible 
      : store.actions.toggleBackLayerVisible;
    toggleFn(layerProp);
  };

  const selectLayer = (layerProp: string) => {
    store.actions.setSelectedLayer(
      store.state.selectedLayer === layerProp ? null : layerProp
    );
  };

  const handleDropdownClick = (e: MouseEvent) => {
    e.stopPropagation();
  };

  const handleClickOutside = (e: MouseEvent) => {
    if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
      setOpenDropdown(null);
    }
  };

  onMount(() => {
    document.addEventListener('click', handleClickOutside);
  });

  onCleanup(() => {
    document.removeEventListener('click', handleClickOutside);
  });

  const layerCount = () => currentLayerConfigs().length;

  return (
    <div class="w-64 flex-shrink-0">
      <h3 class="font-bold mb-2 mt-0">
        图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
      </h3>

      <div ref={dropdownRef}>
        <For each={currentLayerConfigs()}>
          {(layer, index) => (
            <div 
              class={`flex items-center gap-1 py-1.5 px-1 ${
                index() < layerCount() - 1 ? 'border-b border-gray-200' : ''
              } ${
                store.state.selectedLayer === layer.prop ? 'bg-blue-50' : ''
              }`}
            >
              <input
                type="checkbox"
                checked={layer.visible}
                onChange={() => toggleLayerVisible(layer.prop)}
                class="cursor-pointer"
              />
              <span 
                class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600"
                onClick={() => selectLayer(layer.prop)}
              >
                {layer.prop}
              </span>
              <div class="relative">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setOpenDropdown(openDropdown() === `orient-${layer.prop}` ? null : `orient-${layer.prop}`);
                  }}
                  class={`w-7 h-7 text-sm rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
                    !layer.visible ? 'invisible pointer-events-none' : ''
                  }`}
                  title="方向"
                >
                  {OrientationIcon(layer.orientation || 'n')}
                </button>
                {openDropdown() === `orient-${layer.prop}` && (
                  <div 
                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
                    onClick={handleDropdownClick}
                  >
                    <For each={ORIENTATION_OPTIONS}>
                      {(opt) => (
                        <button
                          onClick={() => updateLayerOrientation(layer.prop, opt.value)}
                          class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
                        >
                          {opt.label}
                        </button>
                      )}
                    </For>
                  </div>
                )}
              </div>

              <div class="relative">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setOpenDropdown(openDropdown() === `align-${layer.prop}` ? null : `align-${layer.prop}`);
                  }}
                  class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${
                    !layer.visible ? 'invisible pointer-events-none' : ''
                  }`}
                  title="对齐"
                >
                  <img src={AlignIconSrc(layer.align || '')} alt="align" class="w-5 h-5 not-prose" />
                </button>
                {openDropdown() === `align-${layer.prop}` && (
                  <div 
                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
                    onClick={handleDropdownClick}
                  >
                    <For each={ALIGN_OPTIONS}>
                      {(opt) => (
                        <button
                          onClick={() => updateLayerAlign(layer.prop, opt.value as 'l' | 'c' | 'r' | undefined || undefined)}
                          class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
                        >
                          <img src={opt.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
                        </button>
                      )}
                    </For>
                  </div>
                )}
              </div>

              <div class="relative">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setOpenDropdown(openDropdown() === `font-${layer.prop}` ? null : `font-${layer.prop}`);
                  }}
                  class={`w-7 h-7 text-xs rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
                    !layer.visible ? 'invisible pointer-events-none' : ''
                  }`}
                  title="字体大小 (mm)"
                >
                  {layer.fontSize ?? 3}
                </button>
                {openDropdown() === `font-${layer.prop}` && (
                  <div 
                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 p-2"
                    onClick={handleDropdownClick}
                  >
                    <div class="flex items-center gap-1 mb-2">
                      <input
                        type="number"
                        value={layer.fontSize ?? 3}
                        onChange={(e) => {
                          const value = e.target.value;
                          updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
                        }}
                        class="w-14 text-xs px-1.5 py-1 rounded border border-gray-300"
                        step="0.1"
                        min="0.1"
                      />
                      <span class="text-xs text-gray-500">mm</span>
                    </div>
                    <div class="flex gap-1">
                      <For each={FONT_PRESETS}>
                        {(preset) => (
                          <button
                            onClick={() => updateLayerFontSize(layer.prop, preset)}
                            class={`px-2 py-1 text-xs rounded cursor-pointer ${
                              (layer.fontSize ?? 3) === preset
                                ? 'bg-blue-500 text-white'
                                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                            }`}
                          >
                            {preset}
                          </button>
                        )}
                      </For>
                    </div>
                    <button
                      onClick={() => updateLayerFontSize(layer.prop, undefined)}
                      class="mt-2 w-full text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
                    >
                      重置
                    </button>
                  </div>
                )}
              </div>
            </div>
          )}
        </For>
      </div>

      <hr class="my-4" />

      <button
        onClick={() => store.actions.copyCode()}
        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer flex items-center gap-2 justify-center"
      >
        <span>📋</span>
        <span>复制代码</span>
      </button>
    </div>
  );
}

export { LayerEditorPanel };