import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import type { ProductDemandEntry } from '@/infrastructure/http/api/intelligence';

interface Props {
  products: ProductDemandEntry[];
  mode: 'demand' | 'oos';
  label: string;
}

export function HotDemandBarChart({ products, mode, label }: Props) {
  const data = products
    .map((p) => ({ name: p.productName ?? 'Unknown product', value: mode === 'oos' ? p.oosHits : p.demandHits }))
    .filter((d) => d.value > 0);
  if (data.length === 0) return null;
  const fill = mode === 'oos' ? '#d72c0d' : '#2a7';
  const maxName = Math.max(120, ...data.map((d) => Math.min(220, d.name.length * 7)));
  return (
    <div className="w-full" style={{ height: Math.max(180, data.length * 36 + 40) }}>
      <ResponsiveContainer>
        <BarChart data={data} layout="vertical" margin={{ top: 10, right: 20, left: 8, bottom: 0 }}>
          <CartesianGrid stroke="#e1e3e5" strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" stroke="#6d7175" tick={{ fontSize: 12 }} allowDecimals={false} />
          <YAxis type="category" dataKey="name" stroke="#6d7175" tick={{ fontSize: 12 }} width={maxName} />
          <Tooltip
            contentStyle={{ background: '#fff', border: '1px solid #e1e3e5', borderRadius: 8, fontSize: 12 }}
            labelStyle={{ color: '#202223', fontWeight: 600 }}
          />
          <Bar dataKey="value" name={label} fill={fill} radius={[0, 4, 4, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}