import React, { useEffect, useState } from 'react';
import BudgetTabContent from './BudgetTabContent';
import { BudgetPeriod, BudgetData } from '@/contexts/budget/types';

interface BudgetProgressCardProps {
  budgetData: BudgetData;
  selectedTab: string;
  setSelectedTab: (value: string) => void;
  formatCurrency: (amount: number) => string;
  calculatePercentage: (spent: number, target: number) => number;
  onSaveBudget: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
}

const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
  budgetData,
  selectedTab,
  setSelectedTab,
  formatCurrency,
  calculatePercentage,
  onSaveBudget
}) => {
  // 데이터 상태 추적 (불일치 감지를 위한 로컬 상태)
  const [localBudgetData, setLocalBudgetData] = useState(budgetData);

  // 컴포넌트 마운트 및 budgetData 변경 시 업데이트
  useEffect(() => {
    console.log("BudgetProgressCard 데이터 업데이트 - 예산 데이터:", budgetData);
    console.log("월간 예산:", budgetData.monthly.targetAmount);
    setLocalBudgetData(budgetData);
    
    // 지연 작업으로 이벤트 발생 (컴포넌트 마운트 후 데이터 갱신)
    const timeoutId = setTimeout(() => {
      window.dispatchEvent(new Event('budgetDataUpdated'));
    }, 300);
    
    return () => clearTimeout(timeoutId);
  }, [budgetData]);

  // 초기 탭 설정을 위한 효과
  useEffect(() => {
    if (!selectedTab || selectedTab !== "monthly") {
      console.log("초기 탭 설정: monthly");
      setSelectedTab('monthly');
    }
  }, []);

  // budgetDataUpdated 이벤트 감지
  useEffect(() => {
    const handleBudgetDataUpdated = () => {
      console.log("BudgetProgressCard: 예산 데이터 업데이트 이벤트 감지");
    };

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

  // 월간 예산 설정 여부 계산
  const isMonthlyBudgetSet = budgetData.monthly.targetAmount > 0;

  console.log(`BudgetProgressCard 상태: 월=${isMonthlyBudgetSet}`);

  return (
    <div className="neuro-card mb-6 overflow-hidden w-full">
      <div className="text-sm text-gray-600 mb-2 px-3 pt-3">지출 / 예산</div>
      
      <BudgetTabContent 
        data={budgetData.monthly} 
        formatCurrency={formatCurrency} 
        calculatePercentage={calculatePercentage} 
        onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)} 
      />
    </div>
  );
};

export default BudgetProgressCard;