// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/GestionnaireBloc.tsx: "Who manages this rental?" block (detail)
//   Manager profile (direct source) + Google reputation: real rating
//   distribution, recent average, trend and recurring themes computed over
//   the reviews synced in OUR database (rentka/managers.py) — not just the
//   average Google shows, and zero API calls on load.
//   The Google profile is only shown when the match is confident.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Gestionnaire, fetchGestionnaire } from "../api";

const NBSP = " ";

const SENT_CLS: Record<string, string> = {
  "négatif": "zi-eleve", "neutre": "zi-nc", "positif": "zi-ok",
  "negative": "zi-eleve", "neutral": "zi-nc", "positive": "zi-ok",
};

export default function GestionnaireBloc({ source }: { source: string }) {
  const [d, setD] = useState<Gestionnaire | null>(null);
  useEffect(() => {
    setD(null);
    fetchGestionnaire(source).then(setD).catch(() => setD(null));
  }, [source]);
  // without an associated Google profile, the "Practical details" block is enough
  if (!d || !d.google_maps || d.google_maps.statut === "non_associe") return null;

  const g = d.google_maps;
  const avis = d.avis;
  const 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);

  return (
    <section className="f-bloc f-gest" id="gestionnaire">
      <h2>Who manages this rental?</h2>
      <div className="gest-head">
        <div className="gest-nom">{d.nom}</div>
        <div className="gest-meta">
          {d.annonces_actives}{NBSP}active listing{d.annonces_actives > 1 ? "s" : ""} on Rent-Ka
          {d.site_web && (
            <>
              {" · "}
              <a href={d.site_web} target="_blank" rel="noopener noreferrer">website ↗</a>
            </>
          )}
        </div>
      </div>

      {g.note != null && (
        <div className="gest-google">
          <span className="gest-note">★ {g.note.toFixed(1)}</span>
          <span className="gest-navis">
            {g.nombre_avis}{NBSP}Google reviews — profile “{g.nom}”
          </span>
        </div>
      )}

      {avis && avis.n > 0 && (
        <>
          {dist && total > 0 && (
            <div className="gest-bars" aria-label="Rating distribution (analyzed reviews)">
              {[5, 4, 3, 2, 1].map((n) => {
                const c = dist[String(n)] ?? 0;
                return (
                  <div className="gest-bar" key={n}>
                    <span className="gb-n">{n}★</span>
                    <span className="gb-track">
                      <span className={`gb-fill ${n <= 2 ? "neg" : n >= 4 ? "pos" : ""}`}
                            style={{ width: `${Math.round((100 * c) / total)}%` }} />
                    </span>
                    <span className="gb-c">{c}</span>
                  </div>
                );
              })}
            </div>
          )}
          <div className="gest-stats">
            {avis.moyenne_12m != null && (
              <span>Last 12 months average: <b>{avis.moyenne_12m.toFixed(1)}</b> ({avis.n_12m} reviews)</span>
            )}
            {avis.tendance && (
              <span className={`zi-badge ${avis.tendance === "en amélioration" || avis.tendance === "improving" ? "zi-ok" : avis.tendance === "en dégradation" || avis.tendance === "declining" ? "zi-modere" : "zi-nc"}`}>
                {avis.tendance}
              </span>
            )}
          </div>
          {(avis.plaintes_frequentes?.length ?? 0) > 0 && (
            <div className="gest-themes">
              <span className="k">Recurring complaints in reviews:</span>{" "}
              {avis.plaintes_frequentes!.map((t) => (
                <span className="zi-badge zi-modere" key={t}>{t}</span>
              ))}
            </div>
          )}
          {recents.length > 0 && (
            <details className="gest-avis">
              <summary>Recent review excerpts ({recents.length})</summary>
              {recents.map((a, i) => (
                <blockquote className="gest-citation" key={i}>
                  <span className={`zi-badge ${SENT_CLS[a.analyse.sentiment ?? ""] ?? "zi-nc"}`}>
                    {a.note != null ? `${a.note}★` : "—"}
                  </span>{" "}
                  {a.texte}
                  <footer>
                    {a.date ? new Date(a.date).toLocaleDateString("en-CA", { month: "long", year: "numeric" }) : ""}
                    {a.reponse_proprietaire && " · the manager replied"}
                  </footer>
                </blockquote>
              ))}
            </details>
          )}
        </>
      )}

      <p className="fine">
        Google Maps profile matched automatically ({Math.round((g.confiance_association ?? 0) * 100)}{NBSP}% confidence —{" "}
        {g.methode}). Statistics computed over the {avis?.n ?? 0} reviews
        synced in the Rent-Ka database
        {g.nombre_avis && avis && avis.n < g.nombre_avis
          ? ` (sample of the most recent; Google reports ${g.nombre_avis})`
          : ""}. Themes detected by lexicon — indicative inference, not a
        human reading.
      </p>
    </section>
  );
}