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";
import type { Orientation } from "../internals/types.ts";

/**
 * The opaque identifier a consumer attaches to a tab + the matching panel.
 * `null`/`undefined` disables selection entirely. Mirrors the existing
 * `<Tabs>` wrapper's `TabsTabValue`.
 */
export type TabsValue = unknown;

/**
 * Why the value changed. Emitted on the third arg of
 * `onValueChange(next, event, reason)` and accepted by
 * `c.setValue(next, event?, reason?)`.
 *
 * - `"trigger-press"` — click on a tab slot.
 * - `"focus"` — focus moved to a tab while `activateOnFocus` is enabled
 *   (driven by the wrapper, not this primitive).
 * - `"imperative"` — programmatic `setValue` with no originating DOM event.
 */
export type TabsChangeReason = "trigger-press" | "focus" | "imperative";

/**
 * Options for {@link createTabs}.
 *
 * Every reactive input is `MaybeAccessor<T>`. Read at use time via
 * `readOption(opt)`.
 *
 * **Solid-native shape (2026-04-30).** No internal state. `value` is
 * required and the consumer always owns the signal. The primitive is
 * a pure function from `(value, onValueChange) → api`. Migration from
 * pre-2026-04-30: `createTabs({ defaultValue: "a" })` becomes
 * `const [v, setV] = createSignal("a"); createTabs({ value: v, onValueChange: setV })`.
 * See `solidify.md` §6 for rationale.
 */
export interface CreateTabsOptions {
	/**
	 * Current selected value. Consumer-owned signal — the primitive reads
	 * through the accessor and does NOT keep an internal copy. Writes happen
	 * via `onValueChange` (the consumer's responsibility to update their
	 * signal in response). `undefined` means nothing is selected.
	 */
	value: MaybeAccessor<TabsValue | undefined>;
	/**
	 * Whether interaction is suppressed on the entire tabs widget.
	 * @default false
	 */
	disabled?: MaybeAccessor<boolean>;
	/**
	 * Layout orientation — exposed so wrapper-side keyboard navigation +
	 * `aria-orientation` projection can read off the api.
	 * @default "horizontal"
	 */
	orientation?: MaybeAccessor<Orientation>;
	/**
	 * Pre-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); left in the signature for
	 * parity with other event channels. Reading `c.value()` inside this
	 * handler returns the OLD value. For post-change observation, use
	 * `createEffect(c.value, ...)`.
	 */
	onValueChange?: (
		value: TabsValue,
		event: Event,
		reason: TabsChangeReason,
	) => void;
}

/**
 * Slot bag for the list slot — `<div role="tablist">`.
 */
export interface TabsListSlotProps {
	role: "tablist";
	"aria-orientation": "vertical" | undefined;
}

/**
 * Slot bag for a per-tab slot — `<button role="tab">`.
 */
export interface TabsTabSlotProps {
	type: "button";
	role: "tab";
	"aria-selected": "true" | "false";
	"data-selected": "" | undefined;
	"data-disabled": "" | undefined;
	tabIndex: 0 | -1;
	disabled: boolean | undefined;
	onClick: (event: MouseEvent) => void;
}

/**
 * Slot bag for a per-panel slot — `<div role="tabpanel">`.
 */
export interface TabsPanelSlotProps {
	role: "tabpanel";
	"data-selected": "" | undefined;
	hidden: true | undefined;
	tabIndex: 0 | -1;
}

/**
 * Slot bag for the indicator slot — `<span role="presentation">`. The
 * primitive only emits the role + a hidden bit when nothing is selected;
 * positioning math (CSS custom props) lives in the structural wrapper.
 */
export interface TabsIndicatorSlotProps {
	role: "presentation";
	hidden: true | undefined;
}

/**
 * Public API returned by {@link createTabs}. Flat accessors at the root,
 * imperative setters, slot factories per part, matching directive
 * factories, plus an opt-in Provider + `useTabs()`.
 */
export interface TabsApi {
	/** Reactive accessor for the current selected value. */
	value: Accessor<TabsValue | undefined>;
	/** Whether interaction is suppressed for the whole widget. */
	disabled: Accessor<boolean>;
	/** Layout orientation (horizontal/vertical). */
	orientation: Accessor<Orientation>;

	/**
	 * Imperative setter. Fires `onValueChange(next, event, reason)` first;
	 * if the consumer calls `event.preventDefault()` the internal write is
	 * skipped.
	 */
	setValue: (next: TabsValue, event?: Event, reason?: TabsChangeReason) => void;

	/** Selection check for the given tab value. */
	isSelected: (tabValue: TabsValue) => boolean;

	/** Slot bag for the `<div role="tablist">` list element. */
	list: <U extends object | undefined = undefined>(
		userProps?: U,
	) => TabsListSlotProps & (U extends object ? U : object);
	/**
	 * Slot bag for a tab button. Pass the value the tab represents — selection
	 * derives from `value() === tabValue`. Pass `disabled: true` (or via the
	 * second `userProps`) to suppress activation.
	 */
	tab: <U extends object | undefined = undefined>(
		tabValue: TabsValue,
		userProps?: U & { disabled?: boolean },
	) => TabsTabSlotProps & (U extends object ? U : object);
	/** Slot bag for a panel. Hidden when not selected. */
	panel: <U extends object | undefined = undefined>(
		panelValue: TabsValue,
		userProps?: U,
	) => TabsPanelSlotProps & (U extends object ? U : object);
	/** Slot bag for the optional indicator span. */
	indicator: <U extends object | undefined = undefined>(
		userProps?: U,
	) => TabsIndicatorSlotProps & (U extends object ? U : object);

