import {
  type MouseEvent,
  type ReactNode,
  type RefObject,
  useEffect,
  useId,
  useRef,
} from "react";
import { createPortal } from "react-dom";

import { useFocusTrap } from "../../hooks/useFocusTrap";

export type DialogSize = "sm" | "md" | "lg" | "xl";

export interface DialogProps {
  open: boolean;
  title: ReactNode;
  children: ReactNode;
  description?: ReactNode;
  footer?: ReactNode;
  onOpenChange?: (open: boolean) => void;
  initialFocusRef?: RefObject<HTMLElement>;
  closeOnOverlayClick?: boolean;
  closeOnEscape?: boolean;
  showCloseButton?: boolean;
  closeLabel?: string;
  size?: DialogSize;
  className?: string;
  panelClassName?: string;
  overlayClassName?: string;
  labelledById?: string;
  describedById?: string;
}

const sizeClasses: Record<DialogSize, string> = {
  sm: "max-w-md",
  md: "max-w-2xl",
  lg: "max-w-4xl",
  xl: "max-w-6xl",
};

let bodyScrollLockCount = 0;
let previousBodyOverflow = "";

function cx(...classes: Array<string | false | null | undefined>): string {
  return classes.filter(Boolean).join(" ");
}

function lockBodyScroll(ownerDocument: Document): () => void {
  const { body } = ownerDocument;

  if (!body) {
    return () => undefined;
  }

  if (bodyScrollLockCount === 0) {
    previousBodyOverflow = body.style.overflow;
    body.style.overflow = "hidden";
  }

  bodyScrollLockCount += 1;
  let released = false;

  return () => {
    if (released) {
      return;
    }

    released = true;
    bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);

    if (bodyScrollLockCount === 0) {
      body.style.overflow = previousBodyOverflow;
      previousBodyOverflow = "";
    }
  };
}

export function Dialog({
  open,
  title,
  children,
  description,
  footer,
  onOpenChange,
  initialFocusRef,
  closeOnOverlayClick = true,
  closeOnEscape = true,
  showCloseButton = true,
  closeLabel = "Close dialog",
  size = "md",
  className,
  panelClassName,
  overlayClassName,
  labelledById,
  describedById,
}: DialogProps) {
  const generatedId = useId();
  const panelRef = useRef<HTMLDivElement>(null);
  const titleId = labelledById ?? `${generatedId}-title`;
  const descriptionId = description ? describedById ?? `${generatedId}-description` : undefined;

  useFocusTrap(panelRef, {
    enabled: open,
    initialFocus: initialFocusRef,
    onEscapeKey: closeOnEscape ? () => onOpenChange?.(false) : undefined,
    restoreFocus: true,
    preventScroll: true,
  });

  useEffect(() => {
    if (!open || typeof document === "undefined") {
      return undefined;
    }

    return lockBodyScroll(document);
  }, [open]);

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

  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {
    if (closeOnOverlayClick && event.target === event.currentTarget) {
      onOpenChange?.(false);
    }
  };

  return createPortal(
    <div
      className={cx(
        "fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:px-6",
        className,
      )}
      role="presentation"
    >
      <div
        className={cx(
          "absolute inset-0 bg-slate-950/80 backdrop-blur-md transition-opacity",
          overlayClassName,
        )}
        onMouseDown={handleOverlayMouseDown}
      />

      <div
        ref={panelRef}
        aria-describedby={descriptionId}
        aria-labelledby={titleId}
        aria-modal="true"
        className={cx(
          "relative z-10 flex max-h-[calc(100vh-3rem)] w-full flex-col overflow-hidden rounded-2xl border border-cyan-400/20 bg-slate-950/95 text-slate-100 shadow-2xl shadow-cyan-950/40 outline-none ring-1 ring-white/10",
          sizeClasses[size],
          panelClassName,
        )}
        role="dialog"
        tabIndex={-1}
      >
        <div className="flex items-start justify-between gap-4 border-b border-white/10 px-5 py-4 sm:px-6">
          <div className="min-w-0">
            <h2
              id={titleId}
              className="text-base font-semibold tracking-wide text-white sm:text-lg"
            >
              {title}
            </h2>

            {description ? (
              <div
                id={descriptionId}
                className="mt-1 text-sm leading-6 text-slate-400"
              >
                {description}
              </div>
            ) : null}
          </div>

          {showCloseButton ? (
            <button
              aria-label={closeLabel}
              className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-300 transition hover:border-cyan-300/50 hover:bg-cyan-300/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
              onClick={() => onOpenChange?.(false)}
              type="button"
            >
              <svg
                aria-hidden="true"
                className="h-4 w-4"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.8"
                viewBox="0 0 20 20"
              >
                <path d="M6 6l8 8M14 6l-8 8" strokeLinecap="round" />
              </svg>
            </button>
          ) : null}
        </div>

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

        {footer ? (
          <div className="flex flex-wrap items-center justify-end gap-3 border-t border-white/10 bg-white/[0.03] px-5 py-4 sm:px-6">
            {footer}
          </div>
        ) : null}
      </div>
    </div>,
    document.body,
  );
}