// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// components/KaScoreBadge.tsx : pastilles KA Score (design system Groupe-KA).
//   · compact : « KA 78 » sur les cartes d'annonces et mini-fiches ;
//   · cercle  : jauge circulaire d'un sous-score sur la fiche.
// -----------------------------------------------------------------------------
import { kaLabel } from "../api";

/** Classe de teinte par tranche (styles dans styles.css). */
export function kaTint(score: number | null | undefined): string {
  if (score == null) return "na";
  if (score >= 70) return "haut";
  if (score >= 55) return "bon";
  if (score >= 40) return "moyen";
  return "bas";
}

/** Pastille compacte « KA 78 » — cartes de liste, carrousel, mini-fiches. */
export default function KaScoreBadge({ score, title }: {
  score: number | null | undefined;
  title?: string;
}) {
  if (score == null) return null;
  return (
    <span
      className={`ka-badge ka-${kaTint(score)}`}
      title={title ?? `KA Score ${Math.round(score)} — ${kaLabel(score)} · voir la méthodologie sur /ka-scores`}
      aria-label={`KA Score ${Math.round(score)} sur 100, ${kaLabel(score)}`}
    >
      <span className="ka-badge-logo">KA</span> {Math.round(score)}
    </span>
  );
}

/** Jauge circulaire d'un sous-score (fiche d'annonce, page méthodologie). */
export function KaScoreCircle({ score, nom, note }: {
  score: number | null;
  nom: string;
  note?: string | null;
}) {
  const r = 26;
  const c = 2 * Math.PI * r;
  const part = score == null ? 0 : Math.max(0, Math.min(1, score / 100));
  return (
    <div className={`ka-circle ka-${kaTint(score)}`} role="img"
      aria-label={`${nom} : ${score == null ? note ?? "données insuffisantes" : `${Math.round(score)} sur 100`}`}>
      <svg viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
        <circle cx="32" cy="32" r={r} className="ka-circle-fond" />
        <circle
          cx="32" cy="32" r={r} className="ka-circle-arc"
          strokeDasharray={`${c * part} ${c}`}
          transform="rotate(-90 32 32)"
        />
        <text x="32" y="37" textAnchor="middle" className="ka-circle-val">
          {score == null ? "—" : Math.round(score)}
        </text>
      </svg>
      <div className="ka-circle-nom">{nom}</div>
      <div className="ka-circle-label">
        {score == null ? (note ?? "Données insuffisantes") : kaLabel(score)}
      </div>
    </div>
  );
}