import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

function toChartData(original, processed) {
  return Array.from({ length: 256 }, (_, level) => ({
    level,
    original: original?.[level] ?? 0,
    processed: processed?.[level] ?? 0
  }));
}

export default function HistogramPanel({ original, processed }) {
  const data = toChartData(original, processed);
  return (
    <section className="border-t border-zinc-800 bg-zinc-950 px-4 py-3">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="text-sm font-semibold text-zinc-100">Histogram Analytics</h2>
        <div className="flex gap-3 text-xs text-zinc-400">
          <span className="text-cyan-300">Original</span>
          <span className="text-emerald-300">Processed</span>
        </div>
      </div>
      <div className="h-40">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data} margin={{ left: 0, right: 8, top: 8, bottom: 0 }}>
            <CartesianGrid stroke="#27272a" strokeDasharray="3 3" />
            <XAxis dataKey="level" stroke="#71717a" tick={{ fontSize: 10 }} interval={63} />
            <YAxis stroke="#71717a" tick={{ fontSize: 10 }} width={44} />
            <Tooltip contentStyle={{ background: "#18181b", border: "1px solid #3f3f46", color: "#f4f4f5" }} />
            <Area type="monotone" dataKey="original" stroke="#67e8f9" fill="#0891b2" fillOpacity={0.22} dot={false} />
            <Area type="monotone" dataKey="processed" stroke="#6ee7b7" fill="#059669" fillOpacity={0.24} dot={false} />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </section>
  );
}