// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/KaScores.tsx: "How are KA Scores calculated?"
//   Public methodology (mandatory scale transparency), live coverage of the
//   inventory, and personal priority settings (the sliders reweight the
//   global KA Score shown on listing pages).
// -----------------------------------------------------------------------------
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: "Doing everything on foot.",
    methode: "Estimated walking distance to the nearest of each daily need "
      + "(grocery, pharmacy, park, café, school, clinic, daycare, convenience "
      + "store, gym, library), weighted by importance — a grocery store weighs "
      + "three times more than a gym. Full marks below a per-category "
      + "threshold (e.g. grocery ≤ 400 m), linear decay afterwards. Small "
      + "bonus when there is choice (3 grocery stores or cafés within 800 m).",
  },
  {
    key: "transit", nom: "KA Transit Score", mesure: "Public transit service.",
    methode: "Two parts: the walking distance to the nearest bus stop or rapid "
      + "transit station (OpenStreetMap), and the area's transit service level "
      + "measured by Statistics Canada (2021 proximity measures database, "
      + "Canadian percentile). An area with no stop within walking distance "
      + "shows \"Not served\", not a raw 0.",
  },
  {
    key: "bike", nom: "KA Bike Score", mesure: "Everyday cycling.",
    methode: "Kilometres of bike lanes (OSM paths and lanes) within 1 km, plus "
      + "the reachability of daily needs at biking distance. Elevation is not "
      + "yet taken into account (v1).",
  },
  {
    key: "calme", nom: "KA Quiet Score", mesure: "The estimated quietness of the area.",
    methode: "Decaying penalties by distance to mapped noise sources: "
      + "highways, main arteries, railways, airports and heliports, industrial "
      + "zones, bar concentrations. Bonus for a park close by. This is an "
      + "environment-based estimate, NOT a sound measurement.",
  },
  {
    key: "services", nom: "KA Services Score", mesure: "The overall richness of services.",
    methode: "Weighted count of points of interest by family — shops (1 km), "
      + "health (3 km), education (3 km), leisure (1 km) — with diminishing "
      + "returns: going from 0 to 3 grocery stores counts much more than from "
      + "12 to 15.",
  },
];

const NOMS_COURTS: Record<string, string> = {
  walk: "Walk", transit: "Transit", bike: "Bike",
  calme: "Quiet", 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 — methodology | Rent-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("rentka_ks_weights", JSON.stringify(next)); } catch { /* private */ }
  };
  const reset = () => {
    setWeights(KA_DEFAULT_WEIGHTS);
    try { localStorage.removeItem("rentka_ks_weights"); } catch { /* private */ }
  };

  return (
    <div className="container page-doc">
      <section className="hero hero-doc">
        <span className="kicker">Transparency</span>
        <h1>How are <span className="hl">KA Scores</span> calculated?</h1>
        <p className="lede">
          Five in-house scores from 0 to 100 rate each rental's location:
          walking, public transit, biking, quiet and services. Here is exactly
          how — method, sources and limits.
        </p>
        {stats && (
          <div className="stat-row">
            <span className="stat-chip">
              <b>{stats.couverture_pct.toLocaleString("en-CA")} %</b> of the inventory scored
              ({stats.avec_score.toLocaleString("en-CA")} listings)
            </span>
            {stats.moyennes.global?.moyenne != null && (
              <span className="stat-chip">
                average global score <b>{stats.moyennes.global.moyenne}</b>
              </span>
            )}
            <span className="stat-chip">scale <b>{stats.version}</b></span>
          </div>
        )}
      </section>

      <div className="ka-demo-circles" aria-hidden="true">
        <KaScoreCircle score={92} nom="Walk" />
        <KaScoreCircle score={74} nom="Transit" />
        <KaScoreCircle score={61} nom="Bike" />
        <KaScoreCircle score={45} nom="Quiet" />
        <KaScoreCircle score={83} nom="Services" />
      </div>

      {SCORES.map((s) => (
        <section className="f-bloc doc-bloc" key={s.key}>
          <h2>{s.nom}</h2>
          <p><b>What it measures:</b> {s.mesure}</p>
          <p>{s.methode}</p>
          {stats?.moyennes[s.key]?.moyenne != null && (
            <p className="fine">
              Inventory average: {stats.moyennes[s.key]!.moyenne} —{" "}
              {stats.moyennes[s.key]!.n.toLocaleString("en-CA")} buildings rated.
            </p>
          )}
        </section>
      ))}

      <section className="f-bloc doc-bloc" id="priorites">
        <h2>Your priorities, your score</h2>
        <p>
          The global KA Score shown everywhere is a weighted average of the
          five scores. Set here what matters to <em>you</em> — listing pages
          will show your personalized score next to the standard one.
          These settings stay on your device.
        </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 of ${NOMS_COURTS[k]}`}
              />
              <b>{Math.round(((weights[k] ?? 0) / (somme || 1)) * 100)} %</b>
            </label>
          ))}
        </div>
        <button className="btn btn-ghost" onClick={reset}>
          Back to standard weights
        </button>
      </section>

      <section className="f-bloc doc-bloc">
        <h2>Sources, honesty and limits</h2>
        <ul className="doc-liste">
          <li>
            <b>Sources:</b> points of interest, roads, rails and bike lanes
            © <a href="https://www.openstreetmap.org/copyright"
            target="_blank" rel="noreferrer">OpenStreetMap</a> contributors
            (ODbL); transit service: Proximity Measures Database, Statistics
            Canada (2021).
          </li>
          <li>
            <b>Distances:</b> straight-line multiplied by 1.3 (usual network
            factor) — not exact pedestrian routing.
          </li>
          <li>
            <b>Insufficient data:</b> a poorly mapped area (rural zone) shows
            "Insufficient data" rather than a misleading score; an area with
            no public transit shows "Not served".
          </li>
          <li>
            <b>Consistency:</b> scores are computed per building; two rentals
            in the same building share exactly the same scores.
          </li>
          <li>
            <b>Versioning:</b> the scale is versioned; any method change
            recomputes the whole inventory and the computation date is shown
            on every listing page.
          </li>
        </ul>
      </section>
    </div>
  );
}