/**
 * Trouve-KA — cœur ♥ « Mon univers Ka » d'un résultat de recherche
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * Toggle du favori au hub Groupe KA (via /api/favorites/toggle). Connecté :
 * cœur plein/contour ; non connecté : le tap envoie au flux « Se connecter
 * avec KA ID » existant (retour sur la page courante). Zone tactile 44 px
 * via ::after (pattern du socle mobile KA).
 */

"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { ensureLoaded, isFavorite, toggleFav, useFavorites } from "@/components/fav-store";

interface FavButtonProps {
  url: string;
  title: string;
  subtitle?: string;
  imageUrl?: string | null;
  className?: string;
}

export function FavButton({ url, title, subtitle, imageUrl, className }: FavButtonProps) {
  const favs = useFavorites();
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    void ensureLoaded();
  }, []);

  const fav = isFavorite(favs, url);
  const anon = favs.status === "anon";

  const onClick = async () => {
    if (busy) return;
    if (anon) {
      const here = window.location.pathname + window.location.search;
      window.location.href = `/api/auth/ka/login?next=${encodeURIComponent(here)}`;
      return;
    }
    setBusy(true);
    await toggleFav({
      url,
      title,
      subtitle,
      image_url: imageUrl || undefined,
    });
    setBusy(false);
  };

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={busy}
      aria-pressed={fav}
      aria-label={
        anon
          ? "Se connecter avec KA ID pour ajouter aux favoris"
          : fav
            ? "Retirer des favoris"
            : "Ajouter aux favoris"
      }
      title={
        anon
          ? "Se connecter avec KA ID"
          : fav
            ? "Retirer de Mon univers Ka"
            : "Ajouter à Mon univers Ka"
      }
      className={cn(
        "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-[1.5px] transition-colors after:absolute after:-inset-1.5 after:content-['']",
        fav
          ? "border-ink bg-ink text-lime"
          : "border-transparent text-ink-2 hover:border-ink hover:text-ink",
        busy && "opacity-60",
        className,
      )}
    >
      <svg
        width="15"
        height="15"
        viewBox="0 0 24 24"
        fill={fav ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth="2"
        strokeLinejoin="round"
        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>
    </button>
  );
}