'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { TodayChartFrame } from '@/components/ui/today/TodayChartFrame';
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';
import { todayChartDenseXAxisProps } from '@/components/today/chart-day-labels';

interface TodayAreaChartProps {
  data: TodayChartBucket[];
  color?: string;
  gradientId?: string;
  showXAxis?: boolean;
}

export function TodayAreaChart({
  data,
  color = TODAY_CHART_PRIMARY_COLOR,
  gradientId = 'todayAreaFill',
  showXAxis = true,
}: TodayAreaChartProps) {
  const xAxis = todayChartDenseXAxisProps(data.length);

  return (
    <TodayChartFrame>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: showXAxis ? 2 : -4 }}>
          <defs>
            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity={0.45} />
              <stop offset="100%" stopColor={color} stopOpacity={0.05} />
            </linearGradient>
          </defs>
          <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
          {showXAxis ? (
            <XAxis
              dataKey="label"
              tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: xAxis.fontSize }}
              axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
              tickLine={false}
              interval={xAxis.interval}
              minTickGap={xAxis.minTickGap}
            />
          ) : (
            <XAxis dataKey="label" hide />
          )}
          <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={color}
            strokeWidth={2}
            fill={`url(#${gradientId})`}
            dot={data.length <= 14 ? { r: 3, fill: color, strokeWidth: 0 } : false}
            activeDot={{ r: 5, fill: color }}
          />
        </AreaChart>
      </ResponsiveContainer>
    </TodayChartFrame>
  );
}
