// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/KaScoresCard.tsx : « KA Scores » — 5 cercles compacts (Marche,
//   Transport, Vélo, Calme, Services), score personnalisé selon les
//   pondérations de l'utilisateur, détail honnête en accordéon.
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { KaScores, KA_DEFAULT_WEIGHTS, fmtDist, kaGlobal, kaLabel, kaWeights } from "../api";
import { kaTint } from "../components/KaScoreBadge";
import { IcoLayers } from "../components/Icons";
import { Accordion, SectionCard, SourceLine } from "./ui";

const CAT: Record<string, string> = {
  epicerie: "Épicerie", pharmacie: "Pharmacie", parc: "Parc", cafe: "Café", ecole: "École",
  clinique: "Clinique", garderie: "Garderie", depanneur: "Dépanneur", gym: "Gym", bibliotheque: "Bibliothèque",
};
const FAM: Record<string, string> = { commerces: "commerces", sante: "santé", education: "éducation", loisirs: "loisirs" };

function Cercle({ score, nom, note }: { score: number | null; nom: string; note?: string }) {
  const r = 22, c = 2 * Math.PI * r;
  const part = score == null ? 0 : Math.max(0, Math.min(1, score / 100));
  return (
    <div className={`lk-ks-c ${kaTint(score)}`} role="img"
         aria-label={`${nom} : ${score == null ? note ?? "données insuffisantes" : `${Math.round(score)} sur 100`}`}>
      <div className="lk-ks-wrap">
        <svg viewBox="0 0 52 52" aria-hidden="true">
          <circle className="bg" cx="26" cy="26" r={r} />
          <circle className="arc" cx="26" cy="26" r={r} strokeDasharray={`${c * part} ${c}`} />
        </svg>
        <div className="lk-ks-v">{score == null ? "—" : Math.round(score)}</div>
      </div>
      <div className="lk-ks-n">{nom}</div>
      <div className="lk-ks-l">{score == null ? (note ?? "n/d") : kaLabel(score)}</div>
    </div>
  );
}

export default function KaScoresCard({ ks }: { ks: KaScores }) {
  const weights = kaWeights();
  const custom = JSON.stringify(weights) !== JSON.stringify(KA_DEFAULT_WEIGHTS);
  const perso = custom ? kaGlobal(ks, weights) : null;
  const d = ks.details ?? {};
  const walkCats = (d.walk?.cats ?? []).filter((c) => c.dist_m != null).slice(0, 6);

  return (
    <SectionCard id="ka-scores" title="KA Scores" icon={<IcoLayers size={18} />}
                 sub={ks.global != null ? `Global ${Math.round(ks.global)} · ${kaLabel(ks.global)}${perso != null ? ` · selon vos priorités : ${Math.round(perso)}` : ""}` : undefined}>
      <div className="lk-ks">
        <Cercle score={ks.walk} nom="Marche" />
        <Cercle score={ks.transit} nom="Transport" note={ks.transit == null ? "Non desservi" : undefined} />
        <Cercle score={ks.bike} nom="Vélo" />
        <Cercle score={ks.calme} nom="Calme" />
        <Cercle score={ks.services} nom="Services" />
      </div>
      <Accordion title="Le détail des scores de ce secteur" small>
        <div className="lk-ks-detail">
          {walkCats.length > 0 && (
            <div>
              <h4>Marche</h4>
              <ul>{walkCats.map((c) => <li key={c.cat}>{CAT[c.cat] ?? c.cat} : {fmtDist(c.dist_m as number)}</li>)}</ul>
            </div>
          )}
          <div>
            <h4>Transport</h4>
            <ul>
              {d.transit?.arret_bus_m != null && <li>Arrêt de bus à {fmtDist(d.transit.arret_bus_m)}</li>}
              {d.transit?.station_metro_m != null && <li>Station de métro à {fmtDist(d.transit.station_metro_m)}</li>}
              {d.transit?.pmd_percentile != null && <li>Desserte : {d.transit.pmd_percentile}ᵉ percentile canadien (StatCan)</li>}
              {d.transit?.raison && <li>{d.transit.raison}</li>}
            </ul>
            <h4>Vélo</h4>
            <ul>
              {d.bike?.km_cyclables_1km != null && <li>{d.bike.km_cyclables_1km.toLocaleString("fr-CA")} km de voies cyclables à moins de 1 km</li>}
              {d.bike?.raison && <li>{d.bike.raison}</li>}
              {d.bike?.note && <li>{d.bike.note}</li>}
            </ul>
          </div>
          <div>
            <h4>Calme</h4>
            <ul>
              {(d.calme?.sources_bruit ?? []).length === 0 && <li>Aucune source de bruit majeure détectée à proximité</li>}
              {(d.calme?.sources_bruit ?? []).map((s) => <li key={s.source}>{s.source}{s.dist_m != null ? ` à ${fmtDist(s.dist_m)}` : ""}</li>)}
              {(d.calme?.bonus_parc ?? 0) > 0 && <li>Parc à proximité</li>}
              {d.calme?.note && <li>{d.calme.note}</li>}
            </ul>
            {d.services?.familles && (
              <>
                <h4>Services</h4>
                <ul>{Object.entries(d.services.familles).map(([f, n]) => <li key={f}>{n} {FAM[f] ?? f} dans le secteur</li>)}</ul>
              </>
            )}
          </div>
        </div>
        <p>
          Scores 0-100 calculés depuis OpenStreetMap et les mesures de proximité de Statistique Canada — le Calme
          est une estimation d'environnement, pas une mesure sonore. Barème {ks.version}, calculé le{" "}
          {new Date(ks.computed_at * 1000).toLocaleDateString("fr-CA")}.{" "}
          <Link to="/ka-scores">Méthodologie et réglage de vos priorités</Link>
        </p>
      </Accordion>
      <SourceLine name="OpenStreetMap · Statistique Canada" date={`barème ${ks.version}`} />
    </SectionCard>
  );
}