"use client";

/**
 * Dialog — minimal fixed-overlay shell shared by the workspace dialogs
 * (create, share, invite, template). Escape / backdrop closes. Mirrors the
 * behavior of the core ConfirmDialog without coupling to it.
 */
import { useEffect, type ReactNode } from "react";
import { X } from "lucide-react";

export interface DialogProps {
  open: boolean;
  title: string;
  description?: ReactNode;
  onClose: () => void;
  children: ReactNode;
  /** Footer button row (Cancel / Confirm). Omit for custom footers. */
  footer?: ReactNode;
  /** Width class (default max-w-lg). */
  width?: string;
  /** tests/README.md selector convention (e.g. `move-dialog`). */
  testId?: string;
}

export function Dialog({ open, title, description, onClose, children, footer, width = "max-w-lg", testId }: DialogProps) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[90] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden />
      <div
        role="dialog"
        aria-modal="true"
        aria-label={title}
        data-testid={testId}
        className={`relative flex max-h-[85vh] w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl ${width}`}
      >
        <div className="flex items-start gap-3 border-b border-border px-4 py-3">
          <div className="min-w-0 flex-1">
            <h2 className="text-base font-semibold">{title}</h2>
            {description ? <div className="mt-0.5 text-sm text-muted-foreground">{description}</div> : null}
          </div>
          <button
            type="button"
            className="rounded p-1 text-muted-foreground hover:bg-muted"
            onClick={onClose}
            aria-label="Close"
          >
            <X className="size-4" />
          </button>
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto p-4">{children}</div>
        {footer ? <div className="flex justify-end gap-2 border-t border-border px-4 py-3">{footer}</div> : null}
      </div>
    </div>
  );
}

/** Standard footer: Cancel + a primary action (optionally destructive/busy). */
export function DialogFooter({
  onCancel,
  onAction,
  actionLabel,
  busy,
  destructive,
  disabled,
  testId
}: {
  onCancel: () => void;
  onAction: () => void;
  actionLabel: string;
  busy?: boolean;
  destructive?: boolean;
  disabled?: boolean;
  /** tests/README.md selector on the primary button (e.g. `move-dialog-confirm`). */
  testId?: string;
}) {
  return (
    <>
      <button
        type="button"
        onClick={onCancel}
        disabled={busy}
        className="rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:opacity-50"
      >
        Cancel
      </button>
      <button
        type="button"
        onClick={onAction}
        disabled={busy || disabled}
        data-testid={testId}
        className={
          // text-white only on the fixed red-600 destructive bg; the primary
          // button uses the theme token (readable in dark mode, where
          // --primary is a light color).
          "rounded-md px-3 py-1.5 text-sm font-medium disabled:opacity-50 " +
          (destructive
            ? "bg-red-600 text-white hover:bg-red-700"
            : "bg-primary text-primary-foreground hover:opacity-90")
        }
      >
        {busy ? "Working…" : actionLabel}
      </button>
    </>
  );
}