import type { ReactNode } from "react";
import "./bottom-sheet.scss";
import { useNativeDialogBehavior } from "./useNativeDialogBehavior";

/**
 * A native `<dialog>` anchored to the bottom edge instead of centered —
 * the mobile-native replacement for a small anchored floating popover
 * (a menu, a short list of actions) that a phone-width screen has no good
 * place to float. Same open/close mechanics as `Dialog.tsx` (via the
 * shared `useNativeDialogBehavior`: `showModal()` on mount, Escape/`close`
 * event, tap-outside-to-dismiss) — only the panel's own position/shape
 * differs, so both get the browser's focus trap and top-layer stacking for
 * free.
 *
 * First consumer: `AppLayout`'s mobile nav, for the "Plus" tab (Paramètres
 * + Compte, previously two separate floating dropdowns that had no
 * viewport-edge handling at all — see the mobile/tablet UI chantier's own
 * audit). Meant to be reused by the planning popovers (leftovers basket,
 * week calendar) in a later ticket of that same chantier — kept generic
 * (title + children, no planning-specific assumptions) for that reason.
 *
 * Not used on desktop: a sheet sliding up from the bottom of a full
 * viewport only reads as "anchored to what you tapped" on a narrow screen
 * where the tapped control is usually near the bottom already (a bottom
 * tab bar, a floating action button). Desktop keeps the existing anchored
 * dropdown/popover pattern for the same triggers — callers decide which to
 * render (typically via `useIsMobileViewport()`), this component doesn't
 * check the viewport itself.
 */
export function BottomSheet({
  onClose,
  title,
  children,
}: {
  onClose: () => void;
  title?: string;
  children: ReactNode;
}) {
  const dialogRef = useNativeDialogBehavior(onClose);

  return (
    <dialog ref={dialogRef} className="bottom-sheet" aria-label={title}>
      {/* Purely decorative drag-affordance — this sheet closes via
          tap-outside/Escape/the close button, never an actual drag
          gesture, but the grabber bar is still the expected visual
          convention for "this slid up from the bottom" on both Android and
          iOS, so it's worth keeping even without the gesture behind it. */}
      <div className="bottom-sheet__grabber" aria-hidden="true" />
      {title && (
        <div className="bottom-sheet__header">
          <h2>{title}</h2>
          <button
            type="button"
            className="bottom-sheet__close"
            onClick={() => dialogRef.current?.close()}
            aria-label="Fermer"
          >
            ✕
          </button>
        </div>
      )}
      <div className="bottom-sheet__body">{children}</div>
    </dialog>
  );
}