import React, { useState, useEffect } from 'react';
import { useSeller } from '../../context/SellerContext';

export default function Header() {
  const { currentPage, setCurrentPage, isMobileMenuOpen, setIsMobileMenuOpen, isProfileComplete } = useSeller();
  const [isScrolled, setIsScrolled] = useState(false);

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

  const handleNav = (page: any) => {
    setCurrentPage(page);
    setIsMobileMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <header
      className={`w-full border-b border-gray-200 bg-white/95 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300 ${
        isScrolled ? 'shadow-md' : 'shadow-sm'
      }`}
      id="main-header"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
        {/* Brand Logo */}
        <a 
          className="flex items-center gap-3 group cursor-pointer" 
          onClick={() => handleNav('home')}
          aria-label="TRADHOX Home"
        >
          <img
            alt="TRADHOX Logo"
            className="h-12 sm:h-14 md:h-16 w-auto object-contain transition-transform group-hover:scale-105"
            src="/images/landing/tradhox-logo.png"
          />
        </a>

        {/* Desktop Navigation Links & Primary CTA */}
        <div className="flex items-center gap-8">
          <nav className="hidden lg:flex items-center space-x-8 text-sm font-medium text-slate-700">
            <button 
              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
                currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'
              }`}
              onClick={() => handleNav('how-it-works')}
              type="button"
            >
              How it works
            </button>
            <button 
              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
                currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'
              }`}
              onClick={() => handleNav('pricing')}
              type="button"
            >
              Pricing
            </button>
            <button 
              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
                currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'
              }`}
              onClick={() => handleNav('grow-business')}
              type="button"
            >
              Grow your business
            </button>
            <button
              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
                currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'
              }`}
              onClick={() => handleNav('contact')}
              type="button"
            >
              Contact Us
            </button>
            <button
              className={`hover:text-brand-maroon transition-colors font-semibold cursor-pointer ${
                currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'
              }`}
              onClick={() => handleNav('login')}
              type="button"
            >
              Login
            </button>
          </nav>

          {/* Action Button */}
          <div className="flex items-center gap-3">
            {isProfileComplete ? (
              <button
                className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm cursor-pointer"
                onClick={() => handleNav('dashboard')}
                type="button"
              >
                <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm cursor-pointer active:scale-95"
                onClick={() => handleNav('signup')}
                type="button"
              >
                Become a seller
              </button>
            )}

            {/* Mobile Burger Toggle */}
            <button
              aria-expanded={isMobileMenuOpen}
              aria-label="Toggle navigation menu"
              className="p-2 rounded-lg text-stone-600 hover:text-slate-900 hover:bg-stone-100 lg:hidden focus:outline-none cursor-pointer"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              type="button"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {isMobileMenuOpen ? (
                  <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
                ) : (
                  <path d="M4 6h16M4 12h16M4 18h16" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
                )}
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu Dropdown */}
      {isMobileMenuOpen && (
        <div className="lg:hidden border-t border-gray-200 bg-white px-6 py-4 shadow-xl flex flex-col gap-3">
          <button 
            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
            onClick={() => handleNav('how-it-works')}
            type="button"
          >
            How it works
          </button>
          <button 
            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
            onClick={() => handleNav('pricing')}
            type="button"
          >
            Pricing
          </button>
          <button 
            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
            onClick={() => handleNav('grow-business')}
            type="button"
          >
            Grow your business
          </button>
          <button 
            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
            onClick={() => handleNav('contact')}
            type="button"
          >
            Contact Us
          </button>
          <button 
            className={`text-left py-2 text-sm font-semibold hover:text-brand-maroon ${currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'}`}
            onClick={() => handleNav('login')}
            type="button"
          >
            Login
          </button>
          <div className="pt-2 border-t border-gray-100">
            {isProfileComplete ? (
              <button
                className="w-full text-center py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm"
                onClick={() => handleNav('dashboard')}
                type="button"
              >
                <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
              </button>
            ) : (
              <button
                className="w-full text-center py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm"
                onClick={() => handleNav('signup')}
                type="button"
              >
                Become a seller
              </button>
            )}
          </div>
        </div>
      )}
    </header>
  );
}