// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/EnvironmentCards.tsx : cartes « Risques » et « Environnement » —
//   · FloodRiskCard : statut clair (BDZI), explication courte, carte officielle,
//     méthodologie et portée juridique intactes dans « En savoir plus » ;
//   · AirQualityCard : verdict + 3 tuiles polluants (couleur sémantique
//     discrète vs repère OMS / RAA), station et année, méthodologie repliée ;
//   · GasNearbyCard : 3 statistiques compactes, 3 stations, « Voir les N ».
// -----------------------------------------------------------------------------
import { useState } from "react";
import { AirNearby, GazNearby, Inondation, fmtDist } from "../api";
import { IcoDroplets, IcoFuel, IcoWind } from "../components/Icons";
import BottomSheet from "./BottomSheet";
import { Accordion, ErrorState, MoreButton, SectionCard, SkeletonLines, SourceLine, StatTile, StatusBadge, Tone, NBSP } from "./ui";
import { Res } from "./useFicheData";

/* --- Risque d'inondation ------------------------------------------------------ */
const ZI_URL = "https://www.quebec.ca/agriculture-environnement-et-ressources-naturelles/eau/zones-inondables-mobilite-rives-littoral/cartographies";

export function FloodRiskCard({ r, onRetry }: { r: Res<Inondation>; onRetry: () => void }) {
  if (r.status === "na") return null;
  const d = r.status === "ok" ? r.data : null;
  let tone: Tone = "neutral", titre = "Données insuffisantes", texte = "";
  if (d) {
    const z = d.zones[0];
    if (d.statut === "en_zone") {
      tone = d.severite === "eleve" ? "bad" : "warn";
      titre = d.severite === "eleve" ? "Risque élevé" : d.severite === "modere" ? "Risque modéré" : "Zone inondable";
      texte = `L'adresse se trouve dans une ${z?.type.toLowerCase() ?? "zone inondable"}${z?.recurrence ? ` (${z.recurrence})` : ""}.`;
    } else if (d.statut === "a_proximite") {
      tone = "warn"; titre = "Zone inondable à proximité";
      texte = `Une ${z?.type.toLowerCase() ?? "zone inondable"} se trouve à environ ${z?.distance_m ?? "—"} m${z?.recurrence ? ` (${z.recurrence})` : ""}.`;
    } else if (d.statut === "hors_zone") {
      tone = "good"; titre = "Hors zone inondable";
      texte = "L'adresse est à l'extérieur des zones inondables cartographiées de ce secteur.";
    } else {
      tone = "neutral"; titre = "Données insuffisantes";
      texte = "Cette adresse n'est pas couverte par la cartographie officielle consultée.";
    }
  }
  return (
    <SectionCard id="risques" title="Risque d'inondation" icon={<IcoDroplets size={18} />}>
      {r.status === "loading" && <SkeletonLines n={2} />}
      {r.status === "error" && <ErrorState onRetry={onRetry}>Base des zones inondables temporairement indisponible.</ErrorState>}
      {d && (
        <>
          <div className="lk-status">
            <StatusBadge tone={tone} lg>{titre}</StatusBadge>
          </div>
          <p className="lk-status-d">{texte}</p>
          {d.zones.length > 1 && (
            <ul className="lk-list" style={{ marginTop: 6 }}>
              {d.zones.slice(1, 4).map((z, i) => (
                <li className="lk-item" key={i} style={{ padding: "6px 0" }}>
                  <div className="lk-item-main"><div className="lk-item-s" style={{ color: "var(--lk-text-2)" }}>{z.type}{z.recurrence ? ` (${z.recurrence})` : ""}</div></div>
                  <div className="lk-item-r"><div className="lk-item-m">{z.distance_m === 0 ? "à l'adresse" : `~${z.distance_m} m`}</div></div>
                </li>
              ))}
            </ul>
          )}
          <a className="lk-btn lk-btn-ghost" href={ZI_URL} target="_blank" rel="noopener noreferrer" style={{ marginTop: 12, width: "100%" }}>
            Voir la carte officielle
          </a>
          <SourceLine name="Gouvernement du Québec (BDZI)" />
          <Accordion title="En savoir plus" small>
            <p>
              Base de données des zones à risque d'inondation (BDZI), gouvernement du Québec — indicatif seulement,
              selon la position géocodée de l'adresse. L'absence de zone dans un secteur non cartographié ne signifie
              pas une absence de risque.{" "}
              <a href={ZI_URL} target="_blank" rel="noopener noreferrer">La cartographie officielle fait foi</a>.
            </p>
          </Accordion>
        </>
      )}
    </SectionCard>
  );
}

