import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { mdiMenu, mdiClose, mdiPhone } from '@mdi/js';
import BaseIcon from '../BaseIcon';

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 50) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Determine if we are on the home page
  const isHome = router.pathname === '/';

  const navLinks = [
    { name: 'Anasayfa', href: '/' },
    { name: 'Hakkımızda', href: '/hakkimizda' },
    { name: 'Hizmetler', href: '/hizmetler' },
    { name: 'Projeler', href: '/projeler' },
    { name: 'İletişim', href: '/iletisim' },
  ];

  return (
    <nav className={`fixed w-full z-50 transition-all duration-500 ease-in-out ${
      isScrolled || !isHome 
      ? 'bg-white/90 backdrop-blur-xl shadow-2xl py-2 border-b border-gray-100' 
      : 'bg-transparent py-6'
    }`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <Link href="/" className="flex items-center group transition-transform duration-300 hover:scale-105 active:scale-95">
              <div className={`p-1.5 rounded-2xl transition-all duration-500 flex items-center justify-center ${
                isScrolled || !isHome ? 'bg-white shadow-xl shadow-black/5' : 'bg-white/10 backdrop-blur-md'
              }`}>
                <img 
                  src="/logo-beka.png" 
                  alt="Beka Kaplama" 
                  className="h-10 md:h-12 w-auto object-contain" 
                />
              </div>
            </Link>
          </div>
          
          <div className="hidden md:flex items-center space-x-2 font-sans">
            <div className="flex items-center space-x-8 px-8 border-r border-gray-200">
              {navLinks.map((link) => (
                <Link 
                  key={link.name} 
                  href={link.href} 
                  className={`font-black transition-all text-[11px] uppercase tracking-[0.2em] relative group ${
                    isScrolled || !isHome ? 'text-gray-900' : 'text-white'
                  }`}
                >
                  <span className={`group-hover:text-amber-600 transition-colors ${
                    router.pathname === link.href ? 'text-amber-600' : ''
                  }`}>
                    {link.name}
                  </span>
                  <span className={`absolute -bottom-2 left-0 h-0.5 bg-amber-600 transition-all duration-300 ${
                    router.pathname === link.href ? 'w-full' : 'w-0 group-hover:w-full'
                  }`}></span>
                </Link>
              ))}
            </div>
            
            <div className="flex items-center space-x-4 pl-4">
              <a 
                href="tel:+905000000000" 
                className={`flex items-center space-x-2 transition-colors ${
                  isScrolled || !isHome ? 'text-gray-600 hover:text-amber-600' : 'text-white/80 hover:text-white'
                }`}
              >
                <BaseIcon path={mdiPhone} size={18} />
                <span className="text-sm font-black tracking-tight">+90 500 000 00 00</span>
              </a>
              
              <Link 
                href="/iletisim" 
                className="px-6 py-3 bg-amber-600 text-white rounded-[1rem] font-black hover:bg-amber-700 transition-all shadow-xl shadow-amber-900/20 text-xs uppercase tracking-widest hover:-translate-y-0.5 active:scale-95"
              >
                Ücretsiz Teklif Al
              </Link>
            </div>
          </div>

          <div className="md:hidden flex items-center">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className={`p-2 rounded-xl transition-all ${
                isScrolled || !isHome 
                ? 'text-gray-900 bg-gray-50' 
                : 'text-white bg-white/10 backdrop-blur-md'
              } focus:outline-none`}
            >
              <BaseIcon path={isOpen ? mdiClose : mdiMenu} size={32} />
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      <div className={`fixed inset-0 bg-gray-900/40 backdrop-blur-sm z-40 md:hidden transition-all duration-500 ${
        isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
      }`} onClick={() => setIsOpen(false)}></div>

      {/* Mobile Menu Content */}
      <div className={`fixed inset-y-0 right-0 w-[80%] bg-white z-50 md:hidden transition-all duration-500 ease-in-out transform ${
        isOpen ? 'translate-x-0' : 'translate-x-full'
      }`}>
        <div className="flex flex-col h-full font-sans">
          <div className="flex justify-between items-center p-8 border-b border-gray-100">
            <div className="bg-white p-2 rounded-2xl shadow-xl shadow-black/5 border border-gray-100">
              <img src="/logo-beka.png" alt="Beka Kaplama" className="h-10 w-auto object-contain" />
            </div>
            <button
              onClick={() => setIsOpen(false)}
              className="p-2 text-gray-400 hover:text-amber-600 transition-colors"
            >
              <BaseIcon path={mdiClose} size={32} />
            </button>
          </div>
          
          <div className="flex flex-col space-y-6 p-8 overflow-y-auto">
            {navLinks.map((link, i) => (
              <Link
                key={link.name}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className={`text-4xl font-black tracking-tighter transition-all duration-300 ${
                  router.pathname === link.href ? 'text-amber-600 pl-4 border-l-8 border-amber-600' : 'text-gray-900 hover:text-amber-600 hover:pl-4'
                }`}
                style={{ transitionDelay: `${i * 50}ms` }}
              >
                {link.name}
              </Link>
            ))}
          </div>
          
          <div className="mt-auto p-8 bg-gray-50 border-t border-gray-100">
            <Link
              href="/iletisim"
              onClick={() => setIsOpen(false)}
              className="w-full text-center px-8 py-6 bg-amber-600 text-white rounded-3xl font-black text-xl shadow-2xl shadow-amber-900/40 mb-8 block hover:bg-amber-700 active:scale-95 transition-all"
            >
              Ücretsiz Teklif Al
            </Link>
            
            <div className="text-center">
              <p className="text-gray-400 font-bold uppercase tracking-widest text-[10px] mb-2">Bize Ulaşın</p>
              <a href="tel:+905000000000" className="text-2xl font-black text-gray-900 hover:text-amber-600 transition-colors">+90 500 000 00 00</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
