import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import {
	createMemo,
	createRenderEffect,
	createSignal,
	omit,
	onCleanup,
	Show,
	untrack,
} from "solid-js";
import { useCspNonce } from "../../csp-provider/csp-context.ts";
import { isHydrating } from "../../internals/is-hydrating.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import type { Orientation } from "../../internals/types.ts";
import { useTabsListContext } from "../tabs-list-context.ts";
import {
	type TabsRootState,
	type TabsTabActivationDirection,
	useTabsRootContext,
} from "../tabs-root-context.ts";
import { tabsIndicatorPrehydrationScript } from "./prehydration-script.ts";

export interface TabsIndicatorPosition {
	left: number;
	right: number;
	top: number;
	bottom: number;
}

export interface TabsIndicatorSize {
	width: number;
	height: number;
}

export interface TabsIndicatorState extends TabsRootState {
	/** Rectangle of the active tab relative to the list. `null` when idle. */
	activeTabPosition: TabsIndicatorPosition | null;
	/** Size of the active tab. `null` when idle. */
	activeTabSize: TabsIndicatorSize | null;
	/** Layout orientation (inherited from root). */
	orientation: Orientation;
	/** Activation direction (inherited from root). */
	tabActivationDirection: TabsTabActivationDirection;
}

export interface TabsIndicatorProps
	extends BaseUIComponentProps<"span", TabsIndicatorState> {
	/** Tag/component to render. Defaults to `"span"`. */
	as?: ValidComponent;
	/**
	 * Whether to emit the inline prehydration `<script>` that positions the
	 * indicator from the SSR'd active tab's geometry before hydration. This
	 * minimizes the window where the indicator is invisible after SSR.
	 * @default false
	 */
	renderBeforeHydration?: boolean | undefined;
}

/**
 * Visual indicator that tracks the position/size of the currently-active tab.
 * Renders a `<span role="presentation">` with `--active-tab-*` CSS custom
 * properties the consumer can wire into their own styles.
 *
 * Deviations from React Base UI:
 *
 * - Measurement runs on mount + whenever the active-tab value or the list
 *   element changes. The list-level `ResizeObserver` (set up here) bumps a
 *   tick signal on every observed resize so the measurement memo re-runs.
 */
