// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/HistoriqueLouka.tsx: "Listing history" block (detail page)
//   Timeline of REAL sync observations: price, description, area,
//   availability, inclusions, photo changes, removals/returns. + "Past
//   lives": likely recycled listings of the same unit (multi-signal score,
//   explainable inference).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import {
  HistoriqueLouka as HistoT, Recyclees,
  fetchHistorique, fetchRecyclees, fmtPrice,
} from "../api";

const NBSP = " ";

const fmtTs = (ts: number | null | undefined): string =>
  ts
    ? new Date(ts * 1000).toLocaleDateString("en-CA",
        { day: "numeric", month: "short", year: "numeric" })
    : "—";

const EVENT_LABEL: Record<string, string> = {
  prix: "Price",
  description: "Description changed",
  superficie: "Area changed",
  dispo: "Availability changed",
  inclusions: "Inclusions changed",
  photos: "Photos changed",
  disparition: "Listing removed",
  reapparition: "Listing republished",
};

export default function HistoriqueLouka({ uid }: { uid: string }) {
  const [d, setD] = useState<HistoT | null>(null);
  const [rec, setRec] = useState<Recyclees | null>(null);
  useEffect(() => {
    setD(null); setRec(null);
    fetchHistorique(uid).then(setD).catch(() => setD(null));
    fetchRecyclees(uid).then(setRec).catch(() => setRec(null));
  }, [uid]);
  if (!d) return null;

  const variationPct = d.variation != null
    ? `${d.variation > 0 ? "+" : "−"}${Math.abs(Math.round(d.variation * 100))}${NBSP}%`
    : null;
  const items = d.timeline.slice(0, 12);
  const matches = rec?.matches ?? [];

  return (
    <section className="f-bloc f-histolk" id="historique-louka">
      <h2>Listing history</h2>
      <div className="kv">
        <div className="cell">
          <div className="k">Tracked since</div>
          <div className="v">{fmtTs(d.premiere_observation)}</div>
        </div>
        <div className="cell">
          <div className="k">Online</div>
          <div className="v">{d.jours_en_ligne}{NBSP}day{d.jours_en_ligne > 1 ? "s" : ""}</div>
        </div>
        {d.prix_initial != null && d.prix_actuel != null && d.prix_initial !== d.prix_actuel && (
          <div className="cell">
            <div className="k">Initial → current price</div>
            <div className="v">
              {fmtPrice(d.prix_initial)} → {fmtPrice(d.prix_actuel)}
              {variationPct && ` (${variationPct})`}
            </div>
          </div>
        )}
        <div className="cell">
          <div className="k">Changes observed</div>
          <div className="v">{d.modifications}</div>
        </div>
      </div>

      {items.length > 0 && (
        <ul className="hl-timeline">
          {items.map((it, i) => (
            <li key={`${it.ts}-${it.type}-${i}`}
                className={`hl-item hl-${it.type}`}>
              <span className="hl-date">{fmtTs(it.ts)}</span>
              <span className="hl-texte">
                {it.type === "prix" ? (
                  it.prix_avant != null
                    ? <>Price {it.prix_avant! > (it.prix ?? 0) ? "lowered" : "raised"} from {fmtPrice(it.prix_avant ?? null)} to <b>{fmtPrice(it.prix ?? null)}</b></>
                    : <>First observed price: <b>{fmtPrice(it.prix ?? null)}</b></>
                ) : (
                  EVENT_LABEL[it.type] ?? it.type
                )}
              </span>
            </li>
          ))}
        </ul>
      )}
      {items.length === 0 && (
        <p className="fine">
          No change observed since this listing's first sync.
        </p>
      )}

      {matches.length > 0 && (
        <div className="hl-recyclees">
          <h3>Likely past lives of this unit</h3>
          {matches.slice(0, 3).map((m) => (
            <div className="hl-match" key={m.uid}>
              <div>
                <span className="zi-badge zi-modere">
                  likely repost ({m.confiance}{NBSP}% confidence)
                </span>{" "}
                {m.prix != null && <>advertised at {fmtPrice(m.prix)}</>}
                {m.derniere_observation != null && <> until {fmtTs(m.derniere_observation)}</>}
              </div>
              <div className="hl-signaux">{m.signaux.join(" · ")}</div>
            </div>
          ))}
          <p className="fine">{rec?.methode} — inference, no automatic merging.</p>
        </div>
      )}

      <p className="fine">{d.methode}</p>
    </section>
  );
}