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

{% block title %}Customer Intelligence{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/customer_intelligence.css">
{% endblock %}
{% block content %}
<main class="page">
    <h1 class="brand">Customer Intelligence</h1>
    <div class="card"><button type="button" onclick="refresh()">Refresh Intelligence</button> {{ ui.button('Admin', '/admin') }}</div>
    <div class="card wrap">
        <table>
            <thead><tr><th>Customer</th><th>Segment</th><th>Purchases</th><th>Lifetime Value</th><th>CLV Estimate</th><th>Last Purchase</th></tr></thead>
            <tbody>
            {% for c in customers %}
                <tr><td>{{ c.name }}<br><small>{{ c.phone }}</small></td><td>{{ c.segment }}</td><td>{{ c.purchase_count }}</td><td>{{ "%.2f"|format(c.lifetime_value or 0) }}</td><td>{{ "%.2f"|format(c.clv_estimate or 0) }}</td><td>{{ c.last_purchase_at or 'None' }}</td></tr>
            {% else %}
                <tr><td colspan="6">No customer data yet.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</main>
<script>
async function refresh(){const token=document.querySelector('meta[name="csrf-token"]')?.content||""; const r=await fetch('/api/customer-intelligence/refresh',{method:'POST',headers:{'X-CSRF-Token':token}}); if(r.ok) location.reload();}
</script>
{% endblock %}