import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createRenderEffect, omit, untrack } from "solid-js";
import { useCollapsible } from "../../collapsible/create-collapsible.tsx";
import {
	ARROW_DOWN,
	ARROW_LEFT,
	ARROW_RIGHT,
	ARROW_UP,
	END,
	HOME,
} from "../../internals/composite/composite-constants.ts";
import { isElementDisabled } from "../../internals/dom/is-element-disabled.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import { useButton } from "../../internals/use-button/use-button";
import {
	type AccordionItemState,
	useAccordionItemContext,
} from "../accordion-item-context.ts";
import { useAccordionRootContext } from "../accordion-root-context.ts";

export interface AccordionTriggerState extends AccordionItemState {}

export interface AccordionTriggerProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", AccordionTriggerState> {
	/** Tag/component to render. Defaults to `"button"`. */
	as?: ValidComponent;
}

const SUPPORTED_KEYS = new Set<string>([
	ARROW_DOWN,
	ARROW_UP,
	ARROW_RIGHT,
	ARROW_LEFT,
	HOME,
	END,
]);

/**
 * Walk the accordion's registered items and collect the trigger element from
 * each non-disabled item. Mirrors Base UI React's `getActiveTriggers`.
 *
 * Shadow-DOM-safe DOM traversal via `isElementDisabled` from
 * `src/internals/dom/` (the shadow-DOM-safe helper). `querySelector` is used
 * to find the trigger within each item — we target `[type="button"]` and
 * `[role="button"]` so both native and non-native triggers work.
 */
function getActiveTriggers(
	accordionItemRefs: Array<HTMLElement | null>,
): HTMLElement[] {
	const output: HTMLElement[] = [];
	for (const section of accordionItemRefs) {
		if (!section || isElementDisabled(section)) continue;
		const trigger = section.querySelector<HTMLElement>(
			'[type="button"], [role="button"]',
		);
		if (trigger && !isElementDisabled(trigger)) {
			output.push(trigger);
		}
	}
	return output;
}

/**
 * Button that expands or collapses its item's panel. Renders a `<button>` by
 * default; use `nativeButton={false}` with a `render` prop override to render
 * a non-button element.
 *
 * Solid 2 notes:
 *
 * - The keyboard handler walks `root.accordionItemRefs` (a plain array kept
 *   in DOM order by `<CompositeList>`) and builds a "live" list of sibling
 *   triggers on every key press. This matches React's approach — no
 *   pre-computed ref tracking, so re-ordering is handled naturally.
 * - `aria-controls` is gated on `open` (matching React) — the getter returns
 *   `undefined` while closed so the attribute is omitted (not `aria-controls=""`
 *   pointing at a non-existent panel). `id` uses a `""` seed so the key stays
 *   in `ownKeys` from the first spread. `mergeRootProps` declares every getter
 *   key as `own` regardless of value, so a getter starting `undefined` still
 *   tracks (see `test/internals/merge-props-undefined-attr.test.tsx`).
 * - `aria-expanded` emits the literal `"true"`/`"false"` string — RFC 07's
 *   enumerated-pseudo-boolean rules collapse raw `true` to a presence
 *   attribute, which breaks AT that keys off the literal string.
 * - The consumer-supplied `id` registers as the item's `triggerId` so the
 *   panel's `aria-labelledby` can point to it. We also use it as the
 *   trigger's own `id` (so the trigger and panel form a two-way ARIA link).
 *   Registration happens in a `createRenderEffect` and is cleaned up on
 *   unmount — matches React's `useIsoLayoutEffect`.
 */
export function AccordionTrigger(props: AccordionTriggerProps): JSX.Element {
	const collapsible = useCollapsible();
	const root = useAccordionRootContext();
	const item = useAccordionItemContext();

	const disabled = (): boolean => {
		const own = props.disabled;
		if (own !== undefined) return Boolean(own);
		return collapsible.disabled();
	};
	const nativeButton = (): boolean => props.nativeButton ?? true;

	const { props: buttonProps, ref: buttonRef } = useButton({
		disabled,
		focusableWhenDisabled: () => true,
		native: nativeButton,
		composite: () => true,
	});

	// React reads `idProp` at setup and registers on every change; our effect
	// mirrors that. We only register a consumer-supplied id — the
	// auto-generated fallback stays registered by the item (via the initial
	// `createSignal(useBaseUiId())`). The 2-arg form (compute, apply) is what
	// `@solidjs/signals` v2 expects — see every `createRenderEffect` call in
	// `src/collapsible/` and `src/internals/use-transition-status/`.
	createRenderEffect(
		() => (typeof props.id === "string" ? (props.id as string) : undefined),
		(idProp: string | undefined) => {
			if (!idProp) return undefined;
			item.setTriggerId(idProp);
			return () => {
				// Only clear if we're still the registered id — matches the
				// collapsible panel's cleanup guard. A later re-registration
				// (e.g. the root's `get children()` re-evaluating) must not
				// clobber the fresh write.
				if (untrack(item.triggerId) === idProp) {
					item.setTriggerId(undefined);
				}
			};
		},
	);

	const handleClick = (event: MouseEvent): void => {
		if (disabled()) return;
		collapsible.setOpen(!collapsible.open(), event, "trigger-press");
	};

	const handleKeyDown = (event: KeyboardEvent): void => {
		if (!SUPPORTED_KEYS.has(event.key)) return;

		event.preventDefault();
		event.stopPropagation();

		const triggers = getActiveTriggers(root.accordionItemRefs);
		const numEnabled = triggers.length;
		const lastIndex = numEnabled - 1;
		const thisIndex = triggers.indexOf(event.currentTarget as HTMLElement);

		const loopFocus = root.loopFocus();
		const isHorizontal = root.orientation() === "horizontal";
		const isRtl = root.direction() === "rtl";

		let nextIndex = -1;

		const toNext = (): void => {
			if (loopFocus) {
				nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
			} else {
				nextIndex = Math.min(thisIndex + 1, lastIndex);
			}
		};
		const toPrev = (): void => {
			if (loopFocus) {
				nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
			} else {
				nextIndex = thisIndex - 1;
			}
		};

		switch (event.key) {
			case ARROW_DOWN:
				if (!isHorizontal) toNext();
				break;
			case ARROW_UP:
				if (!isHorizontal) toPrev();
				break;
			case ARROW_RIGHT:
				if (isHorizontal) (isRtl ? toPrev : toNext)();
				break;
			case ARROW_LEFT:
				if (isHorizontal) (isRtl ? toNext : toPrev)();
				break;
			case HOME:
				nextIndex = 0;
				break;
			case END:
				nextIndex = lastIndex;
				break;
			default:
				break;
		}

		if (nextIndex > -1 && nextIndex <= lastIndex) {
			triggers[nextIndex]?.focus();
		}
	};

	const userStyling = resolveClassStyle(props, () => item.state());

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

	const internalProps = {
		ref: buttonRef,
		tabIndex: 0,
		onClick: handleClick,
		onKeyDown: handleKeyDown,
		get "aria-controls"() {
			// Match React: omit `aria-controls` entirely (not `""`) while closed,
			// so it never points at a panel that isn't rendered. `mergeRootProps`
			// keeps the key reactive across spreads even though it can start
			// `undefined`.
			return collapsible.open() ? collapsible.panelId() : undefined;
		},
		get "aria-expanded"() {
			return collapsible.open() ? "true" : "false";
		},
		get id() {
			return item.triggerId() ?? "";
		},
		get "data-panel-open"(): "" | undefined {
			return collapsible.open() ? "" : undefined;
		},
		get "data-disabled"(): "" | undefined {
			return disabled() ? "" : undefined;
		},
		get "data-index"() {
			const i = item.state().index;
			return Number.isInteger(i) ? String(i) : undefined;
		},
	};

	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(
		mergeRootProps(internalProps, buttonProps),
		styledUserProps,
	);

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