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

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

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

export interface DeckState {
  // 基本属性
  sizeW: number;
  sizeH: number;
  gridW: number;
  gridH: number;
  bleed: number;
  padding: number;
  cornerRadius: number;
  shape: CardShape;
  fixed: boolean;
  src: string;
  rawSrc: string; // 原始 CSV 路径（用于生成代码时保持相对路径）

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

  // 卡牌数据
  cards: CSV<CardData>;
  activeTab: number;

  // 图层配置
  frontLayerConfigs: LayerConfig[];
  backLayerConfigs: LayerConfig[];

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

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

  // 加载状态
  isLoading: boolean;

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

  // 导出状态
  isExporting: boolean;
  exportProgress: number; // 0-100
  exportError: string | null;

  // 打印设置
  printOrientation: 'portrait' | 'landscape';
  printFrontOddPageOffsetX: number;
  printFrontOddPageOffsetY: number;
  printDoubleSided: boolean;
}

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

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

  // 图层操作 - 正面
  setFrontLayerConfigs: (configs: LayerConfig[]) => void;
  updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleFrontLayerVisible: (prop: string) => void;

  // 图层操作 - 背面
  setBackLayerConfigs: (configs: LayerConfig[]) => void;
  updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleBackLayerVisible: (prop: string) => void;

  // 编辑状态
  setIsEditing: (editing: boolean) => void;
  setEditingLayer: (layer: string | null) => void;
  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
  setActiveSide: (side: CardSide) => 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, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
  setError: (error: string | null) => void;
  clearError: () => void;

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

  // 导出操作
  setExporting: (exporting: boolean) => void;
  exportDeck: () => void;
  setExportProgress: (progress: number) => void;
  setExportError: (error: string | null) => void;
  clearExportError: () => void;

  // 打印设置
  setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
  setPrintFrontOddPageOffsetX: (offset: number) => void;
  setPrintFrontOddPageOffsetY: (offset: number) => void;
  setPrintDoubleSided: (doubleSided: boolean) => void;
}

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

/**
 * 创建 deck store
 */
export function createDeckStore(
  initialSrc: 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,
    cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
    shape: 'rectangle',
    fixed: false,
    src: initialSrc,
    rawSrc: initialSrc,
    dimensions: null,
    cards: [] as any,
    activeTab: 0,
    frontLayerConfigs: [],
    backLayerConfigs: [],
    isEditing: false,
    editingLayer: null,
    activeSide: 'front',
    isSelecting: false,
    selectStart: null,
    selectEnd: null,
    isLoading: false,
    error: null,
    isExporting: false,
    exportProgress: 0,
    exportError: null,
    printOrientation: 'portrait',
    printFrontOddPageOffsetX: 0,
    printFrontOddPageOffsetY: 0,
    printDoubleSided: false
  });

  // 更新尺寸并重新计算 dimensions
  const updateDimensions = () => {
    const dims = calculateDimensions({
      sizeW: state.sizeW,
      sizeH: state.sizeH,
      gridW: state.gridW,
      gridH: state.gridH,
      bleed: state.bleed,
      padding: state.padding
    });
    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: number) => {
    setState({ bleed });
    updateDimensions();
  };
  const setPadding = (padding: number) => {
    setState({ padding });
    updateDimensions();
  };
  const setCornerRadius = (cornerRadius: number) => {
    setState({ cornerRadius });
  };
  const setShape = (shape: CardShape) => {
    setState({ shape });
  };

  const setCards = (cards: CSV<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 setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
  const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
    setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
  };
  const toggleFrontLayerVisible = (prop: string) => {
    setState('frontLayerConfigs', (prev) => prev.map((config) =>
      config.prop === prop ? { ...config, visible: !config.visible } : config
    ));
  };

  // 背面图层操作
  const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
  const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
    setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
  };
  const toggleBackLayerVisible = (prop: string) => {
    setState('backLayerConfigs', (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 setActiveSide = (side: CardSide) => setState({ activeSide: side });
  
  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
    const layer = state.editingLayer;
    if (!layer) return;
    const currentSide = state.activeSide;
    const configs = currentSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
    const setter = currentSide === 'front' ? setFrontLayerConfigs : setBackLayerConfigs;
    setter(configs.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, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
    if (!path) {
      setState({ error: '未指定 CSV 文件路径' });
      return;
    }

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

    try {
      const data = await loadCSV(path);

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

      setState({
        cards: data,
        activeTab: 0,
        frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
        backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
        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 = (backLayersStr?: string) => {
    const frontLayersStr = formatLayers(state.frontLayerConfigs);
    const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
    const parts = [
      `:md-deck[${state.rawSrc || state.src}]`,
      `{size="${state.sizeW}x${state.sizeH}" `,
      `grid="${state.gridW}x${state.gridH}" `
    ];

    // 仅在非默认值时添加 bleed 和 padding
    if (state.bleed !== DECK_DEFAULTS.BLEED) {
      parts.push(`bleed="${state.bleed}" `);
    }
    if (state.padding !== DECK_DEFAULTS.PADDING) {
      parts.push(`padding="${state.padding}" `);
    }
    if (state.shape !== 'rectangle') {
      parts.push(`shape="${state.shape}" `);
    }

    parts.push(`layers="${frontLayersStr}" `);
    if (backLayersString) {
      parts.push(`back-layers="${backLayersString}" `);
    }
    parts.push('}');
    return parts.join('');
  };

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

  const setExporting = (exporting: boolean) => setState({ isExporting: exporting });

  const exportDeck = () => {
    setState({ isExporting: true, exportProgress: 0, exportError: null });
  };

  const setExportProgress = (progress: number) => setState({ exportProgress: progress });

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

  const clearExportError = () => setState({ exportError: null });

  const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
    setState({ printOrientation: orientation });
  };

  const setPrintFrontOddPageOffsetX = (offset: number) => {
    setState({ printFrontOddPageOffsetX: offset });
  };

  const setPrintFrontOddPageOffsetY = (offset: number) => {
    setState({ printFrontOddPageOffsetY: offset });
  };

  const setPrintDoubleSided = (doubleSided: boolean) => {
    setState({ printDoubleSided: doubleSided });
  };

  const actions: DeckActions = {
    setSizeW,
    setSizeH,
    setGridW,
    setGridH,
    setBleed,
    setPadding,
    setCornerRadius,
    setShape,
    setCards,
    setActiveTab,
    updateCardData,
    setFrontLayerConfigs,
    updateFrontLayerConfig,
    toggleFrontLayerVisible,
    setBackLayerConfigs,
    updateBackLayerConfig,
    toggleBackLayerVisible,
    setIsEditing,
    setEditingLayer,
    updateLayerPosition,
    setActiveSide,
    setIsSelecting,
    setSelectStart,
    setSelectEnd,
    cancelSelection,
    loadCardsFromPath,
    setError,
    clearError,
    generateCode,
    copyCode,
    setExporting,
    exportDeck,
    setExportProgress,
    setExportError,
    clearExportError,
    setPrintOrientation,
    setPrintFrontOddPageOffsetX,
    setPrintFrontOddPageOffsetY,
    setPrintDoubleSided
  };

  return { state, actions };
}