import * as React from "react";

const { useEffect, useRef } = React;

interface SlashCommand {
	name: string;
	description: string;
}

const SLASH_COMMANDS: SlashCommand[] = [
	{
		name: "/help",
		description: "Show this list of available slash commands.",
	},
	{
		name: "/status",
		description:
			"Show pipeline status and agent availability. `/status <number>` shows a story triage dump.",
	},
	{
		name: "/assign <number> <model>",
		description: "Pre-assign a model to a story (e.g. `/assign 42 opus`).",
	},
	{
		name: "/start <number>",
		description:
			"Start a coder on a story. Optionally specify a model: `/start <number> opus`.",
	},
	{
		name: "/show <number>",
		description: "Display the full text of a work item.",
	},
	{
		name: "/move <number> <stage>",
		description:
			"Move a work item to a pipeline stage (backlog, current, qa, merge, done).",
	},
	{
		name: "/delete <number>",
		description:
			"Remove a work item from the pipeline and stop any running agent.",
	},
	{
		name: "/cost",
		description:
			"Show token spend: 24h total, top stories, breakdown by agent type, and all-time total.",
	},
	{
		name: "/git",
		description:
			"Show git status: branch, uncommitted changes, and ahead/behind remote.",
	},
	{
		name: "/overview <number>",
		description: "Show the implementation summary for a merged story.",
	},
	{
		name: "/rebuild",
		description: "Rebuild the server binary and restart.",
	},
	{
		name: "/reset",
		description:
			"Clear the current Claude Code session and start fresh (messages and session ID are cleared locally).",
	},
	{
		name: "/btw <question>",
		description:
			"Ask a side question using the current conversation as context. The question and answer are not added to the conversation history.",
	},
];

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>
	);
}