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

{% block title %}Business Retention - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Business Insights</h1>
            <div class="ops-subtitle">Daily summaries, weekly reports, low-stock reminders, branch comparisons, and notification-ready insights.</div>
        </div>
        <div class="ops-actions">
            <button onclick="refreshInsights(false)">Refresh</button>
            <button onclick="refreshInsights(true)">Refresh + Notify</button>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Latest Insights</h2>
        <div class="ops-list">
            {% for insight in snapshot.insights %}
            <div class="ops-list-item">
                <span class="ops-badge {{ 'warn' if insight.severity == 'warning' else 'info' }}">{{ insight.severity|title }}</span>
                <strong>{{ insight.title }}</strong>
                <p>{{ insight.message }}</p>
            </div>
            {% else %}
            <div class="ops-list-item">No insights generated yet.</div>
            {% endfor %}
        </div>
    </section>

    <section class="ops-panel">
        <h2>Report Runs</h2>
        <div class="ops-list">
            {% for report in snapshot.reports %}
            <div class="ops-list-item"><strong>{{ report.report_type|title }}</strong> {{ report.created_at }}</div>
            {% else %}
            <div class="ops-list-item">No report runs yet.</div>
            {% endfor %}
        </div>
    </section>
</main>
<script>
async function refreshInsights(notify) {
  await fetch(`/api/business-retention/refresh?notify=${notify ? "1" : "0"}`, {method: "POST"});
  location.reload();
}
</script>
{% endblock %}