ttrpg-tools/src/components/stores/deckStore.ts

import { createStore } from 'solid-js/store';
import { calculateDimensions } from '../utils/dimensions';
import type { CardData, LayerConfig, Dimensions } from '../types';

export interface DeckState {
  // 基本属性
  size: string;
  grid: string;
  bleed: string;
  padding: string;
  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;

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

export interface DeckActions {
  // 基本属性设置
  setSize: (size: string) => void;
  setGrid: (grid: string) => void;
  setBleed: (bleed: string) => void;
  setPadding: (padding: string) => 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;

  // 初始化和数据加载
  loadCards: (cards: CardData[]) => void;
  setError: (error: string | null) => void;

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

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

/**
 * 创建 deck store
 */
export function createDeckStore(): DeckStore {
  const [state, setState] = createStore<DeckState>({
    size: '54x86',
    grid: '5x8',
    bleed: '1',
    padding: '2',
    fixed: false,
    src: '',
    dimensions: null,
    cards: [],
    activeTab: 0,
    layerConfigs: [],
    isEditing: false,
    editingLayer: null,
    isSelecting: false,
    selectStart: null,
    selectEnd: null,
    error: null
  });

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

  const setSize = (size: string) => {
    setState({ size });
    updateDimensions();
  };
  const setGrid = (grid: string) => {
    setState({ grid });
    updateDimensions();
  };
  const setBleed = (bleed: string) => {
    setState({ bleed });
    updateDimensions();
  };
  const setPadding = (padding: string) => {
    setState({ padding });
    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 });
  };

  // 加载卡牌数据并初始化 dimensions 和 layerConfigs
  const loadCards = (cards: CardData[]) => {
    if (cards.length === 0) {
      setState({ error: 'CSV 文件为空或格式不正确' });
      return;
    }
    setState({ cards, activeTab: 0, error: null });
    updateDimensions();
  };

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

  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.size}" grid="${state.grid}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
  };

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

  const actions: DeckActions = {
    setSize,
    setGrid,
    setBleed,
    setPadding,
    setCards,
    setActiveTab,
    updateCardData,
    setLayerConfigs,
    updateLayerConfig,
    toggleLayerVisible,
    setIsEditing,
    setEditingLayer,
    updateLayerPosition,
    setIsSelecting,
    setSelectStart,
    setSelectEnd,
    cancelSelection,
    loadCards,
    setError,
    generateCode,
    copyCode
  };

  return { state, actions };
}