// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/ListingCard.tsx: listing card (results grid)
// -----------------------------------------------------------------------------
import { Link } from "react-router-dom";
import { Listing, fmtPrice, sourceName } from "../api";
import { useAccount } from "../account";
import { IcoCamera, IcoHeart } from "./Icons";
import SmartImg from "./SmartImg";
import FairValueBadge from "./FairValueBadge";
import KaScoreBadge from "./KaScoreBadge";

export default function ListingCard({ l }: { l: Listing }) {
  const img = l.images && l.images.length > 0 ? l.images[0] : null;
  const { me, favs, toggleFav } = useAccount();
  const fav = favs.has(l.uid);
  return (
    <Link to={`/listing/${encodeURIComponent(l.uid)}`} className="card">
      <div className="card-img">
        <SmartImg src={img} width_={480} fallbackLabel={l.unit_type || undefined}
                  alt={l.title} loading="lazy" decoding="async" />
        {l.unit_type && <span className="badge type">{l.unit_type}</span>}
        {l.ka_reco && (
          <span
            className="badge ka-reco"
            title="Matches your KA ID preferences — manage them at groupe-ka.com/mon-ka"
          >
            Recommended for you
          </span>
        )}
        {l.images.length > 1 && (
          <span className="badge right"><IcoCamera size={12} /> {l.images.length}</span>
        )}
        {me && (
          <button
            className={`fav-btn ${fav ? "on" : ""}`}
            aria-label={fav ? "Remove from saved" : "Save this rental"}
            aria-pressed={fav}
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); toggleFav(l.uid); }}
          >
            <IcoHeart size={16} filled={fav} />
          </button>
        )}
      </div>
      <div className="card-body">
        <div className="card-price">
          {fmtPrice(l.price, l.price_label)} {l.price != null && <small>/ month</small>}
          <FairValueBadge verdict={l.fv_verdict} deviation={l.fv_deviation} compact />
        </div>
        <div className="card-title">{l.title || l.address}</div>
        <div className="card-meta">
          {l.sector && <span>{l.sector}</span>}
          {l.sector && l.city && <span className="sep" />}
          {l.city && <span>{l.city}</span>}
          {l.ks_global != null && <KaScoreBadge score={l.ks_global} />}
        </div>
        <div className="card-foot">
          <span className="source-tag">{sourceName(l.source)}</span>
          {l.availability && <span className="avail">{l.availability}</span>}
        </div>
      </div>
    </Link>
  );
}