// src/components/content/pages-health/kpi-strip.tsx — 4 KPI cards de tête de la
// vue santé des pages (Frame A). Icône lucide + valeur + libellé, cards façon
// `stat-card` de l'app (border + bg-card). KPI 4 = « Sans mot-clé cible »
// (actionnable, non-IA) en remplacement du « Métas IA » du proto (WordPress/IA
// différés).
import {
  AlertTriangleIcon,
  FileTextIcon,
  GaugeIcon,
  type LucideIcon,
  TagIcon,
} from "lucide-react";
import type { ContentPagesOverview } from "@/lib/content/pages-overview";

type Kpi = {
  icon: LucideIcon;
  value: string;
  suffix?: string;
  label: string;
  tone: string;
};

/** Bandeau des 4 KPIs dérivés de `overview.kpis`. */
export function KpiStrip({ kpis }: { kpis: ContentPagesOverview["kpis"] }) {
  const cards: Kpi[] = [
    {
      icon: FileTextIcon,
      value: kpis.tracked.toLocaleString("fr-FR"),
      label: "Pages suivies",
      tone: "text-sky-500",
    },
    {
      icon: GaugeIcon,
      value: String(kpis.avgScore),
      suffix: "/100",
      label: "Score moyen",
      tone: "text-emerald-500",
    },
    {
      icon: AlertTriangleIcon,
      value: kpis.toFix.toLocaleString("fr-FR"),
      label: "Pages à corriger",
      tone: "text-red-500",
    },
    {
      icon: TagIcon,
      value: kpis.withoutKeyword.toLocaleString("fr-FR"),
      label: "Sans mot-clé cible",
      tone: "text-amber-500",
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
      {cards.map((c) => {
        const Icon = c.icon;
        return (
          <div
            key={c.label}
            className="flex items-center gap-3.5 rounded-lg border bg-card p-4"
          >
            <div className="grid size-9 shrink-0 place-items-center rounded-lg bg-muted">
              <Icon className={`size-4.5 ${c.tone}`} />
            </div>
            <div className="min-w-0">
              <div className="font-semibold text-2xl tabular-nums leading-tight">
                {c.value}
                {c.suffix ? (
                  <span className="ml-0.5 font-normal text-muted-foreground text-sm">
                    {c.suffix}
                  </span>
                ) : null}
              </div>
              <div className="truncate text-muted-foreground text-xs">
                {c.label}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}