import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, omit, untrack } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id";
import {
	type BaseUIChangeEventDetails,
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/composite-constants.ts";
import { useCompositeListItem } from "../../internals/composite/composite-list.tsx";
import {
	type FieldRootState,
	useFieldRootContext,
} from "../../internals/field-context.ts";
import { fieldStateAttrs } from "../../internals/field-state-attrs";
import { HiddenInput } from "../../internals/hidden-input/hidden-input.tsx";
import { useAriaLabelledBy } from "../../internals/labelable-provider/use-aria-labelled-by.ts";
import { type MaybeAccessor, readOption } from "../../internals/maybe-accessor";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import { ariaLabelledBy as seedAriaLabelledBy } from "../../internals/seed-aria-attr";
import { serializeValue } from "../../internals/serialize-value.ts";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import { useButton } from "../../internals/use-button/use-button";
import { useFieldControlValidation } from "../../internals/use-field-control-validation/use-field-control-validation.ts";
import { useValueChanged } from "../../internals/use-value-changed.ts";
import { useRadioGroupContext } from "../../radio-group/radio-group-context.ts";
import { createRadio } from "../create-radio.tsx";
import {
	RadioRootContext,
	type RadioRootContextValue,
	type RadioRootState,
} from "../radio-root-context.ts";

export type RadioChangeEventReason = typeof REASONS.none;
export type RadioChangeEventDetails =
	BaseUIChangeEventDetails<RadioChangeEventReason>;

export type { RadioRootState };

export interface RadioRootProps<Value = unknown>
	extends NativeButtonProps,
		Omit<BaseUIComponentProps<"button", RadioRootState>, "value"> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	value: Value;
	checked?: MaybeAccessor<boolean | undefined>;
	disabled?: boolean | undefined;
	readOnly?: MaybeAccessor<boolean | undefined>;
	required?: MaybeAccessor<boolean | undefined>;
	onCheckedChange?:
		| ((checked: boolean, eventDetails: RadioChangeEventDetails) => void)
		| undefined;
	inputRef?: ((element: HTMLInputElement | null) => void) | undefined;
	name?: string | undefined;
}

/**
 * A selectable input in a group of options. Renders a non-native
 * `<button role="radio">` (default tag) or `as` override, plus a hidden
 * `<input type="radio">` beside it for native form submission.
 *
 * Solid 2.0-native rewire (§1 wave 1): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and threads
 * `createRadio().trigger()` (carrying role=radio, aria-checked/readonly/
 * required, data-checked/unchecked/disabled/readonly/required, onClick)
 * through `mergeRootProps` together with useButton + field-validation +
 * field-state attrs + the group-aware onFocus handler.
 */
