"use client";

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

type NavItem = {
  label: string;
  href: string;
};

type MobileNavProps = {
  items: NavItem[];
  dir: "rtl" | "ltr";
  openLabel: string;
  closeLabel: string;
};

export function MobileNav({ items, dir, openLabel, closeLabel }: MobileNavProps) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    const media = window.matchMedia("(min-width: 768px)");
    const handleHashChange = () => {
      setOpen(false);
    };

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    const handleMediaChange = (event: MediaQueryListEvent) => {
      if (event.matches) {
        setOpen(false);
      }
    };

    document.body.style.overflow = "hidden";
    window.addEventListener("hashchange", handleHashChange);
    document.addEventListener("keydown", handleKeyDown);
    media.addEventListener("change", handleMediaChange);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("hashchange", handleHashChange);
      document.removeEventListener("keydown", handleKeyDown);
      media.removeEventListener("change", handleMediaChange);
    };
  }, [open]);

  const label = open ? closeLabel : openLabel;

  return (
    <div className="md:hidden">
      <button
        type="button"
        className="theme-toggle mobile-menu-toggle"
        aria-expanded={open}
        aria-label={label}
        title={label}
        onClick={() => setOpen((current) => !current)}
      >
        <span className="sr-only">{label}</span>
        {open ? (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
            <path d="M6 6 18 18" />
            <path d="M18 6 6 18" />
          </svg>
        ) : (
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
            <path d="M4 7h16" />
            <path d="M4 12h16" />
            <path d="M4 17h16" />
          </svg>
        )}
      </button>

      {open ? (
        <div className="mobile-menu-panel">
          <nav aria-label="Mobile primary">
            <ul className="mobile-menu-list">
              {items.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className={`mobile-menu-link ${dir === "rtl" ? "text-right" : ""}`}
                    onClick={() => setOpen(false)}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      ) : null}
    </div>
  );
}