"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import type { NavLink } from "@/lib/types";

export default function MobileNav({ nav }: { nav: NavLink[] }) {
  const [open, setOpen] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [headerHeight, setHeaderHeight] = useState(64);
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const header = buttonRef.current?.closest("header");
    if (!header) return;
    const update = () => setHeaderHeight(header.getBoundingClientRect().height);
    update();
    const ro = new ResizeObserver(update);
    ro.observe(header);
    window.addEventListener("resize", update);
    return () => {
      ro.disconnect();
      window.removeEventListener("resize", update);
    };
  }, []);

  useEffect(() => {
    if (!open) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = original;
    };
  }, [open]);

  return (
    <div className="lg:hidden">
      <button
        ref={buttonRef}
        aria-label={open ? "Close menu" : "Open menu"}
        onClick={() => setOpen((v) => !v)}
        className="flex flex-col gap-1.5 p-2"
      >
        <span className="block h-0.5 w-6 bg-neutral-900" />
        <span className="block h-0.5 w-6 bg-neutral-900" />
        <span className="block h-0.5 w-6 bg-neutral-900" />
      </button>

      {open ? (
        <div
          style={{ top: headerHeight }}
          className="fixed inset-x-0 bottom-0 z-40 bg-white overflow-y-auto sm:left-auto sm:w-full sm:max-w-sm sm:border-l sm:border-neutral-200 sm:shadow-xl"
        >
          <nav className="flex flex-col p-6 gap-1">
            {nav.map((item) => (
              <div key={item.href} className="border-b border-neutral-100">
                <div className="flex items-center justify-between py-3">
                  <Link
                    href={item.href}
                    onClick={() => setOpen(false)}
                    className="text-base font-medium text-neutral-900"
                  >
                    {item.label}
                  </Link>
                  {item.children ? (
                    <button
                      aria-label="Expand submenu"
                      onClick={() => setExpanded(expanded === item.href ? null : item.href)}
                      className="px-2 text-neutral-500"
                    >
                      {expanded === item.href ? "–" : "+"}
                    </button>
                  ) : null}
                </div>
                {item.children && expanded === item.href ? (
                  <div className="pb-3 pl-4 flex flex-col gap-2">
                    {item.children.map((child) => (
                      <Link
                        key={child.href}
                        href={child.href}
                        onClick={() => setOpen(false)}
                        className="text-sm text-neutral-600"
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                ) : null}
              </div>
            ))}
          </nav>
        </div>
      ) : null}
    </div>
  );
}