import type { JSX } from "@solidjs/web";
import {
	type Accessor,
	createContext,
	createSignal,
	useContext,
} from "solid-js";
import {
	SNAPSHOT_KEYS,
	type Snapshottable,
	snapshotKeys,
} from "../internals/observability/snapshot";
import type { ImageLoadingStatus } from "./avatar-root-context";

export type { ImageLoadingStatus };

/**
 * Public api returned by {@link createAvatar}. Exposes the live
 * image-loading status and the setter that `<Avatar.Image>` calls from its
 * `load` / `error` handlers.
 */
export interface AvatarApi {
	/** Reactive accessor for the image-loading status. */
	imageLoadingStatus: Accessor<ImageLoadingStatus>;
	/** Setter — called from image load/error handlers. */
	setImageLoadingStatus: (next: ImageLoadingStatus) => void;
	/** Whether the fallback should render (`status !== "loaded"`). */
	showFallback: Accessor<boolean>;
	/** Whether the image is fully loaded. */
	isLoaded: Accessor<boolean>;

	/** Context provider — pair with {@link useAvatar}. */
	Provider: (props: { children: JSX.Element }) => JSX.Element;
}

const AvatarContext = createContext<AvatarApi | null>(null);

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

/**
 * Solid-native headless avatar primitive. Owns the `imageLoadingStatus`
 * signal that consumers (or `<Avatar.Image>`) write into from their
 * `load`/`error` handlers; exposes derived `showFallback` / `isLoaded`
 * accessors for the typical avatar UI flow.
 */
export function createAvatar(): AvatarApi {
	// Status writes happen from DOM event handlers (`<img>` load/error),
	// outside any tracking scope — a plain createSignal is correct here.
	const [imageLoadingStatus, setImageLoadingStatus] =
		createSignal<ImageLoadingStatus>("idle");

	const showFallback: Accessor<boolean> = () =>
		imageLoadingStatus() !== "loaded";
	const isLoaded: Accessor<boolean> = () => imageLoadingStatus() === "loaded";

	const api: AvatarApi = {
		imageLoadingStatus,
		setImageLoadingStatus,
		showFallback,
		isLoaded,
		Provider: (props) => (
			<AvatarContext value={api}>{props.children}</AvatarContext>
		),
	};
	(api as AvatarApi & Snapshottable)[SNAPSHOT_KEYS] = AVATAR_SNAPSHOT_KEYS;
	return api;
}

const AVATAR_SNAPSHOT_KEYS = snapshotKeys<AvatarApi>(
	"imageLoadingStatus",
	"showFallback",
	"isLoaded",
);