// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Favoris.tsx
// Desc:   Restos favoris ♥ « Mon univers Ka » du membre connecté — lus au hub
//         Groupe KA (groupe-ka.com), magasin central des favoris du groupe :
//         les mêmes ♥ suivent le membre sur toutes les plateformes ·Ka.
// ==============================================================================
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useAccount } from "../account";
import { Restaurant, fetchFavorites } from "../api";
import RestoCard from "../components/RestoCard";
import { useFav } from "../favorites";

export default function FavorisPage() {
  const { me } = useAccount();
  const { ready, connected, ids, items } = useFav();
  const [restos, setRestos] = useState<Restaurant[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!ready) return;
    if (!connected) { setLoading(false); return; }
    fetchFavorites()
      .then((f) => setRestos(f.restaurants))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [ready, connected]);

  if (ready && !connected) {
    return (
      <div className="notice container">
        <h2>Connectez-vous pour vos favoris</h2>
        <p>
          <a className="login-btn" href="/api/auth/ka/login" style={{ display: "inline-flex" }}>
            <span className="ka-badge" aria-hidden="true">KA</span>
            Se connecter avec KA ID
          </a>
        </p>
        <p>
          Un seul compte Groupe KA : vos ♥ vous suivent sur Resto·Ka, Lou·Ka,
          Food·Ka et toutes les plateformes ·Ka — c'est « Mon univers Ka ».
        </p>
      </div>
    );
  }

  // fiches locales encore en favoris (le toggle retire la carte sans recharger)
  const shown = restos.filter((r) => ids.has(r.uid));
  // favoris du hub sans fiche locale (resto retiré du catalogue) : carte simple
  const known = new Set(restos.map((r) => r.uid));
  const extras = items.filter((i) => i.item_id && !known.has(i.item_id));

  return (
    <div className="container sources">
      <span className="kicker">Mon univers Ka{me?.ka_id ? ` — ${me.ka_id}` : ""}</span>
      <h1>Mes restos favoris</h1>
      <p className="sub">
        Vos ♥ sont conservés au hub Groupe KA : les mêmes favoris, sur tous vos
        appareils et toutes les plateformes ·Ka.
      </p>
      {loading || !ready ? (
        <p>Chargement…</p>
      ) : shown.length === 0 && extras.length === 0 ? (
        <div className="notice">
          <h2>Aucun favori pour l'instant</h2>
          <p>Touchez le ♥ sur une fiche de resto pour l'épingler ici.</p>
        </div>
      ) : (
        <div className="grid">
          {shown.map((r) => <RestoCard key={r.uid} r={r} />)}
          {extras.map((i) => (
            <Link key={i.item_id} className="card"
              to={`/resto/${encodeURIComponent(i.item_id)}`}>
              <div className="card-img">
                {i.image_url
                  ? <img src={i.image_url} alt={i.title} loading="lazy" />
                  : <div className="noimg" />}
              </div>
              <div className="card-body">
                {i.price_label && <div className="card-price">{i.price_label}</div>}
                <div className="card-title">{i.title}</div>
                {i.subtitle && <div className="card-meta"><span>{i.subtitle}</span></div>}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}