import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import {
	createEffect,
	createMemo,
	createSignal,
	omit,
	untrack,
} from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id";
import {
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/composite-constants.ts";
import { useCompositeItem } from "../../internals/composite/composite-item.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import type { Orientation } from "../../internals/types.ts";
import { useButton } from "../../internals/use-button/use-button";
import { useTabsListContext } from "../tabs-list-context.ts";
import {
	type TabsTabMetadata,
	type TabsTabValue,
	useTabsRootContext,
} from "../tabs-root-context.ts";

export interface TabsTabState {
	/** Whether the tab is disabled (ignored by pointer + keyboard activation). */
	disabled: boolean;
	/** Whether the tab is currently the selected one. */
	active: boolean;
	/** Layout orientation (inherited from the root). */
	orientation: Orientation;
}

export interface TabsTabProps
	extends NativeButtonProps,
		// Re-type `value` to the opaque TabsTabValue; don't let the native button
		// `value` attribute shape bleed through.
		Omit<BaseUIComponentProps<"button", TabsTabState>, "value"> {
	/** Tag/component to render. Defaults to `"button"`. */
	as?: ValidComponent;
	/**
	 * The value this tab represents. Panels with the matching `value` render
	 * when this tab is active. May be any type — numbers, strings, objects,
	 * functions, symbols.
	 */
	value: TabsTabValue;
	/**
	 * Whether the tab should ignore user interaction. Disabled tabs can still
	 * receive keyboard focus (per WAI-ARIA guidance), but clicks / Space /
	 * Enter are a no-op.
	 * @default false
	 */
	disabled?: boolean | undefined;
}

/**
 * A single selectable tab button. Renders a `<button role="tab">`.
 *
 * Registers with `<Tabs.List>`'s composite list so arrow keys move focus
 * between siblings; activation is delivered through the list context.
 * `aria-controls` is wired to the matching `<Tabs.Panel>`'s DOM id via the
 * root-level mounted-panel registry.
 */
export function TabsTab(props: TabsTabProps): JSX.Element {
	const root = useTabsRootContext();
	const list = useTabsListContext();

	const disabled = (): boolean => props.disabled === true;
	const nativeButton = (): boolean => props.nativeButton ?? true;

	// Id overrides are setup-time only (matches field/slider/number-field):
	// untrack the body read so it doesn't trip `[STRICT_READ_UNTRACKED]`.
	const id = useBaseUiId(
		untrack(() => (typeof props.id === "string" ? props.id : undefined)),
	);

	const active = createMemo((): boolean => root.value() === props.value);

	const metadata = createMemo(
		(): TabsTabMetadata => ({
			disabled: disabled(),
			id,
			value: props.value,
		}),
	);

	const {
		props: compositeProps,
		ref: compositeRef,
		index,
	} = useCompositeItem<TabsTabMetadata>({
		get metadata() {
			return metadata();
		},
	});

	const { props: buttonProps, ref: buttonRef } = useButton({
		disabled,
		native: nativeButton,
		focusableWhenDisabled: true,
		// Composite-item behavior: `useButton` yields tabIndex to the composite
		// item's roving-focus projection (so only the highlighted tab is
		// tabbable) and switches Space activation to keydown.
		composite: true,
	});

	// Element tracking for resize-observer registration — pulled into an
	// owned effect so the unregister fires on component disposal.
	const [tabEl, setTabEl] = createSignal<HTMLElement | null>(null, {
		ownedWrite: true,
	});
	createEffect(
		() => tabEl(),
		(el) => {
			if (!el) return undefined;
			return list.registerTabResizeObserverElement(el);
		},
	);

	const onClick = (event: MouseEvent): void => {
		if (active() || disabled()) return;
		list.onTabActivation(
			props.value,
			createChangeEventDetails(REASONS.none, event, undefined, {
				activationDirection: "none",
			}),
		);
	};

	const onFocus = (event: FocusEvent): void => {
		if (active()) return;
		const i = index();
		if (i > -1 && !disabled()) {
			list.setHighlightedTabIndex(i);
		}
		if (disabled()) return;
		if (list.activateOnFocus()) {
			list.onTabActivation(
				props.value,
				createChangeEventDetails(REASONS.none, event, undefined, {
					activationDirection: "none",
				}),
			);
		}
	};
	const userClassStyle = resolveClassStyle(props, () => ({
		disabled: disabled(),
		active: active(),
		orientation: root.orientation(),
	}));

	const userHtmlProps = omit(
		props,
		"as",
		"class",
		"style",
		"attrs",
		"children",
		"disabled",
		"nativeButton",
		"value",
	) as Record<string, unknown>;

	const internalProps = {
		id,
		role: "tab" as const,
		ref: (el: HTMLElement | null): void =>
			untrack(() => {
				buttonRef(el);
				compositeRef(el);
				setTabEl(el);
				if (el && active()) {
					el.setAttribute(ACTIVE_COMPOSITE_ITEM, "");
				}
			}),
		onClick,
		onFocus,
		get "aria-controls"() {
			return root.getTabPanelIdByValue(props.value) ?? "";
		},
		get "aria-selected"() {
			return active() ? "true" : "false";
		},
		get "data-orientation"() {
			return root.orientation();
		},
		get "data-active"(): "" | undefined {
			return active() ? "" : undefined;
		},
		get "data-disabled"(): "" | undefined {
			return disabled() ? "" : undefined;
		},
	};

	const merged = mergeRootProps(
		mergeRootProps(
			mergeRootProps(
				mergeRootProps(
					internalProps,
					compositeProps as Record<string, unknown>,
				),
				buttonProps,
			),
			userClassStyle,
		),
		userHtmlProps,
	);

	const Tag = dynamic(() => props.as ?? "button");
	return <Tag {...merged}>{props.children}</Tag>;
}