{% extends "base.html" %}
{% comment %}
The analytics landing page (SPEC §18).

Two tables and no chart: the chart lives on a flow's own page, where there is one
subject to draw. Here the question is "which flows are running and how is each
connection delivering", and both answers are lists.

Flows with no counters in the range are absent rather than listed at zero. The
flow list already answers "what exists"; this page answers "what has been
running", and a page of zeroes answers neither.
{% endcomment %}

{% block title %}Insights · DemandTrail Messaging{% endblock %}

{% block page_header %}
<div class="page-header max-w-[1060px]">
    <div class="page-header-text">
        <h1 class="page-title">Insights</h1>
        <p class="page-lede">
            How each flow did, step by step, and how each connected account is delivering.
        </p>
    </div>
    <div class="page-header-actions">{% include "analytics/_range.html" %}</div>
</div>
{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full">
{% comment %}
  The range's totals first, as number-and-word cards (HANDOFF §4, Analytics):
  the four answers a reader came for, before the tables that break them down.
  Failures carry the red dot only when there are some.
{% endcomment %}
<div class="summary-cards mb-5">
    <div class="summary-card"><span class="dot dot-neutral" aria-hidden="true"></span><span class="summary-card-value">{{ totals.sent }}</span><span class="summary-card-label">sent</span></div>
    <div class="summary-card"><span class="dot dot-success" aria-hidden="true"></span><span class="summary-card-value">{{ totals.delivered }}</span><span class="summary-card-label">delivered</span></div>
    <div class="summary-card"><span class="dot {% if totals.failed %}dot-error{% else %}dot-neutral{% endif %}" aria-hidden="true"></span><span class="summary-card-value">{{ totals.failed }}</span><span class="summary-card-label">failed</span></div>
    <div class="summary-card"><span class="dot dot-info" aria-hidden="true"></span><span class="summary-card-value">{{ totals.clicked }}</span><span class="summary-card-label">clicked{% if click_rate is not None %} · {{ click_rate|floatformat:1 }}% of sends{% endif %}</span></div>
</div>

<div class="an-panel" style="margin-top: 0;">
    <div class="an-panel-head">
        <span class="an-panel-title">Flows</span>
        <span class="an-hint">Counted when the message actually leaves, not when the step runs.</span>
    </div>
    {% if flow_rows %}
    <div style="overflow-x: auto;">
        <table class="an-table">
            <thead>
                <tr>
                    <th scope="col">Flow</th>
                    <th scope="col" class="an-num">Sent</th>
                    <th scope="col" class="an-num">Delivered</th>
                    <th scope="col" class="an-num">Failed</th>
                    <th scope="col" class="an-num">Clicked</th>
                </tr>
            </thead>
            <tbody>
                {% for row in flow_rows %}
                <tr>
                    <td>
                        <a href="{% url 'analytics:flow_detail' workspace_id=request.workspace.id flow_id=row.flow.id %}?days={{ days }}">{{ row.flow.name }}</a>
                        <span class="status-pill status-pill-{{ row.flow.status }}"><span class="status-pill-dot" aria-hidden="true"></span>{% if row.flow.status == "active" %}Live{% else %}{{ row.flow.get_status_display }}{% endif %}</span>
                    </td>
                    <td class="an-num">{{ row.sent }}</td>
                    <td class="an-num">{{ row.delivered }}</td>
                    <td class="an-num">{{ row.failed }}</td>
                    <td class="an-num">{{ row.clicked }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="an-hint">No flow has sent anything in this range.</p>
    {% endif %}
</div>

<div class="an-panel">
    <div class="an-panel-head">
        <span class="an-panel-title">Deliverability</span>
        <span class="an-hint">Every outbound message on each connection, including agent replies and API sends.</span>
    </div>
    {% if connections %}
    <div style="overflow-x: auto;">
        <table class="an-table">
            <thead>
                <tr>
                    <th scope="col">Connection</th>
                    <th scope="col" class="an-num">Messages</th>
                    <th scope="col" class="an-num">Sent</th>
                    <th scope="col" class="an-num">Delivered</th>
                    <th scope="col" class="an-num">Failed</th>
                    <th scope="col" class="an-num">Delivery rate</th>
                </tr>
            </thead>
            <tbody>
                {% for row in connections %}
                <tr>
                    <td>
                        {{ row.connection.display_name }}
                        <span class="an-muted">{{ row.connection.get_platform_display }}</span>
                    </td>
                    <td class="an-num">{{ row.total }}</td>
                    <td class="an-num">{{ row.sent }}</td>
                    <td class="an-num">{{ row.delivered }}</td>
                    <td class="an-num">{{ row.failed }}</td>
                    {% comment %}
                      Blank rather than 0% when nothing was sent: a rate with no
                      denominator is not a rate. And a platform that reports no
                      delivery receipts at all (SMS, email without a provider
                      webhook) legitimately sits at 0% — the column says
                      "delivered", not "arrived".
                    {% endcomment %}
                    <td class="an-num">{% if row.delivery_rate is not None %}{{ row.delivery_rate }}%{% else %}<span class="an-muted">N/A</span>{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="an-hint">Nothing has been sent from this workspace in this range.</p>
    {% endif %}
</div>
</div>
{% endblock %}