import React, { useState, useEffect } from 'react';
import { Plus, Wallet } from 'lucide-react';
import BudgetInputCard from './BudgetInputCard';
import { Button } from '@/components/ui/button';
import CategoryBudgetInputs from './CategoryBudgetInputs';
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, setCategoryBudgets] = useState<Record<string, number>>({});
  const [showBudgetInput, setShowBudgetInput] = useState(false);
  const spentAmount = data.spentAmount;
  const targetAmount = data.targetAmount;
  // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
  const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0;
  const percentage = actualPercentage;
  const isFirstBudget = targetAmount === 0;

  // 예산 초과 여부 계산
  const isOverBudget = spentAmount > targetAmount;
  // 예산이 얼마 남지 않은 경우 (10% 미만)
  const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100;

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

  // 남은 예산 또는 초과 예산 텍스트 및 금액
  const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
  const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount));
  const handleCategoryInputChange = (value: string, category: string) => {
    const numValue = parseInt(value, 10) || 0;
    setCategoryBudgets(prev => ({
      ...prev,
      [category]: numValue
    }));
  };
  return <div>
      {targetAmount > 0 ? <>
          <div className="flex justify-between items-center mb-3">
            <div className="text-2xl font-bold">{formatCurrency(spentAmount)}</div>
            <div className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</div>
          </div>
          
          <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
            <div className={`h-full ${progressBarColor} transition-all duration-700 ease-out`} style={{
          width: `${Math.min(percentage, 100)}%`
        }} />
          </div>
          
          <div className="flex justify-between items-center">
            <div className={`text-sm font-medium ${isOverBudget ? 'text-red-500' : 'text-gray-500'}`}>
              {budgetStatusText}{budgetAmount}
            </div>
            <div className="text-sm font-medium text-gray-500">
              {percentage}%
            </div>
          </div>
          
          <div className="mt-6">
            <button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-base font-bold">
              <Plus size={16} className="mr-1" /> 예산 수정하기
            </button>
          </div>
        </> : <div className="py-4 text-center">
          <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
          <Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
            <Wallet className="mr-2" size={18} />
            지금 예산 설정하기
          </Button>
        </div>}
      
      {showBudgetInput && <div className="mt-4">
          <div className="neuro-card p-4">
            <div className="mb-4">
              <h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
              <div className="flex items-center space-x-2">
                <input type="text" className="w-full p-2 rounded neuro-pressed" placeholder="예산 금액 입력" value={targetAmount > 0 ? targetAmount : ''} onChange={e => {
              const value = e.target.value.replace(/[^0-9]/g, '');
              if (value) {
                const amount = parseInt(value, 10);
                onSaveBudget(amount, categoryBudgets);
              }
            }} />
                <Button onClick={() => setShowBudgetInput(false)} size="icon" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
                  <Wallet size={18} />
                </Button>
              </div>
            </div>
            
            <div>
              <h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
              <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
            </div>
          </div>
        </div>}
    </div>;
};
export default BudgetTabContent;