// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Favoris.tsx : les logements mis en favori par le compte connecté
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Listing, fetchFavorites } from "../api";
import { useAccount } from "../account";
import ListingCard from "../components/ListingCard";
import { IcoHeart } from "../components/Icons";

export default function FavorisPage() {
  const { me, loaded, favs } = useAccount();
  const [listings, setListings] = useState<Listing[] | null>(null);

  useEffect(() => {
    if (me) fetchFavorites().then((f) => setListings(f.listings)).catch(() => setListings([]));
  }, [me]);

  if (loaded && !me) {
    return (
      <div className="container profil">
        <span className="kicker">Mes favoris</span>
        <h1>Connectez-vous pour garder vos <span className="hl">coups de cœur</span>.</h1>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          Se connecter avec KA ID
        </a>
      </div>
    );
  }

  // ne montrer que ce qui est encore favori (toggle instantané sans re-fetch)
  const visible = (listings ?? []).filter((l) => favs.has(l.uid));

  return (
    <div className="container profil">
      <span className="kicker">Mes favoris</span>
      <h1>Vos <span className="hl">coups de cœur</span>.</h1>

      {listings === null && me && <div className="notice">Chargement…</div>}

      {listings !== null && visible.length === 0 && (
        <div className="notice">
          <div className="big"><IcoHeart size={40} /></div>
          <h2>Aucun favori pour l'instant</h2>
          <p>
            Touchez le cœur sur une annonce pour la retrouver ici.
          </p>
          <Link className="btn btn-primary" to="/">Explorer les logements</Link>
        </div>
      )}

      {visible.length > 0 && (
        <div className="grid" style={{ marginTop: 24 }}>
          {visible.map((l) => <ListingCard key={l.uid} l={l} />)}
        </div>
      )}
    </div>
  );
}