ERP-node/frontend/stores/modalDataStore.ts

"use client";

import { create } from "zustand";
import { devtools } from "zustand/middleware";

/**
 * 모달 간 데이터 전달을 위한 전역 상태 관리
 * 
 * 용도:
 * 1. 첫 번째 모달에서 선택된 데이터를 저장
 * 2. 두 번째 모달에서 데이터를 읽어와서 사용
 * 3. 데이터 전달 완료 후 자동 정리
 */

export interface ModalDataItem {
  /**
   * 항목 고유 ID (선택된 행의 ID나 키)
   */
  id: string | number;
  
  /**
   * 원본 데이터 (테이블 행 데이터 전체)
   */
  originalData: Record<string, any>;
  
  /**
   * 추가 입력 데이터 (사용자가 입력한 추가 정보)
   */
  additionalData?: Record<string, any>;
}

interface ModalDataState {
  /**
   * 현재 전달할 데이터
   * key: 소스 컴포넌트 ID (예: "table-list-123")
   * value: 선택된 항목들의 배열
   */
  dataRegistry: Record<string, ModalDataItem[]>;
  
  /**
   * 데이터 설정 (첫 번째 모달에서 호출)
   * @param sourceId 데이터를 전달하는 컴포넌트 ID
   * @param items 전달할 항목들
   */
  setData: (sourceId: string, items: ModalDataItem[]) => void;
  
  /**
   * 데이터 조회 (두 번째 모달에서 호출)
   * @param sourceId 데이터를 전달한 컴포넌트 ID
   * @returns 전달된 항목들 (없으면 빈 배열)
   */
  getData: (sourceId: string) => ModalDataItem[];
  
  /**
   * 데이터 정리 (모달 닫힐 때 호출)
   * @param sourceId 정리할 데이터의 소스 ID
   */
  clearData: (sourceId: string) => void;
  
  /**
   * 모든 데이터 정리
   */
  clearAll: () => void;
  
  /**
   * 특정 항목의 추가 데이터 업데이트
   * @param sourceId 소스 컴포넌트 ID
   * @param itemId 항목 ID
   * @param additionalData 추가 입력 데이터
   */
  updateItemData: (sourceId: string, itemId: string | number, additionalData: Record<string, any>) => void;
}

export const useModalDataStore = create<ModalDataState>()(
  devtools(
    (set, get) => ({
      dataRegistry: {},
      
      setData: (sourceId, items) => {
        console.log("📦 [ModalDataStore] 데이터 저장:", { sourceId, itemCount: items.length, items });
        set((state) => ({
          dataRegistry: {
            ...state.dataRegistry,
            [sourceId]: items,
          },
        }));
      },
      
      getData: (sourceId) => {
        const items = get().dataRegistry[sourceId] || [];
        console.log("📭 [ModalDataStore] 데이터 조회:", { sourceId, itemCount: items.length });
        return items;
      },
      
      clearData: (sourceId) => {
        console.log("🗑️ [ModalDataStore] 데이터 정리:", { sourceId });
        set((state) => {
          const { [sourceId]: _, ...rest } = state.dataRegistry;
          return { dataRegistry: rest };
        });
      },
      
      clearAll: () => {
        console.log("🗑️ [ModalDataStore] 모든 데이터 정리");
        set({ dataRegistry: {} });
      },
      
      updateItemData: (sourceId, itemId, additionalData) => {
        set((state) => {
          const items = state.dataRegistry[sourceId] || [];
          const updatedItems = items.map((item) =>
            item.id === itemId
              ? { ...item, additionalData: { ...item.additionalData, ...additionalData } }
              : item
          );
          
          console.log("✏️ [ModalDataStore] 항목 데이터 업데이트:", { sourceId, itemId, additionalData });
          
          return {
            dataRegistry: {
              ...state.dataRegistry,
              [sourceId]: updatedItems,
            },
          };
        });
      },
    }),
    { name: "ModalDataStore" }
  )
);

/**
 * 모달 데이터 조회 Hook
 * 
 * @example
 * const items = useModalData("table-list-123");
 */
export const useModalData = (sourceId: string) => {
  return useModalDataStore((state) => state.getData(sourceId));
};

/**
 * 모달 데이터 설정 Hook
 * 
 * @example
 * const setModalData = useSetModalData();
 * setModalData("table-list-123", selectedItems);
 */
export const useSetModalData = () => {
  return useModalDataStore((state) => state.setData);
};

/**
 * 모달 데이터 정리 Hook
 * 
 * @example
 * const clearModalData = useClearModalData();
 * clearModalData("table-list-123");
 */
export const useClearModalData = () => {
  return useModalDataStore((state) => state.clearData);
};