// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/BuildingDossier.tsx : « Dossier de l'immeuble » — toutes les données
//   d'intelligence locative en accordéons compacts (aucune n'est supprimée) :
//   historique Lou-Ka + vies antérieures, passeport de l'immeuble, gestionnaire
//   (réputation Google analysée), historique au TAL (SOQUIJ), vie en hiver.
//   Chaque volet affiche un état vide propre quand la donnée manque.
// -----------------------------------------------------------------------------
import {
  Gestionnaire, Hiver, HistoriqueLouka, Immeuble, Recyclees, TalHistory, fmtPrice, sourceName,
} from "../api";
import { IcoBuilding, IcoShield, IcoSnow, IcoUser } from "../components/Icons";
import { Accordion, SectionCard, SkeletonLines, StatTile, StatusBadge, Tone, NBSP } from "./ui";
import { Res } from "./useFicheData";

const NBSP_ = NBSP;
const fmtTs = (ts: number | null | undefined, m: "short" | "long" = "short") =>
  ts ? new Date(ts * 1000).toLocaleDateString("fr-CA", m === "short" ? { day: "numeric", month: "short", year: "numeric" } : { month: "long", year: "numeric" }) : "—";
const EVENT: Record<string, string> = {
  description: "Description modifiée", superficie: "Superficie modifiée", dispo: "Disponibilité modifiée",
  inclusions: "Inclusions modifiées", photos: "Photos modifiées", disparition: "Annonce retirée", reapparition: "Annonce republiée",
};

function Vide({ children }: { children: React.ReactNode }) { return <p style={{ color: "var(--lk-muted)", margin: 0 }}>{children}</p>; }

