{% extends "base.html" %}

{% block title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}

{% block meta_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}

{% block og_title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}
{% block og_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}

{% block twitter_title %}Markov Economics Simulation - Interactive Wealth Inequality Model{% endblock %}
{% block twitter_description %}Run interactive simulations of wealth inequality using Markov chains. Visualize how capitalism "eats the world" when r > g.{% endblock %}

{% block extra_head %}
<style>
    .parameter-card {
        border-left: 4px solid #007bff;
    }
    
    .chart-container {
        position: relative;
        height: 400px;
        margin-bottom: 20px;
    }
    
    .metrics-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .inequality-warning {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }
    
    .progress-custom {
        height: 25px;
    }
    
    .simulation-status {
        font-size: 0.9rem;
        padding: 8px 16px;
        border-radius: 20px;
    }
    
    .btn-simulation {
        min-width: 120px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Parameter Controls Panel -->
    <div class="col-lg-3 col-md-4">
        <div class="card parameter-card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">📊 Simulation Parameters</h5>
            </div>
            <div class="card-body">
                <!-- Capital Return Rate (r) -->
                <div class="mb-4">
                    <label for="capitalRate" class="form-label">
                        <strong>Capital Rate (r)</strong>
                        <span class="badge bg-info ms-1" data-bs-toggle="tooltip" 
                              title="Rate of return on capital investment">?</span>
                    </label>
                    <div class="input-group">
                        <input type="range" class="form-range" id="capitalRate" 
                               min="0" max="25" step="0.1" value="{{ default_params.r_rate * 100 }}">
                        <span class="input-group-text" id="capitalRateValue">{{ "%.1f"|format(default_params.r_rate * 100) }}%</span>
                    </div>
                    <small class="text-muted">Higher values increase wealth accumulation</small>
                </div>

                <!-- Economic Growth Rate (g) -->
                <div class="mb-4">
                    <label for="growthRate" class="form-label">
                        <strong>Growth Rate (g)</strong>
                        <span class="badge bg-info ms-1" data-bs-toggle="tooltip" 
                              title="Overall economic growth rate">?</span>
                    </label>
                    <div class="input-group">
                        <input type="range" class="form-range" id="growthRate" 
                               min="0" max="20" step="0.1" value="{{ default_params.g_rate * 100 }}">
                        <span class="input-group-text" id="growthRateValue">{{ "%.1f"|format(default_params.g_rate * 100) }}%</span>
                    </div>
                    <small class="text-muted">Affects consumption growth</small>
                </div>

                <!-- Number of Agents -->
                <div class="mb-4">
                    <label for="numAgents" class="form-label">
                        <strong>Population Size</strong>
                    </label>
                    <div class="input-group">
                        <input type="range" class="form-range" id="numAgents" 
                               min="10" max="1000" step="10" value="{{ default_params.num_agents }}">
                        <span class="input-group-text" id="numAgentsValue">{{ default_params.num_agents }}</span>
                    </div>
                    <small class="text-muted">Number of economic agents</small>
                </div>

                <!-- Simulation Length -->
                <div class="mb-4">
                    <label for="iterations" class="form-label">
                        <strong>Time Steps</strong>
                    </label>
                    <div class="input-group">
                        <input type="range" class="form-range" id="iterations" 
                               min="100" max="5000" step="100" value="{{ default_params.iterations }}">
                        <span class="input-group-text" id="iterationsValue">{{ default_params.iterations }}</span>
                    </div>
                    <small class="text-muted">Simulation duration</small>
                </div>

                <!-- Inequality Indicator -->
                <div class="alert alert-warning" id="inequalityAlert" style="display: none;">
                    <strong>⚠️ r > g Detected!</strong><br>
                    <small>Wealth inequality will increase over time</small>
                </div>

                <!-- Control Buttons -->
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-success btn-simulation" id="startBtn">
                        ▶️ Start Simulation
                    </button>
                    <button type="button" class="btn btn-warning btn-simulation" id="stopBtn" disabled>
                        ⏸️ Stop
                    </button>
                    <button type="button" class="btn btn-secondary btn-simulation" id="resetBtn">
                        🔄 Reset
                    </button>
                </div>

                <!-- Simulation Status -->
                <div class="mt-3">
                    <div class="simulation-status bg-secondary text-white text-center" id="simulationStatus">
                        Ready to start
                    </div>
                </div>

                <!-- Progress Bar -->
                <div class="mt-3" id="progressContainer" style="display: none;">
                    <div class="progress progress-custom">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="progressBar" role="progressbar" style="width: 0%">
                            <span id="progressText">0%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Info Card -->
        <div class="card mt-3 shadow-sm">
            <div class="card-header bg-dark text-white">
                <h6 class="mb-0">💡 Theory</h6>
            </div>
            <div class="card-body">
                <small>
                    <strong>M-C-M':</strong> Capitalist cycle where money (M) is invested in commodities (C) to generate more money (M').<br><br>
                    
                    <strong>C-M-C:</strong> Consumer cycle where commodities (C) are exchanged for money (M) to buy other commodities (C).<br><br>
                    
                    <strong>When r > g:</strong> Capital returns exceed economic growth, leading to increasing wealth inequality.
                </small>
            </div>
        </div>
    </div>

    <!-- Visualization Area -->
    <div class="col-lg-9 col-md-8">
        <!-- Key Metrics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card metrics-card text-white shadow">
                    <div class="card-body text-center">
                        <h6 class="card-title">Total Wealth</h6>
                        <h4 id="totalWealthMetric">$0</h4>
                        <small>System-wide</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card metrics-card text-white shadow">
                    <div class="card-body text-center">
                        <h6 class="card-title">Gini Coefficient</h6>
                        <h4 id="giniMetric">0.00</h4>
                        <small>Inequality measure</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card inequality-warning text-white shadow">
                    <div class="card-body text-center">
                        <h6 class="card-title">Top 10% Share</h6>
                        <h4 id="top10Metric">0%</h4>
                        <small>Wealth concentration</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card inequality-warning text-white shadow">
                    <div class="card-body text-center">
                        <h6 class="card-title">Capital Share</h6>
                        <h4 id="capitalShareMetric">0%</h4>
                        <small>vs Consumption</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="row">
            <!-- Wealth Evolution Chart -->
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-header">
                        <h6 class="mb-0">📈 Wealth Evolution Over Time</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="wealthEvolutionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Inequality Metrics Chart -->
            <div class="col-lg-6">
                <div class="card shadow">
                    <div class="card-header">
                        <h6 class="mb-0">📊 Inequality Metrics</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="inequalityChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wealth Distribution Chart -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header">
                        <h6 class="mb-0">🏛️ Wealth Distribution Histogram</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="distributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Export and Actions -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6>📥 Export Simulation Data</h6>
                                <small class="text-muted">Download results for further analysis</small>
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-primary me-2" id="exportJsonBtn" disabled>
                                    📄 JSON
                                </button>
                                <button type="button" class="btn btn-outline-success" id="exportCsvBtn" disabled>
                                    📊 CSV
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden fields for data storage -->
<input type="hidden" id="currentSimulationId">
<input type="hidden" id="defaultParams" value="{{ default_params | tojson }}">
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/simulation.js') }}"></script>
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Initialize simulation interface
    document.addEventListener('DOMContentLoaded', function() {
        initializeSimulation();
    });
</script>
{% endblock %}