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

import { formatEuros } from "@/lib/format";
import {
  AXIS_TICK_STYLE,
  chartColors,
  formatBucketLong,
  formatBucketShort,
  type SeriesGranularity,
} from "./theme";
import { ChartTooltip } from "./ChartTooltip";

/**
 * Encaissé — area chart avec dégradé rubis. La granularité de l'axe X dépend
 * de la prop `granularity` :
 *   - `month` : ticks "mai", tooltip "Mai 2026"
 *   - `week`  : ticks "12 mai", tooltip "Semaine du 12 mai 2026"
 *
 * Pas d'axe Y visible : les valeurs sont dans le tooltip pour rester
 * visuellement épuré.
 */
type EncaisseChartProps = {
  data: Array<{ bucket: string; encaisseCents: number }>;
  granularity?: SeriesGranularity;
  /** Hauteur fixe en px (défaut 220). */
  height?: number;
};

export function EncaisseChart({
  data,
  granularity = "month",
  height = 220,
}: EncaisseChartProps) {
  const c = chartColors();
  // En vue hebdo on a ~13 ticks, le label "12 mai" prend de la place — on en
  // saute pour aérer (1 sur 2 → 7 visibles).
  const xInterval = granularity === "week" ? 1 : 0;
  return (
    <ResponsiveContainer width="100%" height={height}>
      <AreaChart data={data} margin={{ top: 10, right: 8, left: 8, bottom: 0 }}>
        <defs>
          <linearGradient id="rubis-glow-gradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={c.rubis} stopOpacity={0.25} />
            <stop offset="100%" stopColor={c.rubis} stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid stroke={c.line} strokeDasharray="3 3" vertical={false} />
        <XAxis
          dataKey="bucket"
          tickFormatter={(v) => formatBucketShort(v, granularity)}
          axisLine={false}
          tickLine={false}
          tick={AXIS_TICK_STYLE}
          interval={xInterval}
          dy={6}
        />
        <YAxis hide domain={[0, "dataMax + 100"]} />
        <Tooltip
          content={
            <ChartTooltip
              formatLabel={(v) => formatBucketLong(v, granularity)}
              formatValue={(v) => formatEuros(v)}
              seriesLabel={{ encaisseCents: "Encaissé" }}
            />
          }
          cursor={{ stroke: c.rubis, strokeWidth: 1, strokeDasharray: "4 4" }}
        />
        <Area
          type="monotone"
          dataKey="encaisseCents"
          stroke={c.rubis}
          strokeWidth={2}
          fill="url(#rubis-glow-gradient)"
          dot={{ fill: c.rubis, stroke: c.cream, strokeWidth: 2, r: 3 }}
          activeDot={{ r: 5, stroke: c.cream, strokeWidth: 2 }}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}
