import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";

import { formatEuros } from "@/lib/format";
import { chartColors, STATUS_COLOR, STATUS_LABEL } from "./theme";
import { ChartTooltip } from "./ChartTooltip";

/**
 * Pipeline factures par statut — donut chart.
 *
 * Affiche le nombre de factures (count) par statut, avec un total
 * centré au milieu du donut. Les montants sont dans le tooltip.
 *
 * Les statuts sans facture sont filtrés (sinon le donut a des slices
 * de 0 qui chargent le visuel).
 */
type PipelineChartProps = {
  data: Array<{ status: string; count: number; amountCents: number }>;
  height?: number;
};

export function PipelineChart({ data, height = 220 }: PipelineChartProps) {
  const c = chartColors();
  const filtered = data.filter((d) => d.count > 0);
  const total = filtered.reduce((s, d) => s + d.count, 0);

  if (total === 0) {
    return (
      <div
        className="flex items-center justify-center text-[12.5px] italic text-ink-3"
        style={{ height }}
      >
        Aucune facture pour l'instant — créez-en une depuis l'écran factures.
      </div>
    );
  }

  return (
    <div className="relative" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Tooltip
            content={
              <ChartTooltip
                formatValue={(v, key) =>
                  key === "count" ? `${v} factures` : formatEuros(v)
                }
                seriesLabel={{ count: "Nombre", amountCents: "Montant" }}
              />
            }
          />
          <Pie
            data={filtered}
            dataKey="count"
            nameKey="status"
            innerRadius="62%"
            outerRadius="92%"
            paddingAngle={2}
            stroke={c.cream}
            strokeWidth={2}
            isAnimationActive={false}
          >
            {filtered.map((entry) => (
              <Cell
                key={entry.status}
                fill={STATUS_COLOR[entry.status] ?? c.line}
              />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>

      {/* Total centré au milieu du donut */}
      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
        <p className="font-display text-[28px] font-bold tabular-nums text-ink leading-none">
          {total}
        </p>
        <p className="text-[10.5px] uppercase tracking-[0.12em] text-ink-3 mt-1">
          Factures
        </p>
      </div>
    </div>
  );
}

/**
 * Légende compacte à afficher à côté du donut. Liste les statuts non-zero
 * avec leur couleur, count et montant.
 */
export function PipelineLegend({
  data,
}: {
  data: Array<{ status: string; count: number; amountCents: number }>;
}) {
  const filtered = data.filter((d) => d.count > 0);
  return (
    <ul className="flex flex-col gap-1.5">
      {filtered.map((d) => (
        <li
          key={d.status}
          className="flex items-baseline gap-2 text-[12.5px]"
        >
          <span
            aria-hidden="true"
            className="size-2 rounded-full shrink-0 mt-1"
            style={{ backgroundColor: STATUS_COLOR[d.status] }}
          />
          <span className="text-ink-2 flex-1 truncate">
            {STATUS_LABEL[d.status] ?? d.status}
          </span>
          <span className="font-display font-semibold text-ink tabular-nums">
            {d.count}
          </span>
          <span className="text-ink-3 tabular-nums text-[11.5px]">
            · {formatEuros(d.amountCents)}
          </span>
        </li>
      ))}
    </ul>
  );
}
