// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyDossier.tsx : « Dossier de l'annonce » — ce qu'Immo-Ka observe
//   réellement, en accordéons compacts : suivi Immo-Ka (première observation,
//   jours en ligne, variations de prix), autres publications de la même
//   propriété (doublons rattachés par la déduplication), courtier et agence,
//   identifiants de la source. Chaque volet a un état vide propre.
// -----------------------------------------------------------------------------
import { Listing, fmtDate, fmtPrice, sourceName } from "../api";
import { Ico } from "../components/Icons";
import { Accordion, SectionCard, StatTile, StatusBadge, NBSP } from "./ui";

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

export default function PropertyDossier({ l }: { l: Listing }) {
  const hist = (l.price_history ?? []).filter((h) => h.price != null);
  const jours = l.days_on_market ?? (l.first_seen ? Math.max(0, Math.round((Date.now() / 1000 - l.first_seen) / 86400)) : null);
  const variation = hist.length >= 2 ? (hist[0].price! - hist[hist.length - 1].price!) / hist[hist.length - 1].price! : null;
  const dups = l.duplicates ?? [];
  const d = l.details ?? {};
  const listedAt = typeof d.listed_at === "string" ? d.listed_at : null;
  const origin = typeof d.listing_origin_url === "string" ? d.listing_origin_url : null;

  return (
    <SectionCard id="dossier" title="Dossier de l'annonce" icon={<Ico name="folder" size={18} />}
                 sub="Ce qu'Immo-Ka observe réellement : suivi, publications, courtier, source">
      <Accordion title={<><Ico name="history" size={15} className="ik-acc-ico" />Suivi Immo-Ka</>}
                 meta={jours != null ? (jours === 0 ? "publiée aujourd'hui" : `${jours}${NBSP}j en ligne`) : undefined}>
        <div className="ik-kpis cols-3" style={{ marginBottom: 10 }}>
          <StatTile value={l.first_seen ? fmtDate(l.first_seen) : "—"} label="Première observation" anim={false} />
          <StatTile value={jours != null ? (jours === 0 ? "Aujourd'hui" : `${jours}${NBSP}j`) : "—"} label="Sur le marché (observé)" anim={false} />
          <StatTile value={Math.max(0, hist.length - 1)} label="Changement(s) de prix" anim={false} />
        </div>
        {variation != null && variation !== 0 && (
          <p style={{ margin: "0 0 8px" }}>
            Prix initial observé {fmtPrice(hist[hist.length - 1].price!)} → <b>{fmtPrice(hist[0].price!)}</b>{" "}
            <StatusBadge tone={variation < 0 ? "good" : "warn"}>{variation > 0 ? "+" : "−"}{Math.abs(Math.round(variation * 100))}{NBSP}%</StatusBadge>
          </p>
        )}
        {listedAt && <p style={{ margin: "0 0 8px" }}>Date d'inscription indiquée par la source : {listedAt}.</p>}
        <p className="ik-fine">Première observation, jours en ligne et variations sont mesurés par les synchronisations Immo-Ka
          (plusieurs fois par jour) — ils ne remplacent pas la date d'inscription officielle Centris.</p>
      </Accordion>

      <Accordion title={<><Ico name="layers" size={15} className="ik-acc-ico" />Aussi publiée sur</>}
                 meta={dups.length ? `${dups.length} plateforme${dups.length > 1 ? "s" : ""}` : "aucune"}>
        {dups.length === 0 ? (
          <Vide>Aucune autre publication de cette propriété repérée parmi les sources Immo-Ka.</Vide>
        ) : (
          <>
            <p style={{ margin: "0 0 8px" }}>
              Cette propriété a été repérée sur {dups.length} autre{dups.length > 1 ? "s" : ""} plateforme{dups.length > 1 ? "s" : ""} —
              Immo-Ka affiche la version la plus complète.
            </p>
            <ul className="ik-list">
              {dups.map((x) => (
                <li className="ik-item" key={x.uid}>
                  <span className="ik-item-ico" aria-hidden="true"><Ico name="building" size={17} /></span>
                  <div className="ik-item-main">
                    <div className="ik-item-t">{sourceName(x.source)}</div>
                    <div className="ik-item-s">{x.broker_name || x.agency || x.price_label || ""}</div>
                  </div>
                  <div className="ik-item-r">
                    <a className="ik-link" href={x.url} target="_blank" rel="noopener noreferrer">Voir ↗</a>
                  </div>
                </li>
              ))}
            </ul>
          </>
        )}
      </Accordion>

      <Accordion title={<><Ico name="people" size={15} className="ik-acc-ico" />Courtier et agence</>}
                 meta={l.broker_name || sourceName(l.source)}>
        <p style={{ margin: "0 0 6px" }}>
          <b style={{ fontSize: 15 }}>{l.broker_name || "Courtier non précisé"}</b>
          {l.agency ? <> — {l.agency}</> : null}
        </p>
        <p style={{ margin: "0 0 6px" }}>Annonce publiée par <b>{sourceName(l.source)}</b>
          {l.broker_phone && <> · <a href={`tel:${l.broker_phone.replace(/\s/g, "")}`}>{l.broker_phone}</a></>}.
        </p>
        <p className="ik-fine">Immo-Ka est un agrégateur indépendant : la relation contractuelle se fait avec le courtier ou l'agence
          de l'annonce originale. Consultez le registre de l'OACIQ pour vérifier un permis de courtier.</p>
      </Accordion>

      <Accordion title={<><Ico name="tag" size={15} className="ik-acc-ico" />Identifiants et source</>} meta={l.mls || l.external_id}>
        <div className="ik-facts-rows" style={{ marginTop: 0 }}>
          {l.mls && <div className="ik-kv"><span className="k">Nº Centris / MLS</span><span className="v">{l.mls}</span></div>}
          <div className="ik-kv"><span className="k">Identifiant source</span><span className="v">{l.external_id}</span></div>
          <div className="ik-kv"><span className="k">Identifiant Immo-Ka</span><span className="v">{l.uid}</span></div>
          <div className="ik-kv"><span className="k">Annonce originale</span><span className="v"><a href={l.url} target="_blank" rel="noopener noreferrer">{sourceName(l.source)} ↗</a></span></div>
          {origin && origin !== l.url && <div className="ik-kv"><span className="k">Fiche d'origine</span><span className="v"><a href={origin} target="_blank" rel="noopener noreferrer">Ouvrir ↗</a></span></div>}
        </div>
      </Accordion>
    </SectionCard>
  );
}