"use client";

import { useState } from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { Menu, X, Mic } from "lucide-react";
import type { PlanKey } from "@/lib/billing/plans";
import { SidebarNav } from "./sidebar-nav";

/**
 * Left-drawer navigation for phones. Mirrors `AdminMobileNav` (radix dialog),
 * wrapping the shared `SidebarNav` and closing on every link tap. Only rendered
 * below the `md` breakpoint.
 */
export function AppMobileNav({ plan, workspaceName }: { plan: PlanKey; workspaceName: string }) {
  const [open, setOpen] = useState(false);
  return (
    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
      <DialogPrimitive.Trigger className="inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground hover:bg-secondary md:hidden">
        <Menu className="h-5 w-5" />
        <span className="sr-only">Open menu</span>
      </DialogPrimitive.Trigger>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 md:hidden" />
        <DialogPrimitive.Content className="fixed inset-y-0 left-0 z-50 w-72 overflow-y-auto border-r border-border bg-background shadow-xl duration-200 data-[state=open]:animate-in data-[state=open]:slide-in-from-left md:hidden">
          <div className="flex items-center justify-between border-b border-border px-4 py-4">
            <DialogPrimitive.Title className="flex items-center gap-2 font-display font-bold tracking-tight">
              <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
                <Mic className="h-4 w-4" />
              </span>
              <span className="truncate">{workspaceName}</span>
            </DialogPrimitive.Title>
            <DialogPrimitive.Close className="rounded-full p-1 text-muted-foreground hover:text-foreground">
              <X className="h-5 w-5" />
              <span className="sr-only">Close</span>
            </DialogPrimitive.Close>
          </div>
          <SidebarNav plan={plan} onNavigate={() => setOpen(false)} />
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}