zellyy-finance/src/components/BudgetTabContent.tsx

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import BudgetProgress from './BudgetProgress';
import CategoryBudgetInputs from './CategoryBudgetInputs';
import { toast } from '@/components/ui/use-toast';

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

interface CategoryBudget {
  식비: number;
  생활비: number;
  교통비: number;
}

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

const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
  data,
  formatCurrency,
  calculatePercentage,
  onSaveBudget
}) => {
  const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
  const [isOpen, setIsOpen] = useState(false);
  const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
  
  // 저장된 카테고리 예산을 불러옵니다
  const savedCategoryBudgets = localStorage.getItem('categoryBudgets');
  const initialCategoryBudgets = savedCategoryBudgets 
    ? JSON.parse(savedCategoryBudgets) 
    : {
        식비: Math.round(data.targetAmount * 0.4),
        생활비: Math.round(data.targetAmount * 0.4),
        교통비: Math.round(data.targetAmount * 0.2)
      };
  
  const [categoryBudgets, setCategoryBudgets] = useState<CategoryBudget>(initialCategoryBudgets);

  const handleInputChange = (value: string) => {
    // Remove all non-numeric characters
    const numericValue = value.replace(/[^0-9]/g, '');
    setBudgetInput(numericValue);
  };

  const handleCategoryInputChange = (value: string, category: keyof CategoryBudget) => {
    // Remove all non-numeric characters
    const numericValue = value.replace(/[^0-9]/g, '');
    setCategoryBudgets(prev => ({
      ...prev,
      [category]: parseInt(numericValue) || 0
    }));
  };

  const handleSave = () => {
    // Calculate total from all categories
    const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
    
    // 카테고리 예산도 함께 전달합니다
    onSaveBudget(totalAmount, categoryBudgets);
    
    toast({
      title: "예산 설정 완료",
      description: "카테고리별 예산이 성공적으로 저장되었습니다.",
    });
    
    setIsOpen(false);
  };

  // Format with commas for display
  const formatWithCommas = (amount: string) => {
    return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  return <div className="space-y-4">
      <BudgetProgress spentAmount={data.spentAmount} targetAmount={data.targetAmount} percentage={percentage} formatCurrency={formatCurrency} />
      
      <div className="flex justify-between items-center pt-2 border-t border-gray-100">
        <span className="text-gray-500 text-sm">남은 예산</span>
        <span className="font-semibold text-neuro-income">{formatCurrency(data.remainingAmount)}</span>
      </div>

      <div className="pt-2 border-t border-gray-100">
        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
          <CollapsibleTrigger className="flex items-center justify-between w-full px-1 text-left py-[10px]">
            <span className="text-sm font-medium text-gray-600">카테고리별 예산 설정하기</span>
            {isOpen ? <ChevronUp size={16} className="text-gray-500" /> : <ChevronDown size={16} className="text-gray-500" />}
          </CollapsibleTrigger>
          
          <CollapsibleContent className="pt-2 space-y-3">
            <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
            
            <div className="flex items-center justify-between pt-2 border-t border-gray-100">
              <div className="flex items-center gap-1">
                <Calculator size={16} className="text-gray-500" />
                <span className="text-sm font-medium">총 예산:</span>
              </div>
              <span className="font-semibold">{formatCurrency(Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0))}</span>
            </div>
            
            <div className="flex justify-end">
              <Button onClick={handleSave} size="sm" className="neuro-flat text-slate-50 bg-neuro-income hover:bg-neuro-income/90">
                <Check size={16} className="mr-1" />
                저장하기
              </Button>
            </div>
            
            <p className="text-xs text-gray-500 text-center py-[6px]">카테고리 예산을 설정하면 일일, 주간, 월간 예산이 자동으로 합산됩니다.</p>
          </CollapsibleContent>
        </Collapsible>
      </div>
    </div>;
};

export default BudgetTabContent;