// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/KaScores.tsx : « Comment sont calculés les KA Scores ? »
//   Méthodologie publique (transparence obligatoire du barème), couverture
//   du parc en direct, et réglage des priorités personnelles (les curseurs
//   repondèrent le KA Score global affiché sur les fiches).
// -----------------------------------------------------------------------------
import { useEffect, useMemo, useState } from "react";
import {
  KA_DEFAULT_WEIGHTS, KaScoresStats, fetchKaScoresStats, kaWeights,
} from "../api";
import { KaScoreCircle } from "../components/KaScoreBadge";

const SCORES: { key: string; nom: string; mesure: string; methode: string }[] = [
  {
    key: "walk", nom: "KA Walk Score", mesure: "Tout faire à pied.",
    methode: "Distance de marche estimée au plus proche de chaque besoin "
      + "quotidien (épicerie, pharmacie, parc, café, école, clinique, garderie, "
      + "dépanneur, gym, bibliothèque), pondérée par son importance — une "
      + "épicerie pèse trois fois plus qu'un gym. Pleine note en deçà d'un "
      + "seuil par catégorie (ex. épicerie ≤ 400 m), décroissance linéaire "
      + "ensuite. Petit bonus quand le choix existe (3 épiceries ou cafés à "
      + "moins de 800 m).",
  },
  {
    key: "transit", nom: "KA Transit Score", mesure: "La desserte en transport collectif.",
    methode: "Deux volets : la distance de marche au plus proche arrêt de bus "
      + "ou station de métro (OpenStreetMap), et la qualité de desserte du "
      + "secteur mesurée par Statistique Canada (base des mesures de "
      + "proximité 2021, percentile canadien). Un territoire sans arrêt à "
      + "distance de marche affiche « Non desservi », pas un 0 brut.",
  },
  {
    key: "bike", nom: "KA Bike Score", mesure: "Le vélo au quotidien.",
    methode: "Kilomètres de voies cyclables (pistes et bandes OSM) à moins "
      + "de 1 km, plus l'accessibilité des besoins quotidiens à distance de "
      + "vélo. Le dénivelé n'est pas encore pris en compte (v1).",
  },
  {
    key: "calme", nom: "KA Calme Score", mesure: "La tranquillité estimée du secteur.",
    methode: "Pénalités décroissantes selon la distance aux sources de bruit "
      + "cartographiées : autoroutes, artères principales, voies ferrées, "
      + "aéroports et héliports, zones industrielles, concentration de bars. "
      + "Bonus pour un parc tout proche. C'est une estimation basée sur "
      + "l'environnement, PAS une mesure sonore.",
  },
  {
    key: "services", nom: "KA Services Score", mesure: "La richesse globale des services.",
    methode: "Comptage pondéré des points d'intérêt par famille — commerces "
      + "(1 km), santé (3 km), éducation (3 km), loisirs (1 km) — avec "
      + "rendement décroissant : passer de 0 à 3 épiceries compte beaucoup "
      + "plus que de 12 à 15.",
  },
];

const NOMS_COURTS: Record<string, string> = {
  walk: "Marche", transit: "Transport", bike: "Vélo",
  calme: "Calme", services: "Services",
};

