
import React from 'react';
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogDescription
} from '@/components/ui/dialog';
import CategoryBudgetInputs from '../CategoryBudgetInputs';
import { Button } from '@/components/ui/button';
import { Check } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';

interface BudgetDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  categoryBudgets: Record<string, number>;
  handleCategoryInputChange: (value: string, category: string) => void;
  handleSaveCategoryBudgets: () => void;
  calculateTotalBudget: () => number;
  isSubmitting?: boolean;
}

const BudgetDialog: React.FC<BudgetDialogProps> = ({
  open,
  onOpenChange,
  categoryBudgets,
  handleCategoryInputChange,
  handleSaveCategoryBudgets,
  calculateTotalBudget,
  isSubmitting = false
}) => {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    e.stopPropagation();
    handleSaveCategoryBudgets();
  };

  const formattedTotal = formatCurrency(calculateTotalBudget());

  return (
    <Dialog 
      open={open} 
      onOpenChange={(newOpen) => {
        if (isSubmitting && !newOpen) return;
        onOpenChange(newOpen);
      }}
    >
      <DialogContent className="w-[90%] max-w-sm mx-auto">
        <DialogHeader>
          <DialogTitle>예산 설정</DialogTitle>
          <DialogDescription>
            카테고리별로 월간 예산을 설정하세요. 일일, 주간 예산은 자동으로 계산됩니다.
          </DialogDescription>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <CategoryBudgetInputs 
            categoryBudgets={categoryBudgets} 
            handleCategoryInputChange={handleCategoryInputChange} 
          />

          <div className="border-t border-gray-300 pt-3 mt-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-medium text-sm">월간 총 예산:</h3>
              <p className="font-bold text-neuro-income text-base">{formattedTotal}</p>
            </div>

            <div className="flex justify-end space-x-2">
              <Button 
                type="button" 
                variant="outline" 
                onClick={() => onOpenChange(false)}
                disabled={isSubmitting}
              >
                취소
              </Button>
              <Button 
                type="submit"
                className="bg-neuro-income hover:bg-neuro-income/90 text-white"
                disabled={isSubmitting}
              >
                <Check size={18} className="mr-1" />
                저장하기
              </Button>
            </div>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export default BudgetDialog;
