import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import {
	type BaseUIChangeEventDetails,
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { createControlledState } from "../../internals/create-controlled-state";
import { useFieldRootContext } from "../../internals/field-context";
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 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 { createSwitch } from "../create-switch.tsx";
import {
	SwitchRootContext,
	type SwitchRootContextValue,
	type SwitchRootState,
} from "../switch-root-context.ts";

/** The reason carried on every `onCheckedChange` event details bag. */
export type SwitchRootChangeEventReason = typeof REASONS.none;

/** Shape of the `onCheckedChange` event details bag. */
export type SwitchRootChangeEventDetails =
	BaseUIChangeEventDetails<SwitchRootChangeEventReason>;

export interface SwitchRootProps
	extends NativeButtonProps,
		Omit<BaseUIComponentProps<"button", SwitchRootState>, "onChange"> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	/**
	 * Controlled checked state. When provided (resolved value not
	 * `undefined`), the consumer owns the state — pair with
	 * {@link onCheckedChange}. When omitted, the switch manages its own
	 * checked state (seeded from {@link defaultChecked}).
	 */
	checked?: MaybeAccessor<boolean | undefined>;
	/**
	 * Initial checked state when uncontrolled. Read once at mount.
	 * @default false
	 */
	defaultChecked?: MaybeAccessor<boolean | undefined>;
	/** @default false */
	disabled?: boolean | undefined;
	name?: string | undefined;
	form?: string | undefined;
	onCheckedChange?:
		| ((checked: boolean, eventDetails: SwitchRootChangeEventDetails) => void)
		| undefined;
	/** @default false */
	readOnly?: MaybeAccessor<boolean | undefined>;
	/** @default false */
	required?: MaybeAccessor<boolean | undefined>;
	value?: string | undefined;
	uncheckedValue?: string | undefined;
}

export type { SwitchRootState };

/**
 * Represents the switch itself. Renders a `<button role="switch">` (or
 * `as` override) and a visually-hidden `<input type="checkbox">` for form
 * submission.
 *
 * Solid 2.0-native rewire (§1 wave 1): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and threads
 * `createSwitch().trigger()` (carrying ARIA + checked/disabled/readonly
 * data-attrs) plus useButton + field-validation + field-state data-attrs
 * through `mergeRootProps`. Field-state attrs (`data-valid`,
 * `data-touched`, `data-dirty`, `data-filled`, `data-focused`) are
 * emitted via inline getters that read from `state()` so they stay
 * reactive — the slot factory itself doesn't carry these.
 */
export function SwitchRoot(props: SwitchRootProps): JSX.Element {
	const field = useFieldRootContext();

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

	// Controlled / uncontrolled checked state (Base UI `checked` /
	// `defaultChecked` contract, mirroring React's `useControlled` in
	// `SwitchRoot`): the `checked` prop wins while its resolved value is
	// defined; otherwise an internal signal (seeded once from
	// `defaultChecked`) backs the state.
	const [resolvedChecked, setUncontrolledChecked] =
		createControlledState<boolean>({
			controlled: () => {
				const controlled = readOption(props.checked);
				return controlled === undefined ? undefined : Boolean(controlled);
			},
			default: () => readOption(props.defaultChecked),
			fallback: false,
			name: "<Switch.Root>",
			state: "checked",
		});

	const c = createSwitch({
		checked: resolvedChecked,
		disabled,
		readOnly,
		required,
		onCheckedChange: (next, event) => {
			const details = createChangeEventDetails(
				REASONS.none,
				event,
			) as SwitchRootChangeEventDetails;
			// Base UI change flow: fire the consumer callback first, honor
			// `details.cancel()`, then write the uncontrolled state (a no-op
			// for reads while the `checked` prop is controlled).
			props.onCheckedChange?.(next, details);
			if (details.isCanceled) {
				event.preventDefault();
				return;
			}
			setUncontrolledChecked(next);
		},
	});
	const checkedAccessor = c.checked;

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

	const validation = useFieldControlValidation({
		value: checkedAccessor,
		id: () => (typeof props.id === "string" ? props.id : undefined),
		controlRef: field.validation.inputRef,
		getValue: checkedAccessor,
	});

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

	const contextValue: SwitchRootContextValue = {
		checked: checkedAccessor,
		disabled,
		readOnly,
		required,
		state,
	};

	function handleHiddenInputChange(
		event: Event & { currentTarget: HTMLInputElement },
	): void {
		if (readOnly()) {
			event.preventDefault();
			return;
		}
		c.setChecked(event.currentTarget.checked, event, "trigger-press");
	}

	// Field-state data-attrs not carried by `c.trigger()`. The slot factory
	// already emits data-checked/unchecked/disabled/readonly/required; here
	// we add validity + interaction attrs via the shared helper.
	const switchFieldAttrs = fieldStateAttrs(state);

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

	// Root-level event handlers + onBlur/onFocus field wiring. The toggle
	// onClick comes from c.trigger(); we layer onBlur/onFocus separately.
	const fieldEventHandlers = {
		onBlur(): void {
			if (disabled()) return;
			field.setTouched(true);
			field.setFocused(false);
			if (field.validationMode() === "onBlur") {
				void validation.commit(checkedAccessor());
			}
		},
		onFocus(): void {
			if (disabled()) return;
			field.setFocused(true);
		},
	};

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

	const userProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"checked",
		"children",
		"defaultChecked",
		"disabled",
		"form",
		"name",
		"nativeButton",
		"onCheckedChange",
		"readOnly",
		"required",
		"uncheckedValue",
		"value",
	);

	// Compose: useButton ∘ field-validation ∘ aria-labelledby ∘ c.trigger() ∘
	// fieldStateAttrs ∘ fieldEventHandlers ∘ userProps. Event handlers chain
	// in declaration order, gated by defaultPrevented.
	const labelledByBag = seedAriaLabelledBy(ariaLabelledBy) ?? {};
	const validationBag = validation.getAriaInvalidProps() ?? {};

	const styledUserProps = mergeRootProps(userStyling, userProps);

	let merged: Record<string, unknown> = mergeRootProps(
		buttonProps,
		validationBag,
	);
	merged = mergeRootProps(merged, labelledByBag);
	merged = mergeRootProps(merged, c.trigger());
	merged = mergeRootProps(merged, switchFieldAttrs);
	merged = mergeRootProps(merged, fieldEventHandlers);
	merged = mergeRootProps(merged, styledUserProps);

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

	return (
		<>
			{button}
			<HiddenInput
				type="checkbox"
				checked={checkedAccessor()}
				disabled={disabled()}
				form={props.form}
				name={name()}
				required={required()}
				value={props.value}
				tabindex={-1}
				aria-hidden="true"
				onChange={handleHiddenInputChange}
			/>
			{!checkedAccessor() && name() && props.uncheckedValue !== undefined ? (
				<input
					type="hidden"
					form={props.form}
					name={name()}
					value={props.uncheckedValue}
				/>
			) : null}
		</>
	);
}