// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/KaScoreBadge.tsx: KA Score badges (Groupe-KA design system).
//   · compact: "KA 78" on listing cards and mini-sheets;
//   · circle: circular gauge of a sub-score on the detail page.
// -----------------------------------------------------------------------------
import { kaLabel } from "../api";

/** Tint class per bracket (styles in 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";
}

/** Compact "KA 78" badge — list cards, carousel, mini-sheets. */
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)} · see the methodology at /ka-scores`}
      aria-label={`KA Score ${Math.round(score)} out of 100, ${kaLabel(score)}`}
    >
      <span className="ka-badge-logo">KA</span> {Math.round(score)}
    </span>
  );
}

/** Circular gauge of a sub-score (listing detail, methodology page). */
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 ?? "insufficient data" : `${Math.round(score)} out of 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 ?? "Insufficient data") : kaLabel(score)}
      </div>
    </div>
  );
}