"use client";

import { useEffect, useState } from "react";
import { formatCompact } from "@/lib/format";
import styles from "./MobileNavToggle.module.css";

interface Section {
  href: string;
  label: string;
}

export function MobileNavToggle({
  sections,
  stars,
}: {
  sections: Section[];
  stars: number;
}) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <>
      <button
        className={styles.hamburger}
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen((v) => !v)}
      >
        <span className={`${styles.bar} ${open ? styles.bar1 : ""}`} />
        <span className={`${styles.bar} ${open ? styles.bar2 : ""}`} />
        <span className={`${styles.bar} ${open ? styles.bar3 : ""}`} />
      </button>

      <div
        className={`${styles.sheet} ${open ? styles.sheetOpen : ""}`}
        aria-hidden={!open}
        onClick={(e) => {
          if (e.target === e.currentTarget) setOpen(false);
        }}
      >
        <nav className={styles.panel} aria-label="Site navigation">
          <ul className={styles.list}>
            {sections.map((s) => (
              <li key={s.href}>
                <a href={s.href} onClick={() => setOpen(false)}>
                  {s.label}
                </a>
              </li>
            ))}
          </ul>
          <div className={styles.foot}>
            <a
              href="https://github.com/rohitg00/agentmemory"
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
            >
              GITHUB · {formatCompact(stars)}★
            </a>
            <a
              href="https://www.npmjs.com/package/@agentmemory/agentmemory"
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
            >
              NPM
            </a>
            <a
              href="https://github.com/rohitg00/agentmemory/blob/main/CHANGELOG.md"
              target="_blank"
              rel="noopener"
              onClick={() => setOpen(false)}
            >
              CHANGELOG
            </a>
          </div>
        </nav>
      </div>
    </>
  );
}