ttrpg-tools/src/components/md-deck/hooks/deckStore.ts

import { createStore } from 'solid-js/store';
import { calculateDimensions } from './dimensions';
import { loadCSV } from '../../utils/csv-loader';
import { initLayerConfigs } from './layer-parser';
import type { CardData, LayerConfig, Dimensions } from '../types';

/**
 * 默认配置常量
 */
export const DECK_DEFAULTS = {
  SIZE_W: 54,
  SIZE_H: 86,
  GRID_W: 5,
  GRID_H: 8,
  BLEED: '1',
  PADDING: '2',
  FONT_SIZE: 3
} as const;

export interface DeckState {
  // 基本属性
  sizeW: number;
  sizeH: number;
  gridW: number;
  gridH: number;
  bleed: string;
  padding: string;
  fontSize: number;
  fixed: boolean;
  src: string;

  // 解析后的尺寸
  dimensions: Dimensions | null;

  // 卡牌数据
  cards: CardData[];
  activeTab: number;

  // 图层配置
  layerConfigs: LayerConfig[];

  // 编辑状态
  isEditing: boolean;
  editingLayer: string | null;

  // 框选状态
  isSelecting: boolean;
  selectStart: { x: number; y: number } | null;
  selectEnd: { x: number; y: number } | null;

  // 加载状态
  isLoading: boolean;

  // 错误状态
  error: string | null;
}

export interface DeckActions {
  // 基本属性设置
  setSizeW: (size: number) => void;
  setSizeH: (size: number) => void;
  setGridW: (grid: number) => void;
  setGridH: (grid: number) => void;
  setBleed: (bleed: string) => void;
  setPadding: (padding: string) => void;
  setFontSize: (size: number) => void;

  // 数据设置
  setCards: (cards: CardData[]) => void;
  setActiveTab: (index: number) => void;
  updateCardData: (index: number, key: string, value: string) => void;

  // 图层操作
  setLayerConfigs: (configs: LayerConfig[]) => void;
  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleLayerVisible: (prop: string) => void;

  // 编辑状态
  setIsEditing: (editing: boolean) => void;
  setEditingLayer: (layer: string | null) => void;
  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;

  // 框选操作
  setIsSelecting: (selecting: boolean) => void;
  setSelectStart: (pos: { x: number; y: number } | null) => void;
  setSelectEnd: (pos: { x: number; y: number } | null) => void;
  cancelSelection: () => void;

  // 数据加载
  loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
  setError: (error: string | null) => void;
  clearError: () => void;

  // 生成代码
  generateCode: () => string;
  copyCode: () => Promise<void>;
}

export interface DeckStore {
  state: DeckState;
  actions: DeckActions;
}

/**
 * 创建 deck store
 */
export function createDeckStore(
  initialSrc: string = '',
  initialLayers: string = ''
): DeckStore {
  const [state, setState] = createStore<DeckState>({
    sizeW: DECK_DEFAULTS.SIZE_W,
    sizeH: DECK_DEFAULTS.SIZE_H,
    gridW: DECK_DEFAULTS.GRID_W,
    gridH: DECK_DEFAULTS.GRID_H,
    bleed: DECK_DEFAULTS.BLEED,
    padding: DECK_DEFAULTS.PADDING,
    fontSize: DECK_DEFAULTS.FONT_SIZE,
    fixed: false,
    src: initialSrc,
    dimensions: null,
    cards: [],
    activeTab: 0,
    layerConfigs: [],
    isEditing: false,
    editingLayer: null,
    isSelecting: false,
    selectStart: null,
    selectEnd: null,
    isLoading: false,
    error: null
  });

  // 更新尺寸并重新计算 dimensions
  const updateDimensions = () => {
    const dims = calculateDimensions({
      sizeW: state.sizeW,
      sizeH: state.sizeH,
      gridW: state.gridW,
      gridH: state.gridH,
      bleed: state.bleed,
      padding: state.padding,
      fontSize: state.fontSize
    });
    setState({ dimensions: dims });
  };

  const setSizeW = (size: number) => {
    setState({ sizeW: size });
    updateDimensions();
  };
  const setSizeH = (size: number) => {
    setState({ sizeH: size });
    updateDimensions();
  };
  const setGridW = (grid: number) => {
    setState({ gridW: grid });
    updateDimensions();
  };
  const setGridH = (grid: number) => {
    setState({ gridH: grid });
    updateDimensions();
  };
  const setBleed = (bleed: string) => {
    setState({ bleed });
    updateDimensions();
  };
  const setPadding = (padding: string) => {
    setState({ padding });
    updateDimensions();
  };
  const setFontSize = (size: number) => {
    setState({ fontSize: size });
    updateDimensions();
  };

  const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
  const setActiveTab = (index: number) => setState({ activeTab: index });
  const updateCardData = (index: number, key: string, value: string) => {
    setState('cards', index, key, value);
  };

  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
  };
  const toggleLayerVisible = (prop: string) => {
    setState('layerConfigs', (prev) => prev.map((config) =>
      config.prop === prop ? { ...config, visible: !config.visible } : config
    ));
  };

  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
    const layer = state.editingLayer;
    if (!layer) return;
    setState('layerConfigs', (prev) => prev.map((config) =>
      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
    ));
    setState({ editingLayer: null });
  };

  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
  const cancelSelection = () => {
    setState({ isSelecting: false, selectStart: null, selectEnd: null });
  };

  // 加载卡牌数据（核心逻辑）
  const loadCardsFromPath = async (path: string, layersStr: string = '') => {
    if (!path) {
      setState({ error: '未指定 CSV 文件路径' });
      return;
    }

    setState({ isLoading: true, error: null, src: path });

    try {
      const data = await loadCSV(path);
      
      if (data.length === 0) {
        setState({ 
          error: 'CSV 文件为空或格式不正确',
          isLoading: false 
        });
        return;
      }

      setState({ 
        cards: data, 
        activeTab: 0,
        layerConfigs: initLayerConfigs(data, layersStr),
        isLoading: false 
      });
      updateDimensions();
    } catch (err) {
      setState({ 
        error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
        isLoading: false 
      });
    }
  };

  const setError = (error: string | null) => setState({ error });
  const clearError = () => setState({ error: null });

  const generateCode = () => {
    const layersStr = state.layerConfigs
      .filter(l => l.visible)
      .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
      .join(' ');
    return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`;
  };

  const copyCode = async () => {
    const code = generateCode();
    try {
      await navigator.clipboard.writeText(code);
      alert('已复制到剪贴板！');
    } catch (err) {
      console.error('复制失败:', err);
      alert('复制失败，请手动复制');
    }
  };

  const actions: DeckActions = {
    setSizeW,
    setSizeH,
    setGridW,
    setGridH,
    setBleed,
    setPadding,
    setFontSize,
    setCards,
    setActiveTab,
    updateCardData,
    setLayerConfigs,
    updateLayerConfig,
    toggleLayerVisible,
    setIsEditing,
    setEditingLayer,
    updateLayerPosition,
    setIsSelecting,
    setSelectStart,
    setSelectEnd,
    cancelSelection,
    loadCardsFromPath,
    setError,
    clearError,
    generateCode,
    copyCode
  };

  return { state, actions };
}