// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/FairValueBadge.tsx : pastille « juste valeur » (fair value)
//   Trois états : sous le marché / dans le marché / au-dessus du marché.
//   Lisible par les daltoniens : icône + libellé, jamais la couleur seule.
// -----------------------------------------------------------------------------
const NBSP = " ";

export function fmtDeviation(dev: number | null | undefined): string | null {
  if (dev == null) return null;
  const pct = Math.round(Math.abs(dev) * 100);
  return `${dev < 0 ? "−" : "+"}${pct}${NBSP}%`;
}

const META = {
  sous: { cls: "deal-good", icon: "▼", label: "Sous le marché" },
  marche: { cls: "deal-ok", icon: "≈", label: "Dans le marché" },
  sur: { cls: "deal-high", icon: "▲", label: "Au-dessus du marché" },
} as const;

export default function FairValueBadge({ verdict, deviation, compact = false }: {
  verdict: "sous" | "marche" | "sur" | null | undefined;
  deviation?: number | null;
  compact?: boolean;   // version carte de liste (courte)
}) {
  if (!verdict || !(verdict in META)) return null;
  const m = META[verdict];
  const pct = fmtDeviation(deviation);
  return (
    <span className={`fv-badge ${m.cls} ${compact ? "fv-compact" : ""}`}
          title={`${m.label}${pct ? ` (${pct} vs juste valeur estimée)` : ""}`}>
      <span aria-hidden="true" className="fv-ico">{m.icon}</span>
      {compact
        ? (pct ?? m.label)
        : <>{m.label}{pct && <b className="fv-pct">{pct}</b>}</>}
    </span>
  );
}