'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import type { TodayChartBucket } from '@/types/today';
import {
  TODAY_CHART_AXIS_COLOR,
  TODAY_CHART_GRID_COLOR,
  TODAY_CHART_PRIMARY_COLOR,
  TODAY_CHART_TOOLTIP_STYLE,
} from '@/components/today/chart-theme';

interface TodayAreaChartProps {
  data: TodayChartBucket[];
}

export function TodayAreaChart({ data }: TodayAreaChartProps) {
  return (
    <ResponsiveContainer width="100%" height={220}>
      <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
        <defs>
          <linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
            <stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
          </linearGradient>
        </defs>
        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
        <XAxis
          dataKey="label"
          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
          tickLine={false}
          interval={1}
        />
        <YAxis
          allowDecimals={false}
          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
          axisLine={false}
          tickLine={false}
          width={32}
        />
        <Tooltip
          cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
          labelFormatter={(label) => String(label)}
        />
        <Area
          type="monotone"
          dataKey="count"
          stroke={TODAY_CHART_PRIMARY_COLOR}
          strokeWidth={2}
          fill="url(#todayAreaFill)"
          dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
          activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}