interface ApiKeyDialogProps {
	apiKeyInput: string;
	onApiKeyChange: (value: string) => void;
	onSave: () => void;
	onCancel: () => void;
}

export function ApiKeyDialog({
	apiKeyInput,
	onApiKeyChange,
	onSave,
	onCancel,
}: ApiKeyDialogProps) {
	return (
		<div
			style={{
				position: "fixed",
				top: 0,
				left: 0,
				right: 0,
				bottom: 0,
				backgroundColor: "rgba(0, 0, 0, 0.7)",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				zIndex: 1000,
			}}
		>
			<div
				style={{
					backgroundColor: "#2f2f2f",
					padding: "32px",
					borderRadius: "12px",
					maxWidth: "500px",
					width: "90%",
					border: "1px solid #444",
				}}
			>
				<h2 style={{ marginTop: 0, color: "#ececec" }}>
					Enter Anthropic API Key
				</h2>
				<p
					style={{
						color: "#aaa",
						fontSize: "0.9em",
						marginBottom: "20px",
					}}
				>
					To use Claude models, please enter your Anthropic API key. Your key
					will be stored server-side and reused across sessions.
				</p>
				<input
					type="password"
					value={apiKeyInput}
					onChange={(e) => onApiKeyChange(e.target.value)}
					onKeyDown={(e) => e.key === "Enter" && onSave()}
					placeholder="sk-ant-..."
					style={{
						width: "100%",
						padding: "12px",
						borderRadius: "8px",
						border: "1px solid #555",
						backgroundColor: "#1a1a1a",
						color: "#ececec",
						fontSize: "1em",
						marginBottom: "20px",
						outline: "none",
					}}
				/>
				<div
					style={{
						display: "flex",
						gap: "12px",
						justifyContent: "flex-end",
					}}
				>
					<button
						type="button"
						onClick={onCancel}
						style={{
							padding: "10px 20px",
							borderRadius: "8px",
							border: "1px solid #555",
							backgroundColor: "transparent",
							color: "#aaa",
							cursor: "pointer",
							fontSize: "0.9em",
						}}
					>
						Cancel
					</button>
					<button
						type="button"
						onClick={onSave}
						disabled={!apiKeyInput.trim()}
						style={{
							padding: "10px 20px",
							borderRadius: "8px",
							border: "none",
							backgroundColor: apiKeyInput.trim() ? "#ececec" : "#555",
							color: apiKeyInput.trim() ? "#000" : "#888",
							cursor: apiKeyInput.trim() ? "pointer" : "not-allowed",
							fontSize: "0.9em",
						}}
					>
						Save Key
					</button>
				</div>
			</div>
		</div>
	);
}
