"use client";

import { useEffect, useState } from "react";
import { Menu } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";

type MenuItem = {
  id: string;
  label: string;
  uri: string;
  children?: MenuItem[];
};

export default function Header({ menu }: { menu: MenuItem[] }) {
  const pathname = usePathname();

  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openSub, setOpenSub] = useState<string | null>(null);
  const closeMobileMenu = () => {
    setMobileOpen(false);
    setOpenSub(null);
  };
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);


  return (
    <header
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300
        ${
          scrolled
            ? "bg-[#202020] backdrop-blur-lg border-b border-white/15"
            : "bg-transparent border-b border-transparent"
        }`}
    >
      <div className="container mx-auto px-4 py-2 flex items-center justify-between">
        {/* LOGO */}
        <Link href="/" className="flex items-center gap-2">
          <Image
            src="/togwe-logo.png"
            alt="Togwe"
            width={110}
            height={78}
            className="h-[55px] sm:h-[78px] w-auto"
            priority
          />
        </Link>

        {/* DESKTOP MENU */}
        <nav
          className={`hidden lg:flex items-center gap-8 px-10 py-3 text-[16px] rounded-lg
          ${
            scrolled
              ? "bg-transparent"
              : "bg-[#202020]/25 border border-white/15 backdrop-blur-md"
          }`}
        >
          {menu.map((item) => (
            <div key={item.id} className="relative group">
              <Link
                href={item.uri}
                className="flex items-center gap-1 text-white py-2"
              >
                {item.label}

                {item.children?.length ? (
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024" className="transition-transform group-hover:rotate-180"><path fill="currentColor" d="M831.872 340.864L512 652.672L192.128 340.864a30.59 30.59 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.59 30.59 0 0 0-42.752 0z"></path></svg>
                ) : null}
              </Link>

              {/* DESKTOP SUBMENU */}
              {item.children && item.children.length > 0 && (
                <div
                  className="
                    absolute left-0 top-full
                    pt-3
                    hidden group-hover:block
                    z-50
                  "
                >
                  <div
                    className="
                      bg-[#202020]
                      border border-white/15
                      backdrop-blur-md
                      rounded-xl
                      p-4
                      min-w-[320px]
                    "
                  >
                    {item.children.map((sub) => (
                      <Link
                        key={sub.id}
                        href={sub.uri}
                        className="block py-2 text-white hover:bg-white/10 rounded px-2"
                      >
                        {sub.label}
                      </Link>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* CTA */}
        <Link
          href="/contact"
          className="hidden lg:inline-block bg-white text-[#202020] px-5 py-2 rounded text-[16px] font-medium"
        >
          Get In Touch
        </Link>

        {/* MOBILE TOGGLE */}
        {/* RIGHT CONTROLS (Tablet + Mobile) */}
        <div className="flex items-center gap-3 lg:hidden">
          {/* CTA */}
          <Link
            href="/contact"
            className="bg-white text-[#202020] px-5 py-2 rounded text-[16px] font-medium whitespace-nowrap"
          >
            Get In Touch
          </Link>

          {/* MENU BUTTON */}
          <button
            className="text-white text-2xl p-2 rounded-lg border border-gray-300/25 hover:bg-white/10 transition"
            onClick={() => setMobileOpen((v) => !v)}
          >
            <Menu size={28} />
          </button>
        </div>

      </div>

      {/* MOBILE MENU */}
      {mobileOpen && (
        <div className="lg:hidden bg-[#202020] border-t border-white/15">
          {menu.map((item) => (
            <div key={item.id} className="border-b border-white/10">
              <div className="flex justify-between items-center px-4 py-4 text-white">
                <Link href={item.uri} onClick={closeMobileMenu}>{item.label}</Link>

                {item.children?.length ? (
                  
                  <button
                    onClick={() =>
                      setOpenSub(openSub === item.id ? null : item.id)
                    }
                    className="transition-transform duration-300"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024" className={`transition-transform duration-300 ${ openSub === item.id ? "rotate-180" : "rotate-0"}`}><path fill="currentColor" d="M831.872 340.864L512 652.672L192.128 340.864a30.59 30.59 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.59 30.59 0 0 0-42.752 0z"></path></svg>
                  </button>

                ) : null}
              </div>

              {/* MOBILE SUBMENU */}
              {openSub === item.id && item.children?.length ? (
                <div className="bg-black">
                  {item.children.map((sub) => (
                    <Link
                      key={sub.id}
                      href={sub.uri}
                      onClick={closeMobileMenu}
                      className="block px-8 py-3 text-white/80 border-t border-white/10"
                    >
                      {sub.label}
                    </Link>
                  ))}
                </div>
              ) : null}
            </div>
          ))}
        </div>
      )}
    </header>
  );
}