"use client";

import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { CHART_COLORS, chartTheme } from "@/config/chart-theme";
import type { TimeSeriesPoint } from "@/types/analytics";

interface ResponsesOverTimeChartProps {
  data: TimeSeriesPoint[];
}

export function ResponsesOverTimeChart({ data }: ResponsesOverTimeChartProps) {
  if (data.length === 0) {
    return (
      <p className="py-12 text-center text-sm text-muted">No responses yet.</p>
    );
  }

  const formatted = data.map((d) => ({
    ...d,
    label: new Date(d.date).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
    }),
  }));

  return (
    <div className="h-[220px] w-full sm:h-[250px]">
      <ResponsiveContainer width="100%" height="100%" debounce={50} minWidth={0}>
        <AreaChart data={formatted} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
          <defs>
            <linearGradient id="responsesFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={CHART_COLORS.primary} stopOpacity={0.22} />
              <stop offset="100%" stopColor={CHART_COLORS.primary} stopOpacity={0} />
            </linearGradient>
          </defs>
          <CartesianGrid {...chartTheme.cartesianGrid} />
          <XAxis dataKey="label" {...chartTheme.xAxis} />
          <YAxis allowDecimals={false} {...chartTheme.yAxis} />
          <Tooltip
            {...chartTheme.tooltip}
            formatter={(value) => [`${value} completed`, "Responses"]}
          />
          <Area
            type="monotone"
            dataKey="count"
            name="Responses"
            stroke={CHART_COLORS.primary}
            strokeWidth={2.5}
            fill="url(#responsesFill)"
            dot={{ r: 3, fill: CHART_COLORS.primary, strokeWidth: 0 }}
            activeDot={{ r: 5 }}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}