{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <!-- Header Section -->
    <header class="mb-5 text-center fade-in">
        <h1 class="display-3 fw-bold text-white mb-2 font-mono">
            ES Risk <span class="text-neon-green">Simulator</span>
        </h1>
        <p class="lead text-muted">S&P 500 Futures Intraday Scenarios & Regime Analysis</p>
    </header>

    {% if error %}
    <div class="alert alert-danger bg-danger bg-opacity-10 border-danger text-danger rounded-4 mb-4 d-flex align-items-center">
        <i class="bi bi-exclamation-triangle-fill me-2 fs-4"></i>
        <div><strong>Engine Error:</strong> {{ error }}</div>
    </div>
    {% endif %}

    <div class="row g-4">
        <!-- Main Analysis Panel -->
        <div class="col-lg-8">
            <div class="card bg-slate border-0 shadow-lg rounded-5 overflow-hidden mb-4">
                <div class="card-body p-4 p-md-5">
                    <div class="d-flex justify-content-between align-items-center mb-5">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-cpu text-neon-green fs-2 me-3"></i>
                            <h2 class="h4 text-white mb-0">Analysis Control</h2>
                        </div>
                        <form action="{% url 'run_simulation' %}" method="post">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-neon-green px-4 py-2 fw-bold text-dark rounded-pill">
                                <i class="bi bi-lightning-charge-fill me-1"></i> RE-RUN ENGINE
                            </button>
                        </form>
                    </div>

                    {% if latest %}
                    <div class="row g-4 mb-5">
                        <div class="col-md-4">
                            <div class="stat-card p-4 rounded-4 bg-dark-900 border-top border-4 border-neon-blue">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <label class="text-muted small fw-bold">EXPECTED LOW</label>
                                    <i class="bi bi-info-circle text-muted small" data-bs-toggle="tooltip" title="The average lowest price projected across 1,000 simulations for today."></i>
                                </div>
                                <div class="h2 text-white font-mono mb-0">{{ latest.expected_low|floatformat:2 }}</div>
                                <div class="small text-neon-blue mt-1">Simulated Mean</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="stat-card p-4 rounded-4 bg-dark-900 border-top border-4 border-danger">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <label class="text-muted small fw-bold">TAIL RISK (VaR)</label>
                                    <i class="bi bi-info-circle text-muted small" data-bs-toggle="tooltip" title="Value at Risk: 95% of simulated paths stay above this level."></i>
                                </div>
                                <div class="h2 text-white font-mono mb-0">{{ latest.worst_case_5th|floatformat:2 }}</div>
                                <div class="small text-danger mt-1">5th Percentile</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="stat-card p-4 rounded-4 bg-dark-900 border-top border-4 border-warning">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <label class="text-muted small fw-bold">1% DRAWDOWN</label>
                                    <i class="bi bi-info-circle text-muted small" data-bs-toggle="tooltip" title="The probability that price drops more than 1% from current levels today."></i>
                                </div>
                                <div class="h2 text-white font-mono mb-0">{{ latest.drawdown_prob|floatformat:2 }}%</div>
                                <div class="small text-warning mt-1">Incident Prob</div>
                            </div>
                        </div>
                    </div>

                    <!-- Bias and Targets -->
                    <div class="p-4 bg-dark-900 rounded-5 border border-secondary border-opacity-10 position-relative overflow-hidden">
                        <div class="glass-shine"></div>
                        <div class="row align-items-center">
                            <div class="col-md-6 border-end border-secondary border-opacity-25 py-3">
                                <div class="d-flex align-items-center mb-2">
                                    <span class="badge rounded-pill {% if latest.bias == 'LONG' %}bg-neon-green{% elif latest.bias == 'SHORT' %}bg-danger{% else %}bg-secondary{% endif %} text-dark me-2">
                                        {{ latest.bias }}
                                    </span>
                                    <h3 class="h4 mb-0 text-white">Daily Bias</h3>
                                    <i class="bi bi-info-circle ms-2 text-muted small" data-bs-toggle="tooltip" title="Aggregated recommendation based on Sentiment, Regime, and Intraday Momentum."></i>
                                </div>
                                <p class="text-muted mb-0">
                                    <i class="bi bi-grid-1x2 me-1"></i> 
                                    Regime: <strong>{{ latest.regime|yesno:"High Volatility (Risk-Off),Low Volatility (Risk-On)" }}</strong>
                                </p>
                            </div>
                            <div class="col-md-6 text-md-center py-3">
                                <div class="d-flex justify-content-around">
                                    <div>
                                        <div class="small text-muted mb-1 text-uppercase">Target Profit</div>
                                        <div class="h4 text-neon-green font-mono mb-0">{{ latest.take_profit|floatformat:2 }}</div>
                                    </div>
                                    <div>
                                        <div class="small text-muted mb-1 text-uppercase">Stop Loss</div>
                                        <div class="h4 text-danger font-mono mb-0">{{ latest.stop_loss|floatformat:2 }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-database-dash display-1 text-muted opacity-50 mb-4"></i>
                        <p class="text-muted">No analysis available. Click the button to trigger the engine.</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Sentiment & Explanation Section -->
             <div class="card bg-slate border-0 rounded-5 p-4 shadow-sm">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="h5 text-white mb-0 d-flex align-items-center">
                        <i class="bi bi-graph-up-arrow text-neon-blue me-2"></i> Real-time Sentiment
                    </h3>
                    <span class="small text-muted font-mono">RSS ANALYSIS FEED</span>
                 </div>
                 
                 <div class="sentiment-bar-container mb-2">
                     {% if latest %}
                     <div class="sentiment-bar" style="width: 50%; margin-left: {% if latest.sentiment_score > 0 %}50{% else %}0{% endif %}%; background: {% if latest.sentiment_score > 0 %}#39FF14{% else %}#ff4444{% endif %}; box-shadow: 0 0 15px {% if latest.sentiment_score > 0 %}#39FF14{% else %}#ff4444{% endif %}80;"></div>
                     {% endif %}
                 </div>
                 <div class="d-flex justify-content-between small text-muted font-mono">
                     <span class="d-flex align-items-center"><i class="bi bi-arrow-down-circle me-1"></i> Bearish</span>
                     <span>Neutral</span>
                     <span class="d-flex align-items-center">Bullish <i class="bi bi-arrow-up-circle ms-1"></i></span>
                 </div>

                 <hr class="my-4 border-secondary border-opacity-25">
                 
                 <div class="row g-4">
                    <div class="col-md-6">
                        <h4 class="h6 text-white mb-2 fw-bold">What is this?</h4>
                        <p class="small text-muted">This engine simulates 1,000 potential price paths for the S&P 500 E-mini (ES) futures. It combines historical volatility, a Markov Switching Model for regime detection, and real-time sentiment analysis to estimate intraday risk boundaries.</p>
                    </div>
                    <div class="col-md-6">
                        <h4 class="h6 text-white mb-2 fw-bold">How to use?</h4>
                        <p class="small text-muted">Watch the <strong>Tail Risk (VaR)</strong> level. In high volatility regimes, price tends to test these boundaries. The <strong>Bias</strong> suggests a directional lean based on combined indicators.</p>
                    </div>
                 </div>
             </div>
        </div>

        <!-- Sidebar / History -->
        <div class="col-lg-4">
            <div class="card bg-slate border-0 rounded-5 shadow-lg mb-4">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-4">
                        <i class="bi bi-clock-history text-muted fs-4 me-2"></i>
                        <h3 class="h5 text-white mb-0">Engine History</h3>
                    </div>
                    
                    <div class="history-list overflow-auto" style="max-height: 400px;">
                        {% for item in history %}
                        <div class="history-item p-3 mb-2 rounded-4 bg-dark-900 transition-all border border-transparent hover-border-neon">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-white small fw-bold font-mono">{{ item.created_at|date:"M d, H:i" }}</div>
                                    <div class="small {% if item.bias == 'LONG' %}text-neon-green{% elif item.bias == 'SHORT' %}text-danger{% else %}text-muted{% endif %}">
                                        {{ item.bias }} BIAS
                                    </div>
                                </div>
                                <div class="text-neon-blue font-mono">{{ item.expected_low|floatformat:1 }}</div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-muted small text-center py-4">No history records found.</div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="p-4 bg-neon-green bg-opacity-10 border border-neon-green border-opacity-25 rounded-5">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-shield-check text-neon-green fs-4 me-2"></i>
                    <h4 class="h6 text-neon-green fw-bold mb-0">System Integrity</h4>
                </div>
                <div class="small text-muted font-mono">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Markov Chain:</span>
                        <span class="text-neon-green">ACTIVE</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Data Feed:</span>
                        <span class="text-white">YFINANCE</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Bias Engine:</span>
                        <span class="text-white">KALMAN-MOD</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --neon-green: #39FF14;
        --neon-blue: #00E5FF;
        --dark-charcoal: #121212;
        --slate-gray: #1E1E1E;
        --dark-900: #0B0B0B;
    }
    
    .bg-slate { background-color: var(--slate-gray); }
    .bg-dark-900 { background-color: var(--dark-900); }
    .text-neon-green { color: var(--neon-green) !important; }
    .text-neon-blue { color: var(--neon-blue) !important; }
    
    /* Stronger muted text for readability */
    .text-muted { color: #a0a0a0 !important; }
    
    .btn-neon-green {
        background-color: var(--neon-green);
        border: none;
        box-shadow: 0 0 15px rgba(57, 255, 20, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-neon-green:hover {
        background-color: #2ED110;
        box-shadow: 0 0 25px rgba(57, 255, 20, 0.5);
        transform: translateY(-2px);
    }
    
    .stat-card {
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .stat-card:hover {
        transform: translateY(-5px);
        background-color: #151515 !important;
    }
    
    .sentiment-bar-container {
        height: 8px;
        background: #333;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .sentiment-bar {
        height: 100%;
        width: 50%;
        transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .history-item:hover {
        background-color: #1a1a1a !important;
        border-color: rgba(0, 229, 255, 0.3) !important;
        cursor: pointer;
    }
    
    .glass-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.05), transparent);
        transition: all 0.6s;
    }
    .bg-dark-900:hover .glass-shine {
        left: 150%;
    }
    
    .fade-in {
        animation: fadeIn 0.8s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Responsive overrides */
    @media (max-width: 768px) {
        .stat-card { margin-bottom: 10px; }
    }
</style>
{% endblock %}