import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, createSignal, omit, untrack } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id";
import {
	createChangeEventDetails,
	createGenericEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import type { CompositeMetadata } from "../../internals/composite/composite-context.ts";
import {
	CompositeList,
	type CompositeListProps,
} from "../../internals/composite/composite-list.tsx";
import { createControlledState } from "../../internals/create-controlled-state";
import { activeElement } from "../../internals/dom/active-element.ts";
import { contains } from "../../internals/dom/contains.ts";
import { ownerDocument } from "../../internals/dom/owner-document.ts";
import { useFieldRootContext } from "../../internals/field-context";
import { useFormContext } from "../../internals/form-context";
import { LabelableProvider } from "../../internals/labelable-provider/labelable-provider.tsx";
import { useAriaLabelledBy } from "../../internals/labelable-provider/use-aria-labelled-by.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import {
	getDefaultLabelId,
	resolveAriaLabelledBy,
} from "../../internals/resolve-aria-labelled-by.ts";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import { ariaLabelledBy as seedAriaLabelledBy } from "../../internals/seed-aria-attr";
import { areArraysEqual } from "../../internals/slider-utils/are-arrays-equal.ts";
import { asc } from "../../internals/slider-utils/asc.ts";
import { clamp } from "../../internals/slider-utils/clamp.ts";
import { getSliderValue } from "../../internals/slider-utils/get-slider-value.ts";
import type { ThumbCollisionBehavior } from "../../internals/slider-utils/resolve-thumb-collision.ts";
import { validateMinimumDistance } from "../../internals/slider-utils/validate-minimum-distance.ts";
import type { BaseUIComponentProps, Orientation } from "../../internals/types";
import { useFieldControlValidation } from "../../internals/use-field-control-validation/use-field-control-validation.ts";
import { useIsoLayoutEffect } from "../../internals/use-iso-layout-effect.ts";
import { useValueChanged } from "../../internals/use-value-changed.ts";
import {
	type IndicatorPosition,
	type SliderRootChangeEventDetails,
	type SliderRootChangeEventReason,
	type SliderRootCommitEventDetails,
	SliderRootContext,
	type SliderRootContextValue,
	type SliderRootState,
	type ThumbMetadata,
} from "../slider-root-context.ts";
import { sliderDataAttrs } from "../utils/state-attrs.ts";

export type {
	SliderRootChangeEventDetails,
	SliderRootChangeEventReason,
	SliderRootCommitEventDetails,
	SliderRootState,
};

type SliderValueShape = number | readonly number[];

export interface SliderRootProps<
	Value extends SliderValueShape = SliderValueShape,
> extends BaseUIComponentProps<"div", SliderRootState> {
	/** Tag/component to render. Defaults to `"div"`. */
	as?: ValidComponent;
	/**
	 * Controlled value. For range sliders, an array of numbers. While not
	 * `undefined` the consumer owns the state — pair with
	 * {@link onValueChange}. When omitted, the slider manages its own value
	 * (seeded from {@link defaultValue}).
	 */
	value?: Value | undefined;
	/**
	 * Initial value when uncontrolled. For range sliders, an array of
	 * numbers. Read once at mount; defaults to `min`. To render a controlled
	 * slider, use the `value` prop instead.
	 */
	defaultValue?: Value | undefined;
	/** Disable all interaction. */
	disabled?: boolean | undefined;
	/** `Intl.NumberFormat` options for value formatting. */
	format?: Intl.NumberFormatOptions | undefined;
	/** Locale for `Intl.NumberFormat`. Defaults to runtime locale. */
	locale?: Intl.LocalesArgument | undefined;
	/** Maximum value. Must be > min. @default 100 */
	max?: number | undefined;
	/** Minimum value. Must be < max. @default 0 */
	min?: number | undefined;
	/** Minimum number of steps between adjacent thumbs in a range slider. */
	minStepsBetweenValues?: number | undefined;
	/** Form name for native submission. */
	name?: string | undefined;
	/** Owner form id. */
	form?: string | undefined;
	/** @default 'horizontal' */
	orientation?: Orientation | undefined;
	/** @default 1 */
	step?: number | undefined;
	/** Step used for Shift+Arrow and Page keys. @default 10 */
	largeStep?: number | undefined;
	/** How colliding thumbs behave during drag. @default 'push' */
	thumbCollisionBehavior?: ThumbCollisionBehavior | undefined;
	/**
	 * How thumbs are aligned relative to the control edges:
	 *  - `'center'`: the thumb's center is pinned to the control's min/max
	 *    edges (thumb overshoots at the endpoints).
	 *  - `'edge'`: the thumb is inset by half its width so its *edge* aligns
	 *    with the control edge. A ResizeObserver measures the thumb + control
	 *    and writes CSS custom properties (`--position`, `--start-position`,
	 *    `--relative-size`) to keep geometry in sync.
	 *  - `'edge-client-only'`: same as `'edge'` but skips the SSR prehydration
	 *    script (not yet ported in this Solid build). For client-only apps the
	 *    two behave identically.
	 * @default 'center'
	 */
	thumbAlignment?: "center" | "edge" | "edge-client-only" | undefined;
	/** Explicit `aria-labelledby`. Composes with registered labels. */
	"aria-labelledby"?: string | undefined;
	/** Fires on every value update. */
	onValueChange?:
		| ((
				value: Value extends number ? number : readonly number[],
				eventDetails: SliderRootChangeEventDetails,
		  ) => void)
		| undefined;
	/** Fires on `pointerup` / commit. */
	onValueCommitted?:
		| ((
				value: Value extends number ? number : readonly number[],
				eventDetails: SliderRootCommitEventDetails,
		  ) => void)
		| undefined;
}

