import { Icon } from "../../icon";
import type { ToolType } from "../../../api/tool-types";

interface ToolTypeListSidebarProps {
	toolTypes: ToolType[];
	selectedToolTypeId: string | null;
	onSelect: (toolType: ToolType) => void;
	onCreate: () => void;
	onDelete: (id: string) => void;
}

export const ToolTypeListSidebar = ({
	toolTypes,
	selectedToolTypeId,
	onSelect,
	onCreate,
	onDelete,
}: ToolTypeListSidebarProps) => {
	return (
		<div className="sidebar">
			<div className="sidebar-header">
				<h2>Tool Workshop</h2>
				<p className="muted">
					{toolTypes.length} tool type{toolTypes.length !== 1 ? "s" : ""}
				</p>
			</div>

			<div className="sidebar-list">
				{toolTypes.map((toolType) => (
					<button
						key={toolType.id}
						onClick={() => onSelect(toolType)}
						className={
							selectedToolTypeId === toolType.id
								? "sidebar-item sidebar-item-active"
								: "sidebar-item"
						}
					>
						<div className="sidebar-item-content">
							<div className="sidebar-item-title">{toolType.display_name}</div>
							<div className="sidebar-item-subtitle">
								{toolType.category || "Uncategorized"} ·{" "}
								{toolType.interface_type === "web"
									? `Port ${toolType.default_port}`
									: "Terminal"}
							</div>
						</div>
						<button
							onClick={(e) => {
								e.stopPropagation();
								onDelete(toolType.id);
							}}
							className="delete-btn"
							title="Delete tool type"
						>
							<Icon name="delete" size="sm" />
						</button>
					</button>
				))}
			</div>

			<div className="sidebar-footer">
				<button onClick={onCreate} className="sidebar-create-button">
					<Icon name="add" size="sm" /> New Tool Type
				</button>
			</div>
		</div>
	);
};
