{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}AI Predictions{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/ai_dashboard.css">
{% endblock %}
{% block content %}
<div class="container">
    <div class="hero">
        <section class="card">
            <span class="pill">AI Forecast Center</span>
            <h1>Sales Prediction Dashboard</h1>
            <p class="muted">{{ data.forecast.momentum_text }}</p>
            <div class="actions">
                {{ ui.button('Back to Admin', '/admin') }}
                {{ ui.button('Open Sales', '/sales') }}
            </div>
        </section>

        <section class="card">
            <span class="pill">Momentum</span>
            <div class="metric-value">{{ data.forecast.momentum_label }}</div>
            <p class="muted">{{ data.totals.days_tracked }} tracked day(s)</p>
            <p class="muted">Total revenue analyzed: {{ currency_symbol }} {{ "%.2f"|format(data.totals.total_revenue) }}</p>
            <p class="muted">Total orders analyzed: {{ data.totals.total_orders }}</p>
        </section>
    </div>

    <div class="metrics">
        <section class="card">
            <span class="pill">Predicted Next Day</span>
            <div class="metric-value">{{ currency_symbol }} {{ "%.2f"|format(data.forecast.next_day_sales) }}</div>
            <p class="muted">Estimated orders: {{ data.forecast.next_day_orders }}</p>
        </section>

        <section class="card">
            <span class="pill">Predicted Next 7 Days</span>
            <div class="metric-value">{{ currency_symbol }} {{ "%.2f"|format(data.forecast.next_week_sales) }}</div>
            <p class="muted">Forecast built from recent sales rhythm and trend direction.</p>
        </section>

        <section class="card">
            <span class="pill">Average Basket</span>
            <div class="metric-value">{{ currency_symbol }} {{ "%.2f"|format(data.forecast.avg_ticket) }}</div>
            <p class="muted">Average revenue per completed sale.</p>
        </section>
    </div>

    <div class="tables">
        <section class="card">
            <h2>Recent Sales History</h2>
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Orders</th>
                        <th>Revenue</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.history %}
                    <tr>
                        <td>{{ row["day"] }}</td>
                        <td>{{ row["orders"] }}</td>
                        <td>{{ currency_symbol }} {{ "%.2f"|format(row["revenue"]) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3">No sales history available yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        <section class="card">
            <h2>Low Stock Risks</h2>
            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Stock</th>
                        <th>Risk</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in data.low_stock %}
                    <tr>
                        <td>{{ item["name"] }}</td>
                        <td>{{ item["stock"] }}</td>
                        <td>{{ item["risk"] }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3">No low stock products right now.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>
    </div>

    <section class="card">
        <h2>Inventory Pressure</h2>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Stock</th>
                    <th>Unit Price</th>
                    <th>Stock Value</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data.inventory_pressure %}
                <tr>
                    <td>{{ item["name"] }}</td>
                    <td>{{ item["stock"] }}</td>
                    <td>{{ currency_symbol }} {{ "%.2f"|format(item["price"]) }}</td>
                    <td>{{ currency_symbol }} {{ "%.2f"|format(item["stock_value"]) }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4">No inventory data available.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</div>
{% endblock %}