/**
 * @factory/ui — Dialog (Radix `@radix-ui/react-dialog` wrapper).
 *
 * Close-on-Escape, scroll lock and the FOCUS TRAP are delegated to Radix —
 * we do NOT re-implement trapping here (see src/focus.ts for non-Radix
 * surfaces). All colors via `var(--…)` tokens.
 */
import * as React from "react";
import * as RadixDialog from "@radix-ui/react-dialog";
import { clsx } from "clsx";

export const Dialog = RadixDialog.Root;
export const DialogTrigger = RadixDialog.Trigger;
export const DialogClose = RadixDialog.Close;

export const DialogContent = React.forwardRef<
  React.ElementRef<typeof RadixDialog.Content>,
  React.ComponentPropsWithoutRef<typeof RadixDialog.Content>
>(({ className, children, ...props }, ref) => (
  <RadixDialog.Portal>
    <RadixDialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-in" />
    <RadixDialog.Content
      ref={ref}
      className={clsx(
        "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
        "w-full max-w-lg rounded-lg bg-popover p-6 shadow-lg",
        "text-popover-foreground focus:outline-none",
        className,
      )}
      {...props}
    >
      {children}
      <RadixDialog.Close className="absolute right-4 top-4 cursor-pointer text-muted-foreground hover:text-foreground">
        ✕<span className="sr-only">Close</span>
      </RadixDialog.Close>
    </RadixDialog.Content>
  </RadixDialog.Portal>
));
DialogContent.displayName = "DialogContent";

export const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={clsx("flex flex-col gap-1 text-left", className)} {...props} />
);

export const DialogTitle = React.forwardRef<
  React.ElementRef<typeof RadixDialog.Title>,
  React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
>(({ className, ...props }, ref) => (
  <RadixDialog.Title
    ref={ref}
    className={clsx("text-lg font-semibold text-foreground", className)}
    {...props}
  />
));
DialogTitle.displayName = "DialogTitle";

export const DialogDescription = React.forwardRef<
  React.ElementRef<typeof RadixDialog.Description>,
  React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
>(({ className, ...props }, ref) => (
  <RadixDialog.Description
    ref={ref}
    className={clsx("text-sm text-muted-foreground", className)}
    {...props}
  />
));
DialogDescription.displayName = "DialogDescription";

export const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={clsx("mt-6 flex justify-end gap-2", className)} {...props} />
);

/**
 * Minimal dialog lifecycle state for controlled usage.
 * Radix animates open/close; we track the logical phase:
 * "closed" → (openDialog) → "open" → (closeDialog) → "closing" → "closed".
 * The "closing" phase is released by the `onAnimationEnd`/unmount timing in
 * the wiring — kept as a documented simple model here.
 */
export function useDialogState() {
  const [state, setState] = React.useState<"closed" | "open" | "closing">("closed");
  const [open, setOpen] = React.useState(false);

  const openDialog = React.useCallback(() => {
    setOpen(true);
    setState("open");
  }, []);
  const closeDialog = React.useCallback(() => {
    setOpen(false);
    setState("closing");
  }, []);
  /** Called by the wiring after Radix finishes the exit animation. */
  const onAnimationEnd = React.useCallback(() => {
    setState("closed");
  }, []);

  return { open, openDialog, closeDialog, state, onAnimationEnd } as const;
}