zellyy-finance/src/components/BudgetTabContent.tsx

import React, { useState } 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 BudgetDialog from './budget/BudgetDialog';

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 [showBudgetDialog, setShowBudgetDialog] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const {
    categoryBudgets,
    handleCategoryInputChange,
    handleSaveCategoryBudgets,
    isBudgetSet,
    actualPercentage,
    percentage,
    isOverBudget,
    isLowBudget,
    progressBarColor,
    budgetStatusText,
    budgetAmount,
    budgetButtonText,
    calculateTotalBudget
  } = useBudgetTabContent({
    data,
    calculatePercentage,
    onSaveBudget
  });

  const handleOpenDialog = () => {
    setShowBudgetDialog(true);
  };
  
  const handleSaveBudget = () => {
    setIsSubmitting(true);
    try {
      handleSaveCategoryBudgets();
    } finally {
      // 성공 또는 실패 여부와 관계없이 제출 상태 해제 및 다이얼로그 닫기
      setTimeout(() => {
        setIsSubmitting(false);
        setShowBudgetDialog(false);
      }, 300);
    }
  };

  // 월간 예산 모드 로깅
  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={handleOpenDialog}
      />

      <BudgetDialog 
        open={showBudgetDialog}
        onOpenChange={setShowBudgetDialog}
        categoryBudgets={categoryBudgets}
        handleCategoryInputChange={handleCategoryInputChange}
        handleSaveCategoryBudgets={handleSaveBudget}
        calculateTotalBudget={calculateTotalBudget}
        isSubmitting={isSubmitting}
      />
    </div>
  );
};

export default BudgetTabContent;