"use client";

import { useState } from "react";
import Image from "next/image";
import * as Dialog from "@radix-ui/react-dialog";
import { Menu, X } from "lucide-react";
import { NavList } from "./nav-list";
import type { NavSection } from "./nav-types";

/** Drawer de navegação pra telas abaixo de `lg` (secao 175: notebook/
 * tablet são prioridade, mas o próprio celular do agente precisa
 * funcionar) — a sidebar fixa de 256px não cabe num viewport de celular.
 * Radix Dialog dá foco preso + Escape + clique fora de graça (secao 176:
 * navegação completa por teclado). */
export function MobileNavDrawer({ items }: { items: NavSection[] }) {
  const [open, setOpen] = useState(false);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <button
          type="button"
          aria-label="Abrir menu de navegação"
          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden"
        >
          <Menu className="h-5 w-5" aria-hidden />
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 z-40 bg-[hsl(224_45%_11%)]/50 opacity-0 backdrop-blur-[1px] transition-opacity duration-200 data-[state=open]:opacity-100" />
        <Dialog.Content
          className="fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] -translate-x-full flex-col bg-surface shadow-pop outline-none transition-transform duration-200 ease-out data-[state=open]:translate-x-0"
          aria-describedby={undefined}
        >
          <Dialog.Title className="sr-only">Navegação</Dialog.Title>
          <div className="flex h-16 items-center justify-between border-b border-border px-4">
            <Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={110} height={36} />
            <Dialog.Close asChild>
              <button
                type="button"
                aria-label="Fechar menu"
                className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                <X className="h-4 w-4" aria-hidden />
              </button>
            </Dialog.Close>
          </div>
          <nav className="flex-1 overflow-y-auto px-2 py-3" aria-label="Navegação principal">
            <NavList items={items} onNavigate={() => setOpen(false)} />
          </nav>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}