zellyy-finance/src/hooks/budget/useBudgetTabContent.ts

import { useState, useEffect } from 'react';
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';

interface BudgetData {
  targetAmount: number;
  spentAmount: number;
  remainingAmount: number;
}

interface UseBudgetTabContentProps {
  data: BudgetData;
  calculatePercentage: (spent: number, target: number) => number;
  onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
}

interface UseBudgetTabContentReturn {
  categoryBudgets: Record<string, number>;
  showBudgetInput: boolean;
  toggleBudgetInput: () => void;
  handleCategoryInputChange: (value: string, category: string) => void;
  handleSaveCategoryBudgets: () => void;
  isBudgetSet: boolean;
  actualPercentage: number;
  percentage: number;
  isOverBudget: boolean;
  isLowBudget: boolean;
  progressBarColor: string;
  budgetStatusText: string;
  budgetAmount: string;
  budgetButtonText: string;
  calculateTotalBudget: () => number;
}

export const useBudgetTabContent = ({
  data,
  calculatePercentage,
  onSaveBudget
}: UseBudgetTabContentProps): UseBudgetTabContentReturn => {
  const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
  const [showBudgetInput, setShowBudgetInput] = useState(false);
  const spentAmount = data.spentAmount;
  const targetAmount = data.targetAmount;

  // 로그 추가 - 받은 데이터 확인
  useEffect(() => {
    console.log(`BudgetTabContent 수신 데이터:`, data);
  }, [data]);

  // 전역 예산 데이터가 변경되었을 때 로컬 상태 갱신
  useEffect(() => {
    const handleBudgetDataUpdated = () => {
      console.log(`BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}`);
    };

    window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
    return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
  }, [showBudgetInput, targetAmount]);

  // 예산 설정 여부 확인 - 데이터 targetAmount가 실제로 0보다 큰지 확인
  const isBudgetSet = targetAmount > 0;

  // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
  const actualPercentage = targetAmount > 0 ? Math.round((spentAmount / targetAmount) * 100) : 0;
  const percentage = Math.min(actualPercentage, 100); // 대시보드 표시용으로는 100% 제한
  
  // 예산 초과 여부 계산
  const isOverBudget = spentAmount > targetAmount && targetAmount > 0;
  // 예산이 얼마 남지 않은 경우 (10% 미만)
  const isLowBudget = targetAmount > 0 && actualPercentage >= 90 && actualPercentage < 100;

  // 프로그레스 바 색상 결정
  const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income';

  // 남은 예산 또는 초과 예산 텍스트 및 금액
  const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
  const budgetAmount = isOverBudget ? 
    Math.abs(targetAmount - spentAmount).toLocaleString() : 
    Math.max(0, targetAmount - spentAmount).toLocaleString();
  
  const handleCategoryInputChange = (value: string, category: string) => {
    const numValue = parseInt(value.replace(/,/g, ''), 10) || 0;
    setCategoryBudgets(prev => ({
      ...prev,
      [category]: numValue
    }));
  };

  // 카테고리별 예산 합계 계산
  const calculateTotalBudget = () => {
    // 모든 EXPENSE_CATEGORIES에 있는 카테고리 포함해서 합계 계산
    let total = 0;
    EXPENSE_CATEGORIES.forEach(category => {
      total += categoryBudgets[category] || 0;
    });
    console.log('카테고리 예산 총합:', total, categoryBudgets);
    return total;
  };

  // 카테고리 예산 저장
  const handleSaveCategoryBudgets = () => {
    // 카테고리 예산 기본값 설정 - 모든 카테고리 포함
    const updatedCategoryBudgets: Record<string, number> = {};
    EXPENSE_CATEGORIES.forEach(category => {
      updatedCategoryBudgets[category] = categoryBudgets[category] || 0;
    });
    
    const totalBudget = calculateTotalBudget();
    console.log('카테고리 예산 저장 및 총 예산 설정:', totalBudget, updatedCategoryBudgets);
    
    // 총액이 0이 아닐 때만 저장 처리
    if (totalBudget > 0) {
      // 명시적으로 월간 예산으로 설정 - 항상 월간 예산만 저장
      onSaveBudget(totalBudget, updatedCategoryBudgets);
      setShowBudgetInput(false);
      
      // 이벤트 발생 추가 (데이터 저장 후 즉시 UI 업데이트를 위해)
      setTimeout(() => {
        console.log('예산 데이터 저장 후 이벤트 발생');
        window.dispatchEvent(new Event('budgetDataUpdated'));
      }, 200);
    } else {
      alert('예산을 입력해주세요.');
    }
  };

  // 기존 카테고리 예산 불러오기
  useEffect(() => {
    if (showBudgetInput) {
      // 로컬 스토리지에서 카테고리 예산 불러오기
      try {
        const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
        if (storedCategoryBudgets) {
          const parsedBudgets = JSON.parse(storedCategoryBudgets);
          console.log('저장된 카테고리 예산 불러옴:', parsedBudgets);
          setCategoryBudgets(parsedBudgets);
        }
      } catch (error) {
        console.error('카테고리 예산 불러오기 오류:', error);
      }
    }
  }, [showBudgetInput]);

  // 예산 버튼 클릭 핸들러 - 토글 기능 추가
  const toggleBudgetInput = () => {
    console.log('예산 입력 폼 토글. 현재 상태:', showBudgetInput, '예산 설정 여부:', isBudgetSet);
    setShowBudgetInput(prev => !prev);
  };

  // 예산 여부에 따른 텍스트 결정
  const budgetButtonText = isBudgetSet ? "예산 수정하기" : "예산 입력하기";

  // 화면에 표시할 내용 - 디버깅을 위한 로그 추가
  console.log(`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}, 표시될 화면:`, isBudgetSet ? "예산 진행 상황" : "예산 입력하기 버튼");

  return {
    categoryBudgets,
    showBudgetInput,
    toggleBudgetInput,
    handleCategoryInputChange,
    handleSaveCategoryBudgets,
    isBudgetSet,
    actualPercentage,
    percentage,
    isOverBudget,
    isLowBudget,
    progressBarColor,
    budgetStatusText,
    budgetAmount,
    budgetButtonText,
    calculateTotalBudget
  };
};