// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ImmoKaScore.tsx : carte « Immo-Ka Score » — anneau 0-100 animé,
//   libellé, composantes (emplacement / prix) et méthodologie en accordéon.
//   Quand une composante manque, le score est présenté comme partiel ; quand
//   aucune n'est fiable, la carte affiche la synthèse sans chiffre.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Ico } from "../components/Icons";
import { ImmoKaScore as Score } from "./synthese";
import { Accordion, SectionCard } from "./ui";

export function ScoreRing({ value, partial, size = 88 }: { value: number | null; partial?: boolean; size?: number }) {
  const [v, setV] = useState(0);
  useEffect(() => {
    const t = requestAnimationFrame(() => setV(value ?? 0));
    return () => cancelAnimationFrame(t);
  }, [value]);
  const r = 40, c = 2 * Math.PI * r;
  return (
    <div className="ik-score-ring" style={{ width: size, height: size }} role="img"
         aria-label={value != null ? `Immo-Ka Score ${value} sur 100${partial ? ", partiel" : ""}` : "Score non calculable"}>
      <svg viewBox="0 0 100 100" style={{ width: size, height: size }} aria-hidden="true">
        <circle className="bg" cx="50" cy="50" r={r} />
        <circle className={`arc ${partial ? "partial" : ""}`} cx="50" cy="50" r={r}
                strokeDasharray={`${(c * Math.max(0, Math.min(100, v))) / 100} ${c}`} />
      </svg>
      <div className="ik-score-val">
        <div>{value != null ? value : "—"}<small>/ 100</small></div>
      </div>
    </div>
  );
}

export default function ImmoKaScore({ s, resume }: { s: Score; resume: string[] }) {
  return (
    <SectionCard id="score" title="Immo-Ka Score" icon={<Ico name="sparkles" size={18} />}
                 sub={s.partial ? "Score partiel — une composante manque" : undefined}>
      <div className="ik-score">
        <ScoreRing value={s.value} partial={s.partial} />
        <div>
          <div className="ik-score-lbl">
            {s.value != null ? s.label : "Pas assez de données pour un score"}
          </div>
          {resume.length > 0 && <div className="ik-score-sub">{resume.join(" · ")}</div>}
          <div className="ik-score-parts">
            <span className={`ik-score-part ${s.emplacement == null ? "na" : ""}`}>
              Emplacement {s.emplacement != null ? <b>{s.emplacement}</b> : "non évalué"}
            </span>
            <span className={`ik-score-part ${s.prix == null ? "na" : ""}`}>
              Prix {s.prix != null ? <b>{s.prix}</b> : "non évalué"}
            </span>
          </div>
        </div>
      </div>
      <Accordion title="Comment est calculé ce score ?" small>
        <p>{s.explication}</p>
        <p>
          <a href="https://www.vrai-prix.com" target="_blank" rel="noopener noreferrer">Méthodologie Vrai-Prix ↗</a> · <a href="/sources">Données et sources Immo-Ka</a>
        </p>
      </Accordion>
    </SectionCard>
  );
}