/**
 * Trouve-KA — contenu client de la page « Mes favoris » (Mon univers Ka)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * Liste vivante des favoris du membre, lue au hub Groupe KA via
 * /api/favorites (magasin partagé du fav-store — mêmes cœurs que les
 * résultats). Retrait immédiat (toggle optimiste, le hub tranche).
 */

"use client";

import { useEffect } from "react";
import Link from "next/link";
import { Favicon } from "@/components/favicon";
import {
  ensureLoaded,
  toggleFav,
  useFavorites,
  type Fav,
} from "@/components/fav-store";

function domainOf(url: string | undefined): string {
  if (!url) return "";
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return "";
  }
}

function FavCard({ fav }: { fav: Fav }) {
  const domain = domainOf(fav.url);
  return (
    <article className="group flex items-start gap-4 py-6 sm:gap-6">
      <div className="min-w-0 flex-1">
        {domain ? (
          <div className="flex items-center gap-2">
            <Favicon domain={domain} />
            <span className="gk-mono truncate text-xs font-medium text-green">
              {fav.subtitle || domain}
            </span>
          </div>
        ) : null}
        <h3 className="mt-1.5 text-[17px] font-bold leading-snug tracking-[-0.02em] sm:text-lg">
          <a
            href={fav.url || "#"}
            className="rounded-sm text-ink underline decoration-transparent decoration-[3px] underline-offset-[3px] transition-colors hover:decoration-lime focus-visible:decoration-lime"
          >
            {fav.title || fav.url}
          </a>
        </h3>
        {fav.price_label ? (
          <p className="mt-1.5 text-sm font-medium text-ink-2">
            {fav.price_label}
          </p>
        ) : null}
        <button
          type="button"
          onClick={() =>
            void toggleFav({
              url: fav.url || fav.item_id,
              title: fav.title,
              subtitle: fav.subtitle,
              image_url: fav.image_url,
            })
          }
          className="gk-display mt-3 inline-flex min-h-[36px] items-center gap-1.5 rounded-full border-[1.5px] border-ink bg-surface px-3.5 text-[12px] font-bold text-ink transition-colors hover:bg-[var(--accent-soft)]"
        >
          <svg
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M12 21c-4.8-3.6-9-6.9-9-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.1-4.2 7.4-9 11Z" />
          </svg>
          Retirer
        </button>
      </div>
      {fav.image_url ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={fav.image_url}
          alt=""
          loading="lazy"
          className="h-[76px] w-[76px] shrink-0 rounded-card border border-line object-cover sm:h-[110px] sm:w-[110px]"
        />
      ) : null}
    </article>
  );
}

export function FavorisContent({ name }: { name: string }) {
  const favs = useFavorites();

  useEffect(() => {
    // Liste fraîche à l'arrivée sur la page (le cache serveur reste à 30 s).
    void ensureLoaded(true);
  }, []);

  const loading = favs.status === "idle" || favs.status === "loading";

  return (
    <main id="contenu" className="mx-auto w-full max-w-3xl flex-1 px-4 py-8">
      <p className="klabel">Mon univers Ka</p>
      <h1 className="mt-2 text-3xl font-bold leading-tight tracking-[-0.03em] sm:text-4xl">
        Mes favoris
      </h1>
      <p className="mt-3 max-w-xl text-sm leading-relaxed text-ink-2">
        {name ? `${name}, voici` : "Voici"} les pages que vous avez gardées —
        la même liste vous suit sur toutes les plateformes du Groupe KA.
      </p>

      {loading ? (
        <div aria-hidden="true" className="mt-6 divide-y divide-line">
          {Array.from({ length: 3 }, (_, i) => (
            <div key={i} className="animate-pulse space-y-2.5 py-6">
              <div className="h-3.5 w-1/3 rounded bg-[var(--line)]" />
              <div className="h-5 w-2/3 rounded bg-[var(--line)]" />
              <div className="h-9 w-24 rounded-full bg-[var(--line)]" />
            </div>
          ))}
        </div>
      ) : favs.status === "error" ? (
        <div className="mt-10 text-center">
          <p className="font-display font-bold text-ink">
            Le hub Groupe KA est momentanément injoignable.
          </p>
          <p className="mt-2 text-sm text-ink-2">
            Vos favoris sont en sécurité — réessayez dans quelques instants.
          </p>
        </div>
      ) : favs.items.length === 0 ? (
        <div className="rise mt-10 py-10 text-center">
          <p className="klabel">0 favori</p>
          <h2 className="mx-auto mt-4 max-w-xl text-2xl font-bold leading-tight tracking-[-0.03em] sm:text-3xl">
            Rien dans votre univers — <span className="hl">encore</span>.
          </h2>
          <p className="mx-auto mt-5 max-w-md text-sm leading-relaxed text-ink-2">
            Lancez une recherche et touchez le cœur ♥ d&apos;un résultat pour
            le retrouver ici, et sur tous les sites du Groupe KA.
          </p>
          <Link href="/" className="btn btn-primary mt-8">
            Lancer une recherche
          </Link>
        </div>
      ) : (
        <div className="stagger mt-2 divide-y divide-line">
          {favs.items.map((fav) => (
            <FavCard key={fav.item_id || fav.url} fav={fav} />
          ))}
        </div>
      )}
    </main>
  );
}