Glass Dialog

/**
 * VibeBox Motion · Glass Dialog
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useEffect, useRef, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Glass } from "@/lib/vibebox/glass";

export type GlassDialogProps = {
  title?: string;
  children?: ReactNode;
  confirmLabel?: string;
  cancelLabel?: string;
  /** Marks the confirm action as destructive (a red face). */
  danger?: boolean;
  onConfirm?: () => void;
  onCancel?: () => void;
  /** Draw a dimming scrim that fills the nearest positioned parent (put the dialog in a `relative` box, or `fixed` for the page). */
  scrim?: boolean;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

/**
 * A confirmation dialog on glass. Focus lands on the safe action, Escape cancels, and Tab stays
 * inside it. With `scrim` it fills its positioned parent with a dim backdrop and centres itself.
 */
export function GlassDialog({
  title = "Delete this project?",
  children = "This removes the project and its preview. You can restore it from the archive for 30 days.",
  confirmLabel = "Delete",
  cancelLabel = "Keep it",
  danger = true,
  onConfirm,
  onCancel,
  scrim = true,
  tone,
  className,
}: GlassDialogProps) {
  const root = useRef<HTMLDivElement>(null);
  const cancel = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    cancel.current?.focus({ preventScroll: true });
  }, []);

  const onKey = (event: KeyboardEvent) => {
    if (event.key === "Escape") {
      onCancel?.();
      return;
    }
    if (event.key !== "Tab" || !root.current) return;
    const stops = [...root.current.querySelectorAll<HTMLElement>("button")];
    const first = stops[0];
    const last = stops[stops.length - 1];
    if (event.shiftKey && document.activeElement === first) {
      last?.focus();
      event.preventDefault();
    } else if (!event.shiftKey && document.activeElement === last) {
      first?.focus();
      event.preventDefault();
    }
  };

  const dialog = (
    <Glass
      as="div"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="vb-gd-title"
      data-vb="glass-dialog"
      tone={tone}
      blur={22}
      onKeyDown={onKey}
      className={cn("w-full max-w-[22rem] p-5", className)}
    >
      <div ref={root}>
        <h2 id="vb-gd-title" className="text-[1.05rem] leading-snug font-semibold tracking-tight">
          {title}
        </h2>
        <p className="mt-1.5 text-[0.88rem] leading-relaxed opacity-80">{children}</p>
        <div className="mt-5 flex justify-end gap-2">
          <button
            ref={cancel}
            type="button"
            onClick={onCancel}
            className="h-9 rounded-lg border border-white/30 bg-white/15 px-3.5 text-[0.86rem] font-medium transition-colors hover:bg-white/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
          >
            {cancelLabel}
          </button>
          <button
            type="button"
            onClick={onConfirm}
            className={cn(
              "h-9 rounded-lg px-3.5 text-[0.86rem] font-semibold transition-[filter] hover:brightness-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
              danger ? "bg-[#ff4d6d] text-white" : "bg-white text-[#101521]",
            )}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </Glass>
  );

  if (!scrim) return dialog;
  return <div className="absolute inset-0 z-20 grid place-items-center bg-black/30 p-4 backdrop-blur-[2px]">{dialog}</div>;
}

/**
 * VibeBox Motion · Glass Dialog
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-dialog.client";