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

{% block content %}
<div class="hero-gradient py-5">
    <div class="container py-4">
        <header class="text-center mb-5">
            <h1 class="display-4 fw-bold mb-2">📊 <span class="text-cyber">Market</span> Intelligence</h1>
            <p class="lead text-muted">Markov Chains • Moving Averages • News Sentiment</p>
        </header>

        <div class="row justify-content-center mb-5">
            <div class="col-md-8 text-center">
                <form method="GET" class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-3">
                    <input type="text" name="symbol" value="{{ symbol }}" class="ticker-input" placeholder="Enter Stock Symbol (e.g. TSLA)" required>
                    <button type="submit" class="btn btn-cyber">Run Analysis</button>
                </form>
            </div>
        </div>

        {% if error %}
        <div class="alert alert-danger bg-dark text-danger border-danger rounded-4 mb-5" role="alert">
            {{ error }}
        </div>
        {% endif %}

        {% if analysis %}
        <div class="row g-4">
            <!-- Markov Forecast -->
            <div class="col-lg-4 col-md-6">
                <div class="glass-card">
                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-cpu"></i> Markov Forecast</h3>
                    {% if analysis.markov %}
                    <div class="mb-4">
                        <div class="metric-label">Current State</div>
                        <div class="metric-value">{{ analysis.markov.current_state }}</div>
                    </div>
                    <div class="mb-4">
                        <div class="metric-label">Predicted State</div>
                        <div class="metric-value">{{ analysis.markov.predicted_state }}</div>
                    </div>
                    <div class="mb-4">
                        <div class="metric-label">Probability</div>
                        <div class="metric-value text-cyber">{{ analysis.markov.probability }}</div>
                    </div>
                    <div class="mt-4 pt-3 border-top border-secondary">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted small">Market Bias:</span>
                            <span class="badge-{{ analysis.markov.color }} sentiment-badge text-uppercase">{{ analysis.markov.bias }}</span>
                        </div>
                        
                        <!-- State Key -->
                        <div class="state-key mt-3">
                            <div class="text-white small mb-2 text-uppercase fw-bold" style="letter-spacing: 1px;">State Key:</div>
                            <div class="d-flex flex-wrap gap-2">
                                {% for state in analysis.markov.state_labels %}
                                <div class="state-key-item d-flex align-items-center gap-1">
                                    <span class="state-id text-white">{{ state.id }}:</span>
                                    <span class="state-label small text-white">{{ state.label }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <p class="text-muted">Insufficient data for Markov analysis.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Technical Trend -->
            <div class="col-lg-4 col-md-6">
                <div class="glass-card">
                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-graph-up-arrow"></i> Technical Trend</h3>
                    {% if analysis.tech %}
                    <div class="mb-4">
                        <div class="metric-label">Latest Close</div>
                        <div class="metric-value">{{ analysis.tech.latest_close }}</div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-6">
                            <div class="metric-label">SMA 20</div>
                            <div class="h4 mb-0 fw-bold">{{ analysis.tech.sma_20 }}</div>
                        </div>
                        <div class="col-6">
                            <div class="metric-label">SMA 50</div>
                            <div class="h4 mb-0 fw-bold text-muted">{{ analysis.tech.sma_50 }}</div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="metric-label">Last Crossover</div>
                        <div class="h6 mb-0">{{ analysis.tech.last_event }}</div>
                    </div>
                    <div class="mt-4 pt-3 border-top border-secondary">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Trend:</span>
                            <span class="badge-{{ analysis.tech.color }} sentiment-badge text-uppercase">{{ analysis.tech.trend }}</span>
                        </div>
                    </div>
                    {% else %}
                    <p class="text-muted">Unable to fetch price data.</p>
                    {% endif %}
                </div>
            </div>

            <!-- News Sentiment -->
            <div class="col-lg-4 col-md-12">
                <div class="glass-card">
                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-newspaper"></i> News Sentiment</h3>
                    {% if analysis.sentiment %}
                    <div class="mb-4">
                        <div class="metric-label">Average Sentiment</div>
                        <div class="metric-value">{{ analysis.sentiment.avg_sentiment }}</div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-muted small">Overall Bias:</span>
                            <span class="badge-{{ analysis.sentiment.color }} sentiment-badge text-uppercase">{{ analysis.sentiment.overall }}</span>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="metric-label mb-3">Top Headlines</div>
                        {% for headline in analysis.sentiment.top_headlines %}
                        <div class="headline-item">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <span class="small fw-semibold">{{ headline.title }}</span>
                                <span class="badge-{{ headline.label|lower|default:'secondary' }} sentiment-badge py-0 px-1" style="font-size: 0.65rem;">{{ headline.polarity }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted">Unable to fetch news sentiment.</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<style>
.text-cyber { color: var(--cyber-blue); }
.text-neon { color: var(--neon-green); }
.state-key-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--glass-border);
}
.state-id {
    font-weight: 800;
    font-size: 0.8rem;
}
.state-label {
    font-size: 0.7rem;
}
</style>
{% endblock %}