import { useMemo } from "react";
import {
  Bar,
  BarChart,
  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";

/**
 * Mini bar chart "encaissé par bucket" pour la fiche client.
 * Format compact (height 140) + barres rubis. Pas d'axe Y, montants dans
 * le tooltip. Granularité (mensuelle / hebdo) pilotée par prop.
 */
type ClientPaidChartProps = {
  data: Array<{ bucket: string; encaisseCents: number; paidCount: number }>;
  granularity?: SeriesGranularity;
  height?: number;
};

export function ClientPaidChart({
  data,
  granularity = "month",
  height = 140,
}: ClientPaidChartProps) {
  const c = chartColors();

  // Si aucun paiement sur la période, on affiche un message — un chart vide
  // (que des barres à 0) raconte rien.
  const hasAnyPaid = useMemo(
    () => data.some((d) => d.paidCount > 0),
    [data],
  );

  if (!hasAnyPaid) {
    return (
      <div
        className="flex items-center justify-center text-[12px] italic text-ink-3"
        style={{ height }}
      >
        Aucun paiement reçu de ce client sur la période.
      </div>
    );
  }
  const xInterval = granularity === "week" ? 1 : 0;

  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart data={data} margin={{ top: 4, right: 4, left: 4, bottom: 0 }}>
        <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={4}
        />
        <YAxis hide domain={[0, "dataMax + 100"]} />
        <Tooltip
          content={
            <ChartTooltip
              formatLabel={(v) => formatBucketLong(v, granularity)}
              formatValue={(v, key) =>
                key === "encaisseCents"
                  ? formatEuros(v)
                  : `${v} facture${v > 1 ? "s" : ""}`
              }
              seriesLabel={{
                encaisseCents: "Encaissé",
                paidCount: "Paiements",
              }}
            />
          }
          cursor={{ fill: c.cream2, opacity: 0.6 }}
        />
        <Bar
          dataKey="encaisseCents"
          fill={c.rubis}
          radius={[3, 3, 0, 0]}
          maxBarSize={28}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}
