import { Button } from "@repo/shadcn-ui/components/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@repo/shadcn-ui/components/dialog";
import { type ReactNode, createContext, useContext } from "react";

const FormCancelContext = createContext<string | undefined>(undefined);

export function FormDialog({
  open,
  onOpenChange,
  title,
  cancelLabel,
  children,
  wide = false,
  size,
  formActions = false,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: ReactNode;
  cancelLabel: string;
  children: ReactNode;
  wide?: boolean;
  size?: "small" | "medium" | "large";
  formActions?: boolean;
}) {
  const width = size ?? (wide ? "large" : "small");
  const widths = {
    small: "sm:max-w-xl",
    medium: "sm:max-w-3xl",
    large: "sm:w-[90vw] sm:max-w-[1200px]",
  };

  return (
    <Dialog onOpenChange={onOpenChange} open={open}>
      <DialogContent
        className={`flex max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden p-0 ${widths[width]}`}
        showCloseButton={true}
      >
        <DialogHeader className="shrink-0 border-b px-6 py-5 pr-14">
          <DialogTitle className="text-lg font-bold">{title}</DialogTitle>
        </DialogHeader>
        <div
          className="@container flex min-h-0 flex-1 flex-col overflow-y-auto px-6 pt-5 pb-5 [&:has([data-slot=form-body])]:overflow-hidden [&:has([data-slot=form-body])]:pb-0"
          data-slot="form-dialog-content"
        >
          <FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
            {children}
          </FormCancelContext.Provider>
        </div>
        {!formActions && (
          <DialogFooter className="shrink-0 border-t px-6 py-4">
            <DialogClose render={<Button type="button" variant="outline" />}>
              {cancelLabel}
            </DialogClose>
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}

export function FormActions({ children }: { children: ReactNode }) {
  const cancelLabel = useContext(FormCancelContext);

  return (
    <DialogFooter className="shrink-0 border-t bg-popover py-4">
      {cancelLabel && (
        <DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
      )}
      {children}
    </DialogFooter>
  );
}

/** El cuerpo reserva espacio simétrico para que el scroll no recorte el anillo de foco. */
export function FormBody({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-1 pt-1 pb-5" data-slot="form-body">
      {children}
    </div>
  );
}