// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyHero.tsx : héro de la fiche — prix + capsule « vs estimation
//   Vrai-Prix », type de bien, prix au pi², adresse (H1) + secteur/ville, ligne
//   résumé, puis galerie, puis actions (favoris · partager · PDF · Voir
//   l'annonce). Ordre DOM = ordre visuel.
// -----------------------------------------------------------------------------
import { Listing, fmtPrice, sourceName } from "../api";
import { Ico, IcoHeart } from "../components/Icons";
import PropertyGallery from "./PropertyGallery";
import { ComparaisonPrix, estLocation, 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={`ik-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 resume = ligneResume(l);
  const titre = l.address || l.title;
  const where = [l.sector, l.city, l.region].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;
  const location = estLocation(l);
  const pi2 = l.price != null && l.area_sqft != null && l.area_sqft > 200 && !location
    ? Math.round(l.price / l.area_sqft) : null;
  const captions = Array.isArray(l.details?.photo_captions) ? (l.details!.photo_captions as string[]) : undefined;

  return (
    <header className="ik-hero" aria-label="Résumé de la propriété">
      <div className="ik-hero-top">
        <div>
          <div className="ik-kicker">{location ? "Loyer mensuel" : "Prix demandé"}{l.details?.price_from ? " · à partir de" : ""}</div>
          <div className="ik-price">
            {fmtPrice(l.price, l.price_label)}
            {location && l.price != null && <small>/{NBSP}mois</small>}
            {baisse != null && <small style={{ textDecoration: "line-through", opacity: 0.7 }}>{fmtPrice(baisse)}</small>}
          </div>
          <div className="ik-price-row" style={{ marginTop: 8 }}>
            <PriceCapsule cmp={cmp} />
            {pi2 != null && <span className="ik-capsule neutral">{pi2.toLocaleString("fr-CA")}{NBSP}$/pi²</span>}
            {l.ka_reco && <span className="ik-capsule brand">Recommandé pour vous</span>}
          </div>
        </div>
      </div>
      <h1 className="ik-h1">
        {titre}
        {where && <span className="ik-city">{where}</span>}
      </h1>
      {resume.length > 0 && (
        <p className="ik-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 ?? []} captions={captions} titre={titre} type={l.property_type} />
      <div className="ik-actions" ref={actionsRef}>
        <button type="button" className={`ik-btn ik-btn-ghost ik-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="ik-btn ik-btn-ghost ik-btn-icon" aria-label="Partager" onClick={onShare}>
          <Ico name="share" size={18} />
        </button>
        <a className="ik-btn ik-btn-ghost ik-btn-icon" aria-label="Télécharger la fiche PDF" title="Fiche PDF"
           href={`/api/listings/${encodeURIComponent(l.uid)}/pdf`} download>
          <Ico name="doc" size={18} />
        </a>
        <a className="ik-btn ik-btn-primary" href={l.url} target="_blank" rel="noopener noreferrer">
          Voir l'annonce <Ico name="external" size={16} />
          <span className="visually-hidden"> chez {sourceName(l.source)}</span>
        </a>
      </div>
    </header>
  );
}