{% extends "base.html" %}
{% block title %}{{ sim_label }}{% endblock %}
{% block page_title %}{{ sim_label }}{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-5">
        <div class="glass-card p-4">
            <h5 class="mb-4" style="font-weight: 600;">Simulation Parameters</h5>
            <form method="POST" id="simForm">
                <input type="hidden" name="name" value="{{ sim_label }} - {{ now }}">

                {% if sim_type == 'price_increase' %}
                <div class="mb-3">
                    <label class="form-label">Product</label>
                    <select class="form-control-glass" name="product_name" id="productSelect">
                        {% if real_data.products %}
                            {% for p in real_data.products %}
                            <option value="{{ p.name }}" data-price="{{ p.price }}" data-cost="{{ p.cost }}" data-qty="{{ p.quantity }}">
                                {{ p.name }} ({{ currency_symbol }}{{ "%.2f"|format(p.price) }} | Qty: {{ p.quantity }})
                            </option>
                            {% endfor %}
                        {% else %}
                            <option value="Default Product">Default Product</option>
                        {% endif %}
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Current Price ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="current_price" id="currentPrice" 
                           value="{{ real_data.products[0].price if real_data.products else 100 }}" step="0.01" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">New Price ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="new_price" 
                           value="{{ (real_data.products[0].price * 1.1)|round(2) if real_data.products else 110 }}" step="0.01" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Price Elasticity</label>
                    <input type="number" class="form-control-glass" name="elasticity" value="-1.5" step="0.1">
                    <small style="color: var(--text-secondary);">Negative value: demand decreases as price increases</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Market Segment</label>
                    <select class="form-control-glass" name="market_segment">
                        <option value="Enterprise">Enterprise</option>
                        <option value="Mid-Market">Mid-Market</option>
                        <option value="SMB">SMB</option>
                        <option value="Consumer">Consumer</option>
                    </select>
                </div>

                {% elif sim_type == 'price_reduction' %}
                <div class="mb-3">
                    <label class="form-label">Product</label>
                    <select class="form-control-glass" name="product_name" id="productSelect">
                        {% if real_data.products %}
                            {% for p in real_data.products %}
                            <option value="{{ p.name }}" data-price="{{ p.price }}">
                                {{ p.name }} ({{ currency_symbol }}{{ "%.2f"|format(p.price) }})
                            </option>
                            {% endfor %}
                        {% else %}
                            <option value="Default Product">Default Product</option>
                        {% endif %}
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Current Price ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="current_price" id="currentPrice" 
                           value="{{ real_data.products[0].price if real_data.products else 100 }}" step="0.01" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Discount Percent (%)</label>
                    <input type="number" class="form-control-glass" name="discount_percent" value="10" step="0.1" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Duration (months)</label>
                    <input type="number" class="form-control-glass" name="duration_months" value="3" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Target Segment</label>
                    <select class="form-control-glass" name="target_segment">
                        <option value="Enterprise">Enterprise</option>
                        <option value="Mid-Market">Mid-Market</option>
                        <option value="SMB">SMB</option>
                        <option value="Consumer">Consumer</option>
                    </select>
                </div>

                {% elif sim_type == 'tax_changes' %}
                <div class="mb-3">
                    <label class="form-label">Current Tax Rate (%)</label>
                    <input type="number" class="form-control-glass" name="current_rate" value="25" step="0.1" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">New Tax Rate (%)</label>
                    <input type="number" class="form-control-glass" name="new_rate" value="28" step="0.1" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Tax Type</label>
                    <select class="form-control-glass" name="tax_type">
                        <option value="corporate">Corporate</option>
                        <option value="sales">Sales Tax</option>
                        <option value="vat">VAT</option>
                        <option value="income">Income Tax</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Affected Revenue ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="affected_revenue" value="{{ baseline.revenue|round|int }}" required>
                    <small style="color: var(--text-secondary);">Tax will be calculated on the profit portion of this revenue using your company's actual margin</small>
                </div>

                {% elif sim_type == 'currency_fluctuation' %}
                <div class="mb-3">
                    <label class="form-label">Currency Pair</label>
                    <select class="form-control-glass" name="currency_pair">
                        <option value="USD/EUR">USD/EUR</option>
                        <option value="USD/GBP">USD/GBP</option>
                        <option value="USD/JPY">USD/JPY</option>
                        <option value="USD/CNY">USD/CNY</option>
                        <option value="EUR/GBP">EUR/GBP</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Rate Change (%)</label>
                    <input type="number" class="form-control-glass" name="rate_change_percent" value="5" step="0.1" required>
                    <small style="color: var(--text-secondary);">Positive = favorable, Negative = unfavorable</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Exposure Amount ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="exposure_amount" value="{{ (baseline.revenue * 0.3)|round|int }}" required>
                </div>

                {% elif sim_type == 'inflation_impact' %}
                <div class="mb-3">
                    <label class="form-label">Inflation Rate (%)</label>
                    <input type="number" class="form-control-glass" name="inflation_rate" value="3" step="0.1" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Duration (months)</label>
                    <input type="number" class="form-control-glass" name="duration_months" value="12" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Affected Costs ({{ currency_symbol }})</label>
                    <input type="number" class="form-control-glass" name="affected_costs" value="{{ baseline.costs|round|int }}" required>
                </div>
                {% endif %}

                <button type="submit" class="btn-glass w-100">
                    <i class="fas fa-play me-2"></i>Run Simulation
                </button>
            </form>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="glass-card p-4" id="resultsCard" style="display: none;">
            <h5 class="mb-3" style="font-weight: 600;">Simulation Results</h5>
            <div id="resultsContent"></div>
        </div>
        <div class="glass-card p-4" id="placeholderCard">
            <div class="text-center py-5">
                <i class="fas fa-chart-area mb-3" style="font-size: 48px; color: var(--accent-primary); opacity: 0.5;"></i>
                <p style="color: var(--text-secondary);">Configure parameters and run the simulation to see results</p>
                {% if baseline %}
                <small style="color: var(--text-secondary);">
                    Company baseline: Revenue {{ currency_symbol }}{{ "{:,.0f}".format(baseline.revenue) }}/yr, 
                    {{ baseline.employees }} employees, {{ baseline.customers }} customers
                </small>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>window.CURRENCY_SYMBOL = "{{ currency_symbol }}";</script>
<script src="{{ url_for('static', filename='js/simulation_formatter.js') }}"></script>
<script>
// Auto-update current price when product changes
const productSelect = document.getElementById('productSelect');
if (productSelect) {
    productSelect.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        const priceInput = document.getElementById('currentPrice');
        if (priceInput && option.dataset.price) {
            priceInput.value = parseFloat(option.dataset.price).toFixed(2);
        }
    });
}

document.getElementById('simForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = this;
    fetch(window.location.pathname, {
        method: 'POST',
        body: new FormData(form),
        headers: {'X-Requested-With': 'XMLHttpRequest'}
    }).then(r => r.json()).then(data => {
        if (data.success && data.simulation) {
            document.getElementById('placeholderCard').style.display = 'none';
            document.getElementById('resultsCard').style.display = 'block';
            const s = data.simulation;
            let extraMetrics = '';
            const v = (k) => getSimValue(s, k);

            if (v('volume_change_pct') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Volume Change</small><div style="font-size: 18px; font-weight: 700;">${fmtNum(v('volume_change_pct'), 1)}%</div></div></div>`;
            }
            if (v('churn_risk') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Churn Risk</small><div style="font-size: 18px; font-weight: 700; color: ${v('churn_risk') > 15 ? '#EF4444' : '#F59E0B'};">${fmtNum(v('churn_risk'), 1)}%</div></div></div>`;
            }
            if (v('volume_boost_pct') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Volume Boost</small><div style="font-size: 18px; font-weight: 700;">${fmtNum(v('volume_boost_pct'), 1)}%</div></div></div>`;
            }
            if (v('discount_amount') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Discount</small><div style="font-size: 18px; font-weight: 700;">${fmtNum(v('discount_amount'), 1)}%</div></div></div>`;
            }
            if (v('tax_diff') !== undefined) {
                const td = v('tax_diff');
                const taxableIncome = v('taxable_income');
                const margin = v('profit_margin_pct');
                let taxHtml = `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Tax Impact</small><div style="font-size: 18px; font-weight: 700; color: ${td > 0 ? '#EF4444' : '#10B981'};">${td > 0 ? '+' : ''}${fmtMoney(td)}</div>`;
                if (taxableIncome !== undefined) {
                    taxHtml += `<small style="color: var(--text-secondary); font-size: 11px; display: block;">on ${fmtMoney(taxableIncome)} taxable income</small>`;
                }
                if (margin !== undefined) {
                    taxHtml += `<small style="color: var(--text-secondary); font-size: 11px; display: block;">using ${fmtNum(margin, 2)}% profit margin</small>`;
                }
                taxHtml += `</div></div>`;
                extraMetrics += taxHtml;
            }
            if (v('impact_amount') !== undefined) {
                const ia = v('impact_amount');
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Impact</small><div style="font-size: 18px; font-weight: 700; color: ${ia > 0 ? '#10B981' : '#EF4444'};">${ia > 0 ? '+' : ''}${fmtMoney(ia)}</div></div></div>`;
            }
            if (v('cost_increase') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Cost Increase</small><div style="font-size: 18px; font-weight: 700; color: #EF4444;">+${fmtMoney(v('cost_increase'))}</div></div></div>`;
            }
            if (v('cumulative_inflation') !== undefined) {
                extraMetrics += `<div class="col-md-6"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Cumulative Inflation</small><div style="font-size: 18px; font-weight: 700; color: #F59E0B;">${fmtNum(v('cumulative_inflation'), 1)}%</div></div></div>`;
            }

            const revBefore = getSimValue(s, 'revenue_before') || 0;
            const revAfter = getSimValue(s, 'revenue_after') || 0;
            const profBefore = getSimValue(s, 'profit_before') || 0;
            const profAfter = getSimValue(s, 'profit_after') || 0;
            const riskScore = getSimValue(s, 'risk_score') || 0;

            document.getElementById('resultsContent').innerHTML = `
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 12px;">
                            <small style="color: var(--text-secondary);">Revenue Impact</small>
                            <div style="font-size: 22px; font-weight: 700; color: ${revAfter > revBefore ? '#10B981' : '#EF4444'};">
                                ${revAfter > revBefore ? '+' : ''}${fmtMoney(revAfter - revBefore)}
                            </div>
                            <small style="color: var(--text-secondary);">${fmtMoney(revBefore)} &rarr; ${fmtMoney(revAfter)}</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 12px;">
                            <small style="color: var(--text-secondary);">Profit Impact</small>
                            <div style="font-size: 22px; font-weight: 700; color: ${profAfter > profBefore ? '#10B981' : '#EF4444'};">
                                ${profAfter > profBefore ? '+' : ''}${fmtMoney(profAfter - profBefore)}
                            </div>
                            <small style="color: var(--text-secondary);">${fmtMoney(profBefore)} &rarr; ${fmtMoney(profAfter)}</small>
                        </div>
                    </div>
                </div>
                ${extraMetrics ? '<div class="row g-3 mb-4">' + extraMetrics + '</div>' : ''}
                <div class="mb-3">
                    <span style="color: var(--text-secondary);">Risk Score:</span> 
                    <span class="badge-glass ${riskBadgeClass(riskScore)}">${fmtNum(riskScore, 0)}</span>
                </div>
                <div class="p-3 mb-3" style="background: rgba(255,255,255,0.02); border-radius: 8px;">
                    <small style="color: var(--text-secondary); display: block; margin-bottom: 4px;">Analysis</small>
                    <p style="color: var(--text-primary); font-size: 13px; margin: 0;">${escapeHtml(s.recommendations) || ''}</p>
                </div>
                <a href="/simulation/" class="btn btn-outline-glass">Back to Center</a>
            `;
        }
    });
});
</script>
{% endblock %}