export function RadioRoot<Value = unknown>(
	props: RadioRootProps<Value>,
): JSX.Element {
	const field = useFieldRootContext();
	const group = useRadioGroupContext();

	const disabled = (): boolean =>
		field.disabled() || group.disabled() || props.disabled === true;
	const readOnly = (): boolean =>
		group.readOnly() || readOption(props.readOnly) === true;
	const required = (): boolean =>
		group.required() || readOption(props.required) === true;
	const nativeButton = (): boolean => props.nativeButton ?? true;

	const inGroup = (): boolean => group.present;

	const controlledChecked = (): boolean => {
		if (inGroup()) {
			return group.checkedValue() === props.value;
		}
		return Boolean(readOption(props.checked));
	};

	const c = createRadio({
		checked: controlledChecked,
		disabled,
		readOnly,
		required,
		onCheckedChange: (next, event) => {
			const details = createChangeEventDetails(
				REASONS.none,
				event,
			) as RadioChangeEventDetails;

			if (inGroup()) {
				group.setCheckedValue(props.value, details);
				props.onCheckedChange?.(next, details);
				if (details.isCanceled) event.preventDefault();
				return;
			}

			props.onCheckedChange?.(next, details);
			if (details.isCanceled) event.preventDefault();
		},
	});

	const checked = c.checked;

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

	const { ref: compositeItemRef } = useCompositeListItem<unknown>({});

	const id = useBaseUiId();

	const controlRef: { current: HTMLElement | null } = { current: null };

	const validation = useFieldControlValidation({
		value: checked,
		id: () => id,
		controlRef,
		getValue: () => validation.inputRef.current?.checked ?? checked(),
		enabled: () => !group.present,
	});
	const { getAriaInvalidProps, inputRef: fieldInputRef } = validation;

	useValueChanged(checked, () => {
		const value = checked();
		field.setFilled(value);
		field.setDirty(value !== field.validityData().initialValue);
		if (field.shouldValidateOnChange()) {
			void validation.commit(value);
		} else {
			void validation.commit(value, true);
		}
	});

	const serializedValue = createMemo(() => serializeValue(props.value));

	const state = (): RadioRootState => ({
		...field.state(),
		checked: checked(),
		disabled: disabled(),
		readOnly: readOnly(),
		required: required(),
	});

	const contextValue: RadioRootContextValue = {
		state,
		checked,
	};

	const ariaLabelledBy = useAriaLabelledBy(() => {
		const v = props["aria-labelledby"];
		return typeof v === "string" ? v : undefined;
	});

	// Field-state attrs (data-valid/invalid/touched/dirty/filled/focused)
	// not carried by c.trigger(). Spreading `fieldStateAttrs(...)` directly
	// would invoke its getters at body time and trip
	// `[STRICT_READ_UNTRACKED]`; combine via `mergeRootProps` so each
	// getter stays lazy.
	const radioExtraAttrs = {
		get id() {
			return id;
		},
	};
	const radioStateAttrs = mergeRootProps(
		radioExtraAttrs,
		fieldStateAttrs(state),
	);

	// Group-aware onFocus: arrow-key navigation that lands on a radio when
	// `group.touched()` is set should auto-select. The primitive's onClick
	// handles click selection; we just add onFocus here.
	const focusHandler = {
		onFocus: (event: FocusEvent) => {
			if (event.defaultPrevented) return;
			if (disabled() || readOnly()) return;
			if (!group.present || !group.touched()) return;
			group.setTouched(false);
			if (checked()) return;
			const details = createChangeEventDetails(REASONS.none, event);
			group.setCheckedValue(props.value, details);
		},
	};

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

	const userProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"aria-labelledby",
		"checked",
		"children",
		"disabled",
		"inputRef",
		"name",
		"nativeButton",
		"onCheckedChange",
		"readOnly",
		"required",
		"value",
	);

	// Compose: useButton ∘ aria-labelledby ∘ field-validation aria-invalid ∘
	// c.trigger() ∘ fieldStateAttrs ∘ focusHandler ∘ userProps. Event
	// handlers chain in declaration order, gated by defaultPrevented.
	const styledUserProps = mergeRootProps(userStyling, userProps);

	let merged: Record<string, unknown> = mergeRootProps(
		buttonProps,
		seedAriaLabelledBy(ariaLabelledBy),
	);
	merged = mergeRootProps(merged, getAriaInvalidProps());
	merged = mergeRootProps(merged, c.trigger());
	merged = mergeRootProps(merged, radioStateAttrs);
	merged = mergeRootProps(merged, focusHandler);
	merged = mergeRootProps(merged, styledUserProps);

	const Tag = dynamic(() => props.as ?? "button");
	const buttonElement = (
		<Tag
			{...merged}
			ref={composeRefs(
				(el: HTMLElement | null) =>
					untrack(() => {
						controlRef.current = el;
						if (el && group.present && checked()) {
							el.setAttribute(ACTIVE_COMPOSITE_ITEM, "");
						}
					}),
				buttonRef,
				compositeItemRef,
				userRef(props),
			)}
		>
			<RadioRootContext value={contextValue}>{props.children}</RadioRootContext>
		</Tag>
	);

	const hiddenInput = (
		<HiddenInput
			type="radio"
			aria-hidden="true"
			tabindex={-1}
			ref={(el: HTMLInputElement | null): void => {
				fieldInputRef.current = el;
				props.inputRef?.(el);
			}}
			name={group.name() ?? field.name() ?? props.name}
			value={serializedValue()}
			checked={checked()}
			disabled={disabled()}
			required={required()}
		/>
	);

	return (
		<>
			{buttonElement}
			{hiddenInput}
		</>
	);
}

export type { FieldRootState };