import React, { useState } from 'react';
import { Menu, X, ArrowRight, MessageSquare, Phone, Mail, GraduationCap, Scale, Calculator } from 'lucide-react';
import { useComparison } from '../context/ComparisonContext';

interface NavbarProps {
  currentPath: string;
  onNavigate: (path: string) => void;
  onOpenEnquiry: (mode?: 'learner' | 'guidance' | 'corporate' | 'partnership' | 'advisory') => void;
}

export function Navbar({ currentPath, onNavigate, onOpenEnquiry }: NavbarProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const { selectedSlugs, setDrawerOpen } = useComparison();

  const navItems = [
    { label: 'Programmes', path: '/programmes' },
    { label: 'For Organisations', path: '/organisations' },
    { label: 'Career Support', path: '/career-support' },
    { label: 'About', path: '/about' },
  ];

  const utilityItems = [
    { label: 'Learning Experience', path: '/learning' },
    { label: 'Services', path: '/services' },
    { label: 'Learner Access', path: '/learner-access' },
    { label: 'Contact', path: '/contact' },
  ];

  const handleNavClick = (path: string) => {
    onNavigate(path);
    setMobileMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <header className="sticky top-0 z-40 bg-[#0B4035] text-white shadow-md border-b border-[#0B4035]/20">
      {/* Top Utility Bar (Desktop) */}
      <div className="hidden lg:block bg-[#072C24] text-xs text-stone-300 border-b border-white/10 py-1.5 px-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1.5 text-[#D5E64D] font-medium">
              <span className="w-1.5 h-1.5 rounded-full bg-[#D5E64D] animate-pulse" />
              Fully Online Delivery: Zoom · Google Meet · WhatsApp
            </span>
            <span className="text-stone-500">|</span>
            <span className="text-stone-300">Nairobi, Kenya</span>
          </div>

          <div className="flex items-center gap-5">
            <button
              onClick={() => setDrawerOpen(true)}
              className="transition-colors text-xs font-semibold text-stone-200 hover:text-white hover:underline cursor-pointer flex items-center gap-1.5"
            >
              <Scale className="w-3 h-3 text-[#D5E64D]" />
              <span>Compare Tracks ({selectedSlugs.length})</span>
            </button>
            <span className="text-stone-500">|</span>
            <button
              onClick={() => {
                handleNavClick('/');
                setTimeout(() => {
                  const el = document.getElementById('schedule');
                  if (el) el.scrollIntoView({ behavior: 'smooth' });
                }, 100);
              }}
              className="transition-colors text-xs font-semibold text-[#D5E64D] hover:underline cursor-pointer flex items-center gap-1.5"
            >
              <span className="w-1.5 h-1.5 rounded-full bg-[#D5E64D] animate-ping" />
              <span>Live Schedule</span>
            </button>
            <span className="text-stone-500">|</span>
            <button
              onClick={() => {
                handleNavClick('/');
                setTimeout(() => {
                  const el = document.getElementById('tuition');
                  if (el) el.scrollIntoView({ behavior: 'smooth' });
                }, 100);
              }}
              className="transition-colors text-xs font-semibold text-stone-200 hover:text-white hover:underline cursor-pointer"
            >
              Tuition & Plans
            </button>
            <span className="text-stone-500">|</span>
            <button
              onClick={() => {
                handleNavClick('/');
                setTimeout(() => {
                  const el = document.getElementById('advisor');
                  if (el) el.scrollIntoView({ behavior: 'smooth' });
                }, 100);
              }}
              className="transition-colors text-xs font-semibold text-stone-200 hover:text-white hover:underline cursor-pointer"
            >
              Pathway Quiz
            </button>
            <span className="text-stone-500">|</span>
            {utilityItems.map((item) => (
              <button
                key={item.path}
                onClick={() => handleNavClick(item.path)}
                className={`transition-colors text-xs font-medium ${
                  currentPath === item.path ? 'text-[#D5E64D] underline underline-offset-4' : 'text-stone-300 hover:text-white'
                }`}
              >
                {item.label}
              </button>
            ))}
            <span className="text-stone-500">|</span>
            <a
              href="https://wa.me/254101936893?text=Hello%20PANIA%20Digital%20Academy%2C%20I%20have%20an%20enquiry."
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-[#25D366] hover:text-[#32E874] transition-colors"
              title="Message on WhatsApp"
            >
              <MessageSquare className="w-3 h-3" />
              <span>+254 101 936 893</span>
            </a>
          </div>
        </div>
      </div>

      {/* Main Navigation Row */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
        {/* Brand Logo (Preserved exact supplied transparent asset) */}
        <button
          onClick={() => handleNavClick('/')}
          className="flex items-center gap-3 group text-left focus:outline-hidden focus:ring-2 focus:ring-[#D5E64D] rounded-lg p-1"
          aria-label="PANIA Digital Academy Home"
        >
          <img
            src="/assets/aistudio/Transparent_green_logo_with_citron_ribbon_a9ac7fbd.png"
            alt="PANIA Digital Academy Logo"
            className="h-12 sm:h-14 w-auto object-contain brightness-105"
          />
        </button>

        {/* Desktop Primary Nav Links */}
        <nav className="hidden lg:flex items-center gap-7" aria-label="Main Navigation">
          {navItems.map((item) => {
            const isActive = currentPath === item.path || (item.path !== '/' && currentPath.startsWith(item.path));
            return (
              <button
                key={item.path}
                onClick={() => handleNavClick(item.path)}
                className={`text-sm tracking-wide font-medium transition-colors py-2 relative ${
                  isActive ? 'text-[#D5E64D] font-semibold' : 'text-stone-200 hover:text-white'
                }`}
              >
                {item.label}
                {isActive && (
                  <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#D5E64D] rounded-full" />
                )}
              </button>
            );
          })}
        </nav>

        {/* Action Buttons (Desktop) */}
        <div className="hidden lg:flex items-center gap-3">
          <button
            onClick={() => handleNavClick('/learner-access')}
            className="px-3.5 py-2 text-xs font-semibold text-stone-200 hover:text-white hover:bg-white/10 rounded-lg transition-colors flex items-center gap-1.5"
            title="LMS Access for registered students"
          >
            <GraduationCap className="w-4 h-4 text-[#D5E64D]" />
            <span>Learner Access</span>
          </button>

          <button
            onClick={() => onOpenEnquiry('guidance')}
            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[#D5E64D] text-[#0B4035] font-bold text-xs hover:bg-[#C2D33C] transition-all shadow-xs hover:shadow-md cursor-pointer"
          >
            <span>Get guidance</span>
            <ArrowRight className="w-3.5 h-3.5" />
          </button>
        </div>

        {/* Mobile Menu Button */}
        <div className="flex items-center gap-2 lg:hidden">
          <button
            onClick={() => onOpenEnquiry('guidance')}
            className="px-3 py-1.5 rounded-lg bg-[#D5E64D] text-[#0B4035] font-bold text-xs"
          >
            Guidance
          </button>
          
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="p-2 rounded-lg text-stone-200 hover:text-white hover:bg-white/10 focus:outline-hidden focus:ring-2 focus:ring-[#D5E64D]"
            aria-expanded={mobileMenuOpen}
            aria-label="Toggle navigation menu"
          >
            {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Mobile Drawer Navigation */}
      {mobileMenuOpen && (
        <div className="lg:hidden bg-[#072C24] border-t border-white/10 px-4 pt-3 pb-6 space-y-4 animate-in slide-in-from-top-2 duration-150">
          {/* Mobile Cohort Schedule quick CTA */}
          <div className="p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between">
            <div>
              <p className="text-xs font-bold text-[#D5E64D] flex items-center gap-1.5">
                <span className="w-2 h-2 rounded-full bg-[#D5E64D] animate-ping" />
                Live Cohort Schedule
              </p>
              <p className="text-[11px] text-stone-300">November 2026 Intakes</p>
            </div>
            <button
              onClick={() => {
                handleNavClick('/');
                setTimeout(() => {
                  const el = document.getElementById('schedule');
                  if (el) el.scrollIntoView({ behavior: 'smooth' });
                }, 100);
              }}
              className="px-3 py-1.5 rounded-lg bg-[#D5E64D] text-[#072C24] font-bold text-xs cursor-pointer hover:bg-white"
            >
              View Dates
            </button>
          </div>

          {/* Mobile Compare Button */}
          <button
            onClick={() => {
              setMobileMenuOpen(false);
              setDrawerOpen(true);
            }}
            className="w-full p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between text-xs font-bold text-white hover:bg-white/10 transition cursor-pointer"
          >
            <span className="flex items-center gap-2">
              <Scale className="w-4 h-4 text-[#D5E64D]" />
              <span>Side-by-Side Track Comparison</span>
            </span>
            <span className="px-2 py-0.5 rounded-full bg-[#D5E64D] text-[#072C24] text-[10px] font-bold">
              {selectedSlugs.length} selected
            </span>
          </button>

          {/* Mobile Tuition Calculator Button */}
          <button
            onClick={() => {
              setMobileMenuOpen(false);
              handleNavClick('/');
              setTimeout(() => {
                const el = document.getElementById('tuition');
                if (el) el.scrollIntoView({ behavior: 'smooth' });
              }, 100);
            }}
            className="w-full p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between text-xs font-bold text-white hover:bg-white/10 transition cursor-pointer"
          >
            <span className="flex items-center gap-2">
              <Calculator className="w-4 h-4 text-[#D5E64D]" />
              <span>Tuition & Payment Calculator</span>
            </span>
            <span className="text-[10px] text-stone-300">KES / USD</span>
          </button>

          <div className="space-y-1">
            <span className="text-[11px] font-semibold text-[#D5E64D] uppercase tracking-wider block px-3 py-1">
              Primary Pages
            </span>
            {navItems.map((item) => (
              <button
                key={item.path}
                onClick={() => handleNavClick(item.path)}
                className={`w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  currentPath === item.path ? 'bg-white/15 text-[#D5E64D] font-bold' : 'text-stone-200 hover:bg-white/5'
                }`}
              >
                {item.label}
              </button>
            ))}
          </div>

          <div className="space-y-1 pt-2 border-t border-white/10">
            <span className="text-[11px] font-semibold text-stone-400 uppercase tracking-wider block px-3 py-1">
              More Information
            </span>
            {utilityItems.map((item) => (
              <button
                key={item.path}
                onClick={() => handleNavClick(item.path)}
                className={`w-full text-left px-3 py-2 rounded-lg text-xs font-medium transition-colors ${
                  currentPath === item.path ? 'bg-white/15 text-[#D5E64D]' : 'text-stone-300 hover:bg-white/5'
                }`}
              >
                {item.label}
              </button>
            ))}
          </div>

          {/* Quick Contact & Action in Mobile */}
          <div className="pt-3 border-t border-white/10 space-y-2">
            <button
              onClick={() => {
                setMobileMenuOpen(false);
                onOpenEnquiry('learner');
              }}
              className="w-full py-2.5 rounded-lg bg-[#D5E64D] text-[#0B4035] font-bold text-sm text-center block"
            >
              Request Enrolment
            </button>

            <a
              href="https://wa.me/254101936893?text=Hello%20PANIA%20Digital%20Academy%2C%20I%20have%20an%20enquiry."
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-2 rounded-lg bg-[#25D366] text-white font-medium text-xs text-center flex items-center justify-center gap-1.5"
            >
              <MessageSquare className="w-3.5 h-3.5" />
              <span>WhatsApp: +254 101 936 893</span>
            </a>
          </div>
        </div>
      )}
    </header>
  );
}