{% extends "dashboard/base.html" %}

{% block title %}Revenue Forecast - Command Center{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Revenue Forecast</h1>
        <p class="page-description">Projected vs actual revenue and pipeline analysis</p>
    </div>
    <div class="flex items-center gap-2">
        <select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
            {% for c in companies %}
                <option value="{{ c.id }}" {% if c.id == company_id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

<!-- KPI Row -->
<div class="grid grid-3 mb-6">
    <div class="kpi-card">
        <div class="kpi-label">Run Rate</div>
        <div class="kpi-value">${% if run_rate.run_rate %}{{ "{:,.0f}".format(run_rate.run_rate) }}{% else %}—{% endif %}</div>
        <div class="kpi-trend {% if run_rate.pace == 'on_track' %}up{% else %}down{% endif %}">
            {% if run_rate.pace == 'on_track' %}✓ On track{% else %}⚠ Behind{% endif %}
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-label">YTD Revenue</div>
        <div class="kpi-value">${% if run_rate.ytd_revenue %}{{ "{:,.0f}".format(run_rate.ytd_revenue) }}{% else %}—{% endif %}</div>
        <div class="kpi-trend">
            {{ run_rate.months_elapsed or 0 }} months elapsed
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-label">Monthly Needed</div>
        <div class="kpi-value">${% if run_rate.required_monthly %}{{ "{:,.0f}".format(run_rate.required_monthly) }}{% else %}—{% endif %}</div>
        <div class="kpi-trend">
            {{ run_rate.months_remaining or 0 }} months remaining
        </div>
    </div>
</div>

<!-- Forecast Table -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Monthly Forecast</h2>
        <p class="card-description">Projected vs actual revenue by month</p>
    </div>
    <div class="card-content" style="padding: 0;">
        {% if forecast_data %}
        <table class="table">
            <thead>
                <tr>
                    <th>Period</th>
                    <th>Projected</th>
                    <th>Actual</th>
                    <th>Variance</th>
                    <th>Confidence</th>
                </tr>
            </thead>
            <tbody>
                {% for f in forecast_data %}
                <tr>
                    <td>{{ f.period_start.strftime('%b %Y') }}</td>
                    <td>{{ "{:,.0f}".format(f.projected_value) if f.projected_value else "—" }}</td>
                    <td>{{ "{:,.0f}".format(f.actual_value) if f.actual_value else "—" }}</td>
                    <td>
                        {% if f.variance_pct %}
                            <span class="badge {% if f.variance_pct >= 0 %}badge-success{% else %}badge-destructive{% endif %}">
                                {{ '%+.1f%%'|format(f.variance_pct) }}
                            </span>
                        {% else %}
                            —
                        {% endif %}
                    </td>
                    <td>
                        {% if f.confidence %}
                            <span class="badge badge-info">{{ '%.0f%%'|format(f.confidence * 100) }}</span>
                        {% else %}
                            —
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div style="padding: 3rem; text-align: center;">
            <p class="text-muted">No forecast data available</p>
            <p class="text-sm text-muted mt-2">Start by adding monthly revenue projections</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}