"use client";

import { useState } from "react";
import Link from "next/link";
import { MenuIcon } from "lucide-react";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "yt-dlp-transcript-common/components/ui/sheet";

// The narrow half of the masthead: the NAV. Below `lg` the header's bar keeps
// the brand, the social row, the theme toggle and this trigger; the nav's
// links (five or more do not fit a phone's or a tablet's bar beside the group)
// move in here, with the link to the Archilyzer home's official instances
// after them on a site (the bar shows both inline from `lg`). Nothing else:
// the theme is the bar's toggle, the sibling sites are the footer's, and
// Changelog is in the footer.
//
// Header is a server component, so the links arrive as plain serialisable
// props.
export default function MobileMenu({
  links,
  instancesUrl,
}: {
  // `external`: off this site (Use with AI, the homepage's AI and MCP doc), so
  // a plain <a> in the same tab rather than a client navigation.
  links: { href: string; label: string; external?: boolean }[];
  // The Archilyzer home's Official Instances (common/lib/project.ts
  // INSTANCES_URL); absent on the hub, which lists the instances itself.
  instancesUrl?: string;
}) {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          aria-label="Open menu"
          className="shrink-0 lg:hidden"
        >
          <MenuIcon aria-hidden="true" />
        </Button>
      </SheetTrigger>
      <SheetContent
        side="right"
        // Radix warns when a Dialog has neither a Description nor an explicit
        // opt-out. A nav sheet titled "Menu" needs no prose.
        aria-describedby={undefined}
        className="w-80 max-w-[85vw] gap-0 overflow-y-auto pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))]"
      >
        <SheetTitle className="px-4 pt-4 text-base">Menu</SheetTitle>

        {/* Every link closes the sheet on the way out. Header lives in the root
            layout and never remounts on a client navigation, so without this the
            sheet would stay open over the page the user just asked for. */}
        <nav className="mt-2 flex flex-col px-2">
          {links.map((l) => (
            <SheetClose asChild key={l.href}>
              {l.external ? (
                <a
                  href={l.href}
                  className="rounded-md px-2 py-3 text-base font-medium text-foreground transition-colors hover:bg-accent"
                >
                  {l.label}
                </a>
              ) : (
                <Link
                  href={l.href}
                  className="rounded-md px-2 py-3 text-base font-medium text-foreground transition-colors hover:bg-accent"
                >
                  {l.label}
                </Link>
              )}
            </SheetClose>
          ))}
          {instancesUrl && (
            <a
              href={instancesUrl}
              aria-label="Archilyzer — official instances"
              className="rounded-md px-2 py-3 text-base font-medium text-muted-foreground transition-colors hover:bg-accent"
            >
              Archilyzer
            </a>
          )}
        </nav>
      </SheetContent>
    </Sheet>
  );
}