// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (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, Lou-Ka Score en miniature, constats clés,
//   favoris / partage. Masquée sur mobile (display:none, pas de réordonnancement).
// -----------------------------------------------------------------------------
import { Listing, fmtPrice, sourceName } from "../api";
import { IcoDoc, IcoExternal, IcoHeart, IcoShare, IcoSparkles } from "../components/Icons";
import { ScoreRing } from "./LouKaScore";
import { PriceCapsule } from "./PropertyHero";
import { BriefList } from "./PropertySummary";
import { ComparaisonPrix, Constat, LouKaScore } from "./synthese";
import { NBSP, relTime } from "./ui";

export default function DesktopAside({ l, cmp, score, brief, fav, onFav, onShare }: {
  l: Listing; cmp: ComparaisonPrix | null; score: LouKaScore; brief: Constat[];
  fav: boolean; onFav: () => void; onShare: () => void;
}) {
  const maj = relTime(l.updated_at);
  return (
    <aside className="lk-aside" aria-label="Résumé et actions">
      <div className="lk-card lk-aside-card">
        <div>
          <div className="lk-price">{fmtPrice(l.price, l.price_label)}{l.price != null && <small>/{NBSP}mois</small>}</div>
          <div className="lk-price-row" style={{ marginTop: 8 }}><PriceCapsule cmp={cmp} /></div>
        </div>
        <div className="lk-aside-addr">{l.address || l.title}{l.city ? <><br />{[l.sector, l.city].filter(Boolean).join(", ")}</> : null}</div>
        <a className="lk-btn lk-btn-primary" href={`/passerelle/${encodeURIComponent(l.uid)}`} target="_blank" rel="noopener noreferrer">
          Voir l'annonce chez {sourceName(l.source)} <IcoExternal size={16} />
        </a>
        <div className="lk-actions">
          <button type="button" className={`lk-btn lk-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="lk-btn lk-btn-ghost" style={{ flex: 1 }} onClick={onShare}><IcoShare size={16} /> Partager</button>
          <a className="lk-btn lk-btn-ghost lk-btn-icon" aria-label="Fiche PDF" title="Fiche PDF" href={`/api/listings/${encodeURIComponent(l.uid)}/pdf`} download><IcoDoc size={17} /></a>
        </div>
        <button type="button" className="lk-btn lk-btn-ghost lk-ka-inline" onClick={() => window.dispatchEvent(new Event("lk:askka"))}>
          <IcoSparkles size={16} /> Demander à Ka
        </button>
        {(score.value != null || brief.length > 0) && <hr className="lk-aside-sep" />}
        {score.value != null && (
          <div className="lk-aside-score">
            <ScoreRing value={score.value} partial={score.partial} size={56} />
            <div className="lk-aside-score-txt">
              <b>Lou-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 />}
        {maj && <div className="lk-aside-meta">Synchronisé {maj} · {sourceName(l.source)}</div>}
      </div>
    </aside>
  );
}