/* --- Qualité de l'air ------------------------------------------------------- */
const ORDRE = ["PM2.5", "NO2", "O3", "PST", "PM10", "SO2", "CO"];
const NOMS: Record<string, string> = { "PM2.5": "PM2,5", PST: "PST", PM10: "PM10", NO2: "NO₂", O3: "O₃", SO2: "SO₂", CO: "CO" };
const LONG: Record<string, string> = {
  "PM2.5": "Particules fines", PST: "Particules totales", PM10: "Particules PM10", NO2: "Dioxyde d'azote",
  O3: "Ozone", SO2: "Dioxyde de soufre", CO: "Monoxyde de carbone",
};

export function AirQualityCard({ r, onRetry }: { r: Res<AirNearby>; onRetry: () => void }) {
  if (r.status === "na") return null;
  const d = r.status === "ok" ? r.data : null;
  const pols = d ? ORDRE.filter((p) => d.mesures[p]) : [];
  if (d && (!d.station || pols.length === 0)) return null;
  let tone: Tone = "neutral", verdict = "Mesures disponibles";
  if (d) {
    const pm = d.mesures["PM2.5"];
    if (pm?.ref) {
      const rr = pm.moyenne / pm.ref;
      [tone, verdict] = rr <= 1 ? ["good", "Très bonne"] : rr <= 2 ? ["good", "Bonne"] : rr <= 3 ? ["warn", "Passable"] : ["bad", "Particules élevées"];
    } else if (d.mesures.PST?.ref) {
      [tone, verdict] = d.mesures.PST.moyenne <= d.mesures.PST.ref ? ["good", "Sous la norme"] : ["bad", "Au-dessus de la norme"];
    }
  }
  const annee = d ? Object.values(d.mesures)[0]?.annee : null;
  return (
    <SectionCard id="air" title="Qualité de l'air" icon={<IcoWind size={18} />}
                 aside={d && <StatusBadge tone={tone} lg>{verdict}</StatusBadge>}>
      {r.status === "loading" && <SkeletonLines n={3} />}
      {r.status === "error" && <ErrorState onRetry={onRetry}>Données de qualité de l'air temporairement indisponibles.</ErrorState>}
      {d && (
        <>
          <div className="lk-air">
            {pols.slice(0, 3).map((p) => {
              const m = d.mesures[p];
              const ratio = m.ref ? m.moyenne / m.ref : null;
              const t: Tone = ratio == null ? "neutral" : ratio <= 1 ? "good" : ratio <= 2 ? "warn" : "bad";
              const s = ratio == null ? "sans repère annuel" : ratio <= 1 ? "sous le repère" : ratio <= 1.5 ? "légèrement au-dessus du repère" : `${ratio.toFixed(1).replace(".", ",")}× le repère`;
              return (
                <div className="lk-air-c" key={p} title={LONG[p]}>
                  <div className="lk-air-p">{NOMS[p] ?? p}</div>
                  <div className="lk-air-v">{m.moyenne.toLocaleString("fr-CA")}<small>{m.unite}</small></div>
                  <div className={`lk-air-s ${t}`}>{s}{m.ref_nom && ratio != null ? ` ${m.ref_nom}` : ""}</div>
                </div>
              );
            })}
          </div>
          {pols.length > 3 && (
            <Accordion title={`Autres mesures (${pols.length - 3})`} small>
              <div className="lk-rows">
                {pols.slice(3).map((p) => {
                  const m = d.mesures[p];
                  return (
                    <div className="lk-row" key={p}>
                      <span className="lk-row-name">{LONG[p] ?? p}</span>
                      <span className="lk-row-val">{m.moyenne.toLocaleString("fr-CA")} <small style={{ fontWeight: 500, color: "var(--lk-muted)" }}>{m.unite}</small></span>
                      <span className="lk-row-lbl">{m.ref != null ? `repère ${m.ref}` : ""}</span>
                    </div>
                  );
                })}
              </div>
            </Accordion>
          )}
          <SourceLine name="MELCCFP (RSQAQ)" date={<>station {d.station}{d.distance_km != null ? ` · ${d.distance_km.toLocaleString("fr-CA")} km` : ""}{annee ? ` · données ${annee}` : ""}</>} />
          <Accordion title="Méthodologie" small>
            <p>
              Moyennes annuelles {annee} mesurées à la station <b>{d.station}</b> ({d.ville}, à {d.distance_km} km) du Réseau de
              surveillance de la qualité de l'air du Québec (MELCCFP, données ouvertes). Chaque mesure est située par
              rapport à son repère annuel (lignes directrices OMS 2021, ou norme québécoise RAA pour les PST).
              L'air à l'adresse peut différer localement.
            </p>
          </Accordion>
        </>
      )}
    </SectionCard>
  );
}

/* --- Essence ------------------------------------------------------------------ */
const cents = (v: number | null | undefined) => (v == null ? "—" : `${v.toLocaleString("fr-CA", { minimumFractionDigits: 1 })}${NBSP}¢`);

export function GasNearbyCard({ r, onRetry }: { r: Res<GazNearby>; onRetry: () => void }) {
  const [sheet, setSheet] = useState(false);
  if (r.status === "na" || r.status === "idle") return null;
  const d = r.status === "ok" ? r.data : null;
  if (d && d.stations.length === 0) return null;
  const Row = ({ s, full = false }: { s: GazNearby["stations"][number]; full?: boolean }) => (
    <li className="lk-item">
      <span className="lk-item-ico" aria-hidden="true"><IcoFuel size={17} /></span>
      <div className="lk-item-main">
        <div className="lk-item-t">{s.nom}{s.moins_chere && <span className="lk-item-best">la moins chère</span>}</div>
        <div className="lk-item-s">{fmtDist(s.dist_m)}{full && s.adresse ? ` · ${s.adresse}` : ""}{full ? ` · super ${cents(s.super)} · diesel ${cents(s.diesel)}` : ""}</div>
      </div>
      <div className="lk-item-r">
        <div className="lk-item-v">{cents(s.regulier)}<small style={{ fontWeight: 500, color: "var(--lk-muted)" }}>/L</small></div>
        <div className="lk-item-m">régulier</div>
      </div>
    </li>
  );
  return (
    <SectionCard id="essence" title="Essence" icon={<IcoFuel size={18} />}>
      {r.status === "loading" && <SkeletonLines n={3} />}
      {r.status === "error" && <ErrorState onRetry={onRetry}>Prix de l'essence temporairement indisponibles.</ErrorState>}
      {d && (
        <>
          <div className="lk-kpis cols-3">
            <StatTile accent value={d.min_regulier != null ? d.min_regulier.toLocaleString("fr-CA", { minimumFractionDigits: 1 }) : "—"} unit="¢/L" label="Meilleur prix" />
            <StatTile value={d.mediane_regulier != null ? d.mediane_regulier.toLocaleString("fr-CA", { minimumFractionDigits: 1 }) : "—"} unit="¢/L" label="Médiane du secteur" />
            <StatTile value={d.n} label={`Stations à moins de ${fmtDist(d.rayon_m)}`} />
          </div>
          <ul className="lk-list" style={{ marginTop: 10 }}>
            {d.stations.slice(0, 3).map((s, i) => <Row s={s} key={i} />)}
          </ul>
          {d.stations.length > 3 && <MoreButton onClick={() => setSheet(true)}>Voir les {d.n} stations</MoreButton>}
          <SourceLine name="gazquebec.ca" href="https://gazquebec.ca" date={d.maj ? `mis à jour ${d.maj}` : undefined} />
          <BottomSheet open={sheet} onClose={() => setSheet(false)} title="Stations-service" sub={`${d.n} stations à moins de ${fmtDist(d.rayon_m)} · prix en ¢/L`} tall>
            <ul className="lk-list">{d.stations.map((s, i) => <Row s={s} full key={i} />)}</ul>
          </BottomSheet>
        </>
      )}
    </SectionCard>
  );
}