'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useAuth } from '@/context/auth-context';
import { Menu, X, ArrowRight, Sparkles } from 'lucide-react';

interface LandingHeaderProps {
  activeTab?: string;
  onNavigate?: (tabId: string) => void;
}

export default function LandingHeader({ onNavigate }: LandingHeaderProps) {
  const { user } = useAuth();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const handleNavClick = (e: React.MouseEvent, targetId: string) => {
    e.preventDefault();
    setMobileMenuOpen(false);
    if (onNavigate) {
      onNavigate(targetId);
    }
    const element = document.getElementById(targetId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <header className={`sticky top-0 z-50 transition-all duration-300 ${
      scrolled 
        ? 'bg-[#FBFBFA]/90 backdrop-blur-md border-b border-slate-200/80 shadow-sm py-3' 
        : 'bg-[#FBFBFA] py-5'
    }`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          
          {/* Brand Logo */}
          <Link href="/" className="flex items-center group">
            <span className="font-extrabold text-xl tracking-tight text-slate-900 font-sans">
              WhatsApp Commerce Hub
            </span>
          </Link>

          {/* Desktop Navigation Links */}
          <nav className="hidden md:flex items-center space-x-8 font-medium text-sm text-slate-600">
            <a 
              href="#features" 
              onClick={(e) => handleNavClick(e, 'features')}
              className="hover:text-slate-900 transition-colors py-1"
            >
              Features
            </a>
            <a 
              href="#why-us" 
              onClick={(e) => handleNavClick(e, 'why-us')}
              className="hover:text-slate-900 transition-colors py-1"
            >
              Solutions
            </a>
            <a 
              href="#pricing" 
              onClick={(e) => handleNavClick(e, 'pricing')}
              className="hover:text-slate-900 transition-colors py-1"
            >
              Pricing
            </a>
            <a 
              href="#faq" 
              onClick={(e) => handleNavClick(e, 'faq')}
              className="hover:text-slate-900 transition-colors py-1"
            >
              FAQ
            </a>
            <a 
              href="https://customer-mauve-zeta.vercel.app/"
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-slate-900 transition-colors py-1"
            >
              Docs
            </a>
          </nav>

          {/* Action CTA Buttons */}
          <div className="hidden md:flex items-center space-x-4">
            {user ? (
              <Link 
                href="/dashboard" 
                className="bg-emerald-600 hover:bg-emerald-700 !text-white font-semibold text-xs uppercase tracking-wider px-5 py-2.5 rounded-xl shadow-md shadow-emerald-600/20 transition-all hover:scale-[1.02] flex items-center gap-2"
                style={{ color: '#ffffff' }}
              >
                <span className="!text-white font-semibold" style={{ color: '#ffffff' }}>Go To Dashboard</span>
                <ArrowRight className="w-4 h-4 !text-white" />
              </Link>
            ) : (
              <>
                <Link 
                  href="/login" 
                  className="text-slate-700 font-semibold text-sm hover:text-slate-900 transition-colors px-3 py-2"
                >
                  Sign In
                </Link>
                <Link 
                  href="/register" 
                  className="bg-slate-900 hover:bg-slate-800 !text-white font-semibold text-xs uppercase tracking-wider px-5 py-2.5 rounded-xl shadow-md shadow-slate-900/10 transition-all hover:scale-[1.02] flex items-center gap-2"
                  style={{ color: '#ffffff' }}
                >
                  <span className="!text-white font-semibold" style={{ color: '#ffffff' }}>Get Started</span>
                  <ArrowRight className="w-3.5 h-3.5 !text-emerald-400" />
                </Link>
              </>
            )}
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden flex items-center">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-2.5 text-slate-700 bg-white border border-slate-200 rounded-xl shadow-sm hover:bg-slate-50 transition-colors"
              aria-label="Toggle Navigation Menu"
            >
              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Drawer */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-[#FBFBFA] border-b border-slate-200 px-4 pt-3 pb-6 space-y-4 shadow-lg animate-in slide-in-from-top duration-200">
          <nav className="flex flex-col space-y-3 font-medium text-slate-700">
            <a 
              href="#features" 
              onClick={(e) => handleNavClick(e, 'features')}
              className="px-3 py-2 hover:bg-slate-100/80 rounded-lg text-sm"
            >
              Features
            </a>
            <a 
              href="#why-us" 
              onClick={(e) => handleNavClick(e, 'why-us')}
              className="px-3 py-2 hover:bg-slate-100/80 rounded-lg text-sm"
            >
              Solutions
            </a>
            <a 
              href="#pricing" 
              onClick={(e) => handleNavClick(e, 'pricing')}
              className="px-3 py-2 hover:bg-slate-100/80 rounded-lg text-sm"
            >
              Pricing
            </a>
            <a 
              href="#faq" 
              onClick={(e) => handleNavClick(e, 'faq')}
              className="px-3 py-2 hover:bg-slate-100/80 rounded-lg text-sm"
            >
              FAQ
            </a>
            <a 
              href="https://customer-mauve-zeta.vercel.app/"
              target="_blank"
              rel="noopener noreferrer"
              className="px-3 py-2 hover:bg-slate-100/80 rounded-lg text-sm"
            >
              Docs
            </a>
          </nav>
          <div className="pt-2 border-t border-slate-200 flex flex-col gap-2">
            {user ? (
              <Link 
                href="/dashboard" 
                className="w-full text-center bg-emerald-600 text-white font-semibold text-xs uppercase tracking-wider py-3 rounded-xl shadow-sm"
              >
                Go To Dashboard
              </Link>
            ) : (
              <>
                <Link 
                  href="/login" 
                  className="w-full text-center bg-white text-slate-800 border border-slate-200 font-semibold text-xs uppercase tracking-wider py-3 rounded-xl shadow-sm"
                >
                  Sign In
                </Link>
                <Link 
                  href="/register" 
                  className="w-full text-center bg-slate-900 !text-white font-semibold text-xs uppercase tracking-wider py-3 rounded-xl shadow-sm"
                  style={{ color: '#ffffff' }}
                >
                  <span className="!text-white font-semibold" style={{ color: '#ffffff' }}>Get Started</span>
                </Link>
              </>
            )}
          </div>
        </div>
      )}
    </header>
  );
}