import type { JSX, ValidComponent } from "@solidjs/web";
/**
 * Solid 2 port of Base UI React's `NavigationMenuRoot`
 * (`packages/react/src/navigation-menu/root/NavigationMenuRoot.tsx`).
 *
 * Groups every navigation-menu part. Renders `<nav>` when not nested, `<div>`
 * when nested. Exposes the full `<NavigationMenu.Root>` context, and wraps
 * itself in `<FloatingTree>` when this is a top-level root (detected via
 * `useFloatingParentNodeId()`).
 *
 * ### Key port choices
 *
 *  - `value` follows Base UI's controlled/uncontrolled contract via
 *    `createControlledState`: the `value` prop wins while defined,
 *    otherwise an internal signal seeded once from `defaultValue` backs
 *    the state and `setValue` writes it (after the `onValueChange`
 *    cancel gate).
 *  - `open` is derived as `value() != null` to match React.
 *  - Mount / transition status driven by `useTransitionStatus`; exit-animation
 *    unmount deferred via two `useOpenChangeComplete` invocations (one on
 *    the popup element, one on the viewport-target element — the latter
 *    catches inline-viewport usage).
 *  - Actions-ref (`unmount()`) — the Solid port accepts either a callback
 *    ref or `{ current }` object, matching the popover convention.
 */
import { dynamic } from "@solidjs/web";
import {
	type Accessor,
	createEffect,
	createMemo,
	createSignal,
	omit,
	onCleanup,
	untrack,
} from "solid-js";
import { REASONS } from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { createControlledState } from "../../internals/create-controlled-state";
import { ownerDocument } from "../../internals/dom/owner-document";
import type { FloatingRootStore } from "../../internals/floating-ui/components/floating-root-store";
import {
	FloatingNode,
	FloatingTree,
	useFloatingNodeId,
	useFloatingParentNodeId,
} from "../../internals/floating-ui/components/floating-tree";
import type { MutableRef } from "../../internals/floating-ui/types";
import {
	activeElement,
	contains,
} from "../../internals/floating-ui/utils/element";
import { mergeRootProps } from "../../internals/merge-root-props";
import { useOpenChangeComplete } from "../../internals/popups/use-open-change-complete";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { useTransitionStatus } from "../../internals/use-transition-status/use-transition-status";
import { createNavigationMenu } from "../create-navigation-menu";
import {
	type NavigationMenuPopupAutoSizeResetState,
	type NavigationMenuRootChangeEventDetails,
	type NavigationMenuRootChangeEventReason,
	NavigationMenuRootContext,
	type NavigationMenuRootContextValue,
	NavigationMenuTreeContext,
	useNavigationMenuRootContext,
} from "./navigation-menu-root-context";

const BLOCKED_RETURN_FOCUS_REASONS = new Set<string>([
	REASONS.triggerHover,
	REASONS.outsidePress,
	REASONS.focusOut,
]);

/**
 * Imperative actions surface exposed via `actionsRef`.
 */
export interface NavigationMenuRootActions {
	/** Force-unmount the popup subtree now, bypassing any transition. */
	unmount: () => void;
}

export interface NavigationMenuRootState {
	open: boolean;
	nested: boolean;
}

export interface NavigationMenuRootProps<Value = unknown>
	extends BaseUIComponentProps<"nav", NavigationMenuRootState> {
	/**
	 * Tag/component to render. Defaults to `"nav"` at the top level and
	 * `"div"` when nested. Replaces the pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	/**
	 * Controlled active item value. `null` means closed. When provided
	 * (resolved value not `undefined`), the consumer owns the state — pair
	 * with {@link onValueChange}. When omitted, the menu manages its own
	 * value state (seeded from {@link defaultValue}).
	 */
	value?: Value | null | undefined;
	/**
	 * Initial active item value when uncontrolled. Read once at mount.
	 * @default null
	 */
	defaultValue?: Value | null | undefined;
	onValueChange?:
		| ((
				value: Value | null,
				details: NavigationMenuRootChangeEventDetails,
		  ) => void)
		| undefined;
	/** @default 50 */
	delay?: number | undefined;
	/** @default 50 */
	closeDelay?: number | undefined;
	/** @default "horizontal" */
	orientation?: "horizontal" | "vertical" | undefined;
	onOpenChangeComplete?: ((open: boolean) => void) | undefined;
	actionsRef?:
		| ((actions: NavigationMenuRootActions | null) => void)
		| { current: NavigationMenuRootActions | null }
		| undefined;
	children?: JSX.Element;
}