export function TabsIndicator(props: TabsIndicatorProps): JSX.Element {
	const root = useTabsRootContext();
	const list = useTabsListContext();
	const nonce = useCspNonce();

	// Tick signal bumped on every observed resize so the measurement memo
	// re-runs. `ownedWrite` because the ResizeObserver callback fires from
	// unowned scope.
	const [resizeTick, setResizeTick] = createSignal(0, { ownedWrite: true });

	let resizeObserver: ResizeObserver | null = null;
	if (typeof ResizeObserver !== "undefined") {
		resizeObserver = new ResizeObserver(() => {
			setResizeTick((t) => t + 1);
		});
	}
	onCleanup(() => {
		resizeObserver?.disconnect();
		resizeObserver = null;
		currentListElement = null;
		currentActiveTab = null;
	});

	// Re-observe the list element whenever it swaps. The memo also observes
	// the active tab directly — a mutation in either triggers a re-measure.
	let currentListElement: HTMLElement | null = null;
	// Tracks the active tab currently observed so `measure()` can unobserve the
	// previous one before observing a new one (stale tabs would otherwise keep
	// firing redundant re-measures). Mirrors the list-element swap pattern below.
	let currentActiveTab: HTMLElement | null = null;
	createRenderEffect(
		() => list.tabsListElement(),
		(next) => {
			const observer = resizeObserver;
			if (!observer) return;
			if (currentListElement && currentListElement !== next) {
				observer.unobserve(currentListElement);
			}
			if (next && next !== currentListElement) {
				observer.observe(next);
			}
			currentListElement = next;
		},
	);

	interface IndicatorMeasurement {
		isTabSelected: boolean;
		left: number;
		right: number;
		top: number;
		bottom: number;
		width: number;
		height: number;
	}

	const emptyMeasurement = (): IndicatorMeasurement => ({
		isTabSelected: false,
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		width: 0,
		height: 0,
	});

	const measure = (): IndicatorMeasurement => {
		resizeTick();
		const value = root.value();
		const listEl = list.tabsListElement();
		if (value == null || listEl == null) {
			return emptyMeasurement();
		}
		const activeTab = root.getTabElementBySelectedValue(value);
		if (activeTab == null) {
			return { ...emptyMeasurement(), isTabSelected: true };
		}
		if (currentActiveTab && currentActiveTab !== activeTab) {
			resizeObserver?.unobserve(currentActiveTab);
		}
		resizeObserver?.observe(activeTab);
		currentActiveTab = activeTab;
		const tabRect = activeTab.getBoundingClientRect();
		const listRect = listEl.getBoundingClientRect();
		const scaleX =
			listEl.offsetWidth > 0 ? listRect.width / listEl.offsetWidth : 1;
		const scaleY =
			listEl.offsetHeight > 0 ? listRect.height / listEl.offsetHeight : 1;
		const hasNonZeroScale =
			Math.abs(scaleX) > Number.EPSILON && Math.abs(scaleY) > Number.EPSILON;
		let left: number;
		let top: number;
		if (hasNonZeroScale) {
			left =
				(tabRect.left - listRect.left) / scaleX +
				listEl.scrollLeft -
				listEl.clientLeft;
			top =
				(tabRect.top - listRect.top) / scaleY +
				listEl.scrollTop -
				listEl.clientTop;
		} else {
			left = activeTab.offsetLeft;
			top = activeTab.offsetTop;
		}
		const width = activeTab.offsetWidth;
		const height = activeTab.offsetHeight;
		const right = listEl.scrollWidth - left - width;
		const bottom = listEl.scrollHeight - top - height;
		return { isTabSelected: true, left, right, top, bottom, width, height };
	};

	// Measurement must run in a render effect, not during render: tab elements
	// register with `<CompositeList>` in their own render effects, and the list
	// forwards the sorted map to `<Tabs.Root>` in a layout-timed render effect.
	// A render-phase memo would always measure one frame early (empty tab map).
	const [measurement, setMeasurement] = createSignal<IndicatorMeasurement>(
		emptyMeasurement(),
		{ ownedWrite: true },
	);
	createRenderEffect(
		() => {
			resizeTick();
			const value = root.value();
			const listEl = list.tabsListElement();
			if (value != null && listEl != null) {
				root.getTabElementBySelectedValue(value);
			}
		},
		() => {
			// The compute above already tracks every reactive value `measure`
			// reads (`resizeTick`, `root.value`, `list.tabsListElement`, and
			// `getTabElementBySelectedValue`), so this apply-scope call is a
			// snapshot — untrack to avoid `[STRICT_READ_UNTRACKED]`.
			setMeasurement(untrack(measure));
		},
	);

	const activeTabPosition = createMemo((): TabsIndicatorPosition | null => {
		const m = measurement();
		if (!m.isTabSelected) return null;
		return { left: m.left, right: m.right, top: m.top, bottom: m.bottom };
	});

	const activeTabSize = createMemo((): TabsIndicatorSize | null => {
		const m = measurement();
		if (!m.isTabSelected) return null;
		return { width: m.width, height: m.height };
	});

	// Keep the memos referenced for any inline-headless consumer surface;
	// the wrapper itself doesn't read activeTabPosition/Size as data attrs
	// (they were always projected as null in the React-parity mapping).
	void activeTabPosition;
	void activeTabSize;

	const indicatorStyle = createMemo((): JSX.CSSProperties | undefined => {
		const m = measurement();
		if (!m.isTabSelected) return undefined;
		return {
			"--active-tab-left": `${m.left}px`,
			"--active-tab-right": `${m.right}px`,
			"--active-tab-top": `${m.top}px`,
			"--active-tab-bottom": `${m.bottom}px`,
			"--active-tab-width": `${m.width}px`,
			"--active-tab-height": `${m.height}px`,
		};
	});

	const displayIndicator = (): boolean => {
		const m = measurement();
		return m.isTabSelected && m.width > 0 && m.height > 0;
	};
	const userClassStyle = resolveClassStyle(props, () => ({
		activeTabPosition: activeTabPosition(),
		activeTabSize: activeTabSize(),
		orientation: root.orientation(),
		tabActivationDirection: root.tabActivationDirection(),
	}));

	const userHtmlProps = omit(
		props,
		"as",
		"class",
		"style",
		"attrs",
		"children",
		"renderBeforeHydration",
	) as Record<string, unknown>;

	const internalProps = {
		role: "presentation" as const,
		get style() {
			return indicatorStyle();
		},
		get hidden() {
			return displayIndicator() ? undefined : true;
		},
		get "data-orientation"() {
			return root.orientation();
		},
		get "data-activation-direction"() {
			return root.tabActivationDirection();
		},
	};

	const merged = mergeRootProps(
		mergeRootProps(internalProps, userClassStyle),
		userHtmlProps,
	);

	// SSR prehydration: emit the inline `<script>` immediately after the
	// indicator element (it reads `document.currentScript.previousElementSibling`)
	// so it positions the indicator before hydration. Gated on
	// `isHydrating && renderBeforeHydration` — server-only, mirrors React
	// `TabsIndicator.tsx:169-176`. Rendered as a plain element (not a spread of
	// an inline call) so Solid's SSR compiler doesn't thunk it.
	const showScript = (): boolean =>
		isHydrating() && props.renderBeforeHydration === true;

	const Tag = dynamic(() => props.as ?? "span");
	return (
		<Show when={root.value() != null}>
			<Tag {...merged} />
			<Show when={showScript()}>
				<script nonce={nonce()} innerHTML={tabsIndicatorPrehydrationScript} />
			</Show>
		</Show>
	);
}