// src/components/content/stats/stats-kpis.tsx
import { StatCard } from "@/components/keywords/overview/stat-card";
import type { StatsKpis as Kpis } from "@/lib/content/stats";

/** Variation % vs période précédente — null quand prev manquant ou nul. */
function deltaPct(cur: number | null, prev: number | null): number | null {
  if (cur == null || prev == null || prev === 0) return null;
  return ((cur - prev) / prev) * 100;
}

/** Ligne delta : signe + 1 décimale, vert/rouge (inversé pour la position). */
function Delta({
  cur,
  prev,
  invert,
}: {
  cur: number | null;
  prev: number | null;
  invert?: boolean;
}) {
  const d = deltaPct(cur, prev);
  if (d == null) return <span>—</span>;
  const improving = invert ? d < 0 : d > 0;
  const cls =
    d === 0
      ? "text-muted-foreground"
      : improving
        ? "text-emerald-600"
        : "text-red-600";
  return (
    <span className={cls}>
      {d > 0 ? "+" : ""}
      {d.toFixed(1)} % vs période préc.
    </span>
  );
}

export function StatsKpis({ kpis }: { kpis: Kpis | null }) {
  if (!kpis) return null;
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      <StatCard
        label="Clics"
        value={kpis.clicks.toLocaleString("fr-FR")}
        sub={<Delta cur={kpis.clicks} prev={kpis.prevClicks} />}
      />
      <StatCard
        label="Impressions"
        value={kpis.impressions.toLocaleString("fr-FR")}
        sub={<Delta cur={kpis.impressions} prev={kpis.prevImpressions} />}
      />
      <StatCard
        label="CTR"
        value={kpis.ctr != null ? `${(kpis.ctr * 100).toFixed(1)} %` : "—"}
        sub={<Delta cur={kpis.ctr} prev={kpis.prevCtr} />}
      />
      <StatCard
        label="Position"
        value={kpis.position?.toFixed(1) ?? "—"}
        sub={<Delta cur={kpis.position} prev={kpis.prevPosition} invert />}
      />
    </div>
  );
}