import { createEffect, createSignal } from "solid-js";
import type { PropsLike } from "../merge-props-n";
import { createStableCallback } from "../stable-callback";
import { useFocusableWhenDisabled } from "../use-focusable-when-disabled";

/**
 * Accessor-or-value input. Consumers may pass a plain boolean/number or a
 * reactive accessor; we always coerce via `read()` at call time.
 */
type MaybeAccessor<T> = T | (() => T);

function read<T>(value: MaybeAccessor<T>): T {
	return typeof value === "function" ? (value as () => T)() : value;
}

/**
 * Parameters for {@link useButton}. Each flag may be a plain value or an
 * accessor so consumers can thread reactive state in without us having to
 * re-create the primitive on every change.
 */
export interface UseButtonOptions {
	/**
	 * Whether the component should ignore user interaction.
	 * @default false
	 */
	disabled?: MaybeAccessor<boolean | undefined> | undefined;
	/**
	 * Whether the button may receive focus even if it is disabled.
	 * @default false
	 */
	focusableWhenDisabled?: MaybeAccessor<boolean | undefined> | undefined;
	/**
	 * `tabindex` when non-composite. Ignored when `composite` is true.
	 * @default 0
	 */
	tabIndex?: MaybeAccessor<number | undefined> | undefined;
	/**
	 * Whether the component is being rendered as a native `<button>`.
	 * @default true
	 */
	native?: MaybeAccessor<boolean | undefined> | undefined;
	/**
	 * Whether the button is part of a composite widget. When `true`, keyboard
	 * activation for Space occurs on keydown rather than keyup.
	 * @default false
	 *
	 * (Base UI React looks this up from a CompositeRoot context by default; the
	 * Solid port leaves context discovery to callers until CompositeRoot is
	 * ported.)
	 */
	composite?: MaybeAccessor<boolean | undefined> | undefined;
}

/**
 * Minimal event shape we look at in our chained handlers. We keep the typing
 * structural so we don't over-commit to a specific JSX event type — callers
 * hand us whichever synthetic/native event the JSX runtime produced.
 */
interface BaseUIEventLike {
	baseUIHandlerPrevented?: boolean;
	preventBaseUIHandler?: () => void;
	preventDefault?: () => void;
	defaultPrevented?: boolean;
	target?: EventTarget | null;
	currentTarget?: EventTarget | null;
	key?: string;
}

/**
 * Return value of {@link useButton}.
 */
export interface UseButtonReturn {
	/**
	 * A reactive props source to pass into `renderElement`'s `params.props`
	 * array. Contains the button-specific handlers plus (when applicable)
	 * `role`, `type`, `tabIndex`, `aria-disabled`, and `disabled`.
	 *
	 * Typed as `PropsLike` so it composes with `mergePropsN` / `renderElement`
	 * without per-component casts. Consumers don't read individual fields off
	 * of this — they pass it through the merge pipeline.
	 */
	props: PropsLike;
	/**
	 * Stable ref callback to attach to the rendered element. Compose with
	 * other refs via Solid 2's array form (`ref={[a, buttonRef]}`).
	 */
	ref: (element: HTMLElement | null) => void;
}

const BUTTON_TAG = "BUTTON";
const ANCHOR_TAG = "A";

function isButtonElement(
	element: Element | null,
): element is HTMLButtonElement {
	return element !== null && element.tagName === BUTTON_TAG;
}

function isValidLinkElement(
	element: Element | null,
): element is HTMLAnchorElement {
	return (
		element !== null &&
		element.tagName === ANCHOR_TAG &&
		typeof (element as HTMLAnchorElement).href === "string" &&
		(element as HTMLAnchorElement).href.length > 0
	);
}

/**
 * Shared primitive powering `<Button>`, `<Toggle>`, and other button-shaped
 * components.
 *
 * Responsibilities mirror Base UI React's `useButton`:
 *
 * 1. Native path: lets the browser handle activation; threads `disabled` and
 *    defaults `type="button"`.
 * 2. Non-native path: adds `role="button"`, synthesizes click events on
 *    Enter/Space via `HTMLElement.click()` so consumer `onClick` handlers
 *    still fire through the normal DOM path, and sets `tabIndex`.
 * 3. Disabled handling: suppresses pointer/keyboard events via Base UI's
 *    `preventBaseUIHandler()` so chained consumer handlers don't run. Focus
 *    and blur events are NOT suppressed — this matches React Base UI, which
 *    deliberately lets focusableWhenDisabled components still observe focus
 *    transitions.
 *
 * Solid-specific decisions:
 *
 * - Inputs accept accessors so consumers can pass `() => props.disabled`
 *   without materializing a memo. All reads happen inside event handlers
 *   (call-time), so top-level reactive reads don't fire.
 * - Clicks are synthesized via `currentTarget.click()` rather than by calling
 *   a captured `externalOnClick` closure — the Solid merge pipeline keeps
 *   consumer handlers separate, so dispatching a real DOM click lets them
 *   fire through the normal right-to-left chain in `mergePropsN`.
 * - The `buttonRef` is a stable callback; Solid's native array-ref form
 *   (RFC 07) is used at the call site to compose with other refs.
 *
 * Reactivity notes:
 *
 * - The element is tracked in an internal signal with `ownedWrite: true` so
 *   the ref callback (unowned) can write to it without tripping the
 *   `SIGNAL_WRITE_IN_OWNED_SCOPE` diagnostic.
 * - The dev-mode native-button mismatch warning is wired up with a split
 *   `createEffect` — the compute half reads the element and the `native`
 *   flag; the apply half does the console.error.
 */
export function useButton(options: UseButtonOptions = {}): UseButtonReturn {
	// Internal host-element signal. `ownedWrite` opts out of the
	// SIGNAL_WRITE_IN_OWNED_SCOPE check because the ref callback fires from
	// unowned scope and this signal is pure internal plumbing.
	const [element, setElement] = createSignal<HTMLElement | null>(null, {
		ownedWrite: true,
	});

	// Read helpers, with Base UI React's default values applied.
	const disabled = (): boolean => read(options.disabled) ?? false;
	const focusableWhenDisabled = (): boolean | undefined =>
		read(options.focusableWhenDisabled);
	const tabIndexOption = (): number => read(options.tabIndex) ?? 0;
	const isNativeButton = (): boolean => read(options.native) ?? true;
	const isCompositeItem = (): boolean => read(options.composite) ?? false;

	// Delegate tabIndex / aria-disabled / disabled to the shared primitive so
	// we mirror React's `useFocusableWhenDisabled` exactly. Pass everything as
	// accessors — the hook reads through `read()` on every getter access, so
	// our reactive inputs stay live.
	const fwd = useFocusableWhenDisabled({
		disabled,
		focusableWhenDisabled,
		composite: isCompositeItem,
		tabIndex: tabIndexOption,
		isNativeButton,
	});

	// Dev-mode mismatch warning: if `native` disagrees with the actual tag.
	if (process.env.NODE_ENV !== "production") {
		createEffect(
			() => {
				const el = element();
				if (!el) return null;
				return { el, native: isNativeButton() };
			},
			(payload: { el: HTMLElement; native: boolean } | null) => {
				if (!payload) return;
				const isButtonTag = isButtonElement(payload.el);
				if (payload.native && !isButtonTag) {
					console.error(
						"Base UI: A component that acts as a button expected a native <button> because the " +
							"`nativeButton` prop is true. Rendering a non-<button> removes native button " +
							"semantics, which can impact forms and accessibility. Use a real <button> in the " +
							"`render` prop, or set `nativeButton` to `false`.",
					);
				} else if (!payload.native && isButtonTag) {
					console.error(
						"Base UI: A component that acts as a button expected a non-<button> because the " +
							"`nativeButton` prop is false. Rendering a <button> keeps native behavior while Base UI " +
							"applies non-native attributes and handlers, which can add unintended extra attributes " +
							"(such as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set " +
							"`nativeButton` to `true`.",
					);
				}
			},
		);

		// Composite edge case: a disabled composite button nested under another
		// (already-disabled) composite button needs its `disabled` DOM attr
		// cleared so the outer composite can still focus it. Runs whenever the
		// tracked inputs change.
		createEffect(
			() => {
				const el = element();
				if (!el) return null;
				return {
					el,
					disabled: disabled(),
					composite: isCompositeItem(),
					focusableWhenDisabled: focusableWhenDisabled(),
				};
			},
			(
				payload: {
					el: HTMLElement;
					disabled: boolean;
					composite: boolean;
					focusableWhenDisabled: boolean | undefined;
				} | null,
			) => {
				if (!payload) return;
				if (!isButtonElement(payload.el)) return;
				// If composite and disabled, but `disabled` wasn't set on the
				// returned props (focusableWhenDisabled path), clear the
				// element's `disabled` property so focus isn't blocked.
				const shouldSuppress =
					payload.composite &&
					payload.disabled &&
					payload.focusableWhenDisabled;
				if (shouldSuppress && payload.el.disabled) {
					payload.el.disabled = false;
				}
			},
		);
	}

	// The returned props object uses getters so every read re-evaluates — the
	// `renderElement` merge proxy calls `resolveKey` on every access, and
	// consumers may swap accessor-backed flags over time.
	const handlers = {
		onClick(event: MouseEvent & BaseUIEventLike): void {
			if (disabled()) {
				event.preventDefault?.();
				event.preventBaseUIHandler?.();
			}
		},
		onMouseDown(event: MouseEvent & BaseUIEventLike): void {
			if (disabled()) {
				event.preventBaseUIHandler?.();
			}
		},
		onKeyDown(event: KeyboardEvent & BaseUIEventLike): void {
			if (disabled()) {
				// Delegate the focusable-when-disabled key swallow to the shared
				// hook (no-op when not disabled+focusable; otherwise it
				// preventDefault()s every non-Tab key).
				(fwd.props.onKeyDown as (e: KeyboardEvent) => void)(event);
				event.preventBaseUIHandler?.();
				return;
			}

			const currentTarget = event.currentTarget as HTMLElement | null;
			if (!currentTarget) return;
			const isCurrentTarget = event.target === event.currentTarget;
			const native = isNativeButton();
			const composite = isCompositeItem();
			const isButton = isButtonElement(currentTarget);
			const isLink = !native && isValidLinkElement(currentTarget);
			const shouldClick = isCurrentTarget && (native ? isButton : !isLink);
			const isEnterKey = event.key === "Enter";
			const isSpaceKey = event.key === " ";
			const role = currentTarget.getAttribute("role");
			const isTextNavigationRole =
				role?.startsWith("menuitem") ||
				role === "option" ||
				role === "gridcell";

			if (isCurrentTarget && composite && isSpaceKey) {
				if (event.defaultPrevented && isTextNavigationRole) {
					return;
				}
				event.preventDefault?.();

				if (isLink || (native && isButton)) {
					// Native button / real link: let the browser's own `.click()`
					// run so form-submit/reset and link navigation semantics are
					// preserved. Consumer's onClick fires via the dispatched
					// click event through the normal merge chain; cancel our
					// pipeline so we don't double-handle.
					currentTarget.click();
					event.preventBaseUIHandler?.();
				} else if (shouldClick) {
					// Non-native composite: synthesize a click so the consumer's
					// onClick handler runs via the DOM event path.
					currentTarget.click();
					event.preventBaseUIHandler?.();
				}
				return;
			}

			if (shouldClick) {
				if (!native && (isSpaceKey || isEnterKey)) {
					event.preventDefault?.();
				}
				if (!native && isEnterKey) {
					currentTarget.click();
				}
			}
		},
		onKeyUp(event: KeyboardEvent & BaseUIEventLike): void {
			if (disabled()) {
				event.preventBaseUIHandler?.();
				return;
			}

			const currentTarget = event.currentTarget as HTMLElement | null;
			if (!currentTarget) return;
			const native = isNativeButton();
			const composite = isCompositeItem();

			if (
				event.target === event.currentTarget &&
				native &&
				composite &&
				isButtonElement(currentTarget) &&
				event.key === " "
			) {
				// Native composite buttons get activation on keydown; swallow the
				// browser's keyup-driven click so we don't fire twice.
				event.preventDefault?.();
				return;
			}

			if (
				event.target === event.currentTarget &&
				!native &&
				!composite &&
				event.key === " "
			) {
				// Non-native, non-composite Space activation happens on keyup
				// (matching native <button> semantics).
				currentTarget.click();
			}
		},
		onPointerDown(event: PointerEvent & BaseUIEventLike): void {
			if (disabled()) {
				event.preventDefault?.();
				event.preventBaseUIHandler?.();
			}
		},
	};

	// Build the reactive props object. Every access re-evaluates the getter
	// so that accessor-backed inputs stay live.
	const props: PropsLike = Object.defineProperties(
		Object.create(null) as PropsLike,
		{
			type: {
				enumerable: true,
				configurable: true,
				get: () => (isNativeButton() ? "button" : undefined),
			},
			role: {
				enumerable: true,
				configurable: true,
				get: () => (isNativeButton() ? undefined : "button"),
			},
			tabIndex: {
				enumerable: true,
				configurable: true,
				// Per Solid 2 RFC 07, `aria-*` strings flow through unchanged;
				// the focusable-when-disabled hook owns the policy.
				get: () => fwd.props.tabIndex,
			},
			"aria-disabled": {
				enumerable: true,
				configurable: true,
				get: () => fwd.props["aria-disabled"],
			},
			disabled: {
				enumerable: true,
				configurable: true,
				get: () => fwd.props.disabled,
			},
			onClick: {
				enumerable: true,
				configurable: true,
				value: handlers.onClick,
			},
			onMouseDown: {
				enumerable: true,
				configurable: true,
				value: handlers.onMouseDown,
			},
			onKeyDown: {
				enumerable: true,
				configurable: true,
				value: handlers.onKeyDown,
			},
			onKeyUp: {
				enumerable: true,
				configurable: true,
				value: handlers.onKeyUp,
			},
			onPointerDown: {
				enumerable: true,
				configurable: true,
				value: handlers.onPointerDown,
			},
		},
	);

	const buttonRef = createStableCallback<(el: HTMLElement | null) => void>(
		() => (el) => {
			setElement(el);
		},
	);

	return { props, ref: buttonRef };
}