"use client";

import { Button } from "@aur-ui/ui/components/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@aur-ui/ui/components/dialog";
import { cn } from "@aur-ui/ui/lib/utils";
import type { FormEvent, ReactNode } from "react";

type FormDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: ReactNode;
  description?: ReactNode;
  /** Form fields. Rendered inside the `<form>` between header and footer. */
  children: ReactNode;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  submitLabel: ReactNode;
  cancelLabel: ReactNode;
  /** Submission in flight: disables actions, blocks close, shows pending label. */
  submitting?: boolean;
  /** Gate the submit button (validity). Defaults to enabled. */
  canSubmit?: boolean;
  submittingLabel?: ReactNode;
  submitVariant?: React.ComponentProps<typeof Button>["variant"];
  contentClassName?: string;
};

/**
 * Standard create/edit dialog: titled form with cancel + submit footer, the
 * built-in dialog close button, and close blocked while submitting. Replaces
 * the per-dialog hand-rolled close button and footer chrome.
 */
export function FormDialog({
  open,
  onOpenChange,
  title,
  description,
  children,
  onSubmit,
  submitLabel,
  cancelLabel,
  submitting = false,
  canSubmit = true,
  submittingLabel,
  submitVariant = "default",
  contentClassName,
}: FormDialogProps) {
  // Block close (overlay click / Esc / X) mid-submit.
  const handleOpenChange = (next: boolean) => {
    if (submitting) return;
    onOpenChange(next);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className={cn("gap-5", contentClassName)}>
        <DialogHeader>
          <DialogTitle className="pr-8 text-xl font-bold tracking-tight">
            {title}
          </DialogTitle>
          {description ? (
            <DialogDescription>{description}</DialogDescription>
          ) : null}
        </DialogHeader>
        <form className="flex flex-col gap-5" onSubmit={onSubmit}>
          <div className="flex flex-col gap-4">{children}</div>
          <DialogFooter>
            <Button
              type="button"
              variant="ghost"
              onClick={() => handleOpenChange(false)}
              disabled={submitting}
            >
              {cancelLabel}
            </Button>
            <Button
              type="submit"
              variant={submitVariant}
              disabled={!canSubmit || submitting}
            >
              {submitting ? (submittingLabel ?? submitLabel) : submitLabel}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}