// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/LouKaScore.tsx : carte « Lou-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 (jamais inventé).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { IcoSparkles } from "../components/Icons";
import { LouKaScore 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="lk-score-ring" style={{ width: size, height: size }} role="img"
         aria-label={value != null ? `Lou-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="lk-score-val">
        <div>{value != null ? value : "—"}<small>/ 100</small></div>
      </div>
    </div>
  );
}

export default function LouKaScore({ s, resume }: { s: Score; resume: string[] }) {
  return (
    <SectionCard id="score" title="Lou-Ka Score" icon={<IcoSparkles size={18} />}
                 sub={s.partial ? "Score partiel — une composante manque" : undefined}>
      <div className="lk-score">
        <ScoreRing value={s.value} partial={s.partial} />
        <div>
          <div className="lk-score-lbl">
            {s.value != null ? s.label : "Pas assez de données pour un score"}
          </div>
          {resume.length > 0 && <div className="lk-score-sub">{resume.join(" · ")}</div>}
          <div className="lk-score-parts">
            <span className={`lk-score-part ${s.emplacement == null ? "na" : ""}`}>
              Emplacement {s.emplacement != null ? <b>{s.emplacement}</b> : "non évalué"}
            </span>
            <span className={`lk-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>
          <Link to="/ka-scores">Méthodologie des KA Scores</Link> · <Link to="/juste-valeur">Méthodologie de la juste valeur</Link>
        </p>
      </Accordion>
    </SectionCard>
  );
}