"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { mainNav } from "@/data/navigation";
import { cn } from "@/lib/cn";
import { ROUTES } from "@/lib/routes";
import { CloseIcon, MenuIcon } from "@/components/ui/Icons";
import { Logo } from "./Logo";

interface NavLinksProps {
  /** Highlights the matching link (by `href`). */
  activeHref?: string;
  className?: string;
  children?: React.ReactNode;
  showApply?: boolean;
}

const linkClasses = [
  "relative py-1 text-[clamp(0.75rem,1.3vw,0.9rem)] font-normal tracking-[0.5px] whitespace-nowrap transition-colors duration-300",
  "after:absolute after:bottom-0 after:left-0 after:h-px after:bg-accent after:transition-[width] after:duration-300 after:content-['']",
  "hover:after:w-full",
].join(" ");

/** Primary site navigation (Contact / Services / About) + Mobile Top Shutter Menu. */
export function NavLinks({
  activeHref,
  className,
  children,
}: NavLinksProps) {
  const [isOpen, setIsOpen] = useState(false);

  // Close on Escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") setIsOpen(false);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <>
      {/* Desktop Navigation (hidden on mobile < 769px) */}
      <nav
        aria-label="Main Navigation"
        className={cn(
          "flex flex-1 justify-center gap-[clamp(12px,2.5vw,35px)] px-[10px] max-[769px]:hidden",
          className,
        )}
      >
        {mainNav.map((item) => {
          const active = item.href === activeHref;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                linkClasses,
                active ? "text-ink after:w-full" : "text-[#161825] after:w-0 hover:text-ink",
              )}
            >
              {item.label}
            </Link>
          );
        })}
        {children}
      </nav>

      {/* Mobile Menu Hamburger Button (visible only on mobile < 769px, aligned to right) */}
      <div className="flex items-center min-[769px]:hidden max-[769px]:order-2">
        <button
          type="button"
          onClick={() => setIsOpen(true)}
          className="flex size-10 items-center justify-center rounded-md text-[#161825] transition-colors hover:bg-slate-100 active:scale-95"
          aria-label="Open navigation menu"
          aria-expanded={isOpen}
        >
          <MenuIcon className="size-6 text-[#161825]" />
        </button>
      </div>

      {/* Mobile Shutter Dropdown (compact top drawer, does not cover full screen) */}
      {isOpen && (
        <>
          {/* Dimmed backdrop overlay */}
          <div
            className="fixed inset-0 z-[9998] bg-black/35 backdrop-blur-[2px] transition-opacity"
            onClick={() => setIsOpen(false)}
            aria-hidden="true"
          />

          {/* Compact Top Shutter Panel */}
          <div
            className="fixed top-0 inset-x-0 z-[9999] flex flex-col bg-white shadow-[0_15px_35px_rgba(0,0,0,0.15)] border-b border-[#e5e7eb] rounded-b-2xl transition-all"
            role="dialog"
            aria-modal="true"
            aria-label="Mobile Navigation Menu"
          >
            {/* Header bar inside shutter */}
            <div className="flex h-[68px] shrink-0 items-center justify-between border-b border-[#f1f5f9] px-[5vw]">
              <Logo />

              {/* Centered Wolf Emblem */}
              <div className="flex shrink-0 items-center justify-center">
                <Image
                  src="/images/brand/logo.svg"
                  alt="Excellence Emblem Logo"
                  width={50}
                  height={50}
                  priority
                  unoptimized
                  className="h-[44px] w-auto"
                />
              </div>

              {/* Close button */}
              <button
                type="button"
                onClick={() => setIsOpen(false)}
                className="flex size-10 items-center justify-center rounded-full text-[#161825] transition-colors hover:bg-slate-100 active:scale-95"
                aria-label="Close menu"
              >
                <CloseIcon className="size-6 text-[#161825]" />
              </button>
            </div>

            {/* Menu Links & Small Apply Button */}
            <div className="flex flex-col items-center px-6 py-5 gap-3.5">
              <nav className="flex flex-col items-center gap-3 w-full" aria-label="Mobile Navigation Links">
                {mainNav.map((item) => {
                  const active = item.href === activeHref;
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      onClick={() => setIsOpen(false)}
                      className={cn(
                        "py-1 text-[1.05rem] tracking-[0.3px] transition-colors",
                        active ? "text-accent font-semibold" : "text-[#161825] hover:text-accent font-normal",
                      )}
                    >
                      {item.label}
                    </Link>
                  );
                })}
              </nav>

              {/* Small, compact Apply now button */}
              <div className="pt-2.5 w-full flex justify-center border-t border-[#f1f5f9]">
                <Link
                  href={ROUTES.membershipBenefits}
                  onClick={() => setIsOpen(false)}
                  className="inline-flex items-center justify-center rounded-[4px] border-[1.5px] border-accent bg-accent px-5 py-1.5 text-xs font-semibold text-white shadow-sm transition-all hover:bg-accent/90 active:scale-95"
                >
                  Apply now
                </Link>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
}