import React from 'react';
import { useBudgetTabContent } from '@/hooks/budget/useBudgetTabContent';
import BudgetHeader from './budget/BudgetHeader';
import BudgetProgressBar from './budget/BudgetProgressBar';
import BudgetStatusDisplay from './budget/BudgetStatusDisplay';
import BudgetInputButton from './budget/BudgetInputButton';
import BudgetInputForm from './budget/BudgetInputForm';

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

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

const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
  data,
  formatCurrency,
  calculatePercentage,
  onSaveBudget
}) => {
  const {
    categoryBudgets,
    showBudgetInput,
    toggleBudgetInput,
    handleCategoryInputChange,
    handleSaveCategoryBudgets,
    isBudgetSet,
    actualPercentage,
    percentage,
    isOverBudget,
    isLowBudget,
    progressBarColor,
    budgetStatusText,
    budgetAmount,
    budgetButtonText,
    calculateTotalBudget
  } = useBudgetTabContent({
    data,
    calculatePercentage,
    onSaveBudget
  });

  // 월간 예산 모드 로깅
  React.useEffect(() => {
    console.log('BudgetTabContent 렌더링: 월간 예산');
    console.log('현재 예산 데이터:', data);
  }, [data]);

  return (
    <div className="px-3 pb-3">
      {isBudgetSet ? (
        <>
          <BudgetHeader 
            spentAmount={data.spentAmount} 
            targetAmount={data.targetAmount}
            formatCurrency={formatCurrency}
          />

          <BudgetProgressBar 
            percentage={percentage} 
            progressBarColor={progressBarColor} 
          />

          <BudgetStatusDisplay 
            budgetStatusText={budgetStatusText}
            budgetAmount={budgetAmount}
            actualPercentage={actualPercentage}
            isOverBudget={isOverBudget}
          />
        </>
      ) : null}

      <BudgetInputButton 
        isBudgetSet={isBudgetSet}
        budgetButtonText={budgetButtonText}
        toggleBudgetInput={toggleBudgetInput}
      />

      <BudgetInputForm 
        showBudgetInput={showBudgetInput}
        categoryBudgets={categoryBudgets}
        handleCategoryInputChange={handleCategoryInputChange}
        handleSaveCategoryBudgets={handleSaveCategoryBudgets}
        calculateTotalBudget={calculateTotalBudget}
        formatCurrency={formatCurrency}
      />
    </div>
  );
};

export default BudgetTabContent;