import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { escapeBelongsToCombobox } from "../../lib/overlayEscape"
import { useReturnFocus } from "../../lib/overlayFocus"
import { useOverlayPresentation } from "../../lib/overlayPresentation"
import { XIcon } from "lucide-react"

import { cn } from "../../lib/utils"
import { getAkashicPortalContainer } from "../../lib/getAkashicPortalContainer"
// ABOVE A FLOATING WINDOW, and this is load-bearing rather than cosmetic. This dialog portals into the
// SAME container as `ui/floating-window/FloatingWindow`, so the two are siblings and z-index alone decides
// who paints on top. At the old `z-50` a dialog opened from INSIDE the meeting window mounted behind it
// while still trapping focus and blocking pointer events everywhere outside itself - an invisible dialog
// that froze the window it came from. See `lib/stackingLayers.ts` for the whole order.
import { Z_MODAL_CLASS } from "../../lib/stackingLayers"
import { Button } from "../ui/button"

function Dialog({
                  ...props
                }: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
                         ...props
                       }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
                        container,
                        ...props
                      }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  // - the trailing `?? undefined` is GONE, and its removal is the fix, not a tidy-up.
  // It converted "the overlay root has not mounted yet" into "portal to document.body", silently and
  // permanently for that dialog's lifetime - which put the first-sign-in agreement gate outside the
  // scoped root and stripped all 68 `.btn` rules off its Accept and Decline buttons.
  // `getAkashicPortalContainer()` now creates the node when it is missing and cannot return null, so
  // there is no longer a nullish branch for a body portal to hide in.
  const portalContainer = container ?? getAkashicPortalContainer()

  return (
      <DialogPrimitive.Portal
          data-slot="dialog-portal"
          container={portalContainer}
          {...props}
      />
  )
}

function DialogClose({
                       ...props
                     }: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
                         className,
                         ...props
                       }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
      <DialogPrimitive.Overlay
          data-slot="dialog-overlay"
          className={cn(
              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-[var(--scrim)]",
              Z_MODAL_CLASS,
              className
          )}
          {...props}
      />
  )
}

function DialogContent({
                         className,
                         children,
                         showCloseButton = true,
                         onEscapeKeyDown,
                         onOpenAutoFocus,
                         onCloseAutoFocus,
                         ...props
                       }: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  const returnFocus = useReturnFocus(onOpenAutoFocus, onCloseAutoFocus)
  const sheet = useOverlayPresentation() === "sheet"
  // A caller that names a width (a w-* or max-w-* class) owns it at every breakpoint; index.css sizes the others to their content.
  const declaresWidth = /(^|\s)([\w-]+:)*(max-)?w-/.test(className ?? "")
  return (
      <DialogPortal>
        <DialogOverlay />
        <DialogPrimitive.Content
            data-slot="dialog-content"
            data-width={declaresWidth ? "declared" : undefined}
            data-close-button={showCloseButton ? "true" : undefined}
            data-presentation={sheet ? "sheet" : undefined}
            /* A MODAL IS A RAISED SURFACE, SO IT IS WHITE. DESIGN.md section 1 names it:
               "cards, modals and popovers sit ABOVE the paper, so they stay pure". This kept
               shadcn's stock `bg-background`, which the theme points at --paper #faf9f7 - the
               PAGE ground - so every modal in the app was drawn on the same colour as the page
               it floats over, while the fields inside it stayed pure white. The elevation read
               backwards: the recessed well was lighter than the panel holding it.

               The hairline is the same story. A bare `border` takes no colour, so Tailwind's
               preflight default gray-200 #e5e7eb wins - a COOL grey in a warm palette, on a box
               whose own fields draw --line #e5e0d8 an inch away. `border-border` is the idiom
               every other bordered surface in this codebase already uses. */
            className={cn(
                "bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] group/dialog grid w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border shadow-lg duration-200 outline-none",
                // A phone sheet takes its padding from index.css unless the caller names its own.
                !sheet && "p-6",
                !declaresWidth && "sm:max-w-lg",
                Z_MODAL_CLASS,
                className
            )}
            onEscapeKeyDown={(event) => {
              if (escapeBelongsToCombobox(event)) {
                event.preventDefault()
                return
              }
              onEscapeKeyDown?.(event)
            }}
            {...returnFocus}
            {...props}
        >
          {children}
          {/* Named on the button, so the icon-only target floor reaches it. */}
          {showCloseButton && (
              <DialogPrimitive.Close
                  data-slot="dialog-close"
                  aria-label="Close"
                  className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
              >
                <XIcon />
              </DialogPrimitive.Close>
          )}
        </DialogPrimitive.Content>
      </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
      <div
          data-slot="dialog-header"
          className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
          {...props}
      />
  )
}

function DialogFooter({
                        className,
                        showCloseButton = false,
                        children,
                        ...props
                      }: React.ComponentProps<"div"> & {
  showCloseButton?: boolean
}) {
  return (
      <div
          data-slot="dialog-footer"
          className={cn(
              "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
              className
          )}
          {...props}
      >
        {children}
        {showCloseButton && (
            <DialogPrimitive.Close asChild>
              <Button variant="outline">Close</Button>
            </DialogPrimitive.Close>
        )}
      </div>
  )
}

function DialogTitle({
                       className,
                       ...props
                     }: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
      <DialogPrimitive.Title
          data-slot="dialog-title"
          // Clear of the close button when there is one; it sits in the corner over the content box.
          className={cn(
              "text-lg leading-none font-semibold group-data-[close-button=true]/dialog:px-6 sm:group-data-[close-button=true]/dialog:pl-0 sm:group-data-[close-button=true]/dialog:pr-6",
              className,
          )}
          {...props}
      />
  )
}

function DialogDescription({
                             className,
                             ...props
                           }: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
      <DialogPrimitive.Description
          data-slot="dialog-description"
          className={cn("text-muted-foreground text-sm", className)}
          {...props}
      />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}