import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

interface EntityBreakdownChartProps {
  data: Record<string, number> | null | undefined;
}

const FALLBACK_DATA = [
  { type: 'Functions', count: 0 },
  { type: 'Classes', count: 0 },
  { type: 'Methods', count: 0 },
  { type: 'Modules', count: 0 },
];

export function EntityBreakdownChart({ data }: EntityBreakdownChartProps) {
  const chartData = data
    ? Object.entries(data).map(([type, count]) => ({ type, count }))
    : FALLBACK_DATA;

  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
        <XAxis
          dataKey="type"
          tick={{ fill: '#94a3b8', fontSize: 11 }}
          axisLine={{ stroke: '#1e293b' }}
          tickLine={false}
        />
        <YAxis
          tick={{ fill: '#94a3b8', fontSize: 11 }}
          axisLine={{ stroke: '#1e293b' }}
          tickLine={false}
          width={48}
        />
        <Tooltip
          contentStyle={{
            backgroundColor: '#111827',
            border: '1px solid #1e293b',
            borderRadius: '8px',
          }}
          labelStyle={{ color: '#f1f5f9' }}
          itemStyle={{ color: '#3b82f6' }}
        />
        <Bar dataKey="count" fill="#3b82f6" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}
