'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import { ChevronRight, Menu, X } from 'lucide-react';
import type { NavItem } from '@/config/nav';
import { LogoMark } from './logo';

export function MobileNav({ items, groups }: { items: NavItem[]; groups: Array<{ id: NavItem['group']; label: string }> }) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  const [prevPath, setPrevPath] = useState(pathname);
  if (pathname !== prevPath) {
    // close the drawer on navigation (state adjustment during render, no effect needed)
    setPrevPath(pathname);
    setOpen(false);
  }
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [open]);
  return (
    <div className="lg:hidden">
      <button type="button" aria-label="Open menu" aria-expanded={open} className="-ml-1 inline-flex h-10 w-10 items-center justify-center rounded-md text-fg hover:bg-inset" onClick={() => setOpen(true)}>
        <Menu className="h-5 w-5" />
      </button>
      {open ? (
        <div className="fixed inset-0 z-[65] flex" role="dialog" aria-modal="true" aria-label="Menu">
          <div className="absolute inset-0 bg-black/45 backdrop-blur-[2px]" onClick={() => setOpen(false)} />
          <div className="sheet-in relative flex h-[100dvh] w-[88vw] max-w-sm flex-col bg-elevated shadow-pop">
            <div className="flex h-[var(--ri-header-h)] items-center justify-between border-b border-border px-4" style={{ marginTop: 'env(safe-area-inset-top)' }}>
              <span className="flex items-center gap-2">
                <LogoMark className="h-6 w-6" />
                <span className="text-[15px] font-semibold tracking-tight">
                  Rare<span className="text-muted">Index</span>
                </span>
              </span>
              <button type="button" aria-label="Close menu" className="inline-flex h-10 w-10 items-center justify-center rounded-md text-muted hover:bg-inset" onClick={() => setOpen(false)}>
                <X className="h-5 w-5" />
              </button>
            </div>
            <nav className="flex-1 overflow-y-auto overscroll-contain px-2 py-3 safe-bottom">
              {groups.map((g) => (
                <div key={g.id} className="mb-3">
                  <p className="t-label px-2 pb-1">{g.label}</p>
                  {items
                    .filter((n) => n.group === g.id)
                    .map((n) => {
                      const active = pathname === n.href;
                      return (
                        <Link key={n.href} href={n.href} className={`flex min-h-[44px] items-center justify-between gap-3 rounded-md px-2 py-2 ${active ? 'bg-inset' : 'hover:bg-sunken'}`}>
                          <span className="min-w-0">
                            <span className={`block text-[15px] ${active ? 'font-medium text-fg' : 'text-fg'}`}>{n.label}</span>
                            <span className="block truncate text-[11px] text-subtle">{n.description}</span>
                          </span>
                          <ChevronRight className="h-4 w-4 shrink-0 text-subtle" />
                        </Link>
                      );
                    })}
                </div>
              ))}
              <div className="mt-2 grid grid-cols-2 gap-2 px-1">
                <Link href="/login" className="btn h-11">
                  Sign in
                </Link>
                <Link href="/signup" className="btn-primary h-11">
                  Create account
                </Link>
              </div>
            </nav>
          </div>
        </div>
      ) : null}
    </div>
  );
}