import * as React from 'react';
import { cn } from '@/lib/utils';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

const WIDTHS = {
  sm: 'sm:max-w-sm',
  default: 'sm:max-w-lg',
  lg: 'sm:max-w-2xl',
  xl: 'sm:max-w-4xl',
};

/**
 * Modal — the standard dialog shape: header, scrollable body, footer.
 *
 * Owning the scroll boundary here is the point. A dialog that lets its whole
 * body scroll pushes the title and the confirm button off-screen on a laptop;
 * this keeps both pinned and scrolls only the middle.
 */
/** @param {any} props */
/** @param {any} props */
export function Modal({
  open,
  onOpenChange,
  title,
  description,
  icon: Icon,
  size = 'default',
  /** Footer content. Omit for a dialog whose body carries its own actions. */
  footer,
  children,
  className,
  /** Blocks closing — use while a submit is in flight. */
  busy = false,
}) {
  return (
    <Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
      <DialogContent
        /* `dvh`, not `vh`: on a phone `100vh` is the *large* viewport, which
           includes the browser chrome that is currently covering the bottom of
           the screen — so a `90vh` dialog put its footer, and its confirm
           button, under the address bar. */
        className={cn('p-0 gap-0 overflow-hidden max-h-[calc(100dvh-2rem)] flex flex-col', WIDTHS[size], className)}
        onInteractOutside={busy ? (e) => e.preventDefault() : undefined}
        onEscapeKeyDown={busy ? (e) => e.preventDefault() : undefined}
      >
        <DialogHeader className="px-6 pt-6 pb-4 border-b border-border shrink-0 space-y-0">
          <div className="flex items-start gap-3">
            {Icon && (
              <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
                <Icon className="w-4.5 h-4.5" aria-hidden="true" />
              </span>
            )}
            <div className="min-w-0 text-left">
              <DialogTitle className="text-title font-heading text-ink-1">{title}</DialogTitle>
              {description && (
                <DialogDescription className="text-body-sm text-ink-3 mt-1">
                  {description}
                </DialogDescription>
              )}
            </div>
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>

        {footer && (
          <DialogFooter className="px-6 py-4 border-t border-border bg-surface-subtle shrink-0">
            {footer}
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}

/**
 * ConfirmModal — a destructive or irreversible confirmation.
 *
 * Defaults to the destructive tone because that is what confirmation is almost
 * always for, and it labels the action with the verb ("Delete") rather than
 * "OK", so the button says what will happen.
 */
/** @param {any} props */
export function ConfirmModal({
  open,
  onOpenChange,
  title = 'Are you sure?',
  description,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  onConfirm,
  tone = 'destructive',
  icon = null,
  busy = false,
}) {
  return (
    <Modal
      open={open}
      onOpenChange={onOpenChange}
      title={title}
      description={description}
      icon={icon}
      size="sm"
      busy={busy}
      footer={
        <>
          <Button variant="outline" onClick={() => onOpenChange?.(false)} disabled={busy}>
            {cancelLabel}
          </Button>
          <Button variant={tone === 'destructive' ? 'destructive' : 'default'} onClick={onConfirm} loading={busy}>
            {confirmLabel}
          </Button>
        </>
      }
    >
      {null}
    </Modal>
  );
}