"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

export default function Header() {
  const pathname = usePathname();
  const [stricky, setStricky] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [openDropdowns, setOpenDropdowns] = useState<number[]>([]);

  useEffect(() => {
    const onScroll = () => {
      setStricky(window.scrollY > 100);
    };
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const seg = (pathname || "").split("/").filter(Boolean)[0] || "";
  const isCurrent = (segment: string) =>
    seg === segment || pathname === segment || pathname?.startsWith(`/${segment}`);

  const toggleDropdown = (i: number) => {
    setOpenDropdowns((prev) =>
      prev.includes(i) ? prev.filter((x) => x !== i) : [...prev, i]
    );
  };

  const navItems: { label: string; href?: string; dropdown?: { label: string; href: string }[]; current?: boolean; mobButton?: string }[] = [
    { label: "Home", href: "/", current: seg === "" },
    {
      label: "About Us",
      dropdown: [
        { label: "About Company", href: "/about-us/" },
        { label: "FAQ’s", href: "#" },
      ],
      current: isCurrent("about-us"),
    },
    {
      label: "Services",
      dropdown: [
        { label: "Original Design Manufacturing", href: "/original-design-manufacturing/" },
        { label: "Part Selection & Supply", href: "/part-selection/" },
        { label: "Hardware Design", href: "/hardware-design/" },
        { label: "Simulation", href: "#" },
        { label: "Control Algorithm", href: "#" },
        { label: "On Site support", href: "#" },
        { label: "Component Repairing & Spare Parts", href: "#" },
      ],
      current:
        seg === "FPGA-based-control" ||
        seg === "printed-circuit-board" ||
        seg === "engineering-manufacturing",
    },
    {
      label: "Products",
      dropdown: [
        { label: "IGBT – Mosfet Driver Board", href: "/mosfet-driver-board/" },
        { label: "Power Stack Design", href: "/power-stack-design/" },
        { label: "Universal Control Card", href: "/universal-control-card/" },
        { label: "Microgrid Controller", href: "#" },
        { label: "Energy Storage Inverter", href: "/energy-storage-inverter/" },
        { label: "Statcom", href: "/statcom/" },
        { label: "Solar String Inverter", href: "/solar-string-inverter/" },
        { label: "Pulse Power Supply", href: "/pulse-power-supply/" },
      ],
      current:
        seg === "power-stack-design" ||
        seg === "universal-control-card" ||
        seg === "energy-storage-inverter" ||
        seg === "statcom" ||
        seg === "solar-string-inverter",
    },
    {
      label: "Industries",
      dropdown: [
        { label: "Induction", href: "/induction-power-supply/" },
        { label: "Traction", href: "#" },
        { label: "Corona Treatment", href: "#" },
        { label: "Energy Storage", href: "#" },
        { label: "Hydrogen", href: "#" },
        { label: "Power Quality", href: "#" },
        { label: "Uninterrupted Power Supply", href: "/uninterrupted-power-supply" },
      ],
    },
    { label: "Contact", href: "/contact-us/", current: isCurrent("contact-us") },
  ];

  return (
    <header className={`main-header header-style2 stricky${stricky ? " stricky-fixed" : ""}`}>
      <div className="inner-container clearfix">
        <div className="logo-box-style2 float-left">
          <Link href="/">
            <img
              src="/assets/images/resources/paramvir-power-solutions-logo.png"
              loading="lazy"
              className="img-size"
              alt="Awesome Logo"
              style={{ width: 268 }}
            />
          </Link>
        </div>
        <div className="main-menu-box float-right">
          <nav className="main-menu style2 clearfix">
            <div className="navbar-header clearfix">
              <button
                type="button"
                className={`navbar-toggle${menuOpen ? " active" : ""}`}
                aria-label="Toggle navigation"
                onClick={() => setMenuOpen(!menuOpen)}
              >
                <span className="icon-bar" />
                <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
            </div>
            <div className={`navbar-collapse collapse clearfix${menuOpen ? " in show" : ""}`}>
              <ul className="navigation clearfix">
                {navItems.map((item, i) => (
                  <li
                    key={i}
                    className={`${item.dropdown ? "dropdown " : ""}${item.current ? "current" : ""} ${
                      item.mobButton ? "mob-button" : ""
                    }`}
                    style={item.mobButton ? { display: "none" } : undefined}
                  >
                    {item.dropdown ? (
                      <>
                        <Link href={item.href || "#"}>{item.label}</Link>
                        <div
                          className="dropdown-btn"
                          onClick={(e) => {
                            e.preventDefault();
                            toggleDropdown(i);
                          }}
                          style={{ display: openDropdowns.includes(i) ? "block" : undefined }}
                        />
                        <ul style={{ display: openDropdowns.includes(i) ? "block" : undefined }}>
                          {item.dropdown.map((d, j) => (
                            <li key={j}>
                              <Link href={d.href}>{d.label}</Link>
                            </li>
                          ))}
                        </ul>
                      </>
                    ) : (
                      <Link href={item.href || "#"}>{item.label}</Link>
                    )}
                  </li>
                ))}
                <li className="mob-button" style={{ display: "none" }}>
                  <Link href="/contact-us/">Get Tech Support</Link>
                </li>
                <li className="mob-button" style={{ display: "none" }}>
                  <Link href="/contact-us/">Get a Quote</Link>
                </li>
                <li className="mob-button" style={{ display: "none" }}>
                  <Link href="/login/">Login/Register</Link>
                </li>
              </ul>
            </div>
          </nav>
          <div className="mainmenu-right style2" />
        </div>
        <div className="main-menu-box1">
          <div className="mainmenu-right1 style21">
            <div className="button1">
              <Link className="btn-one1" href="/contact-us/">
                Get Tech Support
              </Link>
            </div>
          </div>
          <div className="mainmenu-right2 style22">
            <div className="button2">
              <Link className="btn-one2" href="/contact-us/">
                Get a Quote
              </Link>
            </div>
          </div>
          <div className="mainmenu-right3 style23">
            <div className="button3">
              <Link className="btn-one3" href="/login/">
                Login/Register
              </Link>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}