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

{% block title %}AI Recommendations{% endblock %}
{% block body_class %}recommendations-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/recommendations.css">
{% endblock %}
{% block content %}
<main>
    <div class="topbar">
        <div>
            <h1>AI Recommendations</h1>
            <p>Operational recommendations generated from current sales, stock, profit, staff, and customer data.</p>
        </div>
        <div>
            <button type="button" onclick="refreshRecommendations()">Refresh</button>
            <a class="btn" href="/admin">Admin</a>
        </div>
    </div>

    <div class="grid">
        {% for item in recommendations %}
            <section class="rec {{ item.priority }}">
                <div class="meta">{{ item.priority }} | {{ item.category }} | {{ item.created_at }}</div>
                <h2>{{ item.title }}</h2>
                <p>{{ item.message }}</p>
                {% if item.action %}
                    <div class="action"><strong>Recommended action:</strong> {{ item.action }}</div>
                {% endif %}
            </section>
        {% else %}
            <section class="rec low">
                <h2>No recommendations yet</h2>
                <p>Refresh to queue the recommendation engine.</p>
            </section>
        {% endfor %}
    </div>
</main>
<script>
function refreshRecommendations() {
    fetch("/api/recommendations/refresh", { method: "POST" })
        .then(() => setTimeout(() => window.location.reload(), 1200));
}
</script>
{% endblock %}