'use client'

import Link from 'next/link'
import { useState, useEffect } from 'react'

export default function Header() {
  const [menuOpen, setMenuOpen] = useState(false)
  const [openDropdown, setOpenDropdown] = useState<string | null>(null)

  // Tutup dropdown saat klik di luar area header
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const header = document.querySelector('header')
      if (header && !header.contains(e.target as Node)) {
        setMenuOpen(false)
        setOpenDropdown(null)
      }
    }
    if (menuOpen || openDropdown) {
      document.addEventListener('click', handleClickOutside)
    }
    return () => document.removeEventListener('click', handleClickOutside)
  }, [menuOpen, openDropdown])

  const toggleDropdown = (menu: string, e: React.MouseEvent) => {
    e.stopPropagation()
    setOpenDropdown(openDropdown === menu ? null : menu)
  }

  const handleMenuToggle = (e: React.MouseEvent) => {
    e.stopPropagation()
    setMenuOpen(!menuOpen)
  }

  const handleDropdownLinkClick = () => {
    setOpenDropdown(null)
    setMenuOpen(false)
  }

  return (
    <>
      <header className="fixed top-8 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-5xl px-8">
        <div
          className="bg-[#000432]/70 backdrop-blur-xl text-white shadow-2xl border border-white/20 rounded-2xl px-8 py-4"
          onClick={(e) => e.stopPropagation()}
        >
          <div className="flex justify-between items-center">
            {/* Logo */}
            <Link href="/" className="flex items-center space-x-3 group">
              <img
                src="/logobrite.png"
                alt="Brite Logo"
                className="w-10 h-10 object-contain"
              />
              <span className="font-bold tracking-wider text-xl">
                Brite Indonesia
              </span>
            </Link>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-6">
              <Link
                href="/"
                className="text-white/80 hover:text-white transition-all duration-300 font-medium px-3 py-2 rounded-lg hover:bg-white/10 text-sm"
              >
                Home
              </Link>

              {/* Company Dropdown */}
              <div className="relative">
                <button
                  className="flex items-center space-x-1 text-white/80 hover:text-white transition-all duration-300 font-medium px-3 py-2 rounded-lg hover:bg-white/10 text-sm"
                  onClick={(e) => toggleDropdown('company', e)}
                >
                  <span>Company</span>
                  <svg
                    className={`w-3 h-3 transition-transform duration-300 ${
                      openDropdown === 'company' ? '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>

                {openDropdown === 'company' && (
                  <div className="absolute top-full left-0 mt-2 w-48 bg-[#000432]/90 backdrop-blur-xl rounded-xl shadow-xl border border-white/20 overflow-hidden z-50 animate-dropdown">
                    <div className="py-1">
                      <Link href="/company/about" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">About Us</Link>
                      <Link href="/company/career" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Career</Link>
                      <Link href="/company/partner" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Our Partner</Link>
                      <Link href="/company/team" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Our Team</Link>
                    </div>
                  </div>
                )}
              </div>

              {/* Our Business Dropdown */}
              <div className="relative">
                <button
                  className="flex items-center space-x-1 text-white/80 hover:text-white transition-all duration-300 font-medium px-3 py-2 rounded-lg hover:bg-white/10 text-sm"
                  onClick={(e) => toggleDropdown('business', e)}
                >
                  <span>Our Business</span>
                  <svg
                    className={`w-3 h-3 transition-transform duration-300 ${
                      openDropdown === 'business' ? '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>

                {openDropdown === 'business' && (
                  <div className="absolute top-full left-0 mt-2 w-56 bg-[#000432]/90 backdrop-blur-xl rounded-xl shadow-xl border border-white/20 overflow-hidden z-50 animate-dropdown">
                    <div className="py-1">
                      <Link href="/business/media-buying" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Media Buying</Link>
                      <Link href="/business/digital-media-buying" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Digital Media Buying</Link>
                      <Link href="/business/event-management" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Event Management</Link>
                      <Link href="/business/virtual-office" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Virtual Office</Link>
                    </div>
                  </div>
                )}
              </div>

              {/* Unit Business Dropdown */}
              <div className="relative">
                <button
                  className="flex items-center space-x-1 text-white/80 hover:text-white transition-all duration-300 font-medium px-3 py-2 rounded-lg hover:bg-white/10 text-sm"
                  onClick={(e) => toggleDropdown('branches', e)}
                >
                  <span>Unit Business</span>
                  <svg
                    className={`w-3 h-3 transition-transform duration-300 ${
                      openDropdown === 'branches' ? '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>

                {openDropdown === 'branches' && (
                  <div className="absolute top-full left-0 mt-2 w-48 bg-[#000432]/90 backdrop-blur-xl rounded-xl shadow-xl border border-white/20 overflow-hidden z-50 animate-dropdown">
                    <div className="py-1">
                      <Link href="/branches/brite-radio" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Brite Radio</Link>
                      <Link href="/branches/brite-news" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Brite News</Link>
                      <Link href="/branches/brite-genius" onClick={handleDropdownLinkClick} className="block px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 text-sm">Brite Genius</Link>
                    </div>
                  </div>
                )}
              </div>
            </nav>

            {/* Mobile Menu Button */}
            <button
              className="md:hidden p-2 hover:bg-white/10 rounded-lg"
              onClick={handleMenuToggle}
            >
              <svg
                className={`w-5 h-5 transition-all duration-300 ${
                  menuOpen ? 'rotate-45' : ''
                }`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                {menuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>

          {/* Mobile Menu */}
          {menuOpen && (
            <div className="md:hidden mt-4 pt-4 border-t border-white/10 animate-slideDown">
              <nav className="space-y-2">
                <Link href="/" onClick={handleDropdownLinkClick} className="block text-white/80 hover:text-white hover:bg-white/10 py-2 px-3 rounded-lg text-sm">Home</Link>

                {/* Dropdown: Company */}
                <div>
                  <button
                    onClick={(e) => toggleDropdown('company-mobile', e)}
                    className="w-full flex items-center justify-between text-white/80 hover:text-white hover:bg-white/10 py-2 px-3 rounded-lg text-sm"
                  >
                    <span>Company</span>
                    <svg
                      className={`w-4 h-4 transition-transform duration-300 ${openDropdown === 'company-mobile' ? '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>
                  <div className={`overflow-hidden transition-all duration-500 ${openDropdown === 'company-mobile' ? 'max-h-60 opacity-100 mt-1' : 'max-h-0 opacity-0'}`}>
                    <div className="ml-4 space-y-1">
                      <Link href="/company/about" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">About Us</Link>
                      <Link href="/company/career" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Career</Link>
                      <Link href="/company/partner" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Our Partner</Link>
                      <Link href="/company/team" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Our Team</Link>
                    </div>
                  </div>
                </div>

                {/* Dropdown: Our Business */}
                <div>
                  <button
                    onClick={(e) => toggleDropdown('business-mobile', e)}
                    className="w-full flex items-center justify-between text-white/80 hover:text-white hover:bg-white/10 py-2 px-3 rounded-lg text-sm"
                  >
                    <span>Our Business</span>
                    <svg className={`w-4 h-4 transition-transform duration-300 ${openDropdown === 'business-mobile' ? '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>
                  <div className={`overflow-hidden transition-all duration-500 ${openDropdown === 'business-mobile' ? 'max-h-60 opacity-100 mt-1' : 'max-h-0 opacity-0'}`}>
                    <div className="ml-4 space-y-1">
                      <Link href="/business/media-buying" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Media Buying</Link>
                      <Link href="/business/digital-media-buying" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Digital Media Buying</Link>
                      <Link href="/business/event-management" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Event Management</Link>
                      <Link href="/business/virtual-office" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Virtual Office</Link>
                    </div>
                  </div>
                </div>

                {/* Dropdown: Unit Business */}
                <div>
                  <button
                    onClick={(e) => toggleDropdown('branches-mobile', e)}
                    className="w-full flex items-center justify-between text-white/80 hover:text-white hover:bg-white/10 py-2 px-3 rounded-lg text-sm"
                  >
                    <span>Unit Business</span>
                    <svg className={`w-4 h-4 transition-transform duration-300 ${openDropdown === 'branches-mobile' ? '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>
                  <div className={`overflow-hidden transition-all duration-500 ${openDropdown === 'branches-mobile' ? 'max-h-60 opacity-100 mt-1' : 'max-h-0 opacity-0'}`}>
                    <div className="ml-4 space-y-1">
                      <Link href="/branches/brite-radio" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Brite Radio</Link>
                      <Link href="/branches/brite-news" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Brite News</Link>
                      <Link href="/branches/brite-genius" onClick={handleDropdownLinkClick} className="block text-white/70 hover:text-white py-2 px-3 rounded-lg text-sm">Brite Genius</Link>
                    </div>
                  </div>
                </div>
              </nav>
            </div>
          )}
        </div>
      </header>
    </>
  )
}