// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyQuickFacts.tsx : « La propriété » — grille compacte icône +
//   valeur + libellé (type, chambres, salles de bain, salles d'eau, superficie,
//   terrain, année, stationnement, MLS), rangées pratiques (agence, courtier,
//   en ligne depuis, synchronisé), puis TOUTES les caractéristiques publiées
//   par la source et le tableau des pièces en accordéons (aucune donnée
//   supprimée par rapport à la fiche v2).
// -----------------------------------------------------------------------------
import { ReactNode } from "react";
import { Listing, Room, fmtArea, fmtPrice, sourceName } from "../api";
import { Ico } from "../components/Icons";
import { Accordion, SectionCard, NBSP, relTime } from "./ui";

// clés techniques de `details` jamais montrées dans « Caractéristiques »
const DETAIL_HIDDEN = new Set([
  "pieces", "price_from", "cover_thumb", "photo_captions", "img_audited",
  "needs_image_review", "postal_code", "region", "transaction",
  "prix_pi2", "prix_m2", "listing_origin_url", "listed_at",
]);
// clés déjà représentées dans la grille (évite le doublon dans le tableau)
const IN_GRID = new Set(["Type de propriété", "Année de construction", "Superficie habitable", "Superficie du terrain", "Stationnement (total)"]);

export default function PropertyQuickFacts({ l }: { l: Listing }) {
  const d = l.details ?? {};
  const facts: { ico: ReactNode; v: string; l: string }[] = [];
  if (l.property_type) facts.push({ ico: <Ico name="home" size={17} />, v: l.property_type, l: "Type" });
  if (l.bedrooms != null) facts.push({ ico: <Ico name="bed" size={17} />, v: `${Math.round(l.bedrooms)}`, l: `Chambre${l.bedrooms > 1 ? "s" : ""}` });
  if (l.bathrooms != null) facts.push({ ico: <Ico name="bath" size={17} />, v: `${l.bathrooms}`, l: `Salle${l.bathrooms > 1 ? "s" : ""} de bain` });
  if (l.powder_rooms != null && l.powder_rooms > 0) facts.push({ ico: <Ico name="drop" size={17} />, v: `${l.powder_rooms}`, l: `Salle${l.powder_rooms > 1 ? "s" : ""} d'eau` });
  if (l.area_sqft != null) facts.push({ ico: <Ico name="area" size={17} />, v: fmtArea(l.area_sqft)!, l: "Superficie habitable" });
  if (l.lot_sqft != null) facts.push({ ico: <Ico name="land" size={17} />, v: fmtArea(l.lot_sqft)!, l: "Terrain" });
  if (l.year_built != null) facts.push({ ico: <Ico name="calendar" size={17} />, v: String(l.year_built), l: "Année de construction" });
  const park = d["Stationnement (total)"] ?? d["Stationnement"];
  if (park != null && String(park).trim()) facts.push({ ico: <Ico name="car" size={17} />, v: String(park), l: "Stationnement" });
  const pieces = d["Nb de pièces"];
  if (pieces != null && String(pieces).trim()) facts.push({ ico: <Ico name="layers" size={17} />, v: String(pieces), l: "Pièces" });
  if (l.mls) facts.push({ ico: <Ico name="tag" size={17} />, v: l.mls, l: "Nº Centris / MLS" });

  const enLigne = l.days_on_market ?? (l.first_seen ? Math.max(0, Math.round((Date.now() / 1000 - l.first_seen) / 86400)) : null);
  const rows: [string, ReactNode][] = [["Agence / source", sourceName(l.source)]];
  if (l.agency && l.agency !== sourceName(l.source)) rows.push(["Bannière", l.agency]);
  if (l.broker_name) rows.push(["Courtier inscripteur", l.broker_name]);
  if (l.broker_phone) rows.push(["Téléphone", <a href={`tel:${l.broker_phone.replace(/\s/g, "")}`}>{l.broker_phone}</a>]);
  if (l.price_label && l.price != null && l.price_label.replace(/\s/g, "") !== fmtPrice(l.price).replace(/\s/g, ""))
    rows.push(["Prix affiché par la source", l.price_label]);
  if (enLigne != null) rows.push(["En ligne sur Immo-Ka", enLigne === 0 ? "depuis aujourd'hui" : `depuis ${enLigne}${NBSP}jour${enLigne > 1 ? "s" : ""}`]);
  const maj = relTime(l.updated_at);
  if (maj) rows.push(["Synchronisé", maj]);

  const detEntries = Object.entries(d)
    .filter(([k, v]) => !DETAIL_HIDDEN.has(k) && !IN_GRID.has(k) && (typeof v === "string" || typeof v === "number") && String(v).trim());
  const rooms: Room[] = Array.isArray(d.pieces) ? (d.pieces as Room[]) : [];

  if (facts.length === 0 && rows.length <= 1 && detEntries.length === 0 && rooms.length === 0) return null;

  return (
    <SectionCard id="propriete" title="La propriété">
      {facts.length > 0 && (
        <div className="ik-facts" role="list">
          {facts.map((x) => (
            <div className="ik-fact" role="listitem" key={x.l + x.v}>
              <span className="ik-fact-ico" aria-hidden="true">{x.ico}</span>
              <span className="ik-fact-txt">
                <div className="ik-fact-v" title={x.v}>{x.v}</div>
                <div className="ik-fact-l">{x.l}</div>
              </span>
            </div>
          ))}
        </div>
      )}
      <div className="ik-facts-rows">
        {rows.map(([k, v]) => (
          <div className="ik-kv" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
        ))}
      </div>
      {detEntries.length > 0 && (
        <Accordion title="Toutes les caractéristiques publiées" meta={`${detEntries.length}`}>
          <div className="ik-facts-rows" style={{ marginTop: 0 }}>
            {detEntries.map(([k, v]) => (
              <div className="ik-kv" key={k}>
                <span className="k">{k}</span>
                {/^https?:\/\//.test(String(v))
                  ? <span className="v"><a href={String(v)} target="_blank" rel="noopener noreferrer">Ouvrir ↗</a></span>
                  : <span className="v">{String(v)}</span>}
              </div>
            ))}
          </div>
        </Accordion>
      )}
      {rooms.length > 0 && (
        <Accordion title="Pièces et dimensions" meta={`${rooms.length} pièce${rooms.length > 1 ? "s" : ""}`}>
          <div className="ik-table-wrap">
            <table className="ik-table">
              <thead><tr><th>Pièce</th><th>Niveau</th><th>Dimensions</th><th>Revêtement</th></tr></thead>
              <tbody>
                {rooms.map((r, i) => (
                  <tr key={i}>
                    <td>{r.nom || "—"}</td><td>{r.niveau || "—"}</td>
                    <td>{r.dimensions || "—"}</td><td>{r.revetement || "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Accordion>
      )}
    </SectionCard>
  );
}