import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createEffect, createMemo, omit, onCleanup, untrack } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { useDelayGroup } from "../../internals/floating-ui/components/floating-delay-group";
import { useHover } from "../../internals/floating-ui/hooks/use-hover";
import { safePolygon } from "../../internals/floating-ui/safe-polygon";
import type { Delay } from "../../internals/floating-ui/types";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import { useButton } from "../../internals/use-button/use-button";
import { useIsoLayoutEffect } from "../../internals/use-iso-layout-effect";
import { OPEN_DELAY } from "../constants";
import type { TooltipHandle } from "../store/tooltip-store";
import { useTooltipProviderContext } from "../tooltip-provider-context";
import { useTooltipRootContext } from "../tooltip-root-context";

export interface TooltipTriggerState {
	open: boolean;
}

export interface TooltipTriggerProps<Payload = unknown>
	extends NativeButtonProps,
		BaseUIComponentProps<"button", TooltipTriggerState> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	/** @default 600 */
	delay?: number | undefined;
	/** @default 0 */
	closeDelay?: number | undefined;
	/** @default false */
	disabled?: boolean | undefined;
	/** @default false */
	closeOnClick?: boolean | undefined;
	handle?: TooltipHandle<Payload> | undefined;
	id?: string | undefined;
	payload?: Payload | undefined;
}

/**
 * An element to attach the tooltip to. Renders a `<button>` element.
 *
 * Solid 2.0-native rewire (§1 wave 2): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and composes hover +
 * useButton + reference props + state-attr getters via `mergeRootProps`.
 */
export function TooltipTrigger<Payload = unknown>(
	props: TooltipTriggerProps<Payload>,
): JSX.Element {
	const rootContext = useTooltipRootContext();

	const disabled = (): boolean => {
		const own = props.disabled;
		if (own !== undefined) return Boolean(own);
		return rootContext.disabled();
	};
	const nativeButton = (): boolean => props.nativeButton ?? true;

	const delayProp = (): number => props.delay ?? OPEN_DELAY;
	const closeDelayProp = (): number => props.closeDelay ?? 0;

	const delayGroup = useDelayGroup(rootContext.floatingRootContext, {
		get open() {
			return rootContext.open();
		},
	});

	useIsoLayoutEffect(
		() => delayGroup.isInstantPhase,
		(phase) => {
			rootContext.setIsInstantPhase(phase);
			if (phase) {
				rootContext.setInstantType("delay");
			}
		},
	);

	const providerContext = useTooltipProviderContext();

	useIsoLayoutEffect(
		() => props.closeOnClick ?? false,
		(v) => {
			rootContext.setCloseOnClick(v);
		},
	);

	const hoverProps = useHover(rootContext.floatingRootContext, {
		get enabled() {
			return !disabled();
		},
		mouseOnly: true,
		get handleClose() {
			return rootContext.disableHoverablePopup() ? null : safePolygon();
		},
		delay: (): Delay => {
			const groupDelay = delayGroup.delayRef.current;
			const providerOpen = providerContext?.delay;
			const providerClose = providerContext?.closeDelay;

			const groupOpenValue =
				typeof groupDelay === "object" ? groupDelay.open : undefined;
			const groupCloseValue =
				typeof groupDelay === "object" ? groupDelay.close : undefined;

			let open: number = delayProp();
			if (delayGroup.hasProvider && groupOpenValue === 0) {
				open = 0;
			} else if (delayGroup.hasProvider) {
				open = props.delay ?? providerOpen ?? delayProp();
			}

			let close: number = closeDelayProp();
			if (props.closeDelay == null && delayGroup.hasProvider) {
				close = groupCloseValue ?? providerClose ?? closeDelayProp();
			}

			return { open, close };
		},
	});

	const { props: buttonProps, ref: buttonRef } = useButton({
		disabled,
		focusableWhenDisabled: () => true,
		native: nativeButton,
	});

	const interactions = rootContext.interactions;
	const referenceProps = interactions.getReferenceProps();

	const isActive = createMemo<boolean>(() => {
		const id = props.id;
		if (id === undefined) return true;
		return rootContext.activeTriggerId() === id;
	});

	const state = createMemo<TooltipTriggerState>(() => ({
		open: rootContext.open() && isActive(),
	}));

	// Trigger registration in the store's trigger map.
	const store = () => props.handle?.store ?? rootContext.store;
	let registeredId: string | null = null;
	let registeredElement: HTMLElement | null = null;
	const triggerRef = (el: HTMLElement | null) =>
		untrack(() => {
			const id = props.id;
			const s = store();

			if (registeredId !== null && registeredElement !== null) {
				const current = s.context.triggerElements.getById(registeredId);
				if (current === registeredElement) {
					s.context.triggerElements.delete(registeredId);
				}
				registeredId = null;
				registeredElement = null;
			}

			if (el && id !== undefined) {
				s.context.triggerElements.add(id, el);
				registeredId = id;
				registeredElement = el;
			}

			if (id === undefined || isActive()) {
				rootContext.setTriggerElement(el);
			}
		});

	onCleanup(() => {
		if (registeredId !== null && registeredElement !== null) {
			const s = store();
			const current = s.context.triggerElements.getById(registeredId);
			if (current === registeredElement) {
				s.context.triggerElements.delete(registeredId);
			}
		}
	});

	createEffect(
		// `"payload" in props` is a reactive `has` read — snapshot it in
		// compute; the apply scope is strict-read.
		() => ({
			active: isActive(),
			payload: props.payload,
			hasPayload: "payload" in props,
		}),
		({ active, payload, hasPayload }) => {
			if (active && hasPayload) {
				rootContext.setPayload(payload);
			}
		},
	);

	const markActive = (): void => {
		const id = props.id;
		if (id !== undefined) {
			rootContext.setActiveTriggerId(id);
		}
		if ("payload" in props) {
			rootContext.setPayload(props.payload);
		}
	};

	const stateAttrs = {
		get "data-popup-open"() {
			return state().open ? "" : undefined;
		},
		get id() {
			return props.id;
		},
		onPointerEnter: markActive,
		onFocus: markActive,
		onClick: markActive,
	};

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

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

		"disabled",
		"nativeButton",
		"delay",
		"closeDelay",
		"closeOnClick",
		"handle",
		"payload",
	);

	let merged: Record<string, unknown> = mergeRootProps(
		hoverProps.reference ?? {},
		referenceProps,
	);
	merged = mergeRootProps(merged, buttonProps);
	merged = mergeRootProps(merged, stateAttrs);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

	const Tag = dynamic(() => props.as ?? "button");
	return (
		<Tag {...merged} ref={composeRefs(buttonRef, triggerRef, userRef(props))} />
	);
}