import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts';
import { formatCurrency } from '@/utils/formatters';

interface MonthlyData {
  name: string;
  budget: number;
  expense: number;
}

interface MonthlyComparisonChartProps {
  monthlyData: MonthlyData[];
  isEmpty?: boolean;
}

const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({ 
  monthlyData,
  isEmpty = false
}) => {
  // Format for Y-axis (K format)
  const formatYAxisTick = (value: number) => {
    return `${Math.round(value / 1000)}K`;
  };

  // Format for tooltip (original currency format)
  const formatTooltip = (value: number | string) => {
    if (typeof value === 'number') {
      return formatCurrency(value);
    }
    return value;
  };

  // 데이터 확인 로깅
  console.log('MonthlyComparisonChart 데이터:', monthlyData);
  
  // EmptyGraphState 컴포넌트: 데이터가 없을 때 표시
  const EmptyGraphState = () => (
    <div className="flex flex-col items-center justify-center h-48 text-gray-400">
      <p>데이터가 없습니다</p>
      <p className="text-sm mt-2">지출 내역을 추가하면 그래프가 표시됩니다</p>
    </div>
  );

  // 데이터 여부 확인 로직 개선 - 데이터가 비어있거나 모든 값이 0인 경우도 고려
  const hasValidData = monthlyData && 
                      monthlyData.length > 0 && 
                      monthlyData.some(item => (item.budget > 0 || item.expense > 0));

  // 지출 색상 결정 함수 추가
  const getExpenseColor = (budget: number, expense: number) => {
    if (budget === 0) return "#81c784"; // 예산이 0이면 기본 색상
    
    const ratio = expense / budget;
    
    if (ratio > 1) return "#f44336"; // 빨간색 (예산 초과)
    if (ratio >= 0.9) return "#ffeb3b"; // 노란색 (예산의 90% 이상)
    return "#81c784"; // 기본 초록색
  };

  return (
    <div className="neuro-card h-72 w-full">
      {hasValidData ? (
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={monthlyData} margin={{
            top: 20,
            right: 10,
            left: -10,
            bottom: 5
          }} style={{
            fontSize: '11px'
          }}>
            <XAxis dataKey="name" />
            <YAxis tickFormatter={formatYAxisTick} />
            <Tooltip formatter={formatTooltip} />
            <Legend />
            <Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
            <Bar dataKey="expense" name="지출" radius={[4, 4, 0, 0]}>
              {monthlyData.map((entry, index) => (
                <Cell 
                  key={`cell-${index}`} 
                  fill={getExpenseColor(entry.budget, entry.expense)} 
                />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      ) : (
        <EmptyGraphState />
      )}
    </div>
  );
};

export default MonthlyComparisonChart;