// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/TrueCostCard.tsx : « Coût réel mensuel » — loyer + frais non inclus,
//   chaque poste étiqueté (inclus / observé / estimé / inconnu), total et
//   annuel, prix au pi² avec percentile réellement calculé, estimation
//   Hydro-Québec (cache ; bouton pour lancer le calcul à la demande).
// -----------------------------------------------------------------------------
import { useState } from "react";
import { CoutReel, HydroEstimate, fetchHydro, fmtPrice } from "../api";
import { IcoBolt2, IcoWallet } from "../components/Icons";
import { Accordion, ErrorState, SectionCard, SkeletonLines, NBSP } from "./ui";
import { Res } from "./useFicheData";

const ST: Record<string, string> = { included: "inclus", observed: "observé", estimated: "estimé", unknown: "inconnu", calculated: "calculé", inferred: "estimé" };

export default function TrueCostCard({ cout, hydro, adresse, uid, lat, lng, onRetry }: {
  cout: Res<CoutReel>; hydro: Res<HydroEstimate>; adresse: string; uid: string;
  lat: number | null; lng: number | null; onRetry: () => void;
}) {
  const [h, setH] = useState<HydroEstimate | null>(null);
  const [busy, setBusy] = useState(false);
  const d = cout.status === "ok" ? cout.data : null;
  const hy = h ?? (hydro.status === "ok" ? hydro.data : null);
  const hydroVisible = hy && (hy.disponible || hy.en_attente || !/captcha|configuré|incomplète/.test(hy.raison || ""));
  if (cout.status === "na" || (d && d.loyer == null)) return null;

  const lancer = () => {
    setBusy(true);
    fetchHydro(adresse, { uid, lat, lng }, true).then(setH).catch(() => {}).finally(() => setBusy(false));
  };

  return (
    <SectionCard id="cout" title="Coût réel mensuel" icon={<IcoWallet size={18} />}
                 sub="Loyer + frais non inclus, chaque poste avec son statut">
      {cout.status === "loading" && <SkeletonLines n={4} />}
      {cout.status === "error" && <ErrorState onRetry={onRetry}>Calcul du coût réel temporairement indisponible.</ErrorState>}
      {d && (
        <>
          <ul className="lk-cost">
            {d.lignes.map((li) => (
              <li key={li.poste}>
                <span className="n">{li.poste}<span className={`lk-pill ${li.statut in ST ? (li.statut === "inferred" || li.statut === "calculated" ? "estimated" : li.statut) : "unknown"}`}>{ST[li.statut] ?? li.statut}</span></span>
                <span className={`v ${li.montant == null ? "na" : ""}`}>
                  {li.montant != null && li.montant > 0 && fmtPrice(li.montant)}
                  {li.montant === 0 && li.statut === "included" && `0${NBSP}$`}
                  {li.montant == null && "—"}
                </span>
              </li>
            ))}
            {d.total_estime != null && (
              <li className="total"><span className="n">Total estimé</span><span className="v">≈{NBSP}{fmtPrice(d.total_estime)}{NBSP}/mois</span></li>
            )}
            {d.annuel_estime != null && (
              <li className="annuel"><span className="n">soit sur 12 mois</span><span className="v">≈{NBSP}{fmtPrice(d.annuel_estime)}</span></li>
            )}
          </ul>
          {d.postes_inconnus.length > 0 && (
            <p className="lk-cost-note">Non chiffrables avec les données publiées : {d.postes_inconnus.join(", ").toLowerCase()} — le total réel peut être plus élevé.</p>
          )}
          {d.pi2 && (
            <p className="lk-cost-note">
              <b>{d.pi2.valeur.toFixed(2).replace(".", ",")}{NBSP}$/pi²</b>
              {d.pi2.percentile_secteur != null && <> — moins cher que <b>{100 - d.pi2.percentile_secteur}{NBSP}%</b> des {d.pi2.n_secteur} logements comparables du secteur (~2{NBSP}km)</>}
              {d.pi2.percentile_secteur == null && d.pi2.percentile_ville != null && <> — moins cher que <b>{100 - d.pi2.percentile_ville}{NBSP}%</b> des {d.pi2.n_ville} comparables ({d.pi2.portee_ville})</>}
              {d.pi2.percentile_note && <> {d.pi2.percentile_note}</>}
            </p>
          )}
          {hydroVisible && hy && (
            <div className="lk-note info" style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <IcoBolt2 size={16} />
              {hy.disponible ? (
                <span><b>Électricité : {fmtPrice(hy.cout_mensuel!)}{NBSP}/mois</b> (≈{NBSP}{fmtPrice(hy.cout_annuel!)}{NBSP}/an{hy.kwh_annuel ? `, ${hy.kwh_annuel.toLocaleString("fr-CA")} kWh` : ""}) — estimation Hydro-Québec fondée sur la consommation réelle du logement.</span>
              ) : hy.en_attente ? (
                <>
                  <span style={{ flex: 1 }}>Estimation Hydro-Québec du coût d'électricité disponible à la demande.</span>
                  <button type="button" className="lk-btn lk-btn-ghost" style={{ minHeight: 38 }} onClick={lancer} disabled={busy}>
                    {busy ? "Estimation en cours…" : "Estimer"}
                  </button>
                </>
              ) : (
                <span>Hydro-Québec n'a pas d'estimation pour cette adresse.</span>
              )}
            </div>
          )}
          <Accordion title="Méthodologie" small><p>{d.methode}</p></Accordion>
        </>
      )}
    </SectionCard>
  );
}