#!/bin/bash
# Add JavaScript functions to populate Scalper and Momentum tabs

cd /opt/trading-bot/static

# Create the JavaScript functions
cat >> /tmp/new_tab_js.txt << 'EOF'

            // Fetch Scalper signals and positions
            async function fetchScalper() {
                try {
                    const [signalsRes, positionsRes] = await Promise.all([
                        fetch('/signals?strategy=MeanRevScalper'),
                        fetch('/positions?strategy=MeanRevScalper')
                    ]);
                    const signals = await signalsRes.json();
                    const positions = await positionsRes.json();
                    
                    // Populate signals
                    const signalsTbody = document.getElementById('scalper-signals');
                    signalsTbody.innerHTML = '';
                    signals.slice(0, 10).forEach(s => {
                        const actionClass = s.signal_json.action === 'LONG' ? 'positive' : (s.signal_json.action === 'SHORT' ? 'negative' : '');
                        signalsTbody.innerHTML += `
                            <tr>
                                <td>${s.signal_json.asset || s.symbol}</td>
                                <td class="${actionClass}">${s.signal_json.action}</td>
                                <td>$${s.signal_json.price?.toFixed(2) || 'N/A'}</td>
                                <td>$${s.signal_json.mean?.toFixed(2) || 'N/A'}</td>
                                <td>${s.signal_json.deviation_pct?.toFixed(3) || 'N/A'}%</td>
                                <td>${new Date(s.ts).toLocaleTimeString()}</td>
                            </tr>
                        `;
                    });
                    
                    // Populate positions
                    const posTbody = document.getElementById('scalper-positions');
                    posTbody.innerHTML = '';
                    positions.forEach(p => {
                        posTbody.innerHTML += `
                            <tr>
                                <td>${p.symbol}</td>
                                <td>${parseFloat(p.qty).toFixed(6)}</td>
                                <td>$${parseFloat(p.avg_price).toFixed(2)}</td>
                                <td>${new Date(p.ts_updated).toLocaleTimeString()}</td>
                            </tr>
                        `;
                    });
                } catch (err) { console.error(err); }
            }

            // Fetch Momentum signals and positions
            async function fetchMomentum() {
                try {
                    const [signalsRes, positionsRes] = await Promise.all([
                        fetch('/signals?strategy=MomentumBreakout'),
                        fetch('/positions?strategy=MomentumBreakout')
                    ]);
                    const signals = await signalsRes.json();
                    const positions = await positionsRes.json();
                    
                    // Populate signals
                    const signalsTbody = document.getElementById('momentum-signals');
                    signalsTbody.innerHTML = '';
                    signals.slice(0, 10).forEach(s => {
                        const actionClass = s.signal_json.action === 'LONG' ? 'positive' : (s.signal_json.action === 'SHORT' ? 'negative' : '');
                        signalsTbody.innerHTML += `
                            <tr>
                                <td>${s.signal_json.asset || s.symbol}</td>
                                <td class="${actionClass}">${s.signal_json.action}</td>
                                <td>$${s.signal_json.price?.toFixed(2) || 'N/A'}</td>
                                <td>${s.signal_json.atr?.toFixed(2) || 'N/A'}</td>
                                <td>${s.signal_json.atr_ratio?.toFixed(2) || 'N/A'}x</td>
                                <td>${new Date(s.ts).toLocaleTimeString()}</td>
                            </tr>
                        `;
                    });
                    
                    // Populate positions
                    const posTbody = document.getElementById('momentum-positions');
                    posTbody.innerHTML = '';
                    positions.forEach(p => {
                        posTbody.innerHTML += `
                            <tr>
                                <td>${p.symbol}</td>
                                <td>${parseFloat(p.qty).toFixed(6)}</td>
                                <td>$${parseFloat(p.avg_price).toFixed(2)}</td>
                                <td>${new Date(p.ts_updated).toLocaleTimeString()}</td>
                            </tr>
                        `;
                    });
                } catch (err) { console.error(err); }
            }
EOF

# Find where to insert (before the update() function)
LINE_NUM=$(grep -n "function update()" index.html | cut -d: -f1)
INSERT_LINE=$((LINE_NUM - 2))

# Insert the JavaScript
sed -i "${INSERT_LINE} r /tmp/new_tab_js.txt" index.html

# Also update the update() function to call these
sed -i "/if (document.getElementById('alpha').classList.contains('active')) fetchAlpha();/a\\                if (document.getElementById('scalper').classList.contains('active')) fetchScalper();\n                if (document.getElementById('momentum').classList.contains('active')) fetchMomentum();" index.html

echo "JavaScript functions added successfully"