import { For } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';

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: '对齐' },
  { value: 'l', label: '← 左' },
  { value: 'c', label: '≡ 中' },
  { value: 'r', label: '→ 右' }
] as const;

/**
 * 图层编辑面板：图层可见性切换、位置编辑、复制代码
 */
export function LayerEditorPanel(props: LayerEditorPanelProps) {
  const { store } = props;

  // 根据当前激活的面获取图层配置
  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 });
  };

  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 });
  };

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

  const setEditingLayer = (layerProp: string) => {
    store.actions.setEditingLayer(
      store.state.editingLayer === layerProp ? null : layerProp
    );
  };

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

      <div class="space-y-2">
        <For each={currentLayerConfigs()}>
          {(layer) => (
            <div class="flex flex-row flex-wrap gap-1 p-2 bg-gray-50 rounded">
              <div class="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={layer.visible}
                  onChange={() => toggleLayerVisible(layer.prop)}
                  class="cursor-pointer"
                />
                <span class="text-sm flex-1">{layer.prop}</span>
              </div>
              {layer.visible && (
                <>
                  <button
                    onClick={() => setEditingLayer(layer.prop)}
                    class={`text-xs px-2 py-1 rounded cursor-pointer ${
                      store.state.editingLayer === layer.prop
                        ? 'bg-blue-500 text-white'
                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                    }`}
                  >
                    {store.state.editingLayer === layer.prop ? '✓ 框选' : '框选'}
                  </button>
                  <div class="flex items-center gap-2">
                    <select
                      value={layer.orientation || 'n'}
                      onChange={(e) => updateLayerOrientation(layer.prop, e.target.value as 'n' | 's' | 'e' | 'w')}
                      class="text-xs px-2 py-1 rounded border border-gray-300 bg-white cursor-pointer"
                    >
                      <For each={ORIENTATION_OPTIONS}>
                        {(opt) => (
                          <option value={opt.value}>{opt.label}</option>
                        )}
                      </For>
                    </select>
                    <select
                      value={layer.align || ''}
                      onChange={(e) => updateLayerAlign(layer.prop, e.target.value as 'l' | 'c' | 'r' | undefined || undefined)}
                      class="text-xs px-2 py-1 rounded border border-gray-300 bg-white cursor-pointer"
                    >
                      <For each={ALIGN_OPTIONS}>
                        {(opt) => (
                          <option value={opt.value}>{opt.label}</option>
                        )}
                      </For>
                    </select>
                  </div>
                  <div class="flex items-center gap-2">
                    <label class="text-xs text-gray-600">字体/mm</label>
                    <input
                      type="number"
                      value={layer.fontSize || ''}
                      placeholder="默认"
                      onChange={(e) => {
                        const value = e.target.value;
                        updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
                      }}
                      class="w-16 text-xs px-2 py-1 rounded border border-gray-300 bg-white"
                      step="0.1"
                      min="0.1"
                    />
                  </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>
  );
}