{% extends "core/base.html" %}
{% load static %}
{% block title %}Stock Forecast - SwiftPOS{% endblock %}
{% block topbar_title %}Stock Forecast{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <!-- Page Header -->
    <div class="sp-page-header">
        <div>
            <h1 class="sp-page-title"><i class="fas fa-boxes"></i>Smart Stock Forecast</h1>
            <p class="sp-page-subtitle">Predicted stock exhaustion based on the last 30 days of sales velocity.</p>
        </div>
        <div class="sp-page-actions">
            <a href="{% url 'sales:pos' %}" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-2">
                <i class="fas fa-cash-register"></i> Back to POS
            </a>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="sp-stat-card">
                <div class="card-body text-center p-3">
                    <div class="sp-stat-value text-danger">{{ counts.critical|default:0 }}</div>
                    <div class="sp-stat-label">Critical</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="sp-stat-card">
                <div class="card-body text-center p-3">
                    <div class="sp-stat-value text-warning">{{ counts.low_risk|default:0 }}</div>
                    <div class="sp-stat-label">Low Risk</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="sp-stat-card">
                <div class="card-body text-center p-3">
                    <div class="sp-stat-value text-secondary">{{ counts.dead|default:0 }}</div>
                    <div class="sp-stat-label">Dead Stock</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="sp-stat-card">
                <div class="card-body text-center p-3">
                    <div class="sp-stat-value text-success">{{ counts.healthy|default:0 }}</div>
                    <div class="sp-stat-label">Healthy</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter -->
    <div class="mb-3 d-flex gap-2 flex-wrap">
        <a href="{% url 'analytics:stock_forecast' %}" class="btn btn-sm {% if not health_filter %}btn-primary{% else %}btn-outline-secondary{% endif %}">All</a>
        {% for val, label in health_choices %}
        <a href="?health={{ val }}" class="btn btn-sm {% if health_filter == val %}btn-primary{% else %}btn-outline-secondary{% endif %}">{{ label }}</a>
        {% endfor %}
    </div>

    <!-- Forecast Table -->
    {% if forecasts %}
    <div class="card">
        <div class="card-body p-0">
            <div class="sp-table-container">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Product</th>
                            <th class="text-center">Current Stock</th>
                            <th class="text-center">Avg Daily Sales</th>
                            <th class="text-center">Days Until Stockout</th>
                            <th class="text-center">Restock Qty</th>
                            <th class="text-center">Health</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for fc in forecasts %}
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ fc.product.name }}</div>
                                <small class="text-muted">{{ fc.product.sku }}</small>
                            </td>
                            <td class="text-center fw-bold">{{ fc.product.stock_quantity }}</td>
                            <td class="text-center">{{ fc.avg_daily_sales|floatformat:1 }}</td>
                            <td class="text-center">
                                {% if fc.days_until_stockout is not None %}
                                    <span class="fw-bold {% if fc.days_until_stockout <= 3 %}text-danger{% elif fc.days_until_stockout <= 14 %}text-warning{% else %}text-success{% endif %}">
                                        {{ fc.days_until_stockout }} day{{ fc.days_until_stockout|pluralize }}
                                    </span>
                                {% else %}
                                    <span class="text-muted">No recent sales</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if fc.recommended_restock_qty > 0 %}
                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                        {{ fc.recommended_restock_qty }} units
                                    </span>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if fc.stock_health == 'critical' %}
                                    <span class="badge bg-danger">🔴 Critical</span>
                                {% elif fc.stock_health == 'low_risk' %}
                                    <span class="badge bg-warning text-dark">🟡 Low Risk</span>
                                {% elif fc.stock_health == 'dead' %}
                                    <span class="badge bg-secondary">💀 Dead Stock</span>
                                {% elif fc.stock_health == 'overstock' %}
                                    <span class="badge bg-info text-dark">📦 Overstock</span>
                                {% else %}
                                    <span class="badge bg-success">✅ Healthy</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% else %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5">
            <i class="fas fa-box-open fa-3x text-muted opacity-25 d-block mb-3"></i>
            <p class="text-muted">No forecast data yet. Run <code>python manage.py generate_insights</code> to generate forecasts.</p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}