import React, { useState, useEffect } from 'react';
import { Phone, Menu, X, ChevronDown } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import { NAV_LINKS } from '../constants';

interface NavbarProps {
    transparent?: boolean;
}

const Navbar: React.FC<NavbarProps> = ({ transparent = false }) => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isMobileServicesMenuOpen, setIsMobileServicesMenuOpen] = useState(false);
  const [isMobileLabMenuOpen, setIsMobileLabMenuOpen] = useState(false);
  const [imgError, setImgError] = useState(false);
  const location = useLocation();

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

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

  const isHome = location.pathname === '/';
  // Use transparent background only on Home and when not scrolled, if requested
  const isTransparent = transparent && isHome && !isScrolled;

  return (
    <nav 
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
            isTransparent ? 'bg-transparent py-6' : 'bg-brand-dark/95 backdrop-blur-md py-4 shadow-lg'
        }`}
    >
      <div className="container mx-auto px-6 flex items-center justify-between text-white">
        
        {/* Logo */}
        <Link to="/" className="flex items-center gap-2 group">
            {!imgError ? (
                <img 
                    src="/media/geo-logo.webp" 
                    alt="ГеоВектор" 
                    className="h-[64px] w-auto object-contain"
                    onError={() => setImgError(true)}
                />
            ) : (
                <span className="text-xl font-bold tracking-tighter">
                    ГЕО<span className="text-brand-orange">ВЕКТОР</span>
                </span>
            )}
        </Link>

        {/* Desktop Menu */}
        <ul className="hidden md:flex gap-8 text-sm font-medium items-center">
          {/* Главная */}
          <li>
            <Link 
              to="/" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Главная
            </Link>
          </li>

          {/* О компании */}
          <li>
            <Link 
              to="/about" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/about' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              О компании
            </Link>
          </li>
          
          {/* Услуги с выпадающим меню */}
          <li className="relative group">
            <button 
              className={`flex items-center gap-1 transition-colors hover:text-brand-orange ${
                location.pathname.startsWith('/services') ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Услуги
              <ChevronDown size={16} className={`transition-transform group-hover:rotate-180`} />
            </button>
            
            {/* Выпадающее меню */}
            <div className="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
              <div className="w-72 bg-brand-dark border border-gray-700 rounded-lg shadow-xl overflow-hidden">
                <Link 
                  to="/services" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors font-semibold border-b border-gray-700"
                >
                  Все услуги
                </Link>
                <Link 
                  to="/services/surveying" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Инженерные изыскания
                </Link>
                <Link 
                  to="/services/design" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Проектирование
                </Link>
                <Link 
                  to="/services/construction" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Строительство
                </Link>
                <Link 
                  to="/services/soil-survey" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Обследование грунтов
                </Link>
                <Link 
                  to="/services/building-survey" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Обследование здания
                </Link>
                <Link 
                  to="/services/land-survey" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Кадастровые работы
                </Link>
                <Link 
                  to="/services/technical-tasks" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors border-t border-gray-700"
                >
                  Образцы технических заданий
                </Link>
              </div>
            </div>
          </li>

          {/* Проекты */}
          <li>
            <Link 
              to="/projects" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/projects' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Проекты
            </Link>
          </li>

          {/* Автопарк */}
          <li>
            <Link 
              to="/fleet" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/fleet' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Автопарк
            </Link>
          </li>

          {/* Сертификаты */}
          <li>
            <Link 
              to="/certificates" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/certificates' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Сертификаты
            </Link>
          </li>
          
          {/* Лаборатории с выпадающим меню */}
          <li className="relative group">
            <button 
              className={`flex items-center gap-1 transition-colors hover:text-brand-orange ${
                location.pathname.startsWith('/laboratories') ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Лаборатории
              <ChevronDown size={16} className={`transition-transform group-hover:rotate-180`} />
            </button>
            
            {/* Выпадающее меню */}
            <div className="absolute top-full left-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
              <div className="w-64 bg-brand-dark border border-gray-700 rounded-lg shadow-xl overflow-hidden">
                <Link 
                  to="/laboratories/soil" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Грунтовая лаборатория
                </Link>
                <Link 
                  to="/laboratories/radiation" 
                  className="block px-6 py-3 text-gray-300 hover:bg-brand-orange hover:text-white transition-colors"
                >
                  Радиационная лаборатория
                </Link>
              </div>
            </div>
          </li>

          {/* Контакты */}
          <li>
            <Link 
              to="/contacts" 
              className={`transition-colors hover:text-brand-orange ${
                  location.pathname === '/contacts' ? 'text-brand-orange' : 'text-gray-300'
              }`}
            >
              Контакты
            </Link>
          </li>
        </ul>

        {/* CTA & Mobile Toggle */}
        <div className="flex items-center gap-4">
            <Link to="/contacts" className="hidden md:flex items-center gap-2 text-sm font-medium hover:text-brand-orange transition-colors">
                <Phone className="w-4 h-4 text-brand-orange" />
                <span>Связаться</span>
            </Link>
            
            <button 
                className="md:hidden text-white"
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
                {isMobileMenuOpen ? <X /> : <Menu />}
            </button>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="absolute top-full left-0 w-full bg-brand-dark border-t border-gray-800 p-6 flex flex-col gap-6 md:hidden shadow-xl">
            {/* Главная */}
            <Link 
                to="/" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                Главная
            </Link>

            {/* О компании */}
            <Link 
                to="/about" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                О компании
            </Link>
            
            {/* Услуги в мобильном меню */}
            <div>
              <button
                className="flex items-center justify-between w-full text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileServicesMenuOpen(!isMobileServicesMenuOpen)}
              >
                Услуги
                <ChevronDown size={20} className={`transition-transform ${isMobileServicesMenuOpen ? 'rotate-180' : ''}`} />
              </button>
              
              {isMobileServicesMenuOpen && (
                <div className="ml-4 mt-3 flex flex-col gap-3">
                  <Link 
                    to="/services" 
                    className="text-gray-400 hover:text-brand-orange font-semibold"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Все услуги
                  </Link>
                  <Link 
                    to="/services/surveying" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Инженерные изыскания
                  </Link>
                  <Link 
                    to="/services/design" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Проектирование
                  </Link>
                  <Link 
                    to="/services/construction" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Строительство
                  </Link>
                  <Link 
                    to="/services/soil-survey" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Обследование грунтов
                  </Link>
                  <Link 
                    to="/services/building-survey" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Обследование здания
                  </Link>
                  <Link 
                    to="/services/land-survey" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Кадастровые работы
                  </Link>
                  <Link 
                    to="/services/technical-tasks" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Образцы ТЗ
                  </Link>
                </div>
              )}
            </div>

            {/* Проекты */}
            <Link 
                to="/projects" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                Проекты
            </Link>

            {/* Автопарк */}
            <Link 
                to="/fleet" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                Автопарк
            </Link>

            {/* Сертификаты */}
            <Link 
                to="/certificates" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                Сертификаты
            </Link>
            
            {/* Лаборатории в мобильном меню */}
            <div>
              <button
                className="flex items-center justify-between w-full text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileLabMenuOpen(!isMobileLabMenuOpen)}
              >
                Лаборатории
                <ChevronDown size={20} className={`transition-transform ${isMobileLabMenuOpen ? 'rotate-180' : ''}`} />
              </button>
              
              {isMobileLabMenuOpen && (
                <div className="ml-4 mt-3 flex flex-col gap-3">
                  <Link 
                    to="/laboratories/soil" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Грунтовая лаборатория
                  </Link>
                  <Link 
                    to="/laboratories/radiation" 
                    className="text-gray-400 hover:text-brand-orange"
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    Радиационная лаборатория
                  </Link>
                </div>
              )}
            </div>

            {/* Контакты */}
            <Link 
                to="/contacts" 
                className="text-lg font-medium text-gray-300 hover:text-brand-orange"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                Контакты
            </Link>
            
            <Link 
                to="/contacts" 
                className="flex items-center gap-2 text-brand-orange font-bold mt-4"
                onClick={() => setIsMobileMenuOpen(false)}
            >
                <Phone className="w-5 h-5" /> Связаться
            </Link>
        </div>
      )}
    </nav>
  );
};

export default Navbar;