function NavigationMenuRootComponent<Value>(
	props: NavigationMenuRootProps<Value>,
): JSX.Element {
	const parentRoot = useNavigationMenuRootContext(true);
	const nested = useFloatingParentNodeId() != null;

	// Controlled / uncontrolled `value` state (Base UI `value` /
	// `defaultValue` contract): the `value` prop wins while its resolved
	// value is not `undefined` (note `null` is a valid controlled value —
	// "closed"); otherwise an internal signal (seeded once from
	// `defaultValue`) backs the state and the root's `setValue` writes it.
	// `Value` is unconstrained and may itself be a function —
	// `createControlledState` threads writes through the functional-setter
	// form to avoid the value/updater ambiguity in `createSignal`'s
	// overloads.
	const [resolvedValue, setUncontrolledValue] =
		createControlledState<Value | null>({
			controlled: () => props.value,
			default: () => props.defaultValue,
			fallback: null,
			name: "<NavigationMenu.Root>",
			state: "value",
		});

	// Compose the headless NavigationMenu primitive — owns value, derived open,
	// activationDirection, viewportInert, orientation, delay, and closeDelay.
	// The wrapper layers FloatingTree, transition, focus return, and DOM refs.
	const navMenuPrimitive = createNavigationMenu<Value>({
		value: resolvedValue,
		delay: () => props.delay ?? 50,
		closeDelay: () => props.closeDelay ?? 50,
		orientation: () => props.orientation ?? "horizontal",
		// onValueChange is handled by the wrapper's own setValue (which has
		// extra side-effects) — the primitive callback is not wired here.
	});

	const value = navMenuPrimitive.value;
	const open = navMenuPrimitive.open;
	const activationDirection = navMenuPrimitive.activationDirection;
	const setActivationDirection = navMenuPrimitive.setActivationDirection;
	const viewportInert = navMenuPrimitive.viewportInert;
	const setViewportInert = navMenuPrimitive.setViewportInert;

	const [positionerElement, setPositionerElement] =
		createSignal<HTMLElement | null>(null, { ownedWrite: true });
	const [popupElement, setPopupElement] = createSignal<HTMLElement | null>(
		null,
		{ ownedWrite: true },
	);
	const [viewportElement, setViewportElement] =
		createSignal<HTMLElement | null>(null, { ownedWrite: true });
	const [viewportTargetElement, setViewportTargetElement] =
		createSignal<HTMLElement | null>(null, { ownedWrite: true });
	const [floatingRootContext, setFloatingRootContext] = createSignal<
		FloatingRootStore | undefined
	>(undefined, { ownedWrite: true });

	const { mounted, transitionStatus, setMounted } = useTransitionStatus(
		open,
		() => true,
		() => false,
	);

	// Mutable refs.
	const closeReasonRef: MutableRef<
		NavigationMenuRootChangeEventReason | undefined
	> = { current: undefined };
	const rootRef: MutableRef<HTMLElement | null> = { current: null };
	const currentContentRef: MutableRef<HTMLDivElement | null> = {
		current: null,
	};
	const beforeInsideRef: MutableRef<HTMLSpanElement | null> = { current: null };
	const afterInsideRef: MutableRef<HTMLSpanElement | null> = { current: null };
	const beforeOutsideRef: MutableRef<HTMLSpanElement | null> = {
		current: null,
	};
	const afterOutsideRef: MutableRef<HTMLSpanElement | null> = { current: null };
	const prevTriggerElementRef: MutableRef<Element | null | undefined> = {
		current: null,
	};
	const popupAutoSizeResetRef: MutableRef<NavigationMenuPopupAutoSizeResetState> =
		{
			current: { abortController: null, owner: null },
		};

	// Reset viewport inert on value change (matches React).
	createEffect(
		() => value(),
		() => {
			setViewportInert(false);
		},
	);

	// setValue — change-notify + reason-aware side-effects.
	// `untrack` the body: reads of `value()` are snapshots driving change-
	// detection, not subscriptions. setValue is called from event handlers AND
	// from `<NavigationMenuTrigger>`'s `handleOpenChange` (downstream of
	// floating-root's effect-apply); the latter would otherwise trip
	// `[STRICT_READ_UNTRACKED]` via the strict-read context that survives
	// across the synchronous `flush()` re-entry on the hover-open path.
	//
	// Mirrors Base UI's `NavigationMenuRoot.setValue`: fire `onValueChange`
	// (only when the value actually changes), honor `details.cancel()`, then
	// write the uncontrolled state — a no-op for reads while the `value`
	// prop is controlled.
	const setValue = (
		next: Value | null,
		details: NavigationMenuRootChangeEventDetails,
	): void =>
		untrack(() => {
			if (!next) {
				closeReasonRef.current = details.reason;
				setActivationDirection(null);
				setFloatingRootContext(undefined);
			}

			// Snapshot the pre-event value once and gate BOTH the notify and
			// the write on it. Solid 2 batches writes until flush, so every
			// `value()` read inside one event window sees the same snapshot —
			// an "unchanged" call must therefore be a full no-op, or it would
			// clobber a write made earlier in the same window (e.g. useClick's
			// toggle-close immediately followed by the trigger's own
			// activation re-asserting the snapshot-stale active value). React
			// reaches the same observable result through handler ordering +
			// `setState` bail-out.
			const prev = value();
			if (next !== prev) {
				props.onValueChange?.(next, details);
			}
			// Base UI gates the state write AND the nested link-press
			// propagation on `eventDetails.isCanceled`.
			if (details.isCanceled) return;

			if (next !== prev) {
				setUncontrolledValue(next);
			}

			if (
				nested &&
				!next &&
				details.reason === REASONS.linkPress &&
				parentRoot
			) {
				parentRoot.setValue(
					null,
					details as NavigationMenuRootChangeEventDetails,
				);
			}
		});

	// Unmount — restores focus to the previous trigger unless the close reason
	// blocks return-focus (hover / outside press / focus out).
	const handleUnmount = (): void => {
		const doc = ownerDocument(rootRef.current);
		const activeEl = activeElement(doc);
		const reason = closeReasonRef.current;
		const isBlocked = reason ? BLOCKED_RETURN_FOCUS_REASONS.has(reason) : false;
		const popup = popupElement();

		if (
			!isBlocked &&
			prevTriggerElementRef.current instanceof HTMLElement &&
			(activeEl === doc.body || contains(popup, activeEl)) &&
			popup
		) {
			try {
				prevTriggerElementRef.current.focus({ preventScroll: true });
			} catch {
				/* happy-dom may throw if the element was detached */
			}
			prevTriggerElementRef.current = undefined;
		}

		setMounted(false);
		props.onOpenChangeComplete?.(false);
		setActivationDirection(null);
		setFloatingRootContext(undefined);

		currentContentRef.current = null;
		closeReasonRef.current = undefined;
	};

	// Exit-animation deferred unmount. Mirrors React's two `useOpenChangeComplete`
	// invocations — one on popup, one on viewport-target (covers the inline
	// viewport-target variant).
	const hasActionsRef = (): boolean => Boolean(props.actionsRef);

	const popupRef: MutableRef<HTMLElement | null> = { current: null };
	// Mirror popupElement() into the plain ref slot for useOpenChangeComplete.
	createEffect(
		() => popupElement(),
		(el) => {
			popupRef.current = el;
		},
	);
	const viewportTargetRef: MutableRef<HTMLElement | null> = { current: null };
	createEffect(
		() => viewportTargetElement(),
		(el) => {
			viewportTargetRef.current = el;
		},
	);

	useOpenChangeComplete({
		enabled: () => !hasActionsRef(),
		open,
		ref: popupRef,
		onComplete: () => {
			if (!open()) handleUnmount();
		},
	});
	useOpenChangeComplete({
		enabled: () => !hasActionsRef(),
		open,
		ref: viewportTargetRef,
		onComplete: () => {
			if (!open()) handleUnmount();
		},
	});

	// Fire onOpenChangeComplete once transition has settled.
	createEffect(
		() => ({ o: open(), s: transitionStatus() }),
		({ o, s }) => {
			if (s === undefined) props.onOpenChangeComplete?.(o);
		},
	);

	// Imperative actions wiring.
	const actions: NavigationMenuRootActions = {
		unmount: () => {
			setMounted(false);
			setActivationDirection(null);
			setFloatingRootContext(undefined);
			currentContentRef.current = null;
			closeReasonRef.current = undefined;
			props.onOpenChangeComplete?.(false);
		},
	};
	// `actionsRef` is captured once at setup — the consumer either passes a
	// stable callback or a ref object, neither of which needs reactive
	// tracking. Snapshot through `untrack` to avoid
	// `[STRICT_READ_UNTRACKED]` from the root component-body scope.
	const ar = untrack(() => props.actionsRef);
	if (typeof ar === "function") {
		ar(actions);
		onCleanup(() => ar(null));
	} else if (ar && typeof ar === "object") {
		ar.current = actions;
		onCleanup(() => {
			ar.current = null;
		});
	}

	const contextValue: NavigationMenuRootContextValue<Value> = {
		open,
		value: value as Accessor<Value | null>,
		setValue,
		mounted,
		transitionStatus,
		positionerElement,
		setPositionerElement,
		popupElement,
		setPopupElement,
		viewportElement,
		setViewportElement,
		viewportTargetElement,
		setViewportTargetElement,
		activationDirection,
		setActivationDirection,
		floatingRootContext,
		setFloatingRootContext,
		currentContentRef,
		nested,
		rootRef,
		beforeInsideRef,
		afterInsideRef,
		beforeOutsideRef,
		afterOutsideRef,
		prevTriggerElementRef,
		popupAutoSizeResetRef,
		delay: navMenuPrimitive.delay,
		closeDelay: navMenuPrimitive.closeDelay,
		orientation: navMenuPrimitive.orientation,
		viewportInert,
		setViewportInert,
	};

	return (
		<NavigationMenuRootContext
			value={contextValue as NavigationMenuRootContextValue<unknown>}
		>
			<TreeContext
				componentProps={props}
				rootRef={rootRef}
				nested={nested}
				open={open}
			/>
		</NavigationMenuRootContext>
	);
}

