import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import {
	type BaseUIChangeEventDetails,
	createChangeEventDetails,
	REASONS,
} from "../internals/change-event-details";
import { composeRefs, userRef } from "../internals/compose-refs";
import { useCompositeRootContext } from "../internals/composite/composite-context.ts";
import { useCompositeListItem } from "../internals/composite/composite-list.tsx";
import { createControlledState } from "../internals/create-controlled-state";
import { type MaybeAccessor, readOption } from "../internals/maybe-accessor";
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 { useToggleGroupContext } from "../toggle-group/toggle-group-context.ts";
import { createToggle } from "./create-toggle.tsx";

/**
 * The reason string attached to every `onPressedChange` event details object.
 * Matches Base UI React's `Toggle.ChangeEventReason`.
 */
export type ToggleChangeEventReason = typeof REASONS.none;

/**
 * Shape of the details bag handed to `onPressedChange`.
 */
export type ToggleChangeEventDetails =
	BaseUIChangeEventDetails<ToggleChangeEventReason>;

/**
 * The state object exposed through `data-*` projection and the `class` /
 * `style` callback surfaces.
 */
export interface ToggleState {
	/** Whether the toggle is currently pressed. */
	pressed: boolean;
	/** Whether the toggle ignores user interaction. */
	disabled: boolean;
}

export interface ToggleProps<Value extends string = string>
	extends NativeButtonProps,
		BaseUIComponentProps<"button", ToggleState> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	/**
	 * Controlled pressed state. When provided (resolved value not
	 * `undefined`), the consumer owns the state — pair with
	 * {@link onPressedChange}. When omitted, the toggle manages its own
	 * pressed state (seeded from {@link defaultPressed}). Inside a
	 * `<ToggleGroup>` the group's `value` array owns the state instead.
	 */
	pressed?: MaybeAccessor<boolean | undefined>;
	/**
	 * Initial pressed state when uncontrolled. Read once at mount.
	 * Ignored inside a `<ToggleGroup>` (use the group's `defaultValue`).
	 * @default false
	 */
	defaultPressed?: MaybeAccessor<boolean | undefined>;
	/** @default false */
	disabled?: boolean | undefined;
	onPressedChange?:
		| ((pressed: boolean, eventDetails: ToggleChangeEventDetails) => void)
		| undefined;
	/**
	 * Identifier used when the toggle participates in a `<ToggleGroup>`.
	 * Standalone toggles ignore this prop.
	 */
	value?: Value | undefined;
}

/**
 * A two-state button that can be on or off. Renders a `<button>` element
 * (or `as` override).
 *
 * Solid 2.0-native rewire (§1 wave 1): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and threads
 * `createToggle().trigger()` + the `useButton` reactive bag + composite-
 * list focus/tabIndex through `mergeRootProps`. The slot factory now
 * carries data-pressed/data-disabled/aria-pressed.
 */
export function Toggle<Value extends string = string>(
	props: ToggleProps<Value>,
): JSX.Element {
	const group = useToggleGroupContext<Value>();
	const inGroup = group?.present === true;

	const ownDisabled = (): boolean => {
		if (props.disabled) return true;
		if (inGroup) return group?.disabled() === true;
		return false;
	};
	const nativeButton = (): boolean => props.nativeButton ?? true;

	// Controlled / uncontrolled pressed state (Base UI `pressed` /
	// `defaultPressed` contract, mirroring React's `useControlled` in
	// `Toggle`): inside a group the pressed state is always derived from the
	// group's value array (always controlled, `default` is `undefined`);
	// standalone, the `pressed` prop wins while its resolved value is
	// defined, else an internal signal seeded once from `defaultPressed`.
	const [resolvedPressed, setUncontrolledPressed] =
		createControlledState<boolean>({
			controlled: () => {
				if (inGroup) {
					const v = props.value;
					if (v == null || v === "") return false;
					return group?.value().includes(v) ?? false;
				}
				const controlled = readOption(props.pressed);
				return controlled === undefined ? undefined : Boolean(controlled);
			},
			default: () => (inGroup ? undefined : readOption(props.defaultPressed)),
			fallback: false,
			name: "<Toggle>",
			state: "pressed",
		});

	const c = createToggle({
		pressed: resolvedPressed,
		disabled: ownDisabled,
		onPressedChange: (next, event) => {
			const details = createChangeEventDetails(
				REASONS.none,
				event,
			) as ToggleChangeEventDetails;

			// Base UI change flow (React `Toggle.onClick`): route the change
			// through the group first (the group fires its own onValueChange
			// against the same details bag), then the toggle's own
			// onPressedChange, then honor `details.cancel()`, then write the
			// uncontrolled state (a no-op for reads while controlled / in a
			// group).
			if (inGroup) {
				const v = props.value;
				if (v != null && v !== "") {
					group?.setGroupValue(v, next, details);
				}
			}
			props.onPressedChange?.(next, details);
			if (details.isCanceled) {
				event.preventDefault();
				return;
			}
			setUncontrolledPressed(next);
		},
	});

	const { props: buttonProps, ref: buttonRef } = useButton({
		disabled: c.disabled,
		native: nativeButton,
		composite: () => inGroup,
	});

	const { ref: listItemRef, index: itemIndex } = useCompositeListItem<unknown>(
		{},
	);
	const rootContext = useCompositeRootContext(true);

	const groupTabIndex = (): number | undefined => {
		if (!rootContext) return undefined;
		return rootContext.highlightedIndex() === itemIndex() ? 0 : -1;
	};

	const onGroupFocus = (): void => {
		if (!rootContext) return;
		const i = itemIndex();
		if (i >= 0) rootContext.onHighlightedIndexChange(i);
	};

	// Composite/group concerns: tabIndex + focus handler. Plus useButton's
	// reactive bag. These form the "internal" side; c.trigger() is layered
	// next so the toggle's onClick composes correctly with useButton's
	// disabled-suppression.
	const compositeBag = {
		get tabIndex() {
			return groupTabIndex();
		},
		onFocus: onGroupFocus,
	};

	const userStyling = resolveClassStyle(props, () => ({
		pressed: c.pressed(),
		disabled: c.disabled(),
	}));

	const userProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"defaultPressed",
		"disabled",
		"form",
		"nativeButton",
		"onPressedChange",
		"pressed",
		"type",
		"value",
	);

	// Compose, left-to-right wins on the right per mergeRootProps:
	//   compositeBag ∘ buttonProps ∘ c.trigger() ∘ userProps
	// Event handlers chain in declaration order, gated by defaultPrevented
	// (so useButton's disabled check fires before the toggle onClick).
	const step1 = mergeRootProps(compositeBag, buttonProps);
	const triggerBag = c.trigger();
	const step2 = mergeRootProps(step1, triggerBag);
	const styledUserProps = mergeRootProps(userStyling, userProps);

	const merged = mergeRootProps(step2, styledUserProps);

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