// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/StickyListingCTA.tsx : barre CTA compacte du bas (mobile/tablette) —
//   n'apparaît qu'une fois la rangée d'actions du héro sortie de l'écran,
//   respecte la safe-area iOS, ne masque aucun contenu (padding de page).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Listing, fmtPrice, sourceName } from "../api";
import { IcoExternal } from "../components/Icons";
import { ComparaisonPrix } from "./synthese";
import { NBSP } from "./ui";

/** true dès que l'élément suivi est passé au-dessus du viewport (défilement). */
export function usePastElement(watch: React.RefObject<HTMLElement>): boolean {
  const [past, setPast] = useState(false);
  useEffect(() => {
    // visible dès que la rangée d'actions du héro est passée au-dessus du viewport
    const check = () => {
      const el = watch.current;
      if (!el) return;
      setPast(el.getBoundingClientRect().bottom < 0);
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    return () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); };
  }, [watch]);
  return past;
}

export default function StickyListingCTA({ l, cmp, show }: {
  l: Listing; cmp: ComparaisonPrix | null; show: boolean;
}) {
  return (
    <div className={`lk-cta-bar ${show ? "show" : ""}`} aria-hidden={!show}>
      <div className="lk-cta-txt">
        <div className="lk-cta-price">{fmtPrice(l.price, l.price_label)}{l.price != null && <small>{NBSP}/ mois</small>}</div>
        {cmp && <div className={`lk-cta-sub ${cmp.tone === "good" ? "good" : ""}`}>{cmp.court}</div>}
      </div>
      <a className="lk-btn lk-btn-primary" href={`/passerelle/${encodeURIComponent(l.uid)}`}
         target="_blank" rel="noopener noreferrer" tabIndex={show ? 0 : -1}>
        Voir l'annonce <IcoExternal size={15} />
        <span className="visually-hidden"> chez {sourceName(l.source)}</span>
      </a>
    </div>
  );
}