import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { useLocation } from "wouter";

/**
 * FavoritoFaixaButton — espelha FavoritoButton.tsx (Podcast), usando os
 * endpoints de Música (musica.toggleFavorito / musica.isFavorito), que
 * gravam em user_favoritos_musica (ADR-003 — tabela paralela).
 */
export default function FavoritoFaixaButton({
  faixaId,
  className = "",
}: {
  faixaId: number;
  className?: string;
}) {
  const { user } = useAuth();
  const [, navigate] = useLocation();
  const utils = trpc.useUtils();

  const favoritoQuery = trpc.musica.isFavorito.useQuery({ faixaId }, { enabled: !!user });

  const toggleMutation = trpc.musica.toggleFavorito.useMutation({
    onSuccess: result => {
      utils.musica.isFavorito.setData({ faixaId }, result.favorited);
      utils.musica.getFavoritos.invalidate();
    },
  });

  const isFavorito = favoritoQuery.data ?? false;

  return (
    <button
      type="button"
      onClick={e => {
        e.preventDefault();
        e.stopPropagation();
        if (!user) {
          navigate("/entrar");
          return;
        }
        toggleMutation.mutate({ faixaId });
      }}
      title={isFavorito ? "Remover dos favoritos" : "Adicionar aos favoritos"}
      className={`transition-colors ${isFavorito ? "text-sof-gold" : "text-sof-text-3 hover:text-sof-gold"} ${className}`}
    >
      {isFavorito ? "♥" : "♡"}
    </button>
  );
}