function TreeContext<Value>(props: {
	componentProps: NavigationMenuRootProps<Value>;
	rootRef: MutableRef<HTMLElement | null>;
	nested: boolean;
	open: Accessor<boolean>;
}): JSX.Element {
	const nodeId = useFloatingNodeId();

	const state = createMemo<NavigationMenuRootState>(() => ({
		open: props.open(),
		nested: props.nested,
	}));

	const setRootRef = (el: HTMLElement | null): void => {
		props.rootRef.current = el;
	};

	const defaultTag = props.nested ? "div" : "nav";

	const internal = {
		get "data-open"() {
			return state().open ? "" : undefined;
		},
		get "data-nested"() {
			return state().nested ? "" : undefined;
		},
	};

	const userClassStyle = resolveClassStyle(props.componentProps, () => state());

	const userProps = omit(
		props.componentProps,
		"as",
		"class",
		"style",
		"attrs",

		"children",
		"value",
		"defaultValue",
		"onValueChange",
		"delay",
		"closeDelay",
		"orientation",
		"onOpenChangeComplete",
		"actionsRef",
	);

	let merged: Record<string, unknown> = mergeRootProps(
		internal,
		userClassStyle,
	);
	merged = mergeRootProps(merged, userProps);

	const Tag = dynamic(() => props.componentProps.as ?? defaultTag);
	return (
		<FloatingNode id={nodeId}>
			<Tag
				{...merged}
				ref={composeRefs(setRootRef, userRef(props.componentProps))}
			>
				<NavigationMenuTreeContext value={nodeId ?? null}>
					{props.componentProps.children}
				</NavigationMenuTreeContext>
			</Tag>
		</FloatingNode>
	);
}

/**
 * Groups all parts of the navigation menu. Renders `<nav>` at the top level,
 * `<div>` when nested.
 */
export function NavigationMenuRoot<Value = unknown>(
	props: NavigationMenuRootProps<Value>,
): JSX.Element {
	// If we're already inside a FloatingTree (because we're nested or because
	// a parent root already wrapped us), don't wrap again.
	if (
		useFloatingParentNodeId() != null ||
		useNavigationMenuRootContext(true) != null
	) {
		return <NavigationMenuRootComponent<Value> {...props} />;
	}
	return (
		<FloatingTree>
			<NavigationMenuRootComponent<Value> {...props} />
		</FloatingTree>
	);
}

export type {
	NavigationMenuRootChangeEventDetails,
	NavigationMenuRootChangeEventReason,
};