"use client";

import { useRouter } from "next/navigation";
import Image from "next/image";
import { useEffect, useState } from "react";
import { MOBILE_MENU_EVENT } from "@/lib/authEvents";

export default function FloatingAIChat() {
  const router = useRouter();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handler = (e: Event) => {
      const detail = (e as CustomEvent).detail;
      setMobileMenuOpen(!!detail?.open);
    };
    window.addEventListener(MOBILE_MENU_EVENT, handler);
    return () => window.removeEventListener(MOBILE_MENU_EVENT, handler);
  }, []);

  // Hide the floating chat button while the mobile header menu is open
  if (mobileMenuOpen) return null;

  return (
    <button
      onClick={() => router.push("/ai-chatbot")}
      className="fixed bottom-6 right-6 z-50 hover:scale-110 transition rounded-full bg-transparent shadow-xl"
    >
      <Image src="/images/Call.svg" alt="AI Chat" width={60} height={60} />
    </button>
  );
}