function areValuesEqual(
	newValue: SliderValueShape,
	oldValue: SliderValueShape,
): boolean {
	if (typeof newValue === "number" && typeof oldValue === "number") {
		return newValue === oldValue;
	}
	if (Array.isArray(newValue) && Array.isArray(oldValue)) {
		return areArraysEqual(newValue, oldValue);
	}
	return false;
}

function getSliderChangeEventReason(
	event: KeyboardEvent | Event,
): SliderRootChangeEventReason {
	return "key" in event ? REASONS.keyboard : REASONS.inputChange;
}

/**
 * Groups all parts of the slider. Renders a `<div role="group">`.
 *
 * Solid 2 adaptations of Base UI React's `SliderRoot`:
 *
 *  - No top-level reactive reads — every `props.X` access is wrapped in an
 *    accessor. Reactive state (`values`, `active`, `dragging`, `indicator
 *    Position`) is signal-backed.
 *  - The CompositeList is used for thumb registration (1:1 with React);
 *    `thumbMap` is exposed as an accessor via `onMapChange` so `<Slider.Value>`
 *    can subscribe to thumb-id changes reactively.
 *  - Field integration goes through `useFieldControlValidation` — registers
 *    the control into the surrounding `<Field.Root>` via the unified hook.
 *  - `LabelableProvider` is injected inside the `children` getter so
 *    `<Slider.Label>` + thumb inputs discover each other via the provider's
 *    context.
 *  - `thumbAlignment="edge"` / `"edge-client-only"` work on the client via
 *    a ResizeObserver in `<Slider.Thumb>` that writes `--position` /
 *    `--start-position` / `--relative-size` CSS vars. The SSR prehydration
 *    `<script>` from React (`SliderThumb.tsx:487-499`) is not yet ported.
 *    The `renderBeforeHydration` context flag is
 *    plumbed now so the future SSR change-set is purely additive.
 */
