// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/DesktopAside.tsx : colonne droite sticky (≥ 1024 px) — prix, capsule
//   marché, adresse, CTA, PDF, Immo-Ka Score en miniature, constats clés,
//   favoris / partage, courtier. Masquée sur mobile (display:none, pas de
//   réordonnancement).
// -----------------------------------------------------------------------------
import { Listing, fmtPrice, sourceName } from "../api";
import { Ico, IcoHeart } from "../components/Icons";
import { ScoreRing } from "./ImmoKaScore";
import { PriceCapsule } from "./PropertyHero";
import { BriefList } from "./PropertySummary";
import { ComparaisonPrix, Constat, ImmoKaScore, estLocation } from "./synthese";
import { NBSP, relTime } from "./ui";

export default function DesktopAside({ l, cmp, score, brief, fav, onFav, onShare }: {
  l: Listing; cmp: ComparaisonPrix | null; score: ImmoKaScore; brief: Constat[];
  fav: boolean; onFav: () => void; onShare: () => void;
}) {
  const maj = relTime(l.updated_at);
  return (
    <aside className="ik-aside" aria-label="Résumé et actions">
      <div className="ik-card ik-aside-card">
        <div>
          <div className="ik-price">{fmtPrice(l.price, l.price_label)}{estLocation(l) && l.price != null && <small>/{NBSP}mois</small>}</div>
          <div className="ik-price-row" style={{ marginTop: 8 }}><PriceCapsule cmp={cmp} /></div>
        </div>
        <div className="ik-aside-addr">{l.address || l.title}{l.city ? <><br />{[l.sector, l.city].filter(Boolean).join(", ")}</> : null}</div>
        <a className="ik-btn ik-btn-primary" href={l.url} target="_blank" rel="noopener noreferrer">
          Voir l'annonce chez {sourceName(l.source)} <Ico name="external" size={16} />
        </a>
        <div className="ik-actions">
          <button type="button" className={`ik-btn ik-btn-ghost ${fav ? "on" : ""}`} style={{ flex: 1 }} aria-pressed={fav} onClick={onFav}>
            <IcoHeart size={17} filled={fav} /> {fav ? "Favori" : "Favoris"}
          </button>
          <button type="button" className="ik-btn ik-btn-ghost" style={{ flex: 1 }} onClick={onShare}><Ico name="share" size={16} /> Partager</button>
          <a className="ik-btn ik-btn-ghost ik-btn-icon" aria-label="Fiche PDF" title="Fiche PDF" href={`/api/listings/${encodeURIComponent(l.uid)}/pdf`} download><Ico name="doc" size={17} /></a>
        </div>
        <button type="button" className="ik-btn ik-btn-ghost ik-ka-inline" onClick={() => window.dispatchEvent(new Event("ik:askka"))}>
          <Ico name="sparkles" size={16} /> Demander à Ka
        </button>
        {(score.value != null || brief.length > 0) && <hr className="ik-aside-sep" />}
        {score.value != null && (
          <div className="ik-aside-score">
            <ScoreRing value={score.value} partial={score.partial} size={56} />
            <div className="ik-aside-score-txt">
              <b>Immo-Ka Score · {score.label}</b>
              {score.partial ? "Score partiel" : `Emplacement ${score.emplacement} · Prix ${score.prix}`}
            </div>
          </div>
        )}
        {brief.length > 0 && <BriefList items={brief.slice(0, 4)} compact />}
        {(l.broker_name || l.broker_phone) && (
          <>
            <hr className="ik-aside-sep" />
            <div className="ik-aside-broker">
              <span className="ik-aside-broker-k">Courtier</span>
              {l.broker_name && <b>{l.broker_name}</b>}
              {l.broker_phone && <a href={`tel:${l.broker_phone.replace(/\s/g, "")}`}><Ico name="phone" size={14} /> {l.broker_phone}</a>}
            </div>
          </>
        )}
        {maj && <div className="ik-aside-meta">Synchronisé {maj} · {sourceName(l.source)}</div>}
      </div>
    </aside>
  );
}