"use client";

import { useEffect, useState } from "react";
import { Heart } from "lucide-react";
import { cn } from "@/lib/cn";
import { useFooterPush } from "@/hooks/useFooterPush";

interface FloatingVoteButtonProps {
  onClick: () => void;
  /** 显示前的滚动阈值（px） */
  threshold?: number;
  className?: string;
}

export default function FloatingVoteButton({
  onClick,
  threshold = 300,
  className,
}: FloatingVoteButtonProps) {
  const [visible, setVisible] = useState(false);
  // footer 进视口时按钮向上平移,始终漂浮在 footer 顶部上方
  const footerPush = useFooterPush();

  useEffect(() => {
    const handler = () => setVisible(window.scrollY > threshold);
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, [threshold]);

  return (
    <button
      type="button"
      onClick={onClick}
      aria-label="立即投票"
      style={{
        // 隐藏态:下移 12px;显示态:基础位置 - footerPush(避让 footer)
        transform: visible
          ? `translateY(-${footerPush}px)`
          : "translateY(12px)",
      }}
      className={cn(
        "fixed bottom-6 right-6 sm:bottom-8 sm:right-8 z-40 w-14 h-14 rounded-full bg-grad-purple text-white flex flex-col items-center justify-center font-display text-[9px] tracking-widest shadow-purple-glow animate-pulse-glow transition-all duration-300",
        visible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
        "hover:scale-105",
        className,
      )}
    >
      <Heart size={16} fill="white" className="mb-0.5" />
      <span>投票</span>
    </button>
  );
}
