import React, { useState, useEffect, useRef } from 'react';
import { Sun, Moon, Menu, X, Mail, ChevronDown, Microscope, BookOpen, ShieldCheck, Globe, Award } from 'lucide-react';
import { PROFILE_SUMMARY } from '../data/cvData';

export type PageId = 'home' | 'expertise' | 'publications' | 'patents-grants' | 'global-impact' | 'awards' | 'contact';

interface NavbarProps {
  activePage: PageId;
  setActivePage: (page: PageId) => void;
}

export default function Navbar({ activePage, setActivePage }: NavbarProps) {
  const [isDark, setIsDark] = useState<boolean>(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
  
  // Dropdown states for desktop submenus
  const [openDropdown, setOpenDropdown] = useState<'research' | 'impact' | null>(null);
  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (document.documentElement.classList.contains('dark')) {
      setIsDark(true);
    }
  }, []);

  const toggleDarkMode = () => {
    if (isDark) {
      document.documentElement.classList.remove('dark');
      setIsDark(false);
    } else {
      document.documentElement.classList.add('dark');
      setIsDark(true);
    }
  };

  const handleNavClick = (id: PageId) => {
    setActivePage(id);
    setMobileMenuOpen(false);
    setOpenDropdown(null);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleMouseEnter = (menu: 'research' | 'impact') => {
    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
    setOpenDropdown(menu);
  };

  const handleMouseLeave = () => {
    hoverTimeoutRef.current = setTimeout(() => {
      setOpenDropdown(null);
    }, 200);
  };

  // Helper to check if active page belongs to research section
  const isResearchActive = ['expertise', 'publications', 'patents-grants'].includes(activePage);
  // Helper to check if active page belongs to impact section
  const isImpactActive = ['global-impact', 'awards'].includes(activePage);

  return (
    <header className="sticky top-0 z-50 w-full backdrop-blur-md bg-white/95 dark:bg-slate-950/95 border-b border-slate-200/80 dark:border-slate-800/80 transition-colors overflow-visible">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-18 py-2.5">
          
          {/* BRAND LOGO LOCKUP WITH DOCTOR'S REAL PHOTO */}
          <button
            onClick={() => handleNavClick('home')}
            className="flex items-center gap-3 text-left group shrink-0"
          >
            {/* Real Doctor Portrait Avatar Logo */}
            <div className="relative w-10 h-10 sm:w-11 sm:h-11 rounded-full p-0.5 bg-gradient-to-br from-emerald-500 to-teal-700 shadow-md group-hover:scale-105 transition-transform overflow-hidden shrink-0">
              <img
                src={PROFILE_SUMMARY.photoUrl}
                alt="Prof. Dr. N. Thajuddin"
                className="w-full h-full object-cover object-top rounded-full bg-slate-200"
                referrerPolicy="no-referrer"
              />
              <span className="absolute bottom-0 right-0 w-3 h-3 bg-amber-400 rounded-full border-2 border-white dark:border-slate-950" title="Stanford Top 2% Scientist" />
            </div>

            {/* Logo Text Brand */}
            <div className="flex flex-col">
              <div className="flex items-center gap-1.5">
                <span className="font-extrabold text-base sm:text-lg tracking-tight text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors font-display">
                  DR. N. THAJUDDIN
                </span>
                <span className="text-[10px] sm:text-xs font-mono font-bold px-1.5 py-0.5 bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-400 rounded border border-emerald-300/40 dark:border-emerald-800/40">
                  D.Sc., Ph.D.
                </span>
              </div>
              <span className="text-xs text-slate-500 dark:text-slate-400 font-medium tracking-wide uppercase font-mono hidden xs:inline-block">
                Microbiology & Biotech
              </span>
            </div>
          </button>

          {/* COMPACT DESKTOP NAVIGATION WITH LARGER FONT SIZES & SUBMENUS */}
          <nav className="hidden lg:flex items-center gap-2 xl:gap-3">
            
            {/* Direct Home Link */}
            <button
              onClick={() => handleNavClick('home')}
              className={`px-3.5 py-2 text-sm font-bold rounded-xl transition-colors ${
                activePage === 'home'
                  ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 shadow-sm'
                  : 'text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-900'
              }`}
            >
              Home
            </button>

            {/* SUBMENU 1: RESEARCH & CLINICAL */}
            <div
              className="relative"
              onMouseEnter={() => handleMouseEnter('research')}
              onMouseLeave={handleMouseLeave}
            >
              <button
                onClick={() => setOpenDropdown(openDropdown === 'research' ? null : 'research')}
                className={`flex items-center gap-1.5 px-3.5 py-2 text-sm font-bold rounded-xl transition-colors ${
                  isResearchActive
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 shadow-sm'
                    : 'text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Research & Clinical</span>
                <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${openDropdown === 'research' ? 'rotate-180' : ''}`} />
              </button>

              {/* Research Dropdown Menu Panel */}
              {openDropdown === 'research' && (
                <div className="absolute top-full left-0 mt-1.5 w-80 p-2.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/90 dark:border-slate-800 shadow-2xl backdrop-blur-xl animate-in fade-in slide-in-from-top-2 duration-150 z-50">
                  <div className="px-3 py-1.5 text-xs font-mono font-bold uppercase tracking-wider text-slate-400">
                    Clinical & Research Modules
                  </div>

                  <button
                    onClick={() => handleNavClick('expertise')}
                    className="w-full p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/80 text-left transition-colors flex items-start gap-3.5 group"
                  >
                    <Microscope className="w-5 h-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                    <div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
                        Clinical Research Pillars
                      </div>
                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-snug">
                        Anti-biofilm, ESBL/MRSA & Calebin-A bioconversion
                      </div>
                    </div>
                  </button>

                  <button
                    onClick={() => handleNavClick('publications')}
                    className="w-full p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/80 text-left transition-colors flex items-start gap-3.5 group"
                  >
                    <BookOpen className="w-5 h-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                    <div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
                        Publications & GenBank
                      </div>
                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-snug">
                        475+ research papers & 687 NCBI sequences
                      </div>
                    </div>
                  </button>

                  <button
                    onClick={() => handleNavClick('patents-grants')}
                    className="w-full p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/80 text-left transition-colors flex items-start gap-3.5 group"
                  >
                    <ShieldCheck className="w-5 h-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                    <div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
                        Patents & Facilities
                      </div>
                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-snug">
                        US Patent granted & ₹26.18 Cr research funding
                      </div>
                    </div>
                  </button>
                </div>
              )}
            </div>

            {/* SUBMENU 2: GLOBAL IMPACT & HONORS */}
            <div
              className="relative"
              onMouseEnter={() => handleMouseEnter('impact')}
              onMouseLeave={handleMouseLeave}
            >
              <button
                onClick={() => setOpenDropdown(openDropdown === 'impact' ? null : 'impact')}
                className={`flex items-center gap-1.5 px-3.5 py-2 text-sm font-bold rounded-xl transition-colors ${
                  isImpactActive
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 shadow-sm'
                    : 'text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Global Impact</span>
                <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${openDropdown === 'impact' ? 'rotate-180' : ''}`} />
              </button>

              {/* Impact Dropdown Menu Panel */}
              {openDropdown === 'impact' && (
                <div className="absolute top-full left-0 mt-1.5 w-80 p-2.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/90 dark:border-slate-800 shadow-2xl backdrop-blur-xl animate-in fade-in slide-in-from-top-2 duration-150 z-50">
                  <div className="px-3 py-1.5 text-xs font-mono font-bold uppercase tracking-wider text-slate-400">
                    Network & Recognition
                  </div>

                  <button
                    onClick={() => handleNavClick('global-impact')}
                    className="w-full p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/80 text-left transition-colors flex items-start gap-3.5 group"
                  >
                    <Globe className="w-5 h-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                    <div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
                        Global Network & Mentorship
                      </div>
                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-snug">
                        25 countries, 67 universities & 40 Ph.D. scholars
                      </div>
                    </div>
                  </button>

                  <button
                    onClick={() => handleNavClick('awards')}
                    className="w-full p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/80 text-left transition-colors flex items-start gap-3.5 group"
                  >
                    <Award className="w-5 h-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover:scale-110 transition-transform" />
                    <div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
                        Awards & Fellowships
                      </div>
                      <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-snug">
                        Stanford Top 2% Scientist, FLS & FRSB London
                      </div>
                    </div>
                  </button>
                </div>
              )}
            </div>

          </nav>

          {/* RIGHT ACTION BUTTONS: SINGLE EXCLUSIVE CONTACT OFFICE BUTTON */}
          <div className="flex items-center gap-2.5 sm:gap-3 shrink-0">
            <button
              onClick={toggleDarkMode}
              className="p-2.5 rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors"
              aria-label="Toggle dark mode"
              title={isDark ? "Switch to light mode" : "Switch to dark mode"}
            >
              {isDark ? <Sun className="w-4 h-4 text-amber-400" /> : <Moon className="w-4 h-4 text-slate-600" />}
            </button>

            {/* SINGLE, PROMINENT CONTACT OFFICE BUTTON */}
            <button
              onClick={() => handleNavClick('contact')}
              className={`inline-flex items-center gap-2 px-4 py-2.5 text-sm font-bold rounded-xl transition-all shadow-sm shrink-0 ${
                activePage === 'contact'
                  ? 'bg-slate-900 text-white dark:bg-emerald-400 dark:text-slate-950 shadow-md ring-2 ring-emerald-500'
                  : 'bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-emerald-500 dark:text-slate-950 dark:hover:bg-emerald-400'
              }`}
            >
              <Mail className="w-4 h-4" />
              <span>Contact Office</span>
            </button>

            {/* Mobile Hamburger Toggle Button */}
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="lg:hidden p-2.5 rounded-xl text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900"
              aria-label="Open navigation menu"
            >
              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>

        </div>
      </div>

      {/* FULLY OPTIMIZED MOBILE ACCORDION DRAWER WITH INCREASED FONT SIZES */}
      {mobileMenuOpen && (
        <div className="lg:hidden border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 px-4 pt-3 pb-6 space-y-4 max-h-[85vh] overflow-y-auto">
          
          {/* Main Direct Navigation */}
          <div>
            <div className="text-xs font-mono font-bold uppercase tracking-wider text-slate-400 mb-2 px-2">
              Main Menu
            </div>
            <button
              onClick={() => handleNavClick('home')}
              className={`w-full text-left px-3.5 py-2.5 text-sm font-bold rounded-xl transition-colors ${
                activePage === 'home'
                  ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950'
                  : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
              }`}
            >
              Home Page
            </button>
          </div>

          {/* Research & Clinical Group */}
          <div>
            <div className="text-xs font-mono font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-2 px-2 flex items-center gap-1.5">
              <Microscope className="w-3.5 h-3.5" />
              <span>Research & Clinical</span>
            </div>
            <div className="space-y-1">
              <button
                onClick={() => handleNavClick('expertise')}
                className={`w-full text-left px-3.5 py-2.5 text-sm font-semibold rounded-xl transition-colors flex items-center justify-between ${
                  activePage === 'expertise'
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Clinical Research Pillars</span>
                <span className="text-xs opacity-80 font-mono font-bold">6 Pillars</span>
              </button>

              <button
                onClick={() => handleNavClick('publications')}
                className={`w-full text-left px-3.5 py-2.5 text-sm font-semibold rounded-xl transition-colors flex items-center justify-between ${
                  activePage === 'publications'
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Publications & GenBank</span>
                <span className="text-xs opacity-80 font-mono font-bold">475+ Papers</span>
              </button>

              <button
                onClick={() => handleNavClick('patents-grants')}
                className={`w-full text-left px-3.5 py-2.5 text-sm font-semibold rounded-xl transition-colors flex items-center justify-between ${
                  activePage === 'patents-grants'
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Patents & Facilities</span>
                <span className="text-xs opacity-80 font-mono font-bold">US Patent</span>
              </button>
            </div>
          </div>

          {/* Global Impact & Awards Group */}
          <div>
            <div className="text-xs font-mono font-bold uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-2 px-2 flex items-center gap-1.5">
              <Globe className="w-3.5 h-3.5" />
              <span>Global Network & Recognition</span>
            </div>
            <div className="space-y-1">
              <button
                onClick={() => handleNavClick('global-impact')}
                className={`w-full text-left px-3.5 py-2.5 text-sm font-semibold rounded-xl transition-colors flex items-center justify-between ${
                  activePage === 'global-impact'
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Global Impact & Alumni</span>
                <span className="text-xs opacity-80 font-mono font-bold">25 Countries</span>
              </button>

              <button
                onClick={() => handleNavClick('awards')}
                className={`w-full text-left px-3.5 py-2.5 text-sm font-semibold rounded-xl transition-colors flex items-center justify-between ${
                  activePage === 'awards'
                    ? 'bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900'
                }`}
              >
                <span>Awards & Fellowships</span>
                <span className="text-xs opacity-80 font-mono font-bold">Top 2%</span>
              </button>
            </div>
          </div>

          {/* Contact Office */}
          <div className="pt-2 border-t border-slate-200 dark:border-slate-800">
            <button
              onClick={() => handleNavClick('contact')}
              className={`w-full text-left px-3.5 py-3 text-sm font-bold rounded-xl transition-colors flex items-center gap-2.5 ${
                activePage === 'contact'
                  ? 'bg-emerald-600 text-white'
                  : 'bg-emerald-50 dark:bg-emerald-950/60 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800'
              }`}
            >
              <Mail className="w-4 h-4" />
              <span>Contact Office & Directions</span>
            </button>
          </div>

        </div>
      )}
    </header>
  );
}