import { useState, useEffect } from 'react';
import { Menu, X, Instagram, CalendarCheck } from 'lucide-react';
import { Button } from '../ui/Button';
import { motion, AnimatePresence } from 'motion/react';
import { Link, useLocation, useNavigate } from 'react-router-dom';

import { LOGO_URL } from '../../constants';

interface NavbarProps {
  onAdminClick?: () => void;
  onPartnershipClick?: () => void;
}

export function Navbar({ onAdminClick, onPartnershipClick }: NavbarProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();

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

  const goToSection = (sectionId: string) => {
    if (location.pathname === '/') {
      document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
      return;
    }

    sessionStorage.setItem('galpao_imperial_scroll_target', sectionId);
    navigate('/');
  };

  const navLinks: Array<{ name: string; section?: string; to?: string }> = [
    { name: 'Experiência', section: 'experiencia' },
    { name: 'Menu', section: 'menu' },
    { name: 'Estrutura', section: 'estrutura' },
    { name: 'Galeria', section: 'galeria' },
    { name: 'Localização', section: 'localizacao' },
  ];

  const reserve = () => window.open('https://wa.me/5527997532187?text=Ol%C3%A1!%20Quero%20fazer%20uma%20reserva%20no%20Galp%C3%A3o%20Imperial.', '_blank');

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'py-4' : 'py-8'}`}>
      <div className="max-w-7xl mx-auto px-6 sm:px-12">
        <div className={`relative flex items-center justify-between px-8 h-20 rounded-[32px] transition-all duration-500 ${scrolled ? 'glass wine-glow' : 'bg-black/30 border border-brand-gold/15'}`}>
          
          <Link to="/" className="flex-shrink-0 flex items-center gap-4 group cursor-pointer">
            <div className="w-12 h-12 imperial-logo-frame rounded-full flex items-center justify-center p-1.5 group-hover:scale-105 transition-transform duration-500 overflow-hidden">
               <img src={LOGO_URL} alt="Galpão Imperial Logo" className="w-full h-full object-contain" />
            </div>
            <div className="flex flex-col leading-none">
              <span className="font-display font-black text-2xl tracking-normal uppercase text-white group-hover:text-brand-gold transition-colors">
                Galpão
              </span>
              <span className="text-brand-gold text-[9px] font-black tracking-[0.4em] uppercase mt-1">Imperial</span>
            </div>
          </Link>

          <div className="hidden lg:flex items-center gap-8">
            {navLinks.map((link) => (
              link.section ? (
                <button
                  key={link.name}
                  onClick={() => goToSection(link.section!)}
                  className="text-[11px] font-black uppercase tracking-[0.3em] text-gray-400 hover:text-white transition-all hover:scale-105 relative group/link"
                >
                  {link.name}
                  <span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-brand-wine transition-all group-hover/link:w-full"></span>
                </button>
              ) : (
                <Link
                  key={link.name}
                  to={link.to!}
                  className="text-[11px] font-black uppercase tracking-[0.3em] text-gray-400 hover:text-white transition-all hover:scale-105 relative group/link"
                >
                  {link.name}
                  <span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-brand-wine transition-all group-hover/link:w-full"></span>
                </Link>
              )
            ))}
          </div>

          <div className="flex items-center gap-6">
            <div className="hidden sm:flex items-center gap-6 border-l border-white/10 pl-8">
              <Link 
                to="/admin"
                className="text-[9px] font-black uppercase tracking-[0.3em] text-gray-600 hover:text-brand-wine transition-colors"
                title="Painel Administrativo"
              >
                ADMIN
              </Link>
              <a href="https://www.instagram.com/galpao.imperial/" target="_blank" rel="noreferrer" className="text-gray-400 hover:text-brand-gold transition-colors" title="Instagram Galpao Imperial">
                 <Instagram className="w-5 h-5" />
              </a>
              <Button 
                variant="primary" 
                size="sm" 
                className="rounded-2xl px-8 py-3 text-[10px] font-black"
                onClick={reserve}
              >
                RESERVAR
              </Button>
            </div>
            
            <button 
              onClick={() => setIsOpen(!isOpen)} 
              className="lg:hidden w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center text-white border border-white/10 active:scale-90 transition-all"
            >
              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0, y: -20 }}
            animate={{ opacity: 1, height: 'auto', y: 0 }}
            exit={{ opacity: 0, height: 0, y: -20 }}
            className="lg:hidden mx-6 mt-4 glass rounded-[32px] border border-white/5 overflow-hidden wine-glow"
          >
            <div className="p-8 space-y-6">
              {navLinks.map((link) => (
                link.section ? (
                  <button
                    key={link.name}
                    onClick={() => {
                      setIsOpen(false);
                      goToSection(link.section!);
                    }}
                    className="block text-xl font-display font-black text-white uppercase tracking-tighter hover:text-brand-gold transition-colors text-left"
                  >
                    {link.name}
                  </button>
                ) : (
                  <Link
                    key={link.name}
                    to={link.to!}
                    onClick={() => setIsOpen(false)}
                    className="block text-xl font-display font-black text-white uppercase tracking-tighter hover:text-brand-gold transition-colors"
                  >
                    {link.name}
                  </Link>
                )
              ))}
              <div className="pt-6 border-t border-white/5 space-y-4">
                <Button 
                  className="w-full gap-2 py-6 rounded-2xl text-[10px] font-black tracking-widest" 
                  variant="primary"
                  onClick={() => {
                    setIsOpen(false);
                    reserve();
                  }}
                >
                  <CalendarCheck className="w-5 h-5" />
                  FAZER RESERVA
                </Button>
                <div className="flex justify-center">
                   <Link 
                    to="/admin"
                    onClick={() => setIsOpen(false)}
                    className="text-[9px] font-black uppercase tracking-[0.3em] text-gray-500 hover:text-brand-wine"
                  >
                    ACESSO ADMINISTRATIVO
                  </Link>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