function Historique({ r, rec }: { r: Res<HistoriqueLouka>; rec: Res<Recyclees> }) {
  if (r.status === "loading" || r.status === "idle") return <SkeletonLines n={3} />;
  const d = r.status === "ok" ? r.data : null;
  if (!d) return <Vide>Historique indisponible pour cette annonce.</Vide>;
  const items = d.timeline.slice(0, 12);
  const matches = rec.status === "ok" ? rec.data.matches : [];
  const var_ = d.variation != null ? `${d.variation > 0 ? "+" : "−"}${Math.abs(Math.round(d.variation * 100))}${NBSP_}%` : null;
  return (
    <>
      <div className="lk-kpis cols-3" style={{ marginBottom: 10 }}>
        <StatTile value={fmtTs(d.premiere_observation)} label="Suivie depuis" anim={false} />
        <StatTile value={`${d.jours_en_ligne}${NBSP_}j`} label="En ligne" anim={false} />
        <StatTile value={d.modifications} label="Modifications observées" anim={false} />
      </div>
      {d.prix_initial != null && d.prix_actuel != null && d.prix_initial !== d.prix_actuel && (
        <p style={{ margin: "0 0 8px" }}>Prix initial {fmtPrice(d.prix_initial)} → <b>{fmtPrice(d.prix_actuel)}</b>{var_ ? ` (${var_})` : ""}</p>
      )}
      {items.length > 0 ? (
        <ul className="lk-tl">
          {items.map((it, i) => (
            <li key={`${it.ts}-${it.type}-${i}`} className={it.type}>
              <span className="lk-tl-date">{fmtTs(it.ts)}</span>
              {it.type === "prix"
                ? (it.prix_avant != null
                    ? <>Prix {it.prix_avant > (it.prix ?? 0) ? "baissé" : "monté"} de {fmtPrice(it.prix_avant)} à <b>{fmtPrice(it.prix ?? null)}</b></>
                    : <>Premier prix observé : <b>{fmtPrice(it.prix ?? null)}</b></>)
                : (EVENT[it.type] ?? it.type)}
            </li>
          ))}
        </ul>
      ) : <Vide>Aucune modification observée depuis la première synchronisation.</Vide>}
      {matches.length > 0 && (
        <div style={{ marginTop: 12 }}>
          <b style={{ fontSize: 13 }}>Vies antérieures probables de ce logement</b>
          {matches.slice(0, 3).map((m) => (
            <div key={m.uid} className="lk-quote" style={{ borderLeftColor: "var(--lk-orange)" }}>
              <StatusBadge tone="warn">republication probable · {m.confiance}{NBSP_}%</StatusBadge>{" "}
              {m.prix != null && <>affiché {fmtPrice(m.prix)}</>}{m.derniere_observation != null && <> jusqu'en {fmtTs(m.derniere_observation, "long")}</>}
              <footer>{m.signaux.join(" · ")}</footer>
            </div>
          ))}
          <p className="lk-fine">{rec.status === "ok" ? rec.data.methode : ""} — inférence, sans fusion automatique.</p>
        </div>
      )}
      <p className="lk-fine">{d.methode}</p>
    </>
  );
}

function Passeport({ im }: { im: Immeuble | null }) {
  if (!im || im.annonces_total < 2)
    return <Vide>Une seule annonce observée pour cet immeuble : pas encore de passeport (unités, rotation, pression sur les loyers).</Vide>;
  const rot = im.rotation, pres = im.pression_loyers;
  const ROT: Record<string, Tone> = { faible: "good", normale: "neutral", "élevée": "warn", "très élevée": "bad" };
  return (
    <>
      <div className="lk-kpis" style={{ marginBottom: 10 }}>
        <StatTile value={im.annonces_total} label={`Annonces observées · ${im.annonces_actives} active${im.annonces_actives > 1 ? "s" : ""}`} anim={false} />
        <StatTile value={`≥${NBSP_}${im.unites_estimees}`} label="Unités estimées" anim={false} />
        {im.loyer_median != null && <StatTile value={fmtPrice(im.loyer_median)} label="Loyer médian (actives)" anim={false} />}
        {im.pi2_median != null && <StatTile value={`${im.pi2_median.toFixed(2).replace(".", ",")}${NBSP_}$`} label="Médiane $/pi²" anim={false} />}
      </div>
      {im.loyer_median_par_cc && Object.keys(im.loyer_median_par_cc).length > 0 && (
        <p style={{ margin: "0 0 8px" }}>Par nombre de chambres : {Object.entries(im.loyer_median_par_cc).map(([cc, v]) => `${cc}${NBSP_}ch. ${fmtPrice(v)}`).join(" · ")}</p>
      )}
      <div className="lk-status" style={{ marginBottom: 6 }}>
        <span>Rotation</span>
        {rot.statut === "calculated"
          ? <><StatusBadge tone={ROT[rot.classe ?? ""] ?? "neutral"}>{rot.classe}</StatusBadge><small style={{ color: "var(--lk-muted)" }}>{rot.annonces_12m} annonce{(rot.annonces_12m ?? 0) > 1 ? "s" : ""} / 12 mois pour ≥{NBSP_}{rot.unites_estimees} unités</small></>
          : <StatusBadge tone="neutral">données insuffisantes</StatusBadge>}
      </div>
      <div className="lk-status">
        <span>Pression sur les loyers</span>
        {pres
          ? <><StatusBadge tone={pres.variation_12m > 0.05 ? "warn" : pres.variation_12m < -0.02 ? "good" : "neutral"}>{pres.variation_12m > 0 ? "+" : "−"}{Math.abs(Math.round(pres.variation_12m * 100))}{NBSP_}% sur 12 mois</StatusBadge>
             <small style={{ color: "var(--lk-muted)" }}>médiane d'entrée {fmtPrice(pres.mediane_12_24m)} → {fmtPrice(pres.mediane_12m)}</small></>
          : <StatusBadge tone="neutral">échantillon insuffisant</StatusBadge>}
      </div>
      <p className="lk-fine">Immeuble suivi par Lou-Ka depuis {fmtTs(im.premiere_observation, "long")} — {rot.statut === "calculated" && rot.methode ? rot.methode : "indicateurs calculés uniquement sur les annonces observées par les synchronisations Lou-Ka (pas un recensement du bâtiment)."}</p>
    </>
  );
}

function GestionnaireVue({ r, source }: { r: Res<Gestionnaire>; source: string }) {
  if (r.status === "loading" || r.status === "idle") return <SkeletonLines n={3} />;
  const d = r.status === "ok" ? r.data : null;
  if (!d) return <Vide>Gestionnaire : <b>{sourceName(source)}</b>. Aucune fiche de réputation associée.</Vide>;
  const g = d.google_maps, avis = d.avis, dist = avis?.distribution;
  const total = dist ? Object.values(dist).reduce((a, b) => a + b, 0) : 0;
  const recents = (d.avis_recents ?? []).filter((a) => a.texte).slice(0, 3);
  const SENT: Record<string, Tone> = { "négatif": "bad", neutre: "neutral", positif: "good" };
  return (
    <>
      <p style={{ margin: "0 0 8px" }}>
        <b style={{ fontSize: 15 }}>{d.nom ?? sourceName(source)}</b> — {d.annonces_actives}{NBSP_}annonce{d.annonces_actives > 1 ? "s" : ""} active{d.annonces_actives > 1 ? "s" : ""} sur Lou-Ka
        {d.site_web && <> · <a href={d.site_web} target="_blank" rel="noopener noreferrer">site web ↗</a></>}
      </p>
      {g && g.statut !== "non_associe" && g.note != null ? (
        <>
          <div className="lk-status" style={{ marginBottom: 8 }}>
            <span className="lk-star">★ {g.note.toFixed(1).replace(".", ",")}</span>
            <small style={{ color: "var(--lk-muted)" }}>{g.nombre_avis}{NBSP_}avis Google — fiche «{NBSP_}{g.nom}{NBSP_}»</small>
            {avis?.tendance && <StatusBadge tone={avis.tendance === "en amélioration" ? "good" : avis.tendance === "en dégradation" ? "warn" : "neutral"}>{avis.tendance}</StatusBadge>}
          </div>
          {dist && total > 0 && (
            <div className="lk-rows" aria-label="Distribution des notes analysées">
              {[5, 4, 3, 2, 1].map((n) => {
                const c = dist[String(n)] ?? 0;
                return (
                  <div className="lk-row" key={n}>
                    <span className="lk-row-name">{n}★</span>
                    <span className="lk-row-bar" aria-hidden="true"><i className={n <= 2 ? "bad" : n >= 4 ? "good" : ""} style={{ width: `${Math.round((100 * c) / total)}%` }} /></span>
                    <span className="lk-row-val">{c}</span>
                  </div>
                );
              })}
            </div>
          )}
          {avis?.moyenne_12m != null && <p style={{ margin: "8px 0 0" }}>Moyenne des 12 derniers mois : <b>{avis.moyenne_12m.toFixed(1).replace(".", ",")}</b> ({avis.n_12m} avis)</p>}
          {(avis?.plaintes_frequentes?.length ?? 0) > 0 && (
            <div className="lk-tags" style={{ marginTop: 8 }}>
              <span style={{ fontSize: 12.5, color: "var(--lk-text-2)" }}>Plaintes récurrentes :</span>
              {avis!.plaintes_frequentes!.map((t) => <span className="lk-tag" key={t}>{t}</span>)}
            </div>
          )}
          {recents.map((a, i) => (
            <blockquote className="lk-quote" key={i}>
              <StatusBadge tone={SENT[a.analyse.sentiment ?? ""] ?? "neutral"}>{a.note != null ? `${a.note}★` : "—"}</StatusBadge>{" "}{a.texte}
              <footer>{a.date ? new Date(a.date).toLocaleDateString("fr-CA", { month: "long", year: "numeric" }) : ""}{a.reponse_proprietaire && " · le gestionnaire a répondu"}</footer>
            </blockquote>
          ))}
          <p className="lk-fine">
            Fiche Google Maps associée automatiquement (confiance {Math.round((g.confiance_association ?? 0) * 100)}{NBSP_}% — {g.methode}). Statistiques calculées sur les {avis?.n ?? 0} avis synchronisés dans la base Lou-Ka
            {g.nombre_avis && avis && avis.n < g.nombre_avis ? ` (échantillon des plus récents ; Google en annonce ${g.nombre_avis})` : ""}. Thèmes détectés par lexique — inférence indicative.
          </p>
        </>
      ) : <Vide>Aucune fiche Google associée avec confiance à ce gestionnaire.</Vide>}
    </>
  );
}

function Tal({ r }: { r: Res<TalHistory> }) {
  if (r.status === "loading" || r.status === "idle") return <SkeletonLines n={2} />;
  const d = r.status === "ok" ? r.data : null;
  if (!d || d.status === "na" || d.status === "error") return <Vide>Vérification au Tribunal administratif du logement non disponible pour cette adresse.</Vide>;
  const fmt = (s: string | null) => { if (!s) return "—"; const dt = new Date(s + "T00:00:00"); return Number.isNaN(dt.getTime()) ? s : dt.toLocaleDateString("fr-CA", { month: "long", year: "numeric" }); };
  const decisions = d.decisions ?? [];
  return (
    <>
      {d.status === "pending" && <p style={{ margin: 0 }}><StatusBadge tone="neutral">Vérification en cours</StatusBadge> Adresse en file de vérification auprès des décisions publiées du TAL.</p>}
      {d.status === "ok" && decisions.length === 0 && <p style={{ margin: 0 }}><StatusBadge tone="good">Aucune décision trouvée</StatusBadge> Aucune décision publiée du TAL repérée à cette adresse.</p>}
      {d.status === "ok" && decisions.length > 0 && (
        <>
          <p style={{ margin: "0 0 8px" }}>
            <StatusBadge tone={(d.eviction ?? 0) > 0 || (d.contre_locataire ?? 0) > 0 ? "warn" : "neutral"}>{d.n} décision{(d.n ?? 0) > 1 ? "s" : ""}</StatusBadge>{" "}
            {d.contre_locataire ? `dont ${d.contre_locataire} à l'initiative du propriétaire` : "aucune à l'initiative du propriétaire"}{d.last_date ? ` — la plus récente : ${fmt(d.last_date)}` : ""}.
          </p>
          <ul className="lk-list">
            {decisions.slice(0, 8).map((dec) => (
              <li className="lk-item" key={dec.url} style={{ alignItems: "flex-start" }}>
                <div className="lk-item-main">
                  <div className="lk-item-t">{fmt(dec.date)}{dec.demandeur ? ` · demande du ${dec.demandeur}` : ""}{dec.verdict ? ` · ${dec.verdict}` : ""}</div>
                  {dec.tags.length > 0 && <div className="lk-tags">{dec.tags.map((t) => <span className="lk-tag" key={t}>{t}</span>)}</div>}
                  <a href={dec.url} target="_blank" rel="noopener noreferrer" className="lk-item-s" style={{ display: "inline-block", marginTop: 3 }}>{dec.citation || "Texte intégral"} — SOQUIJ</a>
                </div>
              </li>
            ))}
          </ul>
        </>
      )}
      <p className="lk-fine">
        Décisions publiques du <a href="https://www.tal.gouv.qc.ca/" target="_blank" rel="noopener noreferrer">Tribunal administratif du logement</a>, diffusées par SOQUIJ et repérées par
        correspondance d'adresse — vérification automatisée, indicative, sans valeur juridique ; une décision peut concerner un autre logement du même immeuble. Aucun nom de partie n'est affiché.
      </p>
    </>
  );
}

function HiverVue({ h }: { h: Hiver | null }) {
  if (!h) return <Vide>Score hiver non calculable (commodités de proximité inconnues pour cette adresse).</Vide>;
  const CLS: Record<string, Tone> = { "très pratique": "good", pratique: "good", exigeant: "warn", difficile: "bad" };
  return (
    <>
      <div className="lk-status" style={{ marginBottom: 8 }}>
        <span className="lk-market-big" style={{ fontSize: 26 }}>{h.score}<small>/ 100</small></span>
        <StatusBadge tone={CLS[h.classe] ?? "neutral"} lg>{h.classe}</StatusBadge>
        <small style={{ color: "var(--lk-muted)" }}>quotidien à pied, même à −20{NBSP_}°C</small>
      </div>
      <div className="lk-rows">
        {h.detail.map((c) => (
          <div className="lk-row" key={c.critere}>
            <span className="lk-row-name">{c.critere}<small>{c.distance_m != null ? ` ≈ ${c.minutes} min à pied${c.nom ? ` (${c.nom})` : ""}` : c.note ? ` ${c.note}` : ""}</small></span>
            <span className="lk-row-bar" aria-hidden="true"><i style={{ width: `${c.score}%` }} /></span>
            <span className="lk-row-val">{c.score}</span>
          </div>
        ))}
      </div>
      <p className="lk-fine">{h.methode}</p>
    </>
  );
}

export default function BuildingDossier({ source, immeuble, hiver, historique, recyclees, tal, gestionnaire }: {
  source: string; immeuble: Immeuble | null; hiver: Hiver | null;
  historique: Res<HistoriqueLouka>; recyclees: Res<Recyclees>; tal: Res<TalHistory>; gestionnaire: Res<Gestionnaire>;
}) {
  const talOk = tal.status === "ok" ? tal.data : null;
  const talMeta = talOk?.status === "ok" ? (talOk.n ? `${talOk.n} décision${talOk.n > 1 ? "s" : ""}` : "aucune") : talOk?.status === "pending" ? "en cours" : undefined;
  const histo = historique.status === "ok" ? historique.data : null;
  return (
    <SectionCard id="dossier" title="Dossier de l'immeuble" icon={<IcoBuilding size={18} />}
                 sub="Ce que Lou-Ka observe réellement : historique, immeuble, gestionnaire, litiges, hiver">
      <Accordion title={<><IcoBuilding size={15} style={{ verticalAlign: -2, marginRight: 8, color: "var(--lk-muted)" }} />Historique Lou-Ka</>}
                 meta={histo ? `${histo.jours_en_ligne}${NBSP_}j en ligne` : undefined}>
        <Historique r={historique} rec={recyclees} />
      </Accordion>
      <Accordion title={<><IcoBuilding size={15} style={{ verticalAlign: -2, marginRight: 8, color: "var(--lk-muted)" }} />Passeport de l'immeuble</>}
                 meta={immeuble && immeuble.annonces_total >= 2 ? `${immeuble.annonces_total} annonces` : undefined}>
        <Passeport im={immeuble} />
      </Accordion>
      <Accordion title={<><IcoUser size={15} style={{ verticalAlign: -2, marginRight: 8, color: "var(--lk-muted)" }} />Qui gère ce logement ?</>}
                 meta={gestionnaire.status === "ok" && gestionnaire.data.google_maps?.note != null ? `★ ${gestionnaire.data.google_maps.note.toFixed(1).replace(".", ",")}` : sourceName(source)}>
        <GestionnaireVue r={gestionnaire} source={source} />
      </Accordion>
      <Accordion title={<><IcoShield size={15} style={{ verticalAlign: -2, marginRight: 8, color: "var(--lk-muted)" }} />Historique au TAL</>} meta={talMeta}>
        <Tal r={tal} />
      </Accordion>
      <Accordion title={<><IcoSnow size={15} style={{ verticalAlign: -2, marginRight: 8, color: "var(--lk-muted)" }} />Vie quotidienne en hiver</>}
                 meta={hiver ? `${hiver.score}/100 · ${hiver.classe}` : undefined}>
        <HiverVue h={hiver} />
      </Accordion>
    </SectionCard>
  );
}