"use client";

import { useEffect, useState } from "react";
import { ArrowUp, Headset, Instagram, Mail, MessageCircle, Phone, X } from "lucide-react";
import { contactEmailHref, contactPhoneHref, getWhatsAppUrl, instagramUrl } from "@/lib/contact";
import { useUserLocation } from "@/lib/location-context";

export function FloatingActions() {
  const [isContactOpen, setIsContactOpen] = useState(false);
  const [showScrollTop, setShowScrollTop] = useState(false);
  const { location } = useUserLocation();
  const whatsappMessage = `Hi Ride N Revive, I need RSA support${
    location ? ` in ${location.name}` : ""
  }. Please help me.`;
  const contactActions = [
    {
      href: getWhatsAppUrl(whatsappMessage),
      label: "WhatsApp",
      icon: MessageCircle,
      external: true,
    },
    {
      href: contactPhoneHref,
      label: "Call",
      icon: Phone,
      external: false,
    },
    {
      href: instagramUrl,
      label: "Instagram",
      icon: Instagram,
      external: true,
    },
    {
      href: contactEmailHref,
      label: "Email",
      icon: Mail,
      external: false,
    },
  ] as const;

  useEffect(() => {
    const updateScrollTopVisibility = () => setShowScrollTop(window.scrollY > 120);

    updateScrollTopVisibility();
    window.addEventListener("scroll", updateScrollTopVisibility, { passive: true });

    return () => window.removeEventListener("scroll", updateScrollTopVisibility);
  }, []);

  return (
    <div className="fixed bottom-5 right-5 z-50 flex flex-col items-end gap-3 font-['Space_Grotesk']">
      {isContactOpen ? (
        <div className="grid gap-2 rounded-2xl border border-border bg-background/95 p-2 shadow-[0_18px_48px_rgba(0,0,0,0.18)] backdrop-blur-xl">
          {contactActions.map(({ href, label, icon: Icon, external }) => (
            <a
              key={label}
              href={href}
              target={external ? "_blank" : undefined}
              rel={external ? "noreferrer" : undefined}
              className="flex min-w-40 items-center gap-2 rounded-xl px-3 py-2 text-sm font-black text-foreground transition hover:bg-primary hover:text-primary-foreground"
            >
              <Icon className="h-4 w-4" />
              {label}
            </a>
          ))}
        </div>
      ) : null}

      <button
        type="button"
        onClick={() => setIsContactOpen((current) => !current)}
        aria-label={isContactOpen ? "Close RSA contact options" : "Open RSA contact options"}
        className="grid h-12 w-12 place-items-center rounded-full border border-border bg-background text-foreground shadow-[0_14px_34px_rgba(0,0,0,0.14)] transition-all hover:-translate-y-1 hover:border-primary hover:text-primary active:scale-95"
      >
        {isContactOpen ? <X className="h-5 w-5" /> : <Headset className="h-5 w-5" />}
      </button>

      {showScrollTop ? (
        <button
          type="button"
          aria-label="Scroll to top"
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          className="grid h-12 w-12 place-items-center rounded-full border border-border bg-background text-foreground shadow-[0_14px_34px_rgba(0,0,0,0.14)] transition-all hover:-translate-y-1 hover:border-primary hover:text-primary active:scale-95"
        >
          <ArrowUp className="h-5 w-5" />
        </button>
      ) : null}
    </div>
  );
}