// Main application script
document.addEventListener('DOMContentLoaded', () => {
    // Sample data - in real app this would come from your Node.js backend
    const routesData = {
        "routes": [
            {
                "description": "WETH for DAI on UniswapV2 > DAI for PEPE on Pancakeswap > PEPE for WETH on SushiSwap",
                "borrowTokenT0": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
                "t0decimals": 18,
                "swapOnExchangeR1": "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
                "swapForTokenT1": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
                "t1decimals": 18,
                "swapOnExchangeR2": "0xEfF92A263d31888d860bD50809A8D171709b7b1c",
                "swapForTokenT2": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
                "t2decimals": 18,
                "swapBackOnExchangeR3": "0xd9e1cE17f2641f24aE83637ab66a2cca9C378B9F",
                "active": true,
                "profitPotential": 1.23
            },
            {
                "description": "PEPE for DAI on UniswapV2 > DAI for WETH on Pancakeswap > WETH for PEPE on SushiSwap",
                "borrowTokenT0": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
                "t0decimals": 18,
                "swapOnExchangeR1": "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
                "swapForTokenT1": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
                "t1decimals": 18,
                "swapOnExchangeR2": "0xEfF92A263d31888d860bD50809A8D171709b7b1c",
                "swapForTokenT2": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
                "t2decimals": 18,
                "swapBackOnExchangeR3": "0xd9e1cE17f2641f24aE83637ab66a2cca9C378B9F",
                "active": false,
                "profitPotential": 0.87
            }
        ]
    };

    // Render routes
    const routesContainer = document.getElementById('routes-container');
    
    routesData.routes.forEach(route => {
        const routeCard = document.createElement('div');
        routeCard.className = `route-card bg-gray-600 p-4 rounded-lg ${route.active ? 'active' : ''}`;
        routeCard.innerHTML = `
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="font-medium">${route.description}</h3>
                    <div class="text-sm text-gray-300 mt-1">
                        <span class="inline-block mr-3">Profit: <span class="text-green-400">$${route.profitPotential.toFixed(4)}</span></span>
                        <span class="inline-block">Status: <span class="${route.active ? 'text-green-400' : 'text-red-400'}">${route.active ? 'Active' : 'Inactive'}</span></span>
                    </div>
                </div>
                <button class="toggle-route px-3 py-1 rounded text-sm ${route.active ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'} transition-colors">
                    ${route.active ? 'Deactivate' : 'Activate'}
                </button>
            </div>
        `;
        routesContainer.appendChild(routeCard);
    });

    // Update stats
    document.getElementById('active-routes').textContent = routesData.routes.filter(r => r.active).length;
    document.getElementById('profit-potential').textContent = `$${routesData.routes.reduce((sum, route) => sum + (route.active ? route.profitPotential : 0), 0).toFixed(2)}`;

    // Start bot button
    document.getElementById('start-bot').addEventListener('click', () => {
        const gasPrice = document.getElementById('gas-price').value;
        const minProfit = document.getElementById('min-profit').value;
        
        alert(`Starting arbitrage bot with gas price: ${gasPrice} Gwei and min profit: $${minProfit}`);
        // In real app, this would call your Node.js backend
    });

    // Route toggle buttons
    document.addEventListener('click', (e) => {
        if (e.target.classList.contains('toggle-route')) {
            const card = e.target.closest('.route-card');
            card.classList.toggle('active');
            const status = card.querySelector('span.text-green-400, span.text-red-400');
            
            if (status.classList.contains('text-green-400')) {
                status.classList.remove('text-green-400');
                status.classList.add('text-red-400');
                status.textContent = 'Inactive';
                e.target.classList.remove('bg-red-500', 'hover:bg-red-600');
                e.target.classList.add('bg-green-500', 'hover:bg-green-600');
                e.target.textContent = 'Activate';
            } else {
                status.classList.remove('text-red-400');
                status.classList.add('text-green-400');
                status.textContent = 'Active';
                e.target.classList.remove('bg-green-500', 'hover:bg-green-600');
                e.target.classList.add('bg-red-500', 'hover:bg-red-600');
                e.target.textContent = 'Deactivate';
            }
            
            // Update stats
            const activeRoutes = document.querySelectorAll('.route-card.active').length;
            const totalProfit = Array.from(document.querySelectorAll('.route-card')).reduce((sum, card) => {
                if (card.classList.contains('active')) {
                    const profitText = card.querySelector('.text-green-400').textContent;
                    return sum + parseFloat(profitText.replace('$', ''));
                }
                return sum;
            }, 0);
            
            document.getElementById('active-routes').textContent = activeRoutes;
            document.getElementById('profit-potential').textContent = `$${totalProfit.toFixed(2)}`;
        }
    });
});