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)`.
 *
 * - `"trigger-press"` — click / keyboard activation that bubbles to click on
 *   the checkbox root, OR a change on the co-located hidden `<input>`.
 * - `"imperative"` — programmatic `setChecked` / `toggle` with no originating
 *   DOM event.
 */
export type CheckboxChangeReason = "trigger-press" | "imperative";

/**
 * Options for {@link createCheckbox}. Every reactive input is
 * `MaybeAccessor<T>` — pass an accessor to make the value reactive.
 *
 * Design note on tri-state: the rollout doc floated
 * `checked: boolean | "indeterminate"` for the api shape; this primitive
 * mirrors React's two-signal convention instead (`checked` + `indeterminate`
 * are independent). Reason: indeterminate is a presentation concern (what
 * `aria-checked` reports + native `<input>.indeterminate` property) layered
 * on top of the underlying boolean. Folding them into a single union loses
 * the "what does the next click flip to" answer (native checkboxes flip an
 * indeterminate one to `true`, regardless of the underlying boolean), and
 * forces consumers to encode/decode the union at every read site.
 *
 * **Solid-native shape (2026-04-30).** No internal state. `checked` is
 * required and the consumer always owns the signal. See `solidify.md` §6.
 */
export interface CreateCheckboxOptions {
	/**
	 * 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 in response).
	 */
	checked: MaybeAccessor<boolean>;
	/**
	 * Whether the checkbox is in mixed state. Independent of `checked`:
	 * a click on an indeterminate checkbox flips `checked` to `true`
	 * regardless of the current `checked` value (matches the native
	 * `<input type="checkbox">.indeterminate` semantics). Always reactive.
	 * @default false
	 */
	indeterminate?: MaybeAccessor<boolean>;
	/**
	 * Whether interaction is suppressed.
	 * @default false
	 */
	disabled?: MaybeAccessor<boolean>;
	/**
	 * Whether the checkbox is read-only — focusable but not activatable.
	 * @default false
	 */
	readOnly?: MaybeAccessor<boolean>;
	/**
	 * Whether the checkbox must be ticked for form submission.
	 * @default false
	 */
	required?: MaybeAccessor<boolean>;
	/**
	 * Pre-change callback. `event.preventDefault()` is now a no-op for
	 * the primitive (the consumer's signal write is the only writer);
	 * left in the signature for parity with other event channels.
	 *
	 * Pre/post asymmetry: reading `c.checked()` inside this handler returns
	 * the OLD value (the consumer's signal write hasn't flushed yet). For
	 * post-change observation use `createEffect(c.checked, ...)`.
	 */
	onCheckedChange?: (
		checked: boolean,
		event: Event,
		reason: CheckboxChangeReason,
	) => void;
}

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

	/**
	 * Click-style toggle. While indeterminate, flips to `true` regardless
	 * of the underlying `checked` value (native `<input>` parity).
	 * No-op while `disabled` or `readOnly`.
	 */
	toggle: (event?: Event, reason?: CheckboxChangeReason) => void;
	/**
	 * Pure event-emitter: fires `onCheckedChange(next, event, reason)`.
	 * No-op while `disabled` or `readOnly`. The consumer's signal write
	 * (in their `onCheckedChange` handler) is the only writer.
	 */
	setChecked: (
		next: boolean,
		event?: Event,
		reason?: CheckboxChangeReason,
	) => void;

	/**
	 * Trigger slot — getter-bag of attributes ready for spreading onto a
	 * `<button role="checkbox">`.
	 */
	trigger: <U extends object | undefined = undefined>(
		userProps?: U,
	) => CheckboxTriggerSlotProps & (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
	 * `useCheckbox()` without prop-drilling.
	 */
	Provider: (props: { children: JSX.Element }) => JSX.Element;
}

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

const CheckboxContext = createContext<CheckboxApi | null>(null);

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

/**
 * Solid 2.0-native compound primitive for a checkbox. One call owns logical
 * state (checked/indeterminate/disabled/readOnly/required, onCheckedChange).
 * Form wiring (the hidden `<input>`, name/value, indeterminate DOM-property
 * sync, field-control validation) and CheckboxGroup parent/child integration
 * stay in the `<Checkbox.Root>` wrapper — those are integration concerns
 * layered on top of this primitive.
 */
export function createCheckbox(options: CreateCheckboxOptions): CheckboxApi {
	// `checked` reads through the consumer's accessor — no internal signal,
	// no controlled-or-internal branching.
	const checked = createMemo<boolean>(
		() => Boolean(readOption(options.checked)),
		{ name: "checkbox.checked" },
	);

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

	// `setChecked` / `toggle` are pure event-emitters. The consumer is
	// responsible for updating their checked-signal in response.
	const setChecked = (
		next: boolean,
		event?: Event,
		reason: CheckboxChangeReason = "imperative",
	): void => {
		if (untrack(disabled) || untrack(readOnly)) return;
		const ev = event ?? new Event("checkedchange", { cancelable: true });
		options.onCheckedChange?.(next, ev, reason);
	};

	const toggle = (
		event?: Event,
		reason: CheckboxChangeReason = "imperative",
	): void => {
		// Indeterminate → click lands on `true` (matches native
		// <input type="checkbox">.indeterminate semantics). Otherwise invert.
		const next = untrack(indeterminate) ? true : !untrack(checked);
		setChecked(next, event, reason);
	};

	const triggerInternal = {
		type: "button" as const,
		role: "checkbox" as const,
		get "aria-checked"() {
			if (indeterminate()) return "mixed" as const;
			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 !indeterminate() && checked() ? "" : undefined;
		},
		get "data-unchecked"() {
			return !indeterminate() && !checked() ? "" : undefined;
		},
		get "data-indeterminate"() {
			return indeterminate() ? "" : 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;
			const next = indeterminate() ? true : !untrack(checked);
			setChecked(next, event, "trigger-press");
		},
	};

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

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

	const api: CheckboxApi = {
		checked,
		indeterminate,
		disabled,
		readOnly,
		required,
		toggle,
		setChecked,
		trigger,
		triggerRef,
		Provider: (props) => (
			<CheckboxContext value={api}>{props.children}</CheckboxContext>
		),
	};
	(api as CheckboxApi & Snapshottable)[SNAPSHOT_KEYS] = CHECKBOX_SNAPSHOT_KEYS;
	return api;
}

const CHECKBOX_SNAPSHOT_KEYS = snapshotKeys<CheckboxApi>(
	"checked",
	"indeterminate",
	"disabled",
	"readOnly",
	"required",
);