import React, {useState} from 'react';
import menuItems from '@/data/menuItems';
import {Link} from "react-router-dom";
import {IMAGE_PREFIX} from "@/constants";

const Header = () => {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [mobileActiveIndex, setMobileActiveIndex] = useState<number | null>(null);
  const [isMenuHovered, setIsMenuHovered] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 flex items-center h-20 w-full bg-white z-30">
      <article
        id="sidebar-dimmer"
        className={`fixed top-20 left-0 w-full h-full transition-opacity duration-500 ease-in-out ${isMenuHovered ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} hidden lg:block`}
      />

      <Link
        to="/"
        onClick={() => {
          setActiveIndex(null);
          setMobileMenuOpen(false);
          setMobileActiveIndex(null);
        }}
        className="absolute left-4 sm:left-[40px] top-[26px] flex items-center gap-1 w-32"
      >
        <img className="w-10 h-7" src={`${IMAGE_PREFIX}/logo.png`} alt="logo"/>
        <div className="text-gray-600 text-xl font-bold font-['Noto_Sans_KR']">반도산전</div>
      </Link>

      <nav 
        className="hidden lg:flex justify-center items-center w-full h-full"
        onMouseEnter={() => setIsMenuHovered(true)}
        onMouseLeave={() => {
          setIsMenuHovered(false);
          setActiveIndex(null);
        }}
      >
        {menuItems.map((item, index) => (
          <div
            key={index}
            className="relative flex flex-col items-center px-[3vw] cursor-pointer"
            onMouseEnter={() => setActiveIndex(index)}
          >
            <div
              className={`relative group font-bold font-['Noto_Sans_KR'] cursor-pointer ${activeIndex === index ? 'text-blue-600' : 'text-gray-600'}`}>
              {item.label}
              <span
                className={`absolute left-0 bottom-[-2px] h-[2px] bg-blue-600 transition-all duration-300 ${activeIndex === index ? 'w-full' : 'w-0'}`}></span>
            </div>
          </div>
        ))}
      </nav>

      <button
        className="lg:hidden absolute right-4 top-1/2 transform -translate-y-1/2 flex flex-col justify-center items-center w-8 h-8 space-y-1"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
      >
        <span className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
        <span className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${mobileMenuOpen ? 'opacity-0' : ''}`}></span>
        <span className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
      </button>

      {isMenuHovered && (
        <div 
          id="menuBox" 
          className="hidden lg:block absolute w-full h-[50vh] top-20 border bg-blue-900"
          onMouseEnter={() => setIsMenuHovered(true)}
          onMouseLeave={() => {
            setIsMenuHovered(false);
            setActiveIndex(null);
          }}
        >
          <div className="max-w-7xl mx-auto flex justify-center items-start pt-8">
            {menuItems.map((item, index) => (
              <div key={index} className="flex flex-col items-center px-[3vw]">
                {item.children.length > 0 && (
                  <div className="flex flex-col space-y-6 pt-4">
                    {item.children.map((child, cIdx) => (
                      <Link
                        to={`${item.href}/${child.href}`}
                        key={cIdx}
                        className="relative inline-block text-md text-center font-medium font-['Noto_Sans_KR'] text-white whitespace-normal max-w-[100px] break-words hover:text-white/80 transition-colors duration-200 group"
                        onClick={() => {
                          setActiveIndex(null);
                          setIsMenuHovered(false);
                        }}
                      >
                        <span className="relative inline-block">
                          {child.label}
                          <span className="absolute left-0 bottom-[-2px] h-[2px] w-0 bg-white transition-all duration-300 group-hover:w-full"></span>
                        </span>
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {mobileMenuOpen && (
        <div className="lg:hidden absolute top-20 left-0 w-full bg-white shadow-lg border-t">
          <nav className="flex flex-col">
            {menuItems.map((item, index) => (
              <div key={index} className="border-b border-gray-200">
                <div
                  className="flex justify-between items-center px-4 py-4 text-gray-600 font-bold cursor-pointer hover:bg-gray-50"
                  onClick={() => setMobileActiveIndex(mobileActiveIndex === index ? null : index)}
                >
                  <span>{item.label}</span>
                  {item.children.length > 0 && (
                    <span className={`transition-transform duration-300 ${mobileActiveIndex === index ? 'rotate-180' : ''}`}>
                      ▼
                    </span>
                  )}
                </div>
                {mobileActiveIndex === index && item.children.length > 0 && (
                  <div className="bg-gray-50">
                    {item.children.map((child, cIdx) => (
                      <Link
                        to={`${item.href}/${child.href}`}
                        key={cIdx}
                        className="block px-8 py-3 text-gray-600 hover:text-blue-600 hover:bg-white transition-colors duration-200"
                        onClick={() => {
                          setMobileActiveIndex(null);
                          setMobileMenuOpen(false);
                        }}
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
};

export default Header;