'use client';

import { useState, useEffect } from 'react';
import { Button } from 'react-bootstrap';
import Link from 'next/link';
import { useLocale, useTranslations } from 'next-intl';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { useAuth } from '@/contexts/AuthContext';
import { getFavorites, addApiFavorite, removeApiFavorite, ApiFavorite } from '@/services/favoriteService';

import './FavoriteButton.css';

interface FavoriteButtonProps {
  cibleId: number;
  tableCible: string;
  /** Nom de la fiche, repris dans le lien « Connectez-vous pour mettre … en favoris ». */
  libelle: string;
  size?: 'sm' | 'lg';
}

export default function FavoriteButton({ cibleId, tableCible, libelle, size }: FavoriteButtonProps) {
  const { isAuthenticated, loading: authLoading } = useAuth();
  const t = useTranslations('Common');
  const locale = useLocale();
  const [favorite, setFavorite] = useState<ApiFavorite | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!isAuthenticated) return;

    getFavorites().then((favorites) => {
      const found = favorites.find(
        (f) => f.cibleId === cibleId && f.tableCible === tableCible
      );
      setFavorite(found || null);
    }).catch(() => {});
  }, [isAuthenticated, cibleId, tableCible]);

  // Tant que l'état de connexion n'est pas connu, on n'affiche rien pour éviter un clignotement.
  if (authLoading) return null;

  if (!isAuthenticated) {
    return (
      <span className={`tk-favorite-loggedout${size === 'lg' ? ' tk-favorite-loggedout-lg' : ''}`}>
        <FaRegHeart className="tk-favorite-disabled" data-testid="favorite-disabled" aria-hidden="true" />
        <Link href={`/${locale}/connexion`} className="tk-favorite-login-link">
          {t('favorite_login_link', { libelle })}
        </Link>
      </span>
    );
  }

  const handleToggle = async () => {
    setLoading(true);
    try {
      if (favorite) {
        await removeApiFavorite(favorite.id);
        setFavorite(null);
      } else {
        const newFav = await addApiFavorite(cibleId, tableCible);
        setFavorite(newFav);
      }
    } catch {
      // Silently fail
    } finally {
      setLoading(false);
    }
  };

  return (
    <Button
      variant="link"
      size={size}
      onClick={handleToggle}
      disabled={loading}
      className="p-0 text-danger"
      aria-label={favorite ? 'Remove from favorites' : 'Add to favorites'}
    >
      {favorite ? <FaHeart /> : <FaRegHeart />}
    </Button>
  );
}