import type { JSX } from "@solidjs/web";
import {
	type Accessor,
	createContext,
	createMemo,
	untrack,
	useContext,
} from "solid-js";
import { makeSlotRefDirective } from "../internals/make-slot-ref-directive";
import { type MaybeAccessor, readOption } from "../internals/maybe-accessor";
import { mergeRootProps } from "../internals/merge-root-props";
import {
	SNAPSHOT_KEYS,
	type Snapshottable,
	snapshotKeys,
} from "../internals/observability/snapshot";

/**
 * Why the checked state changed. Emitted on the third arg of
 * `onCheckedChange(next, event, reason)` and accepted by
 * `c.select(event?, reason?)`.
 *
 * - `"trigger-press"` — click (or keyboard activation that bubbles to click)
 *   on the trigger slot.
 * - `"imperative"` — programmatic `select()` with no originating DOM event.
 *
 * Outer compounds that embed Radio (RadioGroup) translate this to their own
 * reason taxonomy.
 */
export type RadioChangeReason = "trigger-press" | "imperative";

/**
 * Options for {@link createRadio}.
 *
 * Every reactive input is `MaybeAccessor<T>` — pass an accessor to make the
 * value reactive, or a bare value for one-shot config.
 *
 * **Solid-native shape (2026-04-30).** No internal state. `checked` is
 * required and the consumer always owns the signal. The primitive is a pure
 * function from `(checked, onCheckedChange) → api`. See `solidify.md` §6.
 */
export interface CreateRadioOptions {
	/**
	 * Checked state. Consumer-owned signal — the primitive reads through the
	 * accessor and does NOT keep an internal copy. Writes happen via
	 * `onCheckedChange` (the consumer's responsibility to update their signal).
	 * When embedded in a `<RadioGroup>`, this is wired to
	 * `() => group.value() === props.value` by the wrapper.
	 */
	checked: MaybeAccessor<boolean>;
	/**
	 * Whether interaction is suppressed.
	 * @default false
	 */
	disabled?: MaybeAccessor<boolean>;
	/**
	 * Whether the radio is read-only — focusable but not selectable.
	 * @default false
	 */
	readOnly?: MaybeAccessor<boolean>;
	/**
	 * Whether the radio must be selected before form submission.
	 * @default false
	 */
	required?: MaybeAccessor<boolean>;
	/**
	 * Change callback. Called synchronously with `(next, event, reason)`.
	 * `event.preventDefault()` is now a no-op for the primitive (the
	 * consumer's signal write is the only writer).
	 *
	 * Radios are one-way: `select()` always sends `next === true`. There is
	 * no path that sends `false` — clicking an already-checked radio is a
	 * no-op (matches Base UI React).
	 */
	onCheckedChange?: (
		checked: boolean,
		event: Event,
		reason: RadioChangeReason,
	) => void;
}

/**
 * Public API returned by {@link createRadio}. Flat accessors and setters at
 * the root; no `state` snapshot blob.
 */
export interface RadioApi {
	checked: Accessor<boolean>;
	disabled: Accessor<boolean>;
	readOnly: Accessor<boolean>;
	required: Accessor<boolean>;

	/**
	 * Select this radio (set `checked = true`). No-op while `disabled` /
	 * `readOnly`, and no-op if already checked. Fires
	 * `onCheckedChange(true, event, reason)`; if the consumer calls
	 * `event.preventDefault()` the internal write is skipped.
	 */
	select: (event?: Event, reason?: RadioChangeReason) => void;

	/**
	 * Trigger slot — getter-bag of attributes ready for spreading onto a
	 * `<button role="radio">`.
	 */
	trigger: <U extends object | undefined = undefined>(
		userProps?: U,
	) => RadioTriggerSlotProps & (U extends object ? U : object);

	/**
	 * Directive form of {@link trigger} — returns a `ref` callback that
	 * spreads the trigger slot bag onto the element at apply time.
	 */
	triggerRef: () => (el: HTMLButtonElement | null) => void;

	/**
	 * Context provider. Wrap a subtree to make the api discoverable via
	 * `useRadio()` without prop-drilling.
	 */
	Provider: (props: { children: JSX.Element }) => JSX.Element;
}

