CommandsButton.tsx

import { useState, useCallback, useMemo } from "react"
import { Zap, ChevronDown, FolderGit2, Globe, Wrench, ExternalLink, Blocks } from "lucide-react"

import type { Command } from "@shofer/types"

import { cn } from "@/lib/utils"
import { useShoferPortal } from "@/components/ui/hooks/useShoferPortal"
import { Popover, PopoverContent, PopoverTrigger, StandardTooltip } from "@/components/ui"
import { useAppTranslation } from "@/i18n/TranslationContext"
import { useExtensionState } from "@/context/ExtensionStateContext"
import { vscode } from "@/utils/vscode"

/**
 * Source badge icon mapping for command groups.
 */
const SOURCE_ICONS: Record<Command["source"], React.ElementType> = {
	project: FolderGit2,
	global: Globe,
	"built-in": Wrench,
	plugin: Blocks,
}

/**
 * Chip button in the chat input bar that opens a popover listing all
 * available slash commands grouped by source.
 *
 * Clicking a command appends `/command-name ` (or
 * `/command-name <argumentHint>`) to the chat text area via the
 * `insertTextIntoTextarea` IPC message.
 */
export const CommandsButton = () => {
	const { t } = useAppTranslation()
	const { commands } = useExtensionState()
	const [open, setOpen] = useState(false)
	const portalContainer = useShoferPortal("shofer-portal")

	const handleOpenChange = useCallback((isOpen: boolean) => {
		setOpen(isOpen)
		if (isOpen) {
			vscode.postMessage({ type: "requestCommands" })
		}
	}, [])

	// Group commands by source
	const grouped = useMemo(() => {
		const groups: { source: Command["source"]; label: string; items: Command[] }[] = []

		const projectCmds = (commands ?? []).filter((c) => c.source === "project")
		const globalCmds = (commands ?? []).filter((c) => c.source === "global")
		const builtInCmds = (commands ?? []).filter((c) => c.source === "built-in")

		if (projectCmds.length > 0) {
			groups.push({ source: "project", label: t("quickAccess:commands.projectCommands"), items: projectCmds })
		}
		if (globalCmds.length > 0) {
			groups.push({ source: "global", label: t("quickAccess:commands.globalCommands"), items: globalCmds })
		}
		if (builtInCmds.length > 0) {
			groups.push({
				source: "built-in",
				label: t("quickAccess:commands.builtInCommands"),
				items: builtInCmds,
			})
		}

		return groups
	}, [commands, t])

	const handleCommandClick = useCallback((command: Command) => {
		const text = command.argumentHint ? `/${command.name} ${command.argumentHint}` : `/${command.name} `
		vscode.postMessage({ type: "insertTextIntoTextarea", text })
		setOpen(false)
	}, [])

	const handleOpenFile = useCallback((e: React.MouseEvent, filePath: string) => {
		e.stopPropagation()
		vscode.postMessage({ type: "openFile", text: filePath })
	}, [])

	// Open settings when gear icon is clicked
	const handleOpenSettings = useCallback(() => {
		vscode.postMessage({
			type: "switchTab",
			tab: "settings",
			values: { section: "slashCommands" },
		})
		setOpen(false)
	}, [])

	// Hidden when no commands available
	if (!commands?.length) {
		return null
	}

	return (
		<Popover open={open} onOpenChange={handleOpenChange}>
			<StandardTooltip content={t("quickAccess:commands.tooltip")}>
				<PopoverTrigger
					data-testid="commands-button-trigger"
					className={cn(
						"inline-flex items-center gap-1 relative whitespace-nowrap px-1.5 py-1 text-xs",
						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
						"transition-all duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder focus-visible:ring-inset",
						"opacity-90 hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)] cursor-pointer",
					)}>
					<Zap className="w-3 h-3 shrink-0" />
					<ChevronDown className="size-2.5 shrink-0 opacity-70" />
				</PopoverTrigger>
			</StandardTooltip>
			<PopoverContent
				align="start"
				sideOffset={4}
				container={portalContainer}
				className="p-0 overflow-hidden min-w-56 max-w-72">
				<div className="flex flex-col w-full max-h-[400px]">
					{/* Header */}
					<div className="flex items-center justify-between px-3 pt-3 pb-2">
						<h4 className="text-sm font-semibold m-0 flex items-center gap-2">
							<Zap className="w-3.5 h-3.5" />
							{t("quickAccess:commands.title")}
						</h4>
						<div className="flex items-center gap-1">
							<button
								aria-label={t("quickAccess:commands.settings")}
								onClick={handleOpenSettings}
								className={cn(
									"inline-flex items-center justify-center size-5 rounded-sm",
									"text-vscode-descriptionForeground hover:text-vscode-foreground",
									"hover:bg-[rgba(255,255,255,0.05)] transition-colors",
									"cursor-pointer",
								)}>
								<span className="codicon codicon-settings-gear text-xs" />
							</button>
						</div>
					</div>

					{/* Scrollable list */}
					<div className="overflow-y-auto px-1 pb-1">
						{grouped.map((group) => {
							const SourceIcon = SOURCE_ICONS[group.source]
							return (
								<div key={group.source} className="mb-1">
									{/* Group header */}
									<div className="flex items-center gap-1.5 px-2 py-1 text-[11px] font-semibold text-vscode-descriptionForeground uppercase tracking-wide">
										<SourceIcon className="w-3 h-3 shrink-0" />
										{group.label}
									</div>
									{/* Group items */}
									{group.items.map((cmd) => (
										<button
											key={`${cmd.source}:${cmd.name}`}
											data-testid={`command-item-${cmd.name}`}
											onClick={() => handleCommandClick(cmd)}
											className={cn(
												"w-full text-left flex items-center gap-2 px-2 py-1.5 rounded-sm group",
												"text-sm text-vscode-foreground",
												"hover:bg-vscode-list-activeSelectionBackground hover:text-vscode-list-activeSelectionForeground",
												"focus:bg-vscode-list-activeSelectionBackground focus:text-vscode-list-activeSelectionForeground focus:outline-none",
												"cursor-pointer transition-colors",
											)}>
											<span className="font-mono text-xs text-vscode-textLink-foreground shrink-0">
												/{cmd.name}
											</span>
											{cmd.description && (
												<span className="text-xs text-vscode-descriptionForeground truncate flex-1 min-w-0">
													{cmd.description}
												</span>
											)}
											{cmd.filePath && (
												<span
													data-testid={`command-open-file-${cmd.name}`}
													role="button"
													tabIndex={0}
													aria-label={t("quickAccess:commands.openFile")}
													onClick={(e) => handleOpenFile(e, cmd.filePath!)}
													onKeyDown={(e) => {
														if (e.key === "Enter" || e.key === " ") {
															e.preventDefault()
															handleOpenFile(e as any, cmd.filePath!)
														}
													}}
													className={cn(
														"shrink-0 p-0.5 rounded-sm opacity-0 group-hover:opacity-100",
														"text-vscode-descriptionForeground hover:text-vscode-foreground",
														"hover:bg-[rgba(255,255,255,0.1)] transition-all",
														"cursor-pointer",
													)}>
													<ExternalLink className="w-3 h-3" />
												</span>
											)}
										</button>
									))}
								</div>
							)
						})}
					</div>
				</div>
			</PopoverContent>
		</Popover>
	)
}