{% extends "base.html" %}

{% block title %}MCP Client - Call Tool{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <h1 style="color: white;" class="text-4xl font-bold mb-6 text-center">MCP Tool Client</h1>
    
    <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold mb-4">Call a Tool</h2>
        <p class="text-gray-600 mb-6">Use this interface to call tools through the MCP proxy server.</p>
        
        <form id="toolForm" class="space-y-6">
            <div>
                <label for="tool" class="block text-sm font-medium text-gray-700 mb-2">Tool Name</label>
                <input 
                    type="text" 
                    id="tool" 
                    name="tool" 
                    required
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="e.g., add, multiply, divide">
            </div>
            
            <div>
                <label for="arguments" class="block text-sm font-medium text-gray-700 mb-2">
                    Arguments (JSON format)
                </label>
                <textarea 
                    id="arguments" 
                    name="arguments" 
                    rows="6"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder='{"a": 10, "b": 20}'>{}</textarea>
                <p class="mt-1 text-sm text-gray-500">Enter tool arguments as a JSON object</p>
            </div>
            
            <div class="flex justify-center">
                <button 
                    type="submit" 
                    class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-lg transition duration-200">
                    Call Tool
                </button>
            </div>
        </form>
        
        <div id="loading" class="hidden mt-6 text-center">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
            <p class="mt-2 text-gray-600">Calling tool...</p>
        </div>
        
        <div id="error" class="hidden mt-6 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded">
            <p class="font-bold">Error</p>
            <p id="errorMessage"></p>
        </div>
        
        <div id="result" class="hidden mt-6 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded">
            <p class="font-bold mb-2">Result</p>
            <pre id="resultContent" class="bg-white p-4 rounded text-sm overflow-x-auto"></pre>
        </div>
    </div>
    
    <div class="mt-8 bg-blue-50 p-6 rounded-lg">
        <h3 class="text-lg font-semibold mb-3">Available Tools</h3>
        <ul class="list-disc list-inside space-y-2 text-gray-700">
            <li><strong>add</strong>: Add two numbers (arguments: a, b)</li>
            <li><strong>multiply</strong>: Multiply two numbers (arguments: a, b)</li>
        </ul>
    </div>
</div>

<script>
document.getElementById('toolForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const tool = document.getElementById('tool').value;
    const argumentsText = document.getElementById('arguments').value;
    
    // Hide previous results/errors
    document.getElementById('result').classList.add('hidden');
    document.getElementById('error').classList.add('hidden');
    document.getElementById('loading').classList.remove('hidden');
    
    try {
        const arguments = JSON.parse(argumentsText);
        
        const response = await fetch('{{ url_for("client.private") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                tool: tool,
                arguments: arguments
            })
        });
        
        const data = await response.json();
        
        document.getElementById('loading').classList.add('hidden');
        
        if (data.error) {
            document.getElementById('errorMessage').innerHTML = data.result;
            document.getElementById('error').classList.remove('hidden');
        } else {
            document.getElementById('resultContent').textContent = JSON.stringify(data, null, 2);
            document.getElementById('result').classList.remove('hidden');
        }
    } catch (error) {
        document.getElementById('loading').classList.add('hidden');
        document.getElementById('errorMessage').textContent = error.message;
        document.getElementById('error').classList.remove('hidden');
    }
});
</script>
{% endblock %}