export function SliderRoot<Value extends SliderValueShape = SliderValueShape>(
	props: SliderRootProps<Value>,
): JSX.Element {
	const field = useFieldRootContext();
	const { clearErrors } = useFormContext();

	const id = useBaseUiId(
		untrack(() => (typeof props.id === "string" ? props.id : undefined)),
	);
	const defaultLabelId = getDefaultLabelId(id);

	const [labelId, setLabelIdState] = createSignal<string | undefined>(
		undefined,
		{ ownedWrite: true },
	);

	const min = (): number => props.min ?? 0;
	const max = (): number => props.max ?? 100;
	const step = (): number => props.step ?? 1;
	const largeStep = (): number => props.largeStep ?? 10;
	const minStepsBetweenValues = (): number => props.minStepsBetweenValues ?? 0;
	const orientation = (): Orientation => props.orientation ?? "horizontal";
	const thumbCollisionBehavior = (): ThumbCollisionBehavior =>
		props.thumbCollisionBehavior ?? "push";
	const disabled = (): boolean => field.disabled() || props.disabled === true;
	const name = (): string | undefined => field.name() ?? props.name;
	const form = (): string | undefined => props.form;
	const format = (): Intl.NumberFormatOptions | undefined => props.format;
	const locale = (): Intl.LocalesArgument | undefined => props.locale;

	// Controlled / uncontrolled value (Base UI `value` / `defaultValue`
	// contract): the `value` prop wins while not `undefined`; otherwise an
	// internal signal (seeded once from `defaultValue ?? min`, exactly like
	// React's `useControlled({ default: defaultValue ?? min })`) backs the
	// state and `setValue` below writes it.
	const [valueUnwrapped, setUncontrolledValue] =
		createControlledState<SliderValueShape>({
			controlled: () => props.value as SliderValueShape | undefined,
			default: () =>
				(props.defaultValue as SliderValueShape | undefined) ?? min(),
			fallback: 0,
			name: "<Slider.Root>",
			state: "value",
		});

	const controlRef: { current: HTMLElement | null } = { current: null };
	const sliderRef: { current: HTMLElement | null } = { current: null };
	const thumbRefs: { current: Array<HTMLElement | null> } = { current: [] };
	const pressedInputRef: { current: HTMLInputElement | null } = {
		current: null,
	};
	const pressedThumbCenterOffsetRef: { current: number | null } = {
		current: null,
	};
	const pressedThumbIndexRef = { current: -1 };
	const pressedValuesRef: { current: readonly number[] | null } = {
		current: null,
	};
	const lastChangedValueRef: {
		current: number | readonly number[] | null;
	} = { current: null };
	const lastChangeReasonRef: {
		current: SliderRootChangeEventReason;
	} = { current: "none" };

	const [active, setActiveState] = createSignal(-1, { ownedWrite: true });
	const [lastUsedThumbIndex, setLastUsedThumbIndex] = createSignal(-1, {
		ownedWrite: true,
	});
	const [dragging, setDragging] = createSignal(false, { ownedWrite: true });

	// Edge-alignment geometry: first slot = start thumb position, second =
	// end thumb position, both as percent strings written out by the thumb's
	// ResizeObserver callback. Undefined until the first measurement lands;
	// `equals: false` ensures observer writes that produce the same tuple
	// identity still flush so the indicator re-reads.
	const [indicatorPosition, setIndicatorPositionState] =
		createSignal<IndicatorPosition>([undefined, undefined], {
			ownedWrite: true,
			equals: false,
		});

	function setIndicatorPosition(
		updater: (prev: IndicatorPosition) => IndicatorPosition,
	): void {
		setIndicatorPositionState(updater(indicatorPosition()));
	}

	const thumbAlignment = (): "center" | "edge" | "edge-client-only" =>
		props.thumbAlignment ?? "center";
	const inset = (): boolean => thumbAlignment() !== "center";
	const renderBeforeHydration = (): boolean => thumbAlignment() === "edge";

	const [thumbMap, setThumbMap] = createSignal<
		Map<Element, CompositeMetadata<ThumbMetadata> | null>
	>(new Map(), { ownedWrite: true, equals: false });

	function setActive(value: number): void {
		setActiveState(value);
		if (value !== -1) {
			setLastUsedThumbIndex(value);
		}
	}

	const range = (): boolean => Array.isArray(valueUnwrapped());

	const values = createMemo((): readonly number[] => {
		const current = valueUnwrapped();
		const lo = min();
		const hi = max();
		if (!Array.isArray(current)) {
			return [clamp((current as number) ?? lo, lo, hi)];
		}
		return (current as readonly number[]).slice().sort(asc);
	});

	const registerThumbMap: SliderRootContextValue["registerThumbMap"] = (
		map,
	) => {
		setThumbMap(map);
	};

	// --- Field validation + registration --------------------------------------
	// Hook reads accessor inputs synchronously at body time to seed its
	// initial state — wrap in `untrack` so the snapshot reads don't trip
	// the component-body strict-read shell. Reactivity flows through the
	// retained accessor closures.
	const validation = untrack(() =>
		useFieldControlValidation({
			value: () => valueUnwrapped(),
			id: () => id,
			controlRef,
			getValue: () => valueUnwrapped(),
		}),
	);

	function registerFieldControlRef(element: HTMLElement | null): void {
		if (element) controlRef.current = element;
	}

	useValueChanged(
		() => valueUnwrapped(),
		() => {
			const current = valueUnwrapped();
			clearErrors(name());
			if (field.shouldValidateOnChange()) {
				void validation.commit(current);
			} else {
				void validation.commit(current, true);
			}

			const initialValue = field.validityData().initialValue;
			let isDirty: boolean;
			if (Array.isArray(current) && Array.isArray(initialValue)) {
				isDirty = !areArraysEqual(current, initialValue as readonly unknown[]);
			} else {
				isDirty = current !== initialValue;
			}
			field.setDirty(isDirty);
		},
	);

	if (process.env.NODE_ENV !== "production") {
		// Dev-only. Matches React `SliderRoot.tsx:273-277`. Reads with
		// `untrack` so re-reads during later updates don't retrigger the
		// warning — React's warn only fires on the first invalid render too.
		untrack(() => {
			if (min() >= max()) {
				console.warn("Slider `max` must be greater than `min`.");
			}
		});
	}

	// Blur any focused descendant when disabled flips on — some browsers leave
	// focus on a disabled form control which is both visually confusing and
	// breaks keyboard-escape patterns.
	useIsoLayoutEffect(
		() => disabled(),
		(isDisabled: boolean) => {
			if (!isDisabled) return undefined;
			const root = sliderRef.current;
			if (!root) return undefined;
			const activeEl = activeElement(ownerDocument(root));
			if (contains(root, activeEl)) {
				(activeEl as HTMLElement).blur?.();
			}
			return undefined;
		},
	);

	// SSR-only: React emits a pre-hydration `<script>` from the last thumb
	// (see `SliderThumb.tsx:487-499`) to fix up `--position` CSS vars before
	// hydration. Skipped until the port gains SSR — the `renderBeforeHydration`
	// context flag is already plumbed so the future SSR agent's change set
	// is purely additive.

	function setValue(
		newValue: number | number[],
		details?: SliderRootChangeEventDetails,
	): void {
		const prev = valueUnwrapped();
		if (
			Number.isNaN(newValue) ||
			(prev !== undefined && areValuesEqual(newValue, prev))
		) {
			return;
		}

		const changeDetails =
			details ??
			createChangeEventDetails(REASONS.none, undefined, undefined, {
				activeThumbIndex: -1,
			});

		lastChangeReasonRef.current = changeDetails.reason;
		lastChangedValueRef.current = newValue;

		// Form-library interop (matches React `SliderRoot.tsx` ~226-239):
		// clone the native event and redefine `event.target` to `{ value, name }`
		// so libraries reading `event.target.value` / `event.target.name` in
		// `onValueChange` see the slider's value and name rather than whatever
		// raw DOM node dispatched the event. See
		// https://github.com/mui/material-ui/issues/13485#issuecomment-676048492.
		const nativeEvent = changeDetails.event;
		if (nativeEvent !== undefined) {
			try {
				const EventCtor =
					(nativeEvent.constructor as typeof Event | undefined) ?? Event;
				const cloned = new EventCtor(nativeEvent.type, nativeEvent);
				Object.defineProperty(cloned, "target", {
					writable: true,
					value: { value: newValue, name: name() },
				});
				changeDetails.event = cloned;
			} catch {
				// Some event types cannot be cloned (e.g. synthetic test events
				// with nonstandard constructors). Fall through silently — the
				// original event is still attached to `changeDetails`.
			}
		}

		if (props.onValueChange) {
			(
				props.onValueChange as (
					value: SliderValueShape,
					eventDetails: SliderRootChangeEventDetails,
				) => void
			)(newValue as SliderValueShape, changeDetails);
		}
		// Cancel gate matches React Base UI `SliderRoot.setValue`:
		// `details.cancel()` keeps the uncontrolled state unchanged.
		if (changeDetails.isCanceled) return;
		setUncontrolledValue(newValue as SliderValueShape);
	}

	function handleInputChange(
		valueInput: number,
		index: number,
		event: KeyboardEvent | Event,
	): void {
		const currentValues = values();
		const newValue = getSliderValue(
			valueInput,
			index,
			min(),
			max(),
			range(),
			currentValues,
		);

		if (validateMinimumDistance(newValue, step(), minStepsBetweenValues())) {
			const reason = getSliderChangeEventReason(event);
			const details = createChangeEventDetails(reason, event, undefined, {
				activeThumbIndex: index,
			});
			setValue(newValue, details);
			field.setTouched(true);

			const committed = lastChangedValueRef.current ?? newValue;
			onValueCommitted(committed, createGenericEventDetails(reason, event));
		}
	}

	function onValueCommitted(
		committed: number | readonly number[],
		details: SliderRootCommitEventDetails,
	): void {
		if (props.onValueCommitted) {
			(
				props.onValueCommitted as (
					value: SliderValueShape,
					eventDetails: SliderRootCommitEventDetails,
				) => void
			)(committed, details);
		}
	}

	// Read the parent field's labelId once per access; `resolveAriaLabelledBy`
	// prefers the field label over a locally-registered `<Slider.Label>`.
	const fieldLabelId = (): string | undefined => {
		const fs = field.state();
		return fs && "labelId" in fs
			? ((fs as { labelId?: string | undefined }).labelId ?? undefined)
			: undefined;
	};

	const resolvedRootLabelId = (): string | undefined =>
		resolveAriaLabelledBy(fieldLabelId(), labelId());

	// External aria-labelledby wins position-wise; merged with registered
	// labels via `useAriaLabelledBy`. The hook initialises against its
	// argument at body time — `untrack` keeps that snapshot read out of
	// the component's strict-read shell.
	const composedAriaLabelledBy = untrack(() =>
		useAriaLabelledBy(() => {
			const external = props["aria-labelledby"];
			if (typeof external === "string" && external.length > 0) return external;
			return resolvedRootLabelId();
		}),
	);

	const state = createMemo(
		(): SliderRootState => ({
			...field.state(),
			activeThumbIndex: active(),
			disabled: disabled(),
			dragging: dragging(),
			orientation: orientation(),
			max: max(),
			min: min(),
			minStepsBetweenValues: minStepsBetweenValues(),
			step: step(),
			values: values(),
		}),
	);

	const contextValue: SliderRootContextValue = {
		active,
		lastUsedThumbIndex,
		controlRef,
		thumbRefs,
		dragging,
		setDragging,
		disabled,
		formatOptions: format,
		locale,
		largeStep,
		step,
		min,
		max,
		minStepsBetweenValues,
		orientation,
		thumbCollisionBehavior,
		form,
		name,
		values,
		state,
		labelId: composedAriaLabelledBy,
		rootLabelId: () => defaultLabelId,
		setLabelId: setLabelIdState,
		setActive,
		handleInputChange,
		setValue,
		onValueCommitted,
		registerThumbMap,
		thumbMap,
		pressedInputRef,
		pressedThumbCenterOffsetRef,
		pressedThumbIndexRef,
		pressedValuesRef,
		lastChangedValueRef,
		lastChangeReasonRef,
		commitValidation: validation.commit,
		registerFieldControlRef,
		inset,
		renderBeforeHydration,
		indicatorPosition,
		setIndicatorPosition,
	};

	// Resolve `class`/`style` here so function values (stateful styling) are
	// invoked with the slider state instead of being spread to the DOM raw.
	const userClassStyle = resolveClassStyle(props, () => state());
	const userProps = omit(
		props,
		"as",
		"aria-labelledby",
		"children",
		"class",
		"style",
		"attrs",
		"defaultValue",
		"disabled",
		"form",
		"format",
		"largeStep",
		"locale",
		"max",
		"min",
		"minStepsBetweenValues",
		"name",
		"onValueChange",
		"onValueCommitted",
		"orientation",
		"step",
		"thumbAlignment",
		"thumbCollisionBehavior",
		"value",
	);

	const onMapChange: CompositeListProps<ThumbMetadata>["onMapChange"] = (
		map,
	) => {
		registerThumbMap(map);
	};

	const localRef = (el: HTMLElement | null): void => {
		sliderRef.current = el;
	};

	const internalSlot = {
		id,
		role: "group" as const,
		get children() {
			return (
				<SliderRootContext value={contextValue}>
					<LabelableProvider>
						<CompositeList<ThumbMetadata>
							elementsRef={thumbRefs.current}
							onMapChange={onMapChange}
						>
							{props.children}
						</CompositeList>
					</LabelableProvider>
				</SliderRootContext>
			);
		},
	};

	let merged: Record<string, unknown> = mergeRootProps(
		internalSlot,
		seedAriaLabelledBy(composedAriaLabelledBy),
	);
	merged = mergeRootProps(merged, sliderDataAttrs(state));
	merged = mergeRootProps(
		merged,
		untrack(() => validation.getAriaInvalidProps()) as Record<string, unknown>,
	);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

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