spsays-training/components/ui/confirm-modal.tsx

"use client";

/**
 * ConfirmModal — palette-themed replacement for native `window.confirm`.
 *
 * Mirrors the structure of AuthModal (portal + backdrop + Esc-to-close +
 * click-outside dismiss + body-scroll lock) but with a single primary
 * action button. The default tone is "destructive" since that's the
 * common case (delete this thing), but the `tone` prop swaps to neutral
 * for less-scary confirms.
 *
 * Usage:
 *
 *   const [open, setOpen] = useState(false);
 *   <ConfirmModal
 *     open={open}
 *     onClose={() => setOpen(false)}
 *     title="Delete this collection?"
 *     message="Posts inside will stay on your feed."
 *     confirmLabel="Delete"
 *     onConfirm={async () => { await collections.delete(id); ... }}
 *   />
 *
 * The `onConfirm` may return a promise — the dialog shows a pending state
 * and stays open until it resolves, then auto-closes on success. Errors
 * thrown from onConfirm surface inline below the buttons.
 */

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { AlertTriangle, X } from "lucide-react";
import { cn } from "@/lib/utils";

type Tone = "destructive" | "neutral";

export function ConfirmModal({
  open,
  onClose,
  title,
  message,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  tone = "destructive",
  onConfirm,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  message?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  tone?: Tone;
  /** Called when the user confirms. May return a promise. Throw to keep the modal open with an error message. */
  onConfirm: () => void | Promise<void>;
}) {
  const [working, setWorking] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Reset transient state every time the modal opens — otherwise an error
  // from a previous attempt would linger on the next open.
  useEffect(() => {
    if (open) {
      setWorking(false);
      setError(null);
    }
  }, [open]);

  useEffect(() => {
    if (!open) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape" && !working) onClose();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, working, onClose]);

  // Body-scroll lock while open.
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open) return null;
  if (typeof document === "undefined") return null;

  async function handleConfirm() {
    setError(null);
    setWorking(true);
    try {
      await onConfirm();
      onClose();
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Something went wrong.",
      );
    } finally {
      setWorking(false);
    }
  }

  return createPortal(
    <>
      {/* pointer-events-auto: when this modal is opened from inside a modal
          vaul drawer (body gets pointer-events:none), the overlay/dialog would
          otherwise be click-through — the click would fall to vaul's overlay
          beneath and dismiss the drawer instead of hitting these controls. */}
      <div
        className="pointer-events-auto fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
        onClick={() => !working && onClose()}
        aria-hidden
      />
      <div
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="confirm-modal-title"
        aria-describedby={message ? "confirm-modal-message" : undefined}
        className="pointer-events-auto fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
      >
        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
          <div className="flex items-start gap-3 px-5 pt-5">
            {tone === "destructive" ? (
              <span
                className="shrink-0 size-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center"
                aria-hidden
              >
                <AlertTriangle className="size-5" />
              </span>
            ) : null}
            <div className="flex-1 min-w-0">
              <h2
                id="confirm-modal-title"
                className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground"
              >
                {title}
              </h2>
              {message ? (
                <p
                  id="confirm-modal-message"
                  className="mt-1 text-sm text-muted-foreground leading-relaxed"
                >
                  {message}
                </p>
              ) : null}
            </div>
            <button
              type="button"
              onClick={() => !working && onClose()}
              aria-label="Close"
              className="shrink-0 size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center disabled:opacity-50"
              disabled={working}
            >
              <X className="size-4" />
            </button>
          </div>

          {error ? (
            <p className="mx-5 mt-3 text-sm text-destructive">{error}</p>
          ) : null}

          <div className="px-5 py-4 mt-2 flex items-center justify-end gap-2 border-t border-border bg-muted/30">
            <button
              type="button"
              onClick={onClose}
              disabled={working}
              className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
            >
              {cancelLabel}
            </button>
            <button
              type="button"
              onClick={handleConfirm}
              disabled={working}
              className={cn(
                "h-10 px-4 rounded-md text-sm font-medium transition-colors disabled:opacity-60",
                tone === "destructive"
                  ? "bg-destructive text-white hover:bg-destructive/90"
                  : "bg-primary text-primary-foreground hover:bg-primary/90",
              )}
            >
              {working ? "Working…" : confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </>,
    document.body,
  );
}