import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, X, Phone, ChevronDown } from 'lucide-react';
import { LOGO, NAV_LINKS, CONTACT } from '../config/site';

const Navigation = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isServicesOpen, setIsServicesOpen] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

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

  // Fechar menu mobile ao mudar de rota
  useEffect(() => {
    setIsMobileMenuOpen(false);
    setIsServicesOpen(false);
  }, [location]);

  const isActive = (path: string) => {
    if (path === '/') {
      return location.pathname === '/';
    }
    return location.pathname.startsWith(path);
  };

  // Renderiza o logo (SVG inline ou imagem)
  const renderLogo = () => {
    if (LOGO.imageUrl) {
      return <img src={LOGO.imageUrl} alt={LOGO.text} className="h-10 w-auto" />;
    }
    return (
      <div dangerouslySetInnerHTML={{ __html: LOGO.svgInline }} className="flex-shrink-0" />
    );
  };

  return (
    <nav className={`nav-sticky ${isScrolled ? 'scrolled' : ''}`}>
      <div className="container-custom">
        <div className="flex items-center justify-between h-20">
          {/* Logo - importado de config/site.ts */}
          <Link to={LOGO.href} className="flex items-center">
            {renderLogo()}
          </Link>

          {/* Desktop Navigation - importado de config/site.ts */}
          <div className="hidden lg:flex items-center gap-8">
            {NAV_LINKS.map((link) => (
              <div key={link.name} className="relative">
                {link.submenu ? (
                  <div
                    className="relative"
                    onMouseEnter={() => setIsServicesOpen(true)}
                    onMouseLeave={() => setIsServicesOpen(false)}
                  >
                    <button
                      className={`flex items-center gap-1 nav-link text-sm font-medium transition-colors ${
                        link.submenu.some(s => location.pathname.startsWith(s.href))
                          ? 'text-[#cbf400]'
                          : 'text-gray-300 hover:text-white'
                      }`}
                    >
                      {link.name}
                      <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`} />
                    </button>
                    {isServicesOpen && (
                      <div className="absolute top-full left-0 mt-2 w-56 bg-[#1a1a1a] rounded-xl border border-white/10 shadow-xl py-2 z-50">
                        {link.submenu.map((sub) => (
                          <Link
                            key={sub.name}
                            to={sub.href}
                            className="block px-4 py-2.5 text-sm text-gray-300 hover:text-[#cbf400] hover:bg-white/5 transition-colors"
                          >
                            {sub.name}
                          </Link>
                        ))}
                      </div>
                    )}
                  </div>
                ) : (
                  <Link
                    to={link.href}
                    className={`nav-link text-sm font-medium transition-colors ${
                      isActive(link.href) ? 'text-[#cbf400]' : 'text-gray-300 hover:text-white'
                    }`}
                  >
                    {link.name}
                  </Link>
                )}
              </div>
            ))}
          </div>

          {/* Desktop CTA - importado de config/site.ts */}
          <div className="hidden lg:flex items-center gap-4">
            <a
              href={`tel:${CONTACT.phoneRaw}`}
              className="flex items-center gap-2 text-sm text-gray-400 hover:text-[#cbf400] transition-colors"
            >
              <Phone className="w-4 h-4" />
              {CONTACT.phone}
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button
            className="lg:hidden p-2 text-gray-300 hover:text-white"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label="Menu"
          >
            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Menu - importado de config/site.ts */}
        {isMobileMenuOpen && (
          <div className="lg:hidden py-4 border-t border-white/10">
            <div className="flex flex-col gap-4">
              {NAV_LINKS.map((link) => (
                <div key={link.name}>
                  {link.submenu ? (
                    <div>
                      <button
                        onClick={() => setIsServicesOpen(!isServicesOpen)}
                        className="flex items-center justify-between w-full text-gray-300 hover:text-[#cbf400] transition-colors py-2"
                      >
                        <span className="font-medium">{link.name}</span>
                        <ChevronDown className={`w-4 h-4 transition-transform ${isServicesOpen ? 'rotate-180' : ''}`} />
                      </button>
                      {isServicesOpen && (
                        <div className="pl-4 mt-2 space-y-2">
                          {link.submenu.map((sub) => (
                            <Link
                              key={sub.name}
                              to={sub.href}
                              className="block text-sm text-gray-400 hover:text-[#cbf400] py-1"
                            >
                              {sub.name}
                            </Link>
                          ))}
                        </div>
                      )}
                    </div>
                  ) : (
                    <Link
                      to={link.href}
                      className={`block py-2 font-medium transition-colors ${
                        isActive(link.href) ? 'text-[#cbf400]' : 'text-gray-300 hover:text-[#cbf400]'
                      }`}
                    >
                      {link.name}
                    </Link>
                  )}
                </div>
              ))}
              <a
                href={`tel:${CONTACT.phoneRaw}`}
                className="flex items-center gap-2 text-sm text-gray-400 hover:text-[#cbf400] pt-4 border-t border-white/10"
              >
                <Phone className="w-4 h-4" />
                {CONTACT.phone}
              </a>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navigation;
