import React from 'react';
import { Input } from '@/components/ui/input';
import { EXPENSE_CATEGORIES, categoryIcons } from '@/constants/categoryIcons';
import { useIsMobile } from '@/hooks/use-mobile';
import { markSingleCategoryBudgetAsModified } from '@/utils/sync/budget/modifiedBudgetsTracker';

interface CategoryBudgetInputsProps {
  categoryBudgets: Record<string, number>;
  handleCategoryInputChange: (value: string, category: string) => void;
}

const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
  categoryBudgets,
  handleCategoryInputChange
}) => {
  const isMobile = useIsMobile();

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

  // Handle input with comma formatting
  const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: string) => {
    // Remove all non-numeric characters before passing to parent handler
    const numericValue = e.target.value.replace(/[^0-9]/g, '');
    handleCategoryInputChange(numericValue, category);
    
    // 수정된 카테고리 예산 추적 시스템에 기록
    try {
      const amount = parseInt(numericValue, 10) || 0;
      markSingleCategoryBudgetAsModified(category, amount);
      console.log(`카테고리 '${category}' 예산을 ${amount}원으로 수정 완료, 타임스탬프: ${new Date().toISOString()}`);
    } catch (error) {
      console.error(`카테고리 '${category}' 예산 변경 추적 실패:`, error);
    }
    
    // 사용자에게 시각적 피드백 제공
    e.target.classList.add('border-green-500');
    setTimeout(() => {
      e.target.classList.remove('border-green-500');
    }, 300);
  };

  return (
    <div className="space-y-3 w-full">
      {EXPENSE_CATEGORIES.map(category => (
        <div key={category} className="flex items-center justify-between w-full p-2 rounded-lg">
          <div className="flex items-center space-x-2">
            <span className="text-neuro-income">{categoryIcons[category]}</span>
            <label className="text-sm font-medium text-gray-700">{category}</label>
          </div>
          <Input 
            value={formatWithCommas(categoryBudgets[category] || 0)} 
            onChange={(e) => handleInput(e, category)}
            placeholder="예산 입력"
            className={`transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
          />
        </div>
      ))}
    </div>
  );
};

export default CategoryBudgetInputs;