{% extends "base.html" %}

{% block title %}Tools - MCP Network Diagnostics{% endblock %}

{% block content %}
<div class="tools-page">
    <h2 class="tools-page-title">Run tools</h2>
    <p class="tools-page-desc">Run any diagnostic tool below. Use the form when a tool needs input (e.g. destination or device ID). Output appears under each button.</p>
    <p class="tools-page-tip">Tip: Run <strong>Check my connection</strong> first; when your connection is good, run <strong>Record baseline</strong>. Later, <strong>Compare to baseline</strong> helps spot when something changes.</p>

    {% for cat in categories %}
    <section class="tools-category" id="cat-{{ cat.id }}">
        <h3 class="tools-category-title">{{ cat.label }}</h3>
        <div class="tools-grid">
            {% for tool in cat.tools %}
            <div id="tool-card-{{ tool.id }}" class="tool-card">
                <div class="tool-card-header">
                    <span class="tool-label">{{ tool.label }}</span>
                    <span id="spinner-{{ tool.id }}" class="tool-running-badge htmx-indicator" aria-live="polite" aria-hidden="true">
                        <span class="tool-running-spinner" aria-hidden="true"></span>
                        <span class="tool-running-text">Running…</span>
                    </span>
                    <p class="tool-desc">{{ tool.description }}</p>
                </div>
                <form
                    class="tool-form"
                    hx-post="/tools/invoke"
                    hx-target="#result-{{ tool.id }}"
                    hx-swap="innerHTML"
                    hx-indicator="#tool-card-{{ tool.id }}, #spinner-{{ tool.id }}"
                >
                    <input type="hidden" name="tool_id" value="{{ tool.id }}">
                    {% for param in tool.params %}
                    <div class="tool-form-field">
                        <label for="tool-{{ tool.id }}-{{ param.name }}">{{ param.label }}</label>
                        <input
                            type="{{ param.type }}"
                            id="tool-{{ tool.id }}-{{ param.name }}"
                            name="{{ param.name }}"
                            placeholder="{{ param.placeholder }}"
                            value="{{ param.default }}"
                        >
                    </div>
                    {% endfor %}
                    <div class="tool-form-actions">
                        <button type="submit" class="btn btn-run">
                            <span class="btn-run-text">Run</span>
                            <span class="btn-run-loading htmx-indicator">
                                <span class="btn-run-spinner" aria-hidden="true"></span>
                                <span>Running…</span>
                            </span>
                        </button>
                    </div>
                </form>
                <div class="tool-result-wrap">
                    <div id="result-{{ tool.id }}" class="tool-result" aria-live="polite">
                        <span class="tool-result-placeholder">Output will appear here.</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endfor %}
</div>

<script>
    // Persistence for tool results
    document.addEventListener('DOMContentLoaded', () => {
        // Restore results from localStorage
        const results = document.querySelectorAll('.tool-result');
        results.forEach(div => {
            const toolId = div.id.replace('result-', '');
            const saved = localStorage.getItem('mcp_tool_result_' + toolId);
            if (saved) {
                div.innerHTML = saved;
                // Add clear button if not already there (though saved HTML likely has it if we add it during save)
                ensureClearButton(div, toolId);
            }
        });

        // Listen for HTMX swaps to save results
        document.body.addEventListener('htmx:afterSwap', (evt) => {
            const target = evt.detail.target;
            if (target.classList.contains('tool-result')) {
                const toolId = target.id.replace('result-', '');
                
                // Add a clear button before saving
                ensureClearButton(target, toolId);

                // Save to localStorage
                localStorage.setItem('mcp_tool_result_' + toolId, target.innerHTML);
            }
        });
    });

    function ensureClearButton(targetDiv, toolId) {
        if (targetDiv.querySelector('.btn-clear-result')) return;
        
        // If content is just the placeholder, don't add clear button
        if (targetDiv.querySelector('.tool-result-placeholder')) return;

        const clearBtn = document.createElement('button');
        clearBtn.className = 'btn-clear-result';
        clearBtn.innerText = 'Clear';
        clearBtn.onclick = () => {
             localStorage.removeItem('mcp_tool_result_' + toolId);
             targetDiv.innerHTML = '<span class="tool-result-placeholder">Output will appear here.</span>';
        };
        
        // Prepend or append? Let's prepend to be visible
        targetDiv.insertBefore(clearBtn, targetDiv.firstChild);
    }
</script>

<style>
    .btn-clear-result {
        display: block;
        margin-bottom: 10px;
        background: none;
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.8em;
    }
    .btn-clear-result:hover {
        background: var(--bg-hover);
        color: var(--text-color);
    }
</style>
{% endblock %}