/** Shape of attributes emitted by `c.trigger()`. */
export interface RadioTriggerSlotProps {
	type: "button";
	role: "radio";
	"aria-checked": "true" | "false";
	"aria-readonly": "true" | undefined;
	"aria-required": "true" | undefined;
	"data-checked": "" | undefined;
	"data-unchecked": "" | undefined;
	"data-disabled": "" | undefined;
	"data-readonly": "" | undefined;
	"data-required": "" | undefined;
	onClick: (event: MouseEvent) => void;
}

const RadioContext = createContext<RadioApi | null>(null);

/**
 * Read the nearest {@link RadioApi} provided by `c.Provider`. Throws if used
 * outside a Provider.
 */
export function useRadio(): RadioApi {
	const ctx = useContext(RadioContext);
	if (ctx == null) {
		throw new Error(
			"Base UI: useRadio() must be called inside a <c.Provider>.",
		);
	}
	return ctx;
}

/**
 * Solid 2.0-native compound primitive for a single radio input. One call owns
 * logical state (checked/disabled/readOnly/required, onCheckedChange). Group
 * coordination, hidden-input form wiring, and field-control validation are
 * the `<Radio.Root>` / `<RadioGroup>` wrappers' job.
 *
 * Radios are one-way: `select()` always sends `next === true`. Clicking an
 * already-checked radio is a no-op (matches Base UI React).
 */
export function createRadio(options: CreateRadioOptions): RadioApi {
	// `checked` reads through the consumer's accessor — no internal signal,
	// no controlled-or-internal branching. Memoized so dependents see the
	// same identity within a tracking scope.
	const checked = createMemo<boolean>(
		() => Boolean(readOption(options.checked)),
		{ name: "radio.checked" },
	);

	const disabled = createMemo<boolean>(
		() => Boolean(readOption(options.disabled)),
		{ name: "radio.disabled" },
	);
	const readOnly = createMemo<boolean>(
		() => Boolean(readOption(options.readOnly)),
		{ name: "radio.readOnly" },
	);
	const required = createMemo<boolean>(
		() => Boolean(readOption(options.required)),
		{ name: "radio.required" },
	);

	// `select` is a pure event-emitter. It fires `onCheckedChange(true, event, reason)`;
	// the consumer is responsible for updating their checked-signal in response.
	// There is no internal state to write — `event.preventDefault()` is now a
	// no-op for the primitive (the consumer's handler is the only writer).
	const select = (
		event?: Event,
		reason: RadioChangeReason = "imperative",
	): void => {
		if (untrack(disabled) || untrack(readOnly)) return;
		if (untrack(checked)) return;
		const ev = event ?? new Event("checkedchange", { cancelable: true });
		options.onCheckedChange?.(true, ev, reason);
	};

	const triggerInternal = {
		type: "button" as const,
		role: "radio" as const,
		get "aria-checked"() {
			return checked() ? ("true" as const) : ("false" as const);
		},
		get "aria-readonly"() {
			return readOnly() ? ("true" as const) : undefined;
		},
		get "aria-required"() {
			return required() ? ("true" as const) : undefined;
		},
		get "data-checked"() {
			return checked() ? "" : undefined;
		},
		get "data-unchecked"() {
			return checked() ? undefined : "";
		},
		get "data-disabled"() {
			return disabled() ? "" : undefined;
		},
		get "data-readonly"() {
			return readOnly() ? "" : undefined;
		},
		get "data-required"() {
			return required() ? "" : undefined;
		},
		onClick(event: MouseEvent) {
			if (disabled() || readOnly()) return;
			if (untrack(checked)) return;
			select(event, "trigger-press");
		},
	};

	const trigger = <U extends object | undefined>(userProps?: U) =>
		mergeRootProps(triggerInternal, userProps) as RadioTriggerSlotProps &
			(U extends object ? U : object);

	const triggerRef = (): ((el: HTMLButtonElement | null) => void) =>
		makeSlotRefDirective(() => trigger());

	const api: RadioApi = {
		checked,
		disabled,
		readOnly,
		required,
		select,
		trigger,
		triggerRef,
		Provider: (props) => (
			<RadioContext value={api}>{props.children}</RadioContext>
		),
	};
	(api as RadioApi & Snapshottable)[SNAPSHOT_KEYS] = RADIO_SNAPSHOT_KEYS;
	return api;
}

const RADIO_SNAPSHOT_KEYS = snapshotKeys<RadioApi>(
	"checked",
	"disabled",
	"readOnly",
	"required",
);