{% extends "base.html" %}
{% block content %}

<h1>Sales Sync</h1>
<p class="page-subtitle">
    Which sales have reached vendorawifi.com, and what happened when they didn't.
</p>

{% if flash_msg %}
    <div class="flash flash-good">{{ flash_msg }}
        <button class="flash-close" aria-label="Close">×</button></div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">{{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button></div>
{% endif %}

{% if state.failing %}
<div class="flash flash-error">
    <strong>Sales are not reaching the website right now.</strong>
    Failing since {{ state.failing_since | localtime }}
    ({{ state.fail_attempts }} attempt{{ '' if state.fail_attempts == 1 else 's' }}).
    {% if state.pending %}
        {{ state.pending }} sale{{ '' if state.pending == 1 else 's' }} waiting — nothing is lost,
        they send themselves once the connection is back.
    {% endif %}
    Check this vendo's internet connection.
</div>
{% endif %}

<div class="stat-grid stat-grid--stack">
    <div class="stat-card {{ 'good' if not state.pending else '' }}">
        <div class="label">Waiting to send</div>
        <div class="value">{{ state.pending }}</div>
        <div class="hint">
            {% if state.pending and state.oldest_pending_at %}
                oldest from {{ state.oldest_pending_at | localtime }}
            {% else %}
                everything is up to date
            {% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Sent to the website</div>
        <div class="value">{{ state.synced }}</div>
        <div class="hint">sales confirmed by the server</div>
    </div>
    <div class="stat-card {{ 'danger' if state.failing else '' }}">
        <div class="label">Last successful sync</div>
        <div class="value" style="font-size:18px;">
            {% if state.last_ok_at %}{{ state.last_ok_at | localtime }}{% else %}never{% endif %}
        </div>
        <div class="hint">
            {% if state.failing %}retrying automatically{% else %}reporting normally{% endif %}
        </div>
    </div>
</div>

<section>
    <div class="section-head"><h2>Sales</h2></div>
    <div class="chip-row">
        {% set chips = [('all', 'All'), ('pending', 'Waiting'), ('synced', 'Sent')] %}
        {% for slug, label in chips %}
            <a href="/sales-sync?only={{ slug }}"
               class="chip {% if only == slug %}chip-active{% endif %}">
                {{ label }} <span class="chip-count">{{ counts[slug] }}</span>
            </a>
        {% endfor %}
    </div>

    {% if sales %}
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>Sold</th>
                    <th>Voucher</th>
                    <th class="col-hide-mobile">Type</th>
                    <th style="text-align:right;">Amount</th>
                    <th>Status</th>
                    <th class="col-hide-mobile">Sent</th>
                </tr>
            </thead>
            <tbody>
            {% for s in sales %}
                <tr>
                    <td>{{ s.ts_unix | localtime }}</td>
                    <td><code>{{ s.code }}</code></td>
                    <td class="col-hide-mobile">{{ s.kind }}</td>
                    <td style="text-align:right;">₱{{ s.pesos }}</td>
                    <td>
                        {% if s.synced %}
                            <span class="badge badge-active">sent</span>
                        {% else %}
                            <span class="badge badge-paused">waiting</span>
                        {% endif %}
                    </td>
                    <td class="col-hide-mobile">
                        {% if s.synced %}{{ s.acked_at | localtime }}
                        {% else %}<span style="color:var(--muted-2);">—</span>{% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {% if total > page_size %}
    <nav class="pager">
        {% if offset > 0 %}
            <a href="/sales-sync?only={{ only }}&offset={{ [offset - page_size, 0]|max }}" class="btn-sm">← Newer</a>
        {% else %}
            <span class="btn-sm btn-disabled">← Newer</span>
        {% endif %}
        <span class="pager-status">
            Showing <strong>{{ page_start }}–{{ page_end }}</strong> of <strong>{{ total }}</strong>
        </span>
        {% if page_end < total %}
            <a href="/sales-sync?only={{ only }}&offset={{ offset + page_size }}" class="btn-sm">Older →</a>
        {% else %}
            <span class="btn-sm btn-disabled">Older →</span>
        {% endif %}
    </nav>
    {% endif %}
    {% else %}
    <div class="card"><p style="color:var(--muted);margin:0;">No sales recorded yet.</p></div>
    {% endif %}

    <p class="form-hint" style="margin-top:10px;">
        A sale is recorded here the moment it happens and sent shortly after.
        <strong>Waiting</strong> is normal — it just hasn't been sent yet. Sales are
        never dropped: if a send fails, the same ones go again next time.
    </p>
</section>

<section>
    <div class="section-head"><h2>Sync attempts</h2></div>
    {% if attempts %}
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>When</th>
                    <th>Result</th>
                    <th style="text-align:right;">Sales sent</th>
                    <th class="col-hide-mobile">Reason</th>
                    <th>Detail</th>
                </tr>
            </thead>
            <tbody>
            {% for a in attempts %}
                <tr>
                    <td>
                        {{ a.last_at | localtime }}
                        {% if a.attempts > 1 %}
                            <div style="font-size:11px;color:var(--muted-2);margin-top:2px;">
                                {{ a.attempts }} tries since {{ a.first_at | localtime }}
                            </div>
                        {% endif %}
                    </td>
                    <td>
                        {% if a.ok %}
                            <span class="badge badge-active">sent</span>
                        {% else %}
                            <span class="badge badge-expired">failed</span>
                        {% endif %}
                    </td>
                    <td style="text-align:right;">
                        {% if a.ok and a.events_sent %}
                            {{ a.events_acked }}{% if a.events_acked != a.events_sent %} of {{ a.events_sent }}{% endif %}
                            {% if a.queued_after %}
                                <div style="font-size:11px;color:var(--muted-2);">
                                    {{ a.queued_after }} still waiting
                                </div>
                            {% endif %}
                        {% else %}
                            <span style="color:var(--muted-2);">—</span>
                        {% endif %}
                    </td>
                    <td class="col-hide-mobile" style="color:var(--muted);">
                        {{ trigger_labels.get(a.trigger, a.trigger or 'scheduled') }}
                    </td>
                    <td style="color:var(--muted);font-size:12px;">
                        {% if a.error %}{{ a.error }}
                        {% elif a.ok and not a.events_sent %}nothing new to send
                        {% else %}<span style="color:var(--muted-2);">—</span>{% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="form-hint" style="margin-top:10px;">
        Repeated identical failures are grouped into one line with a try count, so a
        long outage stays readable. Only the most recent {{ max_rows }} attempts are
        kept.
    </p>
    {% else %}
    <div class="card"><p style="color:var(--muted);margin:0;">
        No sync attempts recorded yet. This fills in as the vendo reports its sales.
    </p></div>
    {% endif %}
</section>

{% endblock %}