// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Favoris.tsx: the rentals saved by the signed-in account
// -----------------------------------------------------------------------------
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">Saved rentals</span>
        <h1>Sign in to keep your <span className="hl">favourites</span>.</h1>
        <a className="btn btn-primary" href="/api/auth/ka/login">
          Sign in with KA ID
        </a>
      </div>
    );
  }

  // only show what is still saved (instant toggle without re-fetch)
  const visible = (listings ?? []).filter((l) => favs.has(l.uid));

  return (
    <div className="container profil">
      <span className="kicker">Saved rentals</span>
      <h1>Your <span className="hl">favourites</span>.</h1>

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

      {listings !== null && visible.length === 0 && (
        <div className="notice">
          <div className="big"><IcoHeart size={40} /></div>
          <h2>Nothing saved yet</h2>
          <p>
            Tap the heart on a listing to find it here.
          </p>
          <Link className="btn btn-primary" to="/">Explore rentals</Link>
        </div>
      )}

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