// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyHero.tsx : héro de la fiche — prix + capsule « vs marché »,
//   adresse (H1) + ville, ligne résumé, puis galerie, puis actions
//   (favoris · partager · Voir l'annonce). Ordre DOM = ordre visuel.
// -----------------------------------------------------------------------------
import { Listing, fmtAvailability, fmtPrice, sourceName } from "../api";
import { IcoDoc, IcoExternal, IcoHeart, IcoShare } from "../components/Icons";
import PropertyGallery from "./PropertyGallery";
import { ComparaisonPrix, ligneResume } from "./synthese";
import { NBSP } from "./ui";

export function PriceCapsule({ cmp, short = false }: { cmp: ComparaisonPrix | null; short?: boolean }) {
  if (!cmp) return null;
  return (
    <span className={`lk-capsule ${cmp.tone}`}>
      {short ? <b>{cmp.court}</b> : <><b>{cmp.label}</b><span aria-hidden="true">·</span>{cmp.court}</>}
    </span>
  );
}

export default function PropertyHero({ l, cmp, fav, onFav, onShare, actionsRef }: {
  l: Listing; cmp: ComparaisonPrix | null; fav: boolean;
  onFav: () => void; onShare: () => void;
  actionsRef: React.RefObject<HTMLDivElement>;
}) {
  const dispo = fmtAvailability(l.availability_date);
  const resume = ligneResume(l, dispo);
  const titre = l.title || l.address;
  const adresse = l.address && l.address !== l.title ? l.address : l.title;
  const where = [l.sector, l.city].filter(Boolean).join(", ");
  const hist = (l.price_history ?? []).filter((h) => h.price != null);
  const baisse = hist.length >= 2 && hist[0].price! < hist[1].price! ? hist[1].price! : null;

  return (
    <header className="lk-hero" aria-label="Résumé du logement">
      <div className="lk-hero-top">
        <div>
          <div className="lk-price">
            {fmtPrice(l.price, l.price_label)}
            {l.price != null && <small>/{NBSP}mois</small>}
            {baisse != null && <small style={{ textDecoration: "line-through", opacity: 0.7 }}>{fmtPrice(baisse)}</small>}
          </div>
          <div className="lk-price-row" style={{ marginTop: 8 }}>
            <PriceCapsule cmp={cmp} />
            {l.details?.price_from && <span className="lk-capsule neutral">à partir de</span>}
            {l.ka_reco && <span className="lk-capsule brand">Recommandé pour vous</span>}
          </div>
        </div>
      </div>
      <h1 className="lk-h1">
        {adresse || titre}
        {where && <span className="lk-city">{where}</span>}
      </h1>
      {resume.length > 0 && (
        <p className="lk-summary" aria-label="Résumé">
          {resume.map((r, i) => (
            <span key={r}>{i > 0 && <span className="sep" aria-hidden="true">· </span>}{r}</span>
          ))}
        </p>
      )}
      <PropertyGallery images={l.images ?? []} titre={titre} unitType={l.unit_type || undefined} />
      <div className="lk-actions" ref={actionsRef}>
        <button type="button" className={`lk-btn lk-btn-ghost lk-btn-icon ${fav ? "on" : ""}`}
                aria-pressed={fav} aria-label={fav ? "Retirer des favoris" : "Ajouter aux favoris"} onClick={onFav}>
          <IcoHeart size={19} filled={fav} />
        </button>
        <button type="button" className="lk-btn lk-btn-ghost lk-btn-icon" aria-label="Partager" onClick={onShare}>
          <IcoShare size={18} />
        </button>
        <a className="lk-btn lk-btn-ghost lk-btn-icon" aria-label="Télécharger la fiche PDF" title="Fiche PDF"
           href={`/api/listings/${encodeURIComponent(l.uid)}/pdf`} download>
          <IcoDoc size={18} />
        </a>
        <a className="lk-btn lk-btn-primary" href={`/passerelle/${encodeURIComponent(l.uid)}`}
           target="_blank" rel="noopener noreferrer">
          Voir l'annonce <IcoExternal size={16} />
          <span className="visually-hidden"> chez {sourceName(l.source)}</span>
        </a>
      </div>
    </header>
  );
}