export default function KaScoresPage() {
  const [stats, setStats] = useState<KaScoresStats | null>(null);
  const [weights, setWeights] = useState<Record<string, number>>(() => kaWeights());

  useEffect(() => {
    fetchKaScoresStats().then(setStats).catch(() => {});
    document.title = "KA Scores — méthodologie | Lou-Ka";
  }, []);

  const somme = useMemo(
    () => Object.values(weights).reduce((a, b) => a + b, 0), [weights]);

  const setW = (k: string, v: number) => {
    const next = { ...weights, [k]: v };
    setWeights(next);
    try { localStorage.setItem("louka_ks_poids", JSON.stringify(next)); } catch { /* privé */ }
  };
  const reset = () => {
    setWeights(KA_DEFAULT_WEIGHTS);
    try { localStorage.removeItem("louka_ks_poids"); } catch { /* privé */ }
  };

  return (
    <div className="container page-doc">
      <section className="hero hero-doc">
        <span className="kicker">Transparence</span>
        <h1>Comment sont calculés les <span className="hl">KA Scores</span> ?</h1>
        <p className="lede">
          Cinq scores maison de 0 à 100 évaluent l'emplacement de chaque
          logement : marche, transport collectif, vélo, calme et services.
          Voici exactement comment — méthode, sources et limites.
        </p>
        {stats && (
          <div className="stat-row">
            <span className="stat-chip">
              <b>{stats.couverture_pct.toLocaleString("fr-CA")} %</b> du parc scoré
              ({stats.avec_score.toLocaleString("fr-CA")} annonces)
            </span>
            {stats.moyennes.global?.moyenne != null && (
              <span className="stat-chip">
                score global moyen <b>{stats.moyennes.global.moyenne}</b>
              </span>
            )}
            <span className="stat-chip">barème <b>{stats.version}</b></span>
          </div>
        )}
      </section>

      <div className="ka-demo-circles" aria-hidden="true">
        <KaScoreCircle score={92} nom="Marche" />
        <KaScoreCircle score={74} nom="Transport" />
        <KaScoreCircle score={61} nom="Vélo" />
        <KaScoreCircle score={45} nom="Calme" />
        <KaScoreCircle score={83} nom="Services" />
      </div>

      {SCORES.map((s) => (
        <section className="f-bloc doc-bloc" key={s.key}>
          <h2>{s.nom}</h2>
          <p><b>Ce qu'il mesure :</b> {s.mesure}</p>
          <p>{s.methode}</p>
          {stats?.moyennes[s.key]?.moyenne != null && (
            <p className="fine">
              Moyenne du parc : {stats.moyennes[s.key]!.moyenne} —{" "}
              {stats.moyennes[s.key]!.n.toLocaleString("fr-CA")} immeubles évalués.
            </p>
          )}
        </section>
      ))}

      <section className="f-bloc doc-bloc" id="priorites">
        <h2>Vos priorités, votre score</h2>
        <p>
          Le KA Score global affiché partout est une moyenne pondérée des cinq
          scores. Réglez ici ce qui compte pour <em>vous</em> — les fiches
          afficheront votre score personnalisé à côté du score standard.
          Ces réglages restent sur votre appareil.
        </p>
        <div className="ka-poids">
          {Object.keys(KA_DEFAULT_WEIGHTS).map((k) => (
            <label key={k} className="ka-poids-row">
              <span>{NOMS_COURTS[k]}</span>
              <input
                type="range" min={0} max={50} step={5}
                value={Math.round((weights[k] ?? 0) * 100)}
                onChange={(e) => setW(k, Number(e.target.value) / 100)}
                aria-label={`Importance de ${NOMS_COURTS[k]}`}
              />
              <b>{Math.round(((weights[k] ?? 0) / (somme || 1)) * 100)} %</b>
            </label>
          ))}
        </div>
        <button className="btn btn-ghost" onClick={reset}>
          Revenir aux pondérations standard
        </button>
      </section>

      <section className="f-bloc doc-bloc">
        <h2>Sources, honnêteté et limites</h2>
        <ul className="doc-liste">
          <li>
            <b>Sources :</b> points d'intérêt, routes, rails et voies cyclables
            © contributeurs <a href="https://www.openstreetmap.org/copyright"
            target="_blank" rel="noreferrer">OpenStreetMap</a> (ODbL) ;
            desserte en transport : Base de données des mesures de proximité,
            Statistique Canada (2021).
          </li>
          <li>
            <b>Distances :</b> à vol d'oiseau multipliées par 1,3 (facteur
            réseau usuel) — pas un routage piéton exact.
          </li>
          <li>
            <b>Données insuffisantes :</b> un secteur mal cartographié (zone
            rurale) affiche « Données insuffisantes » plutôt qu'un score
            trompeur ; un territoire sans transport collectif affiche
            « Non desservi ».
          </li>
          <li>
            <b>Cohérence :</b> les scores sont calculés par immeuble ; deux
            logements du même immeuble partagent exactement les mêmes scores.
          </li>
          <li>
            <b>Versionnage :</b> le barème est versionné ; tout changement de
            méthode recalcule l'ensemble du parc et la date de calcul est
            affichée sur chaque fiche.
          </li>
        </ul>
      </section>
    </div>
  );
}