import { Card } from "@/components/ui/Card";
import { cn } from "@/lib/utils";

/**
 * KpiCard — un bloc statistique scannable.
 *
 * Personnalité :
 *  - Label en eyebrow caps, value en font-display gros, delta en muted small
 *  - Pas de couleur "verte succès" — on garde la palette rubis/neutres
 *  - delta neutre : ink-3, delta positif : rubis-deep, delta négatif : ink-3 (jamais rouge alerte)
 *
 * "Positif" est dans le sens de la métrique :
 *  - "Encaissé +2 800 €" : positif (intent=positive)
 *  - "DSO -6j" (DSO baisse → c'est bien) : positif (intent=positive)
 *  - On laisse l'utilisateur déclarer l'intent.
 */
type KpiCardProps = {
  /** Texte ou node — accepte un GlossaryTerm si la métrique a une définition. */
  label: React.ReactNode;
  value: string;
  delta?: string;
  /** Sens du delta affiché (sert juste à colorer subtilement). Default neutral. */
  intent?: "positive" | "neutral" | "warning";
  className?: string;
};

export function KpiCard({ label, value, delta, intent = "neutral", className }: KpiCardProps) {
  return (
    <Card
      padding="none"
      className={cn(
        // Padding plus serré sur mobile (sinon les chiffres TTC longs débordent
        // sur les cards 2-cols à 375px).
        "min-w-0 p-4 lg:p-7",
        className,
      )}
    >
      <p className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-ink-3">
        {label}
      </p>
      <p
        className={cn(
          "mt-2 font-display font-bold leading-none tracking-[-0.018em] text-ink tabular-nums",
          // 22px sur mobile, 28px à partir de lg : "401 240 €" tient sur 1 ligne
          // dans les cards 2-cols même sur petit écran.
          "text-[22px] lg:text-[28px]",
          // Empêche le débordement quand la string est très longue.
          "truncate",
        )}
      >
        {value}
      </p>
      {delta && (
        <p
          className={cn(
            "mt-2 text-[12px] leading-snug",
            intent === "positive" && "text-rubis-deep",
            intent === "warning" && "text-rubis-deep font-medium",
            intent === "neutral" && "text-ink-3",
          )}
        >
          {delta}
        </p>
      )}
    </Card>
  );
}
