zellyy-finance/src/contexts/budget/hooks/useTransactionState.ts

import { useState, useEffect, useCallback } from 'react';
import { Transaction } from '../types';
import { 
  loadTransactionsFromStorage, 
  saveTransactionsToStorage, 
  clearAllTransactions 
} from '../storage';
import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용

// 트랜잭션 상태 관리 훅
export const useTransactionState = () => {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [lastDeletedId, setLastDeletedId] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  // 초기 트랜잭션 로드 및 이벤트 리스너 설정
  useEffect(() => {
    // 트랜잭션 로드 함수 - 비동기 처리로 변경
    const loadTransactions = async () => {
      try {
        console.log('트랜잭션 로드 시도 중...');
        
        // 비동기 작업을 마이크로태스크로 지연
        await new Promise<void>(resolve => queueMicrotask(() => resolve()));
        
        const storedTransactions = loadTransactionsFromStorage();
        console.log('트랜잭션 로드됨:', storedTransactions.length, '개');
        
        // 상태 업데이트를 마이크로태스크로 지연
        queueMicrotask(() => {
          setTransactions(storedTransactions);
        });
      } catch (error) {
        console.error('트랜잭션 로드 오류:', error);
      }
    };

    // 초기 로드 - 지연 시간 추가
    setTimeout(() => {
      loadTransactions();
    }, 100); // 지연된 초기 로드

    // 이벤트 리스너 추가 - 최소한으로 유지
    const handleTransactionUpdate = (e?: StorageEvent) => {
      if (!e || e.key === 'transactions' || e.key === null) {
        loadTransactions();
      }
    };
    
    // 필수 이벤트만 등록
    const transactionUpdateHandler = () => handleTransactionUpdate();
    window.addEventListener('transactionUpdated', transactionUpdateHandler);
    window.addEventListener('storage', handleTransactionUpdate);
    
    return () => {
      window.removeEventListener('transactionUpdated', transactionUpdateHandler);
      window.removeEventListener('storage', handleTransactionUpdate);
    };
  }, []);

  // 트랜잭션 추가 함수
  const addTransaction = useCallback((newTransaction: Transaction) => {
    console.log('새 트랜잭션 추가:', newTransaction);
    setTransactions(prev => {
      const updated = [newTransaction, ...prev];
      saveTransactionsToStorage(updated);
      return updated;
    });
  }, []);

  // 트랜잭션 업데이트 함수
  const updateTransaction = useCallback((updatedTransaction: Transaction) => {
    console.log('트랜잭션 업데이트:', updatedTransaction);
    setTransactions(prev => {
      const updated = prev.map(transaction => 
        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
      );
      saveTransactionsToStorage(updated);
      return updated;
    });
  }, []);

  // 트랜잭션 삭제 함수 - 성능 최적화 및 안정성 개선
  const deleteTransaction = useCallback((transactionId: string) => {
    // 이미 삭제 중이면 중복 삭제 방지
    if (isDeleting) {
      console.log('이미 삭제 작업이 진행 중입니다.');
      return;
    }
    
    // 중복 삭제 방지
    if (lastDeletedId === transactionId) {
      console.log('중복 삭제 요청 무시:', transactionId);
      return;
    }
    
    // 삭제 상태 설정 - 마이크로태스크로 지연
    queueMicrotask(() => {
      setIsDeleting(true);
      setLastDeletedId(transactionId);
      
      // 삭제 작업을 마이크로태스크로 진행하여 UI 차단 방지
      queueMicrotask(() => {
        try {
          setTransactions(prev => {
            // 삭제할 항목 필터링 - 성능 최적화
            const updated = prev.filter(transaction => transaction.id !== transactionId);
            
            // 항목이 실제로 삭제되었는지 확인
            if (updated.length === prev.length) {
              console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId);
              return prev; // 변경 없음
            }
            
            // 저장소 업데이트를 마이크로태스크로 진행
            queueMicrotask(() => {
              saveTransactionsToStorage(updated);
              
              // 토스트 메시지 표시
              toast({
                title: "지출이 삭제되었습니다",
                description: "지출 항목이 성공적으로 삭제되었습니다.",
              });
            });
            
            return updated;
          });
        } catch (error) {
          console.error('트랜잭션 삭제 중 오류 발생:', error);
          toast({
            title: "삭제 실패",
            description: "지출 항목 삭제 중 오류가 발생했습니다.",
            variant: "destructive"
          });
        } finally {
          // 삭제 상태 초기화 (500ms 후) - 시간 단축
          setTimeout(() => {
            setIsDeleting(false);
            setLastDeletedId(null);
          }, 500);
        }
      });
    });
  }, [lastDeletedId, isDeleting]);

  // 트랜잭션 초기화 함수
  const resetTransactions = useCallback(() => {
    console.log('모든 트랜잭션 초기화');
    clearAllTransactions();
    setTransactions([]);
  }, []);

  // 트랜잭션 개수가 변경될 때 로그 기록
  useEffect(() => {
    console.log('현재 트랜잭션 개수:', transactions.length);
  }, [transactions.length]);

  return {
    transactions,
    addTransaction,
    updateTransaction,
    deleteTransaction,
    resetTransactions
  };
};