	/** Directive form of {@link list}. */
	listRef: () => (el: HTMLElement | null) => void;
	/** Directive form of {@link tab} for the given value. */
	tabRef: (tabValue: TabsValue) => (el: HTMLButtonElement | null) => void;
	/** Directive form of {@link panel} for the given value. */
	panelRef: (panelValue: TabsValue) => (el: HTMLElement | null) => void;
	/** Directive form of {@link indicator}. */
	indicatorRef: () => (el: HTMLElement | null) => void;

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

const TabsContext = createContext<TabsApi | null>(null);

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

/**
 * Solid 2.0-native compound primitive for a tabs widget. Owns logical
 * state (value/disabled/orientation, onValueChange). Composite keyboard
 * focus, indicator measurement, panel-id wiring, and activation-direction
 * math are NOT in this primitive — they belong to the wrapping
 * `<Tabs.Root/.List/.Tab/.Panel/.Indicator>` adapters.
 */
export function createTabs(options: CreateTabsOptions): TabsApi {
	// `value` 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 value = createMemo<TabsValue | undefined>(
		() => readOption(options.value),
		{ name: "tabs.value", equals: false },
	);

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

	const orientation = createMemo<Orientation>(
		() => (readOption(options.orientation) ?? "horizontal") as Orientation,
		{ name: "tabs.orientation" },
	);

	// `setValue` is a pure event-emitter. It fires `onValueChange(next, event, reason)`;
	// the consumer is responsible for updating their value-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 setValue = (
		next: TabsValue,
		event?: Event,
		reason: TabsChangeReason = "imperative",
	): void => {
		const ev = event ?? new Event("valuechange", { cancelable: true });
		options.onValueChange?.(next, ev, reason);
	};

	const isSelected = (tabValue: TabsValue): boolean => value() === tabValue;

	// list
	const listInternal = {
		role: "tablist" as const,
		get "aria-orientation"() {
			return orientation() === "vertical" ? ("vertical" as const) : undefined;
		},
	};
	const list = <U extends object | undefined>(userProps?: U) =>
		mergeRootProps(listInternal, userProps) as TabsListSlotProps &
			(U extends object ? U : object);

	// tab(value)
	const tab = <U extends object | undefined>(
		tabValue: TabsValue,
		userProps?: U & { disabled?: boolean },
	) => {
		const isTabDisabled = (): boolean =>
			Boolean(disabled() || userProps?.disabled);
		const internal = {
			type: "button" as const,
			role: "tab" as const,
			get "aria-selected"() {
				return value() === tabValue ? ("true" as const) : ("false" as const);
			},
			get "data-selected"() {
				return value() === tabValue ? "" : undefined;
			},
			get "data-disabled"() {
				return isTabDisabled() ? "" : undefined;
			},
			get tabIndex() {
				return value() === tabValue ? 0 : -1;
			},
			get disabled() {
				return isTabDisabled() ? true : undefined;
			},
			onClick(event: MouseEvent) {
				if (isTabDisabled()) return;
				if (untrack(() => value()) === tabValue) return;
				setValue(tabValue, event, "trigger-press");
			},
		};
		return mergeRootProps(internal, userProps) as TabsTabSlotProps &
			(U extends object ? U : object);
	};

	// panel(value)
	const panel = <U extends object | undefined>(
		panelValue: TabsValue,
		userProps?: U,
	) => {
		const internal = {
			role: "tabpanel" as const,
			get "data-selected"() {
				return value() === panelValue ? "" : undefined;
			},
			get hidden() {
				return value() === panelValue ? undefined : (true as const);
			},
			get tabIndex() {
				return value() === panelValue ? 0 : -1;
			},
		};
		return mergeRootProps(internal, userProps) as TabsPanelSlotProps &
			(U extends object ? U : object);
	};

	// indicator
	const indicatorInternal = {
		role: "presentation" as const,
		get hidden() {
			return value() == null ? (true as const) : undefined;
		},
	};
	const indicator = <U extends object | undefined>(userProps?: U) =>
		mergeRootProps(indicatorInternal, userProps) as TabsIndicatorSlotProps &
			(U extends object ? U : object);

	const listRef = (): ((el: HTMLElement | null) => void) =>
		makeSlotRefDirective(() => list());
	const tabRef = (
		tabValue: TabsValue,
	): ((el: HTMLButtonElement | null) => void) =>
		makeSlotRefDirective(() => tab(tabValue));
	const panelRef = (
		panelValue: TabsValue,
	): ((el: HTMLElement | null) => void) =>
		makeSlotRefDirective(() => panel(panelValue));
	const indicatorRef = (): ((el: HTMLElement | null) => void) =>
		makeSlotRefDirective(() => indicator());

	const api: TabsApi = {
		value,
		disabled,
		orientation,
		setValue,
		isSelected,
		list,
		tab,
		panel,
		indicator,
		listRef,
		tabRef,
		panelRef,
		indicatorRef,
		Provider: (props) => (
			<TabsContext value={api}>{props.children}</TabsContext>
		),
	};
	(api as TabsApi & Snapshottable)[SNAPSHOT_KEYS] = TABS_SNAPSHOT_KEYS;
	return api;
}

const TABS_SNAPSHOT_KEYS = snapshotKeys<TabsApi>(
	"value",
	"disabled",
	"orientation",
);