import { useMemo } from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

interface DataPoint {
  time: string;
  traces: number;
}

function generateMockData(): DataPoint[] {
  const now = Date.now();
  const points: DataPoint[] = [];
  for (let i = 23; i >= 0; i--) {
    const t = new Date(now - i * 3600_000);
    points.push({
      time: t.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      traces: Math.floor(Math.random() * 800 + 200),
    });
  }
  return points;
}

export function TraceVolumeChart() {
  const data = useMemo(() => generateMockData(), []);

  return (
    <ResponsiveContainer width="100%" height={260}>
      <AreaChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id="traceGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
            <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis
          dataKey="time"
          tick={{ fill: '#94a3b8', fontSize: 11 }}
          axisLine={{ stroke: '#1e293b' }}
          tickLine={false}
          interval="preserveStartEnd"
        />
        <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: '#f59e0b' }}
        />
        <Area
          type="monotone"
          dataKey="traces"
          stroke="#f59e0b"
          strokeWidth={2}
          fill="url(#traceGradient)"
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}
