/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Favoris.tsx
 * Rôle    : Mes favoris ♥ « Mon univers Ka » — offres mises en favoris,
 *           lues au hub Groupe KA (magasin central, aucun stockage local).
 *           Rangées éditoriales alignées sur la liste d'offres (job-row).
 * Créé    : 2026-08-23   Modifié : 2026-08-25
 * =============================================================================
 */
import { Link } from "react-router-dom";
import { FavItem, goLogin, useFav } from "../favorites";

/** /emploi/<uid> local si l'url du favori pointe vers job-ka.com. */
function localPath(f: FavItem): string | null {
  if (!f.url) return `/emploi/${encodeURIComponent(f.item_id)}`;
  try {
    const u = new URL(f.url);
    if (u.hostname.endsWith("job-ka.com")) return u.pathname + u.search;
  } catch { /* url invalide : lien externe ignoré */ }
  return null;
}

function FavCard({ f }: { f: FavItem }) {
  const { toggle } = useFav();
  const path = localPath(f);
  const inner = (
    <>
      <div className="jr-main">
        <h3 className="jr-title">{f.title}</h3>
        {f.subtitle && <p className="jr-org"><span className="employer">{f.subtitle}</span></p>}
      </div>
      <div className="jr-side">
        {f.price_label
          ? <span className="jr-salary">{f.price_label}</span>
          : <span className="jr-nosalary">Salaire non affiché</span>}
      </div>
      <button
        type="button"
        className="fav-btn on"
        aria-label="Retirer de mes favoris (Mon univers Ka)"
        title="Retirer de mes favoris (Mon univers Ka)"
        onClick={(e) => { e.preventDefault(); e.stopPropagation(); toggle(f); }}
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
        </svg>
      </button>
    </>
  );
  return path
    ? <Link to={path} className="job-row">{inner}</Link>
    : <a href={f.url} className="job-row" target="_blank" rel="noopener noreferrer">{inner}</a>;
}

export default function FavorisPage() {
  const { ready, connected, items } = useFav();

  return (
    <main className="container">
      <h1>Mes favoris</h1>
      <p className="muted">
        Vos offres d'emploi mises en favoris ♥ — synchronisées avec votre
        compte <b>Mon univers Ka</b> sur toutes les plateformes du Groupe KA.
      </p>
      {!ready && <div className="empty">Chargement…</div>}
      {ready && !connected && (
        <div className="empty">
          <p>Connectez-vous avec votre KA ID pour retrouver vos favoris.</p>
          <button type="button" className="btn" onClick={goLogin}>
            Se connecter avec KA ID
          </button>
        </div>
      )}
      {ready && connected && items.length === 0 && (
        <div className="empty">
          <p>Aucun favori pour l'instant — touchez le cœur ♥ sur une offre
          pour la retrouver ici.</p>
          <Link className="btn" to="/">Parcourir les offres</Link>
        </div>
      )}
      {ready && connected && items.length > 0 && (
        <div className="job-list">
          {items.map((f) => <FavCard key={f.item_id} f={f} />)}
        </div>
      )}
      {ready && connected && (
        <p className="muted" style={{ marginTop: 24 }}>
          Tous vos favoris Groupe KA (logements, propriétés, produits…) :{" "}
          <a href="https://www.groupe-ka.com/compte" target="_blank" rel="noopener noreferrer">
            Mon univers Ka ↗
          </a>
        </p>
      )}
    </main>
  );
}