#!/bin/bash
# Add Leverage Lab tab button and content

cd /opt/trading-bot/static

# 1. Add Lab tab button after Grid button
LINE_NUM=$(grep -n "showTab('grid')" index.html | grep "tab-btn" | cut -d: -f1)
sed -i "${LINE_NUM}a\\            <button class=\"tab-btn\" onclick=\"showTab('lab')\">🧪 Lab</button>" index.html

echo "Added Lab tab button"

# 2. Add Lab tab content section at the end (before closing main div)
# Find the line with the last closing </div> for tab content
LAST_TAB=$(grep -n "<!-- Grid Bot Tab -->" index.html | cut -d: -f1)
INSERT_LINE=$((LAST_TAB + 80))

cat > /tmp/lab_content.html << 'EOF'

        <!-- Leverage Lab Tab -->
        <div id="lab" class="tab-content">
            <h2 class="section-title">🧪 Leverage Lab (Simulation)</h2>
            <p style="color: var(--text-secondary); margin-bottom: 2rem;">Test different leverage levels and strategies in simulation mode before deploying to paper trading.</p>
            <div class="main-grid">
                <div class="card">
                    <div class="card-title">Simulation Controls</div>
                    <div style="padding: 1rem;">
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">Strategy:</label>
                            <select id="lab-strategy" style="width: 100%; padding: 0.5rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px;">
                                <option value="MeanRevScalper">Mean Reversion Scalper</option>
                                <option value="MomentumBreakout">Momentum Breakout</option>
                                <option value="GridBot">Grid Bot</option>
                                <option value="TrendFollower">Trend Follower</option>
                            </select>
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">Leverage (1x - 10x):</label>
                            <input type="range" id="lab-leverage" min="1" max="10" value="2" style="width: 100%;">
                            <span id="lab-leverage-value" style="color: var(--accent);">2x</span>
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary);">Initial Capital ($):</label>
                            <input type="number" id="lab-capital" value="10000" style="width: 100%; padding: 0.5rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px;">
                        </div>
                        <button onclick="runLabSimulation()" style="width: 100%; padding: 0.75rem; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">Run Simulation</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">Simulation Results</div>
                    <div id="lab-results" style="padding: 1rem; color: var(--text-secondary);">
                        Configure simulation parameters and click "Run Simulation" to see projected results.
                    </div>
                </div>
            </div>
        </div>
EOF

sed -i "${INSERT_LINE}r /tmp/lab_content.html" index.html

echo "Added Lab tab content"
echo "Verifying:"
grep -c '<div id="lab" class="tab-content">' index.html