"use client";

import { useState, useEffect } from "react";
import { Phone, X, Mail, Instagram } from "lucide-react";
import { BRAND } from "@/lib/constants";
import { SignupModal } from "./SignupModal";

export function FloatingContact() {
  const [visible, setVisible] = useState(false);
  const [expanded, setExpanded] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    function handleScroll() {
      const contactEl = document.getElementById("contact");
      const pastHero = window.scrollY > window.innerHeight * 0.7;
      const reachedContact = contactEl
        ? window.scrollY + window.innerHeight > contactEl.offsetTop + 100
        : false;

      setVisible(pastHero && !reachedContact);
    }

    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Close when clicking outside
  useEffect(() => {
    if (!expanded) return;
    function handleClick(e: MouseEvent) {
      const target = e.target as HTMLElement;
      if (!target.closest("[data-floating-contact]")) {
        setExpanded(false);
      }
    }
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, [expanded]);

  return (
    <>
      <div
        data-floating-contact
        className={`fixed bottom-6 left-6 z-40 flex flex-col-reverse items-center gap-2 transition-all duration-400 ${
          visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0 pointer-events-none"
        }`}
      >
        {/* Main toggle button */}
        <button
          onClick={() => setExpanded((v) => !v)}
          className={`flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ${
            expanded
              ? "bg-neutral-700 rotate-0"
              : "bg-[#c9a96e] hover:bg-[#d4b87a] shadow-[#c9a96e]/30"
          }`}
        >
          {expanded ? (
            <X size={22} className="text-white" />
          ) : (
            <Mail size={22} className="text-black" />
          )}
        </button>

        {/* Expandable contact icons */}
        <div
          className={`flex flex-col items-center gap-2 transition-all duration-300 ${
            expanded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
          }`}
        >
          {/* Phone */}
          <a
            href="tel:+375293897001"
            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#2ecc71] shadow-lg shadow-[#2ecc71]/20 transition-transform hover:scale-110"
            aria-label="Позвонить"
          >
            <Phone size={20} className="text-white" />
          </a>

          {/* Instagram */}
          <a
            href={BRAND.instagram}
            target="_blank"
            rel="noopener noreferrer"
            className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] shadow-lg shadow-[#e6683c]/20 transition-transform hover:scale-110"
            aria-label="Instagram"
          >
            <Instagram size={20} className="text-white" />
          </a>

          {/* Записаться */}
          <button
            onClick={() => { setModalOpen(true); setExpanded(false); }}
            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#c9a96e] shadow-lg shadow-[#c9a96e]/20 transition-transform hover:scale-110"
            aria-label="Записаться"
          >
            <span className="text-xs font-bold text-black leading-tight text-center">
              ✍
            </span>
          </button>
        </div>
      </div>

      <SignupModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title="Записаться на занятие"
        subtitle="Оставьте контактные данные и мы свяжемся с вами"
        endpoint="/api/group-booking"
      />
    </>
  );
}
