// -----------------------------------------------------------------------------
// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/ScoreCard.tsx : carte « KA Score » — anneau 0-100 animé, libellé,
//   composantes en barres (prix vs marché, kilométrage vs âge, qualité de la
//   fiche, fraîcheur), méthodologie en accordéon. Le score est calculé côté
//   API (autoka/web.py _ka_score) ; la carte ne l'invente jamais.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { KaScore } from "../api";
import { Ico } from "../components/Icons";
import { Accordion, SectionCard } from "./ui";

export const kaLabel = (s: number) => (s >= 85 ? "Exceptionnel" : s >= 70 ? "Excellent" : s >= 55 ? "Très bon" : s >= 40 ? "Moyen" : "Faible");

export function ScoreRing({ value, size = 88 }: { value: number | null; 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="ak-score-ring" style={{ width: size, height: size }} role="img" aria-label={value != null ? `KA Score ${value} sur 100` : "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" cx="50" cy="50" r={r} strokeDasharray={`${(c * Math.max(0, Math.min(100, v))) / 100} ${c}`} />
      </svg>
      <div className="ak-score-val"><div>{value != null ? value : "—"}<small>/ 100</small></div></div>
    </div>
  );
}

export default function ScoreCard({ s, resume }: { s: KaScore; resume: string[] }) {
  const manque = s.parts.length < 4;
  return (
    <SectionCard id="score" title="KA Score" icon={<Ico name="sparkles" size={18} />}
                 sub={manque ? "Score partiel — la composante prix manque (pas assez de comparables)" : undefined}>
      <div className="ak-score">
        <ScoreRing value={s.overall} />
        <div>
          <div className="ak-score-lbl">{kaLabel(s.overall)}</div>
          {resume.length > 0 && <div className="ak-score-sub">{resume.join(" · ")}</div>}
          <div className="ak-score-parts">
            {s.parts.map((p) => <span className="ak-score-part" key={p.key}>{p.label} <b>{p.score}</b></span>)}
          </div>
        </div>
      </div>
      <div className="ak-rows" style={{ marginTop: 12 }}>
        {s.parts.map((p) => (
          <div className="ak-row" key={p.key}>
            <span className="ak-row-name">{p.label}<small>· poids {p.weight}{" "}%</small></span>
            <span className="ak-row-bar" aria-hidden="true"><i className={p.score >= 70 ? "good" : p.score >= 45 ? "warn" : "bad"} style={{ width: `${p.score}%` }} /></span>
            <span className="ak-row-val">{p.score}</span>
          </div>
        ))}
      </div>
      <Accordion title="Comment est calculé ce score ?" small>
        <p>
          Indice composite Auto-Ka (0-100) calculé côté serveur : prix face à la médiane des comparables, kilométrage
          selon l'âge (référence ≈ 20 000 km/an), qualité de la fiche — photos, description, NIV, équipements — et
          fraîcheur de l'annonce. Les poids affichés à côté de chaque composante sont renormalisés quand une composante
          manque (par exemple sans comparables pour le prix). Il ne remplace ni l'inspection mécanique ni l'historique du véhicule.
        </p>
      </Accordion>
    </SectionCard>
  );
}