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
			style={{
				width: "280px",
				minWidth: "280px",
				borderRight: "1px solid var(--border)",
				display: "flex",
				flexDirection: "column",
				background: "var(--panel)",
			}}
		>
			<div
				style={{ padding: "1rem", borderBottom: "1px solid var(--border)" }}
			>
				<h2 style={{ margin: 0, fontSize: "1.125rem" }}>Tool Workshop</h2>
				<p
					className="muted"
					style={{ margin: "0.25rem 0 0 0", fontSize: "0.875rem" }}
				>
					{toolTypes.length} tool type{toolTypes.length !== 1 ? "s" : ""}
				</p>
			</div>

			<div style={{ flex: 1, overflowY: "auto", padding: "0.5rem" }}>
				{toolTypes.map((toolType) => (
					<button
						key={toolType.id}
						onClick={() => onSelect(toolType)}
						style={{
							width: "100%",
							textAlign: "left",
							padding: "0.75rem 1rem",
							marginBottom: "0.25rem",
							borderRadius: "0.375rem",
							border: "none",
							background:
								selectedToolTypeId === toolType.id
									? "var(--brand)"
									: "transparent",
							color:
								selectedToolTypeId === toolType.id ? "white" : "var(--ink)",
							cursor: "pointer",
							display: "flex",
							alignItems: "center",
							gap: "0.75rem",
							transition: "background 0.15s",
						}}
						onMouseEnter={(e) => {
							if (selectedToolTypeId !== toolType.id) {
								e.currentTarget.style.background = "#ece7df";
							}
						}}
						onMouseLeave={(e) => {
							if (selectedToolTypeId !== toolType.id) {
								e.currentTarget.style.background = "transparent";
							}
						}}
					>
						<div style={{ flex: 1, minWidth: 0 }}>
							<div
								style={{
									fontWeight: 600,
									fontSize: "0.9375rem",
									whiteSpace: "nowrap",
									overflow: "hidden",
									textOverflow: "ellipsis",
								}}
							>
								{toolType.display_name}
							</div>
							<div
								style={{
									fontSize: "0.8125rem",
									opacity: 0.8,
									marginTop: "0.125rem",
								}}
							>
								{toolType.category || "Uncategorized"} ·{" "}
								{toolType.interface_type === "web"
									? `Port ${toolType.default_port}`
									: "Terminal"}
							</div>
						</div>
						<button
							onClick={(e) => {
								e.stopPropagation();
								onDelete(toolType.id);
							}}
							style={{
								background: "none",
								border: "none",
								color:
									selectedToolTypeId === toolType.id
										? "rgba(255,255,255,0.8)"
										: "var(--muted)",
								cursor: "pointer",
								padding: "0.25rem",
								borderRadius: "0.25rem",
								flexShrink: 0,
								opacity: 0,
							}}
							className="delete-btn"
							title="Delete tool type"
						>
							<Icon name="delete" size="sm" />
						</button>
					</button>
				))}
			</div>

			<div style={{ padding: "1rem", borderTop: "1px solid var(--border)" }}>
				<button
					onClick={onCreate}
					style={{
						width: "100%",
						display: "flex",
						alignItems: "center",
						justifyContent: "center",
						gap: "0.5rem",
						padding: "0.75rem",
						borderRadius: "0.5rem",
						border: "2px dashed var(--border)",
						background: "transparent",
						color: "var(--muted)",
						cursor: "pointer",
						fontWeight: 600,
						transition: "all 0.15s",
					}}
					onMouseEnter={(e) => {
						e.currentTarget.style.borderColor = "var(--brand)";
						e.currentTarget.style.color = "var(--brand)";
					}}
					onMouseLeave={(e) => {
						e.currentTarget.style.borderColor = "var(--border)";
						e.currentTarget.style.color = "var(--muted)";
					}}
				>
					<Icon name="add" size="sm" /> New Tool Type
				</button>
			</div>
		</div>
	);
};
