document.addEventListener('DOMContentLoaded', () => {
    const toolGrid = document.querySelector('.tool-grid');
    const toolModal = document.getElementById('tool-modal');
    const modalCloseBtn = document.getElementById('modal-close-btn');
    const toolInterface = document.getElementById('tool-interface');

    // Dummy data for tools (replace with actual data from backend)
    const tools = [
        { name: 'Get Price', description: 'Fetches real-time price data for a symbol.', category: 'Market Data' },
        { name: 'Place Order', description: 'Places a trade order in the market.', category: 'Execution' },
        { name: 'Portfolio Risk', description: 'Analyzes the risk of your portfolio.', category: 'Risk Management' },
        { name: 'Run Backtest', description: 'Executes a backtest on a trading strategy.', category: 'Backtesting' },
        { name: 'Analyze Ticker', description: 'Performs comprehensive analysis on a ticker.', category: 'Prompts' },
    ];

    // Render tool cards
    tools.forEach(tool => {
        const toolCard = document.createElement('div');
        toolCard.classList.add('tool-card');
        toolCard.innerHTML = `
            <h3>${tool.name}</h3>
            <p>${tool.description}</p>
            <div class="tool-tags">
                <span class="tool-tag">${tool.category}</span>
            </div>
        `;
        toolCard.addEventListener('click', () => openToolModal(tool));
        toolGrid.appendChild(toolCard);
    });

    // Open tool modal
    function openToolModal(tool) {
        toolInterface.innerHTML = `
            <h2>${tool.name}</h2>
            <p>${tool.description}</p>
            <!-- Here you would dynamically create input fields based on the tool's signature -->
            <div class="input-field">
                <label for="symbol">Symbol:</label>
                <input type="text" id="symbol" placeholder="e.g. AAPL">
            </div>
            <button id="run-tool-btn">Run Tool</button>
            <pre id="tool-result"></pre>
        `;
        toolModal.classList.add('show');

        document.getElementById('run-tool-btn').addEventListener('click', async () => {
            const symbol = document.getElementById('symbol').value;
            const resultElement = document.getElementById('tool-result');
            resultElement.textContent = 'Running tool...';

            // Example of calling a backend tool (requires window.openai to be available)
            // if (window.openai && window.openai.callTool) {
            //     try {
            //         const result = await window.openai.callTool(tool.name.replace(/\s+/g, '_').toLowerCase(), { symbol: symbol });
            //         resultElement.textContent = JSON.stringify(result, null, 2);
            //     } catch (error) {
            //         resultElement.textContent = `Error: ${error.message}`;
            //     }
            // } else {
            //     resultElement.textContent = 'MCP not available. Cannot call backend tools.';
            // }
            resultElement.textContent = `Simulating tool run for ${tool.name} with symbol: ${symbol}`;
        });
    }

    // Close tool modal
    modalCloseBtn.addEventListener('click', () => {
        toolModal.classList.remove('show');
    });

    // Close modal on outside click
    window.addEventListener('click', (event) => {
        if (event.target === toolModal) {
            toolModal.classList.remove('show');
        }
    });

    // Dummy dashboard rendering (replace with actual data)
    document.querySelector('.portfolio').innerHTML = '<div class="trading-card"><h3>Portfolio Overview</h3><p>Detailed portfolio data will go here.</p></div>';
    document.querySelector('.watchlist').innerHTML = '<div class="trading-card"><h3>Watchlist</h3><p>Your watched symbols will appear here.</p></div>';
    document.querySelector('.news').innerHTML = '<div class="trading-card"><h3>Intel Feed</h3><p>Latest market news and sentiment.</p></div>';
    document.querySelector('.crypto').innerHTML = '<div class="trading-card"><h3>Crypto Movers</h3><p>Trending cryptocurrency data.</p></div>';
});