import * as React from "react";
import { SLASH_COMMANDS } from "../slashCommands";

const { useEffect, useRef } = React;

interface HelpOverlayProps {
	onDismiss: () => void;
}

/**
 * Dismissible overlay that lists all available slash commands.
 * Dismiss with Escape, Enter, or Space.
 */
export function HelpOverlay({ onDismiss }: HelpOverlayProps) {
	const dismissRef = useRef(onDismiss);
	dismissRef.current = onDismiss;

	useEffect(() => {
		const handler = (e: KeyboardEvent) => {
			if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
				e.preventDefault();
				dismissRef.current();
			}
		};
		window.addEventListener("keydown", handler);
		return () => window.removeEventListener("keydown", handler);
	}, []);

	return (
		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss is supplementary; keyboard handled via window keydown
		// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard dismiss handled via window keydown listener
		<div
			data-testid="help-overlay"
			onClick={onDismiss}
			style={{
				position: "fixed",
				inset: 0,
				background: "rgba(0,0,0,0.55)",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				zIndex: 1000,
			}}
		>
			{/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only; no real interaction */}
			{/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only; no real interaction */}
			<div
				data-testid="help-panel"
				onClick={(e) => e.stopPropagation()}
				style={{
					background: "#2f2f2f",
					border: "1px solid #444",
					borderRadius: "12px",
					padding: "24px",
					maxWidth: "560px",
					width: "90vw",
					display: "flex",
					flexDirection: "column",
					gap: "16px",
					boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
				}}
			>
				{/* Header */}
				<div
					style={{
						display: "flex",
						alignItems: "center",
						justifyContent: "space-between",
					}}
				>
					<span
						style={{
							fontSize: "0.7rem",
							fontWeight: 700,
							letterSpacing: "0.08em",
							textTransform: "uppercase",
							color: "#a0d4a0",
						}}
					>
						Slash Commands
					</span>
					<button
						type="button"
						onClick={onDismiss}
						title="Dismiss (Escape, Enter, or Space)"
						style={{
							background: "none",
							border: "none",
							color: "#666",
							cursor: "pointer",
							fontSize: "1.1rem",
							padding: "2px 6px",
							borderRadius: "4px",
						}}
					>
						✕
					</button>
				</div>

				{/* Command list */}
				<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
					{SLASH_COMMANDS.map((cmd) => (
						<div
							key={cmd.name}
							style={{ display: "flex", flexDirection: "column", gap: "2px" }}
						>
							<code
								style={{
									fontSize: "0.88rem",
									color: "#e0e0e0",
									fontFamily: "monospace",
								}}
							>
								{cmd.name}
							</code>
							<span
								style={{
									fontSize: "0.85rem",
									color: "#999",
									lineHeight: "1.5",
								}}
							>
								{cmd.description}
							</span>
						</div>
					))}
				</div>

				{/* Footer hint */}
				<div
					style={{
						fontSize: "0.75rem",
						color: "#555",
						textAlign: "center",
					}}
				>
					Press Escape, Enter, or Space to dismiss
				</div>
			</div>
		</div>
	);
}