import React, { useState, useEffect } from 'react';
import { Menu, X, Rocket, Sparkles, ExternalLink, MessageCircle, MessagesSquare } from 'lucide-react';
import { YOUR_BUY_LINK, YOUR_DISCORD_URL, YOUR_WHATSAPP_URL } from '../config';
import { triggerBirthdayConfetti } from '../utils/confetti';
import { ThemeToggle } from './ThemeToggle';
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';

export const Navbar: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'ABOUT', href: '#why-bm-alpha' },
    { name: 'TOKENOMICS', href: '#token' },
    { name: 'HOW TO BUY', href: '#how-to-buy' },
    { name: 'COMMUNITY', href: '#community' },
  ];

  const handleBuyClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    triggerBirthdayConfetti();
    setMobileMenuOpen(false);
  };

  return (
    <header
      id="main-navbar"
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? 'bg-white/85 dark:bg-[#0a0c14]/90 backdrop-blur-md border-b border-slate-200/80 dark:border-white/10 shadow-sm dark:shadow-lg dark:shadow-black/60 py-3.5'
          : 'bg-transparent py-5'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          {/* Brand Logo & Wordmark */}
          <a
            href="#"
            className="flex items-center gap-3 group focus:outline-none"
            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
          >
            <div className="relative flex items-center justify-center w-9 h-9 rounded-full overflow-hidden bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] p-[1.5px] shadow-[0_0_15px_rgba(255,140,50,0.5)] group-hover:shadow-[0_0_20px_rgba(0,215,255,0.7)] transition-all duration-300">
              <div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-full flex items-center justify-center overflow-hidden">
                <img
                  src={coinImg}
                  alt="BM Alpha Coin"
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                />
              </div>
            </div>
            <div className="flex flex-col">
              <div className="flex items-center gap-1.5">
                <span className="font-display font-black text-xl sm:text-2xl tracking-tighter text-slate-900 dark:text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-[#FF8C32] group-hover:to-[#00D7FF] transition-all">
                  BM ALPHA
                </span>
                <span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30 tracking-wider">
                  SOL
                </span>
              </div>
              <span className="text-[10px] font-medium text-slate-500 dark:text-gray-400 -mt-1 tracking-wide">
                by BirthdayMessaging
              </span>
            </div>
          </a>

          {/* Desktop Navigation Links */}
          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600 dark:text-gray-400">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="hover:text-[#FF8C32] dark:hover:text-[#00D7FF] transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-gradient-to-r after:from-[#FF8C32] after:to-[#00D7FF] hover:after:w-full after:transition-all after:duration-250 font-bold text-xs tracking-wider"
              >
                {link.name}
              </a>
            ))}
          </nav>

          {/* Desktop Action CTAs */}
          <div className="hidden md:flex items-center gap-3">
            {/* Theme Toggle Button */}
            <ThemeToggle />

            <a
              id="nav-buy-cta-desktop"
              href="#how-to-buy"
              onClick={handleBuyClick}
              className="bg-[#FF8C32] hover:bg-[#E6761D] text-black px-6 py-2.5 rounded-full font-bold text-xs shadow-[0_0_15px_rgba(255,140,50,0.35)] hover:shadow-[0_0_20px_rgba(255,140,50,0.5)] transition-all active:scale-95 flex items-center gap-1.5"
            >
              <Rocket className="w-3.5 h-3.5 text-black" />
              <span>BUY BM ALPHA</span>
            </a>
          </div>

          {/* Mobile Hamburger Button */}
          <div className="flex md:hidden items-center gap-2">
            <ThemeToggle />
            <a
              href="#how-to-buy"
              onClick={handleBuyClick}
              className="inline-flex items-center justify-center px-3.5 py-1.5 rounded-full text-xs font-bold font-display text-black bg-[#FF8C32] shadow-[0_0_12px_rgba(255,140,50,0.4)]"
            >
              BUY
            </a>
            <button
              id="mobile-menu-toggle"
              type="button"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-2 rounded-lg text-slate-700 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 focus:outline-none"
              aria-label="Toggle navigation menu"
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Drawer Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white/95 dark:bg-[#0a0c14]/95 backdrop-blur-xl border-b border-slate-200 dark:border-white/10 px-4 pt-3 pb-6 shadow-xl animate-in slide-in-from-top-3 duration-200">
          <div className="flex flex-col space-y-3">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className="px-3 py-2 rounded-lg text-sm font-bold tracking-wider text-slate-800 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
              >
                {link.name}
              </a>
            ))}
            <div className="pt-2 flex flex-col gap-2">
              <a
                id="nav-buy-cta-mobile"
                href="#how-to-buy"
                onClick={handleBuyClick}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-full font-display font-black text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_20px_rgba(255,140,50,0.4)] text-center"
              >
                <Rocket className="w-4 h-4 text-black" />
                BUY BM ALPHA
              </a>
              <a
                href={YOUR_WHATSAPP_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-emerald-600 hover:bg-emerald-500 text-center shadow-sm"
              >
                <MessageCircle className="w-3.5 h-3.5" />
                <span>JOIN WHATSAPP CHANNEL</span>
              </a>
              <a
                href={YOUR_DISCORD_URL}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-[#5865F2] hover:bg-[#4752C4] text-center shadow-sm"
              >
                <MessagesSquare className="w-3.5 h-3.5" />
                <span>JOIN DISCORD</span>
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  );
};
