"use client";

import type { ComponentProps, ReactNode } from "react";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

/** A tappable row in a nav sheet: 56px high for gloved or hurried thumbs. */
export const NAV_SHEET_ROW_CLASS =
  "flex min-h-14 items-center gap-3 rounded-xl px-3 text-base font-medium focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none";

interface NavSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** The `SheetTrigger` that opens the sheet. */
  trigger: ReactNode;
  title: string;
  /** Extra classes for the sheet panel. */
  className?: string;
  /** Where focus goes on close; by default back to the trigger. */
  finalFocus?: ComponentProps<typeof SheetContent>["finalFocus"];
  children: ReactNode;
}

/**
 * The shared bottom sheet of „Mehr", „+ Neu" and the offline queue: a title,
 * a German close button and a scroll area that clears the iOS home indicator.
 */
export function NavSheet({
  open,
  onOpenChange,
  trigger,
  title,
  className,
  finalFocus,
  children,
}: NavSheetProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      {trigger}
      <SheetContent
        side="bottom"
        // The built-in close button is English; ours is German and 44px high.
        showCloseButton={false}
        finalFocus={finalFocus}
        className={[
          "max-h-[85dvh] gap-0 overflow-y-auto rounded-t-2xl pb-(--safe-area-bottom)",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
      >
        <SheetHeader className="flex-row items-center justify-between">
          <SheetTitle>{title}</SheetTitle>
          <SheetClose
            render={<Button variant="ghost" size="sm" className="min-h-11" />}
          >
            Schließen
          </SheetClose>
        </SheetHeader>
        {children}
      </SheetContent>
    </Sheet>
  );
}