import type { JSX } from "@solidjs/web";
/**
 * Context plumbing for `<Menu.Root>` → descendants. Mirrors
 * `packages/react/src/menu/root/MenuRootContext.ts` but threads reactive
 * accessors (Solid-native) instead of the React source's store + selector pair.
 *
 * `createContext<T | null>(null)` + `== null` sentinel — menu
 * nests recursively via `<Menu.SubmenuRoot>` so parents must tolerate reads
 * from above a provider.
 */
import { type Accessor, createContext, useContext } from "solid-js";
import type {
	BaseUIChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import type { FloatingRootStore } from "../../internals/floating-ui/components/floating-root-store";
import type { FloatingTreeStore } from "../../internals/floating-ui/components/floating-tree-store";
import type { UseInteractionsReturn } from "../../internals/floating-ui/hooks/use-interactions";
import type { MutableRef } from "../../internals/floating-ui/types";
import type { PropsLike } from "../../internals/merge-props-n";
import type { InteractionType } from "../../internals/use-enhanced-click-handler";
import type { TransitionStatus } from "../../internals/use-transition-status/use-transition-status";
import type { MenuStore } from "../store/menu-store";

/**
 * Change-reason union for `Menu.Root`. Mirrors React 1:1.
 */
export type MenuRootChangeEventReason =
	| typeof REASONS.triggerHover
	| typeof REASONS.triggerFocus
	| typeof REASONS.triggerPress
	| typeof REASONS.outsidePress
	| typeof REASONS.focusOut
	| typeof REASONS.listNavigation
	| typeof REASONS.escapeKey
	| typeof REASONS.itemPress
	| typeof REASONS.closePress
	| typeof REASONS.siblingOpen
	| typeof REASONS.cancelOpen
	| typeof REASONS.imperativeAction
	| typeof REASONS.none;

export type MenuRootChangeEventDetails =
	BaseUIChangeEventDetails<MenuRootChangeEventReason> & {
		/** Keeps the popup mounted across a close for exit animations. */
		preventUnmountOnClose?: () => void;
	};

export type MenuRootOrientation = "horizontal" | "vertical";

export type MenuInstantType =
	| "dismiss"
	| "click"
	| "group"
	| "trigger-change"
	| undefined;

export interface MenuRootContextValue<Payload = unknown> {
	/** Whether this root is nested inside another menu (i.e. a submenu). */
	nested: Accessor<boolean>;
	/** Parent menu context if nested, else null. */
	parent: Accessor<MenuRootContextValue<unknown> | null>;

	/** Reactive open state. */
	open: Accessor<boolean>;
	/** Whether the popup subtree is currently mounted (open OR animating out). */
	mounted: Accessor<boolean>;
	/** Enter/exit transition phase, or undefined when settled. */
	transitionStatus: Accessor<TransitionStatus>;

	/** Whether the menu is in modal mode (top-level only). */
	modal: Accessor<boolean>;
	/** Whether the menu is disabled. */
	disabled: Accessor<boolean>;
	/** Visual/keyboard orientation. @default "vertical" */
	orientation: Accessor<MenuRootOrientation>;
	/** Whether arrow keys loop focus at the ends. */
	loopFocus: Accessor<boolean>;
	/** Whether hovering items highlights them (drives `data-highlighted`). */
	highlightItemOnHover: Accessor<boolean>;

	/** Highlighted item index for keyboard navigation. */
	activeIndex: Accessor<number | null>;
	setActiveIndex: (index: number | null) => void;

	/** The current payload attached to the open trigger (when using `handle`). */
	payload: Accessor<Payload | undefined>;
	setPayload: (payload: Payload | undefined) => void;

	/** The trigger element that opened the menu. */
	activeTriggerElement: Accessor<HTMLElement | null>;
	setActiveTriggerElement: (el: HTMLElement | null) => void;

	/** The trigger id that opened the menu (for imperative workflows). */
	activeTriggerId: Accessor<string | null>;
	setActiveTriggerId: (id: string | null) => void;

	/** Last open-change reason, useful for derived styling. */
	lastOpenChangeReason: Accessor<MenuRootChangeEventReason | null>;
	/** Instant transition hint for skipping entry animations. */
	instantType: Accessor<MenuInstantType>;

	/** Setters. */
	setOpen: (next: boolean, details: MenuRootChangeEventDetails) => void;

	/** Floating-UI root context for interaction hooks + positioning. */
	floatingRootContext: FloatingRootStore;
	/** Interaction prop-getter bundle (click + dismiss + listnav + typeahead). */
	interactions: UseInteractionsReturn;

	/** Parallel listRef + labelsRef used by listnav / typeahead. */
	listRef: MutableRef<Array<HTMLElement | null>>;
	labelsRef: MutableRef<Array<string | null>>;
	/** Whether typeahead is currently active (suppresses space → click). */
	typingRef: MutableRef<boolean>;
	/**
	 * Delay (ms) before this menu closes when a sibling item of its trigger is
	 * hovered. Set by `<Menu.SubmenuTrigger>`'s `closeDelay`.
	 */
	closeDelayRef: MutableRef<number>;

	/** Popup element ref (filled by `<Menu.Popup>`). */
	popupRef: MutableRef<HTMLElement | null>;
	/** Positioner element ref (filled by `<Menu.Positioner>`). */
	positionerRef: MutableRef<HTMLElement | null>;

	/** Callback fired after open/close transitions settle. */
	onOpenChangeComplete?: ((open: boolean) => void) | undefined;

	/** Optional floating-tree node id for this root. */
	floatingNodeId: Accessor<string | undefined>;

	/** Whether `closeParentOnEsc` is enabled for submenu escape bubbling. */
	closeParentOnEsc: Accessor<boolean>;

	/**
	 * Context-menu root id when this menu is an inner menu of
	 * `<ContextMenu.Root>`. Threaded onto the popup as `data-rootownerid`
	 * so nested-menu mouseups can be attributed back to their owning root.
	 */
	rootId: Accessor<string | undefined>;

	/**
	 * Parent type — mirrors React's `parent.type`. `undefined` for a
	 * top-level menu, `"menu"` for a submenu, `"menubar"` when mounted
	 * inside `<Menubar>`, `"context-menu"` when mounted inside
	 * `<ContextMenu.Root>`, `"nested-context-menu"` when the parent is
	 * itself an inner context-menu.
	 */
	parentType: Accessor<
		"menu" | "menubar" | "context-menu" | "nested-context-menu" | undefined
	>;

	/**
	 * Underlying `MenuStore` instance. Carries the trigger registry +
	 * imperative setOpen slot. When the consumer passes a `handle` prop to
	 * `<Menu.Root>`, the handle's store is adopted here.
	 */
	store: MenuStore<Payload>;

	/**
	 * Interaction type that opened the menu, or `null` when closed. Mirrors
	 * React's `openMethod` state from `useOpenInteractionType`.
	 */
	openMethod: Accessor<InteractionType | null>;

	/**
	 * Extra props emitted by `useOpenInteractionType` that the trigger must
	 * spread to capture the interaction type on open.
	 */
	openInteractionTypeProps: PropsLike;

	/**
	 * Focus-guard refs used by `<Menu.Trigger>`'s `useTriggerFocusGuards`
	 * integration.
	 */
	beforeContentFocusGuardRef: MutableRef<HTMLElement | null>;
	triggerFocusTargetRef: MutableRef<HTMLElement | null>;

	/**
	 * The floating tree store (if any). Submenus read through to their
	 * root to emit/subscribe cross-menu events.
	 */
	floatingTreeRoot: Accessor<FloatingTreeStore | null>;

	/** Parent floating-tree node id (`null` for top-level roots). */
	floatingParentNodeId: Accessor<string | null>;
}

/** Wraps a payload child-render function. */
export type MenuPayloadChildRenderFunction<Payload> = (details: {
	payload: Payload | undefined;
}) => JSX.Element;

export const MenuRootContext = createContext<MenuRootContextValue | null>(null);

export function useMenuRootContext(): MenuRootContextValue;
export function useMenuRootContext(optional: true): MenuRootContextValue | null;
export function useMenuRootContext(
	optional?: boolean,
): MenuRootContextValue | null {
	const ctx = useContext(MenuRootContext);
	if (ctx == null && !optional) {
		throw new Error(
			"Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.",
		);
	}
	return ctx;
}