"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { FaChevronRight } from "react-icons/fa";
import type { FloatingButtonBlock } from "@/types";

interface Props {
  data: FloatingButtonBlock;
  heroId?: string;
  cardSectionId?: string;
}

export default function FloatingButtonsClient({
  data,
  heroId = "hero-banner",
  cardSectionId = "card-section",
}: Props) {
  const wrapperRef = useRef<HTMLElement | null>(null);
  const [showInCardSection, setShowInCardSection] = useState(true);

  useEffect(() => {
    let obs: IntersectionObserver | null = null;
    let stopped = false;

    const attach = () => {
      const heroEl = document.getElementById(heroId);
      if (!heroEl) return false;

      obs = new IntersectionObserver(
        ([entry]) => setShowInCardSection(!entry.isIntersecting),
        { threshold: 0.1 },
      );
      obs.observe(heroEl);
      return true;
    };

    const loop = () => {
      if (stopped) return;
      if (!attach()) requestAnimationFrame(loop);
    };

    loop();

    return () => {
      stopped = true;
      obs?.disconnect();
    };
  }, [heroId]);

  const wrapperClass = useMemo(
    () =>
      [
        "fixed bottom-20 right-4 min-[900px]:bottom-20 min-[900px]:right-[81px] min-[900px]:w-[1480px] min-[900px]:h-[132px] min-[900px]:px-[15px] min-[900px]:box-border z-50 pointer-events-auto",
        "transition-all duration-200 ease-in-out",
        showInCardSection
          ? "opacity-100 translate-y-0"
          : "opacity-0 translate-y-2 pointer-events-none",
      ].join(" "),
    [showInCardSection],
  );

  if (!data) return null;

  return (
    <section
      ref={(el) => { wrapperRef.current = el; }}
      className={wrapperClass}
    >
      <div className="pointer-events-none w-auto max-w-[92vw] min-[900px]:w-auto min-[900px]:max-w-none text-right">
        <a
          href={data.href}
          id={data.ctaId ?? undefined}
          className="pointer-events-auto inline-flex items-center justify-end relative no-underline"
        >
          <div className="bg-white text-black uppercase rounded-[10px] shadow-[1px_2px_15px_0px_rgba(0,0,0,0.4)] cursor-pointer font-medium transition-colors duration-500 ease-in-out text-[14px] leading-[18px] py-3 pl-4 pr-14 min-[900px]:text-[26px] min-[900px]:leading-[30px] min-[900px]:pt-[11px] min-[900px]:pb-[11px] min-[900px]:pl-[25px] min-[900px]:pr-[84px]">
            {data.label}
          </div>
          <div className="absolute top-0 right-0 min-[900px]:-right-6 flex items-center justify-center bg-[#111] text-white border-white rounded-full shadow-[1px_2px_15px_0px_rgba(0,0,0,0.4)] cursor-pointer pointer-events-auto transition-[border] duration-500 ease-in-out w-13 h-13 border-[4px] min-[900px]:w-[100px] min-[900px]:h-[100px] min-[900px]:border-[6px] min-[900px]:translate-y-[-25px]">
            <FaChevronRight className="text-white text-[22px] min-[900px]:text-[44px]" />
          </div>
        </a>
      </div>
    </section>
  );
}