import {
	ResponsiveValue,
	useResponsiveValue,
} from "@pagedotapp/page-section-utils"
import React from "react"

import styles from "./PageLoader.module.scss"

export interface PageLoaderProps {
	/** Loading text label for accessibility */
	label?: string
	/** Visual emphasis level */
	emphasis?: ResponsiveValue<"subtle" | "normal" | "strong">
	/** Semantic tone */
	tone?: ResponsiveValue<"neutral" | "accent" | "positive" | "critical">
	/** Component size */
	size?: ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl">
	/** Animation speed */
	speed?: ResponsiveValue<"slow" | "normal" | "fast">
	/** Display mode */
	display?: ResponsiveValue<"inline" | "block" | "overlay">
	/** Show with backdrop (for overlay mode) */
	withBackdrop?: boolean
	/** Additional CSS class name */
	className?: string
	/** Inline styles */
	style?: React.CSSProperties
	/** Optional id for testing */
	id?: string
}

/**
 * PageLoader - Modern loading spinner with ResponsiveValue support
 */
export const PageLoader = React.forwardRef<HTMLDivElement, PageLoaderProps>(
	(
		{
			label = "Loading",
			emphasis = "normal",
			tone = "accent",
			size = "md",
			speed = "normal",
			display = "inline",
			withBackdrop = false,
			className = "",
			style,
			id,
			...props
		},
		ref,
	) => {
		// Resolve responsive values
		const resolvedEmphasis = useResponsiveValue(emphasis)
		const resolvedTone = useResponsiveValue(tone)
		const resolvedSize = useResponsiveValue(size)
		const resolvedSpeed = useResponsiveValue(speed)
		const resolvedDisplay = useResponsiveValue(display)

		const loaderClasses = [
			styles.loader,
			styles[`emphasis--${resolvedEmphasis}`],
			styles[`tone--${resolvedTone}`],
			styles[`size--${resolvedSize}`],
			styles[`speed--${resolvedSpeed}`],
			styles[`display--${resolvedDisplay}`],
			withBackdrop && resolvedDisplay === "overlay" && styles.withBackdrop,
			className,
		]
			.filter(Boolean)
			.join(" ")

		return (
			<div
				className={loaderClasses}
				style={style}
				id={id}
				ref={ref}
				role="status"
				aria-live="polite"
				aria-label={label}
				{...props}
			>
				<div className={styles.spinner} aria-hidden="true" />
				{label && resolvedDisplay !== "overlay" && (
					<span className={styles.label}>{label}</span>
				)}
			</div>
		)
	},
)

PageLoader.displayName = "PageLoader"
export default PageLoader