"use client";

import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isServicesOpen, setIsServicesOpen] = useState(false);
  const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false);
  const pathname = usePathname();
  const router = useRouter();

  const closeAllMenus = () => {
    setIsMenuOpen(false);
    setIsServicesOpen(false);
    setIsMobileServicesOpen(false);
  };

  const scrollToSection = (sectionId: string) => {
    closeAllMenus();
    
    // If not on services page, navigate to it first
    if (pathname !== '/services') {
      router.push('/services');
      // Wait for navigation to complete, then scroll
      setTimeout(() => {
        const element = document.getElementById(sectionId);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }, 100);
    } else {
      // Already on services page, just scroll
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  };

  const menuItems = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/teamMember", label: "Our Team" },
    { href: "/education-training", label: "Academics & Research" },
    { href: "/services", label: "Services", hasDropdown: true },
    { href: "/events", label: "Events" },
    { href: "/blogs", label: "Blogs" },
    { href: "/career", label: "Career" },
    { href: "/contact", label: "Contact Us" },
  ];

  return (
    <header className="sticky bg-white top-0 z-50 shadow-sm">
      {/* Top section with logos */}
      <div className="border-b border-gray-200">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-1.5 sm:py-2">
            {/* Left Logo */}
            <div className="flex-1 flex justify-start">
              <Link href="/" onClick={closeAllMenus} className="flex items-center">
                <div className="relative w-64 sm:w-80 md:w-96 lg:w-[420px] h-16 sm:h-18 md:h-20 lg:h-22">
                  <Image
                    src="/images/finalcmclogo.svg"
                    alt="CMC Logo"
                    fill
                    className="object-contain object-left"
                    priority
                  />
                </div>
              </Link>
            </div>

            {/* Right Logo with Batch ID */}
            <div className="flex-1 flex justify-end">
              <div className="flex flex-col items-center justify-center">
                <div className="relative w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 lg:w-[88px] lg:h-[88px]">
                  <Image
                    src="/images/rightlogo.png"
                    alt="Batch Logo"
                    fill
                    className="object-contain"
                    priority
                  />
                </div>
                <span className="text-[10px] sm:text-xs lg:text-sm font-bold text-blue-900 -mt-1 whitespace-nowrap">
                  H-2024-1431
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom section with menu */}
      <div className="bg-blue-900">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            {/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center w-full">
              <div className="flex items-center w-full">
                {menuItems.map((item, idx) => {
                  const isActive = pathname === item.href || 
                                 (item.href !== "/" && pathname.startsWith(item.href));
                  
                  if (item.hasDropdown) {
                    return (
                      <div 
                        key={idx} 
                        className="relative flex-1"
                        onMouseEnter={() => setIsServicesOpen(true)}
                        onMouseLeave={() => setIsServicesOpen(false)}
                      >
                        <Link
                          href="/services"
                          className={`font-medium text-sm xl:text-[15px] whitespace-nowrap px-4 xl:px-5 py-3.5 transition-colors w-full ${
                            isActive 
                              ? "text-white bg-red-600" 
                              : "text-white hover:bg-red-600"
                          } flex items-center justify-center gap-1`}
                          onClick={closeAllMenus}
                        >
                          {item.label}
                          <svg
                            className={`w-4 h-4 transition-transform ${isServicesOpen ? "rotate-180" : ""}`}
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                          </svg>
                        </Link>
                        
                        {/* Services Dropdown */}
                        {isServicesOpen && (
                          <div className="absolute top-full left-0 mt-0 w-64 bg-white shadow-lg border border-gray-200 rounded-b-md z-50">
                            <button
                              onClick={() => scrollToSection('trauma-care')}
                              className="w-full text-left block px-4 py-3 text-sm font-medium text-blue-900 hover:bg-gray-100 hover:text-red-600 transition-colors border-b border-gray-100"
                            >
                              Trauma Care Services
                            </button>
                            <button
                              onClick={() => scrollToSection('acute-care-surgery')}
                              className="w-full text-left block px-4 py-3 text-sm font-medium text-blue-900 hover:bg-gray-100 hover:text-red-600 transition-colors"
                            >
                              Acute Care Surgery Services
                            </button>
                          </div>
                        )}
                      </div>
                    );
                  }
                  
                  return (
                    <Link
                      key={idx}
                      href={item.href}
                      className={`font-medium text-sm xl:text-[15px] whitespace-nowrap px-4 xl:px-5 py-3.5 transition-colors flex-1 text-center ${
                        isActive 
                          ? "text-white bg-red-600" 
                          : "text-white hover:bg-red-600"
                      }`}
                      onClick={closeAllMenus}
                    >
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            </nav>

            {/* Mobile menu button */}
            <button
              className="lg:hidden p-3 text-white hover:bg-red-600 transition-colors w-full flex items-center justify-between"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label="Toggle menu"
            >
              <span className="font-medium text-sm sm:text-base">Menu</span>
              <svg
                className="w-6 h-6 sm:w-7 sm:h-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                strokeWidth={2.5}
              >
                {isMenuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu Dropdown */}
      {isMenuOpen && (
        <div className="lg:hidden bg-white border-t border-gray-200 shadow-lg">
          <nav className="container max-w-7xl mx-auto px-4 sm:px-6 py-2">
            <ul className="space-y-1">
              {menuItems.map((item, idx) => {
                const isActive = pathname === item.href || 
                               (item.href !== "/" && pathname.startsWith(item.href));
                
                if (item.hasDropdown) {
                  return (
                    <li key={idx}>
                      <button
                        className={`w-full text-left font-medium py-3 px-4 transition-colors rounded text-sm sm:text-base flex items-center justify-between ${
                          isActive
                            ? "bg-red-600 text-white"
                            : "text-blue-900 hover:bg-gray-100 hover:text-red-600"
                        }`}
                        onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
                      >
                        {item.label}
                        <svg
                          className={`w-4 h-4 transition-transform ${isMobileServicesOpen ? "rotate-180" : ""}`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                      </button>
                      
                      {/* Mobile Services Submenu */}
                      {isMobileServicesOpen && (
                        <ul className="ml-4 mt-1 space-y-1">
                          <li>
                            <button
                              onClick={() => scrollToSection('trauma-care')}
                              className="w-full text-left block py-2.5 px-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-red-600 rounded transition-colors"
                            >
                              Trauma Care Services
                            </button>
                          </li>
                          <li>
                            <button
                              onClick={() => scrollToSection('acute-care-surgery')}
                              className="w-full text-left block py-2.5 px-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-red-600 rounded transition-colors"
                            >
                              Acute Care Surgery Services
                            </button>
                          </li>
                        </ul>
                      )}
                    </li>
                  );
                }
                
                return (
                  <li key={idx}>
                    <Link
                      href={item.href}
                      className={`block font-medium py-3 px-4 transition-colors rounded text-sm sm:text-base ${
                        isActive
                          ? "bg-red-600 text-white"
                          : "text-blue-900 hover:bg-gray-100 hover:text-red-600"
                      }`}
                      onClick={closeAllMenus}
                    >
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>
        </div>
      )}
    </header>
  );
};

export default Header;