"use client";

import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import {
  getContextualWhatsAppMessage,
  getWhatsAppUrl,
} from "@/lib/whatsapp";

interface WhatsAppButtonProps {
  defaultMessage?: string;
}

export default function WhatsAppButton({
  defaultMessage,
}: WhatsAppButtonProps) {
  const [visible, setVisible] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    // Reveal after a slight delay for elegant UX
    const timer = setTimeout(() => setVisible(true), 600);
    return () => clearTimeout(timer);
  }, []);

  const message =
    defaultMessage || getContextualWhatsAppMessage(pathname || "/");
  const href = getWhatsAppUrl(message);

  if (!visible) return null;

  return (
    <aside
      aria-label="Let's Connect via WhatsApp"
      className="fixed bottom-6 right-6 z-50 animate-fade-up"
    >
      <a
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Let's Connect on WhatsApp with Vietnam Wedding Guide"
        className="group flex items-center gap-2.5 bg-white/95 backdrop-blur-md hover:bg-white text-brand-dark border border-brand-border hover:border-brand-gold px-4 py-2.5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5 ring-1 ring-brand-border/40"
      >
        <span className="relative flex h-2.5 w-2.5">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#25D366] opacity-75" />
          <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-[#25D366]" />
        </span>
        <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
        <span className="text-xs font-semibold uppercase tracking-wider text-brand-dark hidden sm:inline-block">
          Let&apos;s Connect
        </span>
      </a>
    </aside>
  );
}