Modal

'use client';

import * as motion from 'motion/react-client';
import {
  Children,
  createContext,
  isValidElement,
  use,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { Slot } from '@/components/slot';
import { useElementTransition } from '@/foundations/hooks/use-element-transition';
import {
  MOTION_DURATION,
  MOTION_EASE,
  MOTION_SCALE,
} from '@/foundations/setup/motion';
import { composeRefs } from '@/lib/compose-refs';
import { SafeAnimatePresence } from '@/lib/utils/animate-presence-safe';
import { cn } from '@/lib/utils/classnames';

// Hook to manage native <dialog> element behavior
const useDialogElement = (
  open: boolean,
  setOpen: (isOpen: boolean) => void
) => {
  const ref = useRef<HTMLDialogElement>(null);

  // Emit modal-open or modal-close custom event when the dialog is opened or closed,
  // so other components can react to it
  useEffect(() => {
    const origin = ref.current;
    if (!origin) return;

    const openEvent = new CustomEvent(
      open ? 'ui:modal-open' : 'ui:modal-close',
      {
        detail: { origin: ref.current },
      }
    );
    window.dispatchEvent(openEvent);
  }, [open]);

  useLayoutEffect(() => {
    const element = ref.current;
    if (!element) return;

    if (!element.open) {
      // use native showModal() to ensure it receives focus when opened, and ESC closes it
      element.showModal();
    }

    const abortController = new AbortController();
    const { signal } = abortController;

    // Prevent the default cancel event and use internal state to close the drawer instead
    // This ensures drawer closing is synchronized with internal state, preventing layout shifts
    element.addEventListener(
      'cancel',
      (event: Event) => {
        event.preventDefault();
        setOpen(false);
      },
      { signal }
    );

    // Prevent ESC from closing the dialog when the cancel event is prevented.
    // Unsure if this is a browser bug or intended behavior — the ESC key can push through the cancel event for some reason
    element.addEventListener(
      'keydown',
      (event: KeyboardEvent) => {
        if (event.key === 'Escape' && open) {
          event.preventDefault();
          setOpen(false);
        }
      },
      { signal }
    );

    // Prevent ESC from closing the dialog when it is inert.
    // If the dialog is opened while inert, the focus goes to the window, which allows ESC to close the dialog unexpectedly.
    window.addEventListener(
      'keydown',
      (event: KeyboardEvent) => {
        if (event.key === 'Escape' && element.inert && open) {
          event.preventDefault();
          setOpen(false);
        }
      },
      { signal }
    );

    return () => {
      abortController.abort();
    };
  }, [open, setOpen]);

  useEffect(() => {
    const element = ref.current;
    if (!element || !open) return;

    const handleDialogClick = (event: MouseEvent) => {
      // if the click is on the backdrop, close the drawer
      if ((event.target as HTMLElement).nodeName === 'DIALOG') {
        const dialog = event.target as HTMLDialogElement;
        const { top, left, width, height } = dialog.getBoundingClientRect();
        const isOutsideModal =
          top > event.clientY ||
          event.clientY > top + height ||
          left > event.clientX ||
          event.clientX > left + width;

        if (isOutsideModal) {
          event.stopPropagation();
          setOpen(false);
        }
      }
    };

    element.addEventListener('click', handleDialogClick);

    return () => {
      element.removeEventListener('click', handleDialogClick);
    };
  }, [setOpen, open]);

  return ref;
};

const ModalContext = createContext<{
  open: boolean;
  labelId?: string;
  descriptionId?: string;
  setOpen: (open: boolean) => void;
  setLabelId: (id?: string) => void;
  setDescriptionId: (id?: string) => void;
} | null>(null);

const useModalContext = () => {
  const context = use(ModalContext);

  if (!context) {
    throw new Error('Modal component must be used within a Modal');
  }

  return context;
};

interface ModalProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  children: React.ReactNode;
}

const Modal = ({ open: propsOpen, onOpenChange, children }: ModalProps) => {
  const [internalOpen, setInternalOpen] = useState(false);
  const [labelId, setLabelId] = useState<string | undefined>(undefined);
  const [descriptionId, setDescriptionId] = useState<string | undefined>(
    undefined
  );

  const open = propsOpen ?? internalOpen;

  const setOpen = useCallback(
    (isOpen: boolean) => {
      setInternalOpen(isOpen);
      onOpenChange?.(isOpen);
    },
    [onOpenChange]
  );

  const ctx = useMemo(
    () => ({
      open,
      setOpen,
      labelId,
      setLabelId,
      descriptionId,
      setDescriptionId,
    }),
    [descriptionId, labelId, open, setOpen]
  );

  return <ModalContext value={ctx}>{children}</ModalContext>;
};

interface ModalContentProps extends React.ComponentPropsWithRef<'dialog'> {
  catchFocus?: boolean;
}

const ModalContent = ({
  className,
  children,
  catchFocus = true,
  ...props
}: ModalContentProps) => {
  const { open, labelId, descriptionId, setOpen } = useModalContext();
  const dialogRef = useDialogElement(open, setOpen);

  const {
    ref: transitionRef,
    isMounted,
    status,
  } = useElementTransition<HTMLDialogElement>(open);

  if (!isMounted) return;

  return (
    <dialog
      ref={composeRefs(dialogRef, transitionRef)}
      data-status={status}
      data-motion="modal"
      aria-labelledby={labelId}
      aria-describedby={descriptionId}
      className={cn(
        // Family defaults: 20px radius, 24px padding, no border, CK modal shadow.
        // Examples can override any of these via className (which lands last).
        'm-auto rounded-[1.25rem] bg-surface-raised p-6 shadow-[var(--shadow-modal)]',
        // No default backdrop blur — CK uses transparent slate dim only.
        'backdrop:bg-(--color-overlay) not-data-[status=open]:backdrop:opacity-0 backdrop:transition-opacity backdrop:duration-(--duration-box) backdrop:ease-out',
        'motion-reduce:backdrop:transition-none motion-reduce:[animation:none]',
        className
      )}
      {...props}
    >
      {catchFocus && (
        // By default, the HTML <dialog> element focuses the first focusable child when opened.
        // If that element is scrolled out of view, the dialog may jump to it, causing a jarring and confusing scroll.
        // Additionally, browsers like Safari may show focus-visible styles on that element, which can look odd.
        // The following element catches initial focus to prevent these issues.
        <div
          className="sr-only"
          autoFocus
          tabIndex={-1}
          data-modal-focus-catcher=""
        />
      )}
      {children}
    </dialog>
  );
};

interface ModalTriggerProps extends React.ComponentPropsWithRef<'button'> {
  asChild?: boolean;
}

const ModalTrigger = ({ asChild, children, ...props }: ModalTriggerProps) => {
  const { setOpen } = useModalContext();

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    props.onClick?.(event);

    if (!event.defaultPrevented) {
      setOpen(true);
    }
  };

  const Component = asChild ? Slot : 'button';

  return (
    <Component {...props} onClick={handleClick}>
      {children}
    </Component>
  );
};

interface ModalCloseProps extends React.ComponentPropsWithRef<'button'> {
  asChild?: boolean;
}

const ModalClose = ({
  asChild = false,
  children,
  ...props
}: ModalCloseProps) => {
  const { setOpen } = useModalContext();

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    props.onClick?.(event as React.MouseEvent<HTMLButtonElement>);

    if (!event.defaultPrevented) {
      setOpen(false);
    }
  };

  const Component = asChild ? Slot : 'button';
  return (
    <Component {...props} onClick={handleClick}>
      {children}
    </Component>
  );
};

interface ModalTitleProps extends React.ComponentPropsWithRef<'h2'> {
  asChild?: boolean;
}

const ModalTitle = ({ children, asChild, ...props }: ModalTitleProps) => {
  const generatedId = useId();
  const id = props.id ?? generatedId;

  const { setLabelId } = useModalContext();

  useLayoutEffect(() => {
    setLabelId(id);

    return () => setLabelId(undefined);
  }, [id, setLabelId]);

  const Component = asChild ? Slot : 'h2';
  return (
    <Component id={id} {...props}>
      {children}
    </Component>
  );
};

interface ModalDescriptionProps extends React.ComponentPropsWithRef<'p'> {
  asChild?: boolean;
}

const ModalDescription = ({
  children,
  asChild,
  className,
  ...props
}: ModalDescriptionProps) => {
  const generatedId = useId();
  const id = props.id ?? generatedId;

  const { setDescriptionId } = useModalContext();

  useLayoutEffect(() => {
    setDescriptionId(id);

    return () => setDescriptionId(undefined);
  }, [id, setDescriptionId]);

  const Component = asChild ? Slot : 'p';
  return (
    <Component
      id={id}
      // CK body copy is muted by default; <strong> flips to primary foreground.
      className={cn(
        'text-base text-foreground-secondary leading-[21px] [&_strong]:font-medium [&_strong]:text-foreground',
        className
      )}
      {...props}
    >
      {children}
    </Component>
  );
};

// ---------------------------------------------------------------------------
// Modal.Pages + Modal.Page — direction-aware step transitions
// ---------------------------------------------------------------------------
// Ports ConnectKit's modal page-swap (Modal/index.tsx + Modal/styles.ts).
// When the activeId changes, the leaving page exits and the entering page
// enters with one of four animations, chosen by direction:
//
//   forward (depth ↑): old page FadeOutScaleUp (1 → 1.1)
//                      new page FadeInScaleUp  (0.85 → 1)
//   back    (depth ↓): old page FadeOutScaleDown (1 → 0.85)
//                      new page FadeInScaleDown  (1.1 → 1)
//
// Depth is inferred from the children's order unless an explicit `depth`
// map is provided.

interface ModalPageProps {
  /** Stable ID — must match the value passed to `Modal.Pages` `activeId`. */
  id: string;
  children: React.ReactNode;
}

// Modal.Page is a marker component — actual rendering happens inside
// Modal.Pages so AnimatePresence can drive the transition.
const ModalPage = ({ children }: ModalPageProps) => <>{children}</>;
ModalPage.displayName = 'Modal.Page';

interface ModalPagesProps extends React.ComponentPropsWithRef<'div'> {
  activeId: string;
  /** Optional explicit depth map. Defaults to children-order index. */
  depth?: Record<string, number>;
  children: React.ReactNode;
}

// CK animation timings — `Page` uses `200ms ease both`, exit gets a tiny delay.
// (Modal/styles.ts: animation: 200ms ease both; Page exit has 16.67ms delay.)
const PAGE_TRANSITION = {
  duration: MOTION_DURATION.base,
  ease: MOTION_EASE.default,
};

const ModalPages = ({
  activeId,
  depth: explicitDepth,
  className,
  children,
  ...props
}: ModalPagesProps) => {
  const pages = useMemo(() => {
    return Children.toArray(children).filter(
      (c): c is React.ReactElement<ModalPageProps> => {
        return (
          isValidElement<ModalPageProps>(c) && typeof c.props.id === 'string'
        );
      }
    );
  }, [children]);

  const depthMap = useMemo(() => {
    if (explicitDepth) return explicitDepth;
    const map: Record<string, number> = {};
    pages.forEach((p, i) => {
      map[p.props.id] = i;
    });
    return map;
  }, [pages, explicitDepth]);

  const prevIdRef = useRef(activeId);
  const currentDepth = depthMap[activeId] ?? 0;
  const prevDepth = depthMap[prevIdRef.current] ?? 0;
  // direction: 1 = forward (deeper), -1 = back (shallower)
  const direction: 1 | -1 = currentDepth >= prevDepth ? 1 : -1;

  useEffect(() => {
    prevIdRef.current = activeId;
  }, [activeId]);

  const activePage = pages.find((p) => p.props.id === activeId);

  return (
    // `grid` lets entering + leaving pages stack in the same cell so the
    // modal sizes to whichever is rendering, without absolute positioning.
    <div className={cn('relative grid', className)} {...props}>
      <SafeAnimatePresence mode="popLayout" initial={false} custom={direction}>
        {activePage && (
          <motion.div
            key={activeId}
            data-modal-page={activeId}
            className="col-start-1 row-start-1"
            custom={direction}
            variants={{
              enter: (d: 1 | -1) => ({
                opacity: 0,
                // forward: FadeInScaleUp (0.85 → 1)
                // back:    FadeInScaleDown (1.1 → 1)
                // ConnectKit page transition — sub-modal scale entry, not family motion.
                scale: d === 1 ? 0.85 : MOTION_SCALE.enterDown,
              }),
              center: { opacity: 1, scale: 1 },
              exit: (d: 1 | -1) => ({
                opacity: 0,
                // forward: FadeOutScaleUp (1 → 1.1)
                // back:    FadeOutScaleDown (1 → 0.85)
                // ConnectKit page transition — sub-modal scale entry, not family motion.
                scale: d === 1 ? MOTION_SCALE.enterDown : 0.85,
              }),
            }}
            initial="enter"
            animate="center"
            exit="exit"
            transition={PAGE_TRANSITION}
          >
            {activePage.props.children}
          </motion.div>
        )}
      </SafeAnimatePresence>
    </div>
  );
};

const CompoundModal = Object.assign(Modal, {
  Content: ModalContent,
  Trigger: ModalTrigger,
  Close: ModalClose,
  Title: ModalTitle,
  Description: ModalDescription,
  Pages: ModalPages,
  Page: ModalPage,
});

export { CompoundModal as Modal };