{% extends "admin/layout.html" %}
{% block title %}Broadcast Report #{{ send.id }} – Admin{% endblock %}

{% block body %}
<div class="flex items-center gap-3 mb-6">
    <a href="{{ full_url('/admin/broadcast') }}" class="inline-flex items-center gap-2 text-sm text-primary dark:text-primary-light hover:underline">
        <i class="fa fa-arrow-left"></i> {% trans %}Back to Broadcasts{% endtrans %}
    </a>
    <span class="text-gray-300 dark:text-gray-600">/</span>
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">
        {% trans %}Broadcast Report{% endtrans %} #{{ send.id }}
    </h1>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Broadcast meta -->
<div class="mb-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
        <div>
            <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">{% trans %}Sent At{% endtrans %}</div>
            <div class="font-medium text-gray-800 dark:text-gray-200">{{ send.created_at[:16] }}</div>
        </div>
        <div>
            <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">{% trans %}Channel{% endtrans %}</div>
            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium
                {% if 'email' in send.channel %}bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% else %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300{% endif %}">
                {{ send.channel }}
            </span>
        </div>
        <div class="sm:col-span-2">
            <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">{% trans %}Subject / Title{% endtrans %}</div>
            <div class="font-medium text-gray-800 dark:text-gray-200 truncate">{{ send.email_subject or send.push_title or '—' }}</div>
        </div>
    </div>
</div>

<!-- Summary cards -->
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-4 mb-6">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ total_recipients }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Recipients{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-blue-700 dark:text-blue-300">{{ emails_sent }}</div>
        <div class="text-xs text-blue-600 dark:text-blue-400 mt-1">{% trans %}Emails Sent{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-green-200 dark:border-green-900/50 bg-green-50 dark:bg-green-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-green-700 dark:text-green-300">{{ emails_opened_unique }}</div>
        <div class="text-xs text-green-600 dark:text-green-400 mt-1">{% trans %}Unique Opens{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-teal-200 dark:border-teal-900/50 bg-teal-50 dark:bg-teal-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-teal-700 dark:text-teal-300">{{ emails_opened_total }}</div>
        <div class="text-xs text-teal-600 dark:text-teal-400 mt-1">{% trans %}Total Opens{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-orange-200 dark:border-orange-900/50 bg-orange-50 dark:bg-orange-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-orange-700 dark:text-orange-300">{{ emails_not_opened }}</div>
        <div class="text-xs text-orange-600 dark:text-orange-400 mt-1">{% trans %}Not Opened{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-violet-200 dark:border-violet-900/50 bg-violet-50 dark:bg-violet-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-violet-700 dark:text-violet-300">{{ push_sent }}</div>
        <div class="text-xs text-violet-600 dark:text-violet-400 mt-1">{% trans %}Push Sent{% endtrans %}</div>
    </div>
    <div class="rounded-xl border border-purple-200 dark:border-purple-900/50 bg-purple-50 dark:bg-purple-900/20 p-4 text-center">
        <div class="text-2xl font-bold text-purple-700 dark:text-purple-300">{{ push_clicked_unique }}</div>
        <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">{% trans %}Push Clicks{% endtrans %}</div>
    </div>
</div>

<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Email opens chart -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-4 flex items-center gap-2">
            <i class="fa fa-envelope-open text-blue-500"></i>
            {% trans %}Unique Openers Per Day{% endtrans %}
        </h3>
        <div style="position:relative;height:200px;">
            <canvas id="chart-opens"></canvas>
        </div>
    </div>
    <!-- Push clicks chart -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-4 flex items-center gap-2">
            <i class="fa fa-bell text-purple-500"></i>
            {% trans %}Unique Clickers Per Day{% endtrans %}
        </h3>
        <div style="position:relative;height:200px;">
            <canvas id="chart-clicks"></canvas>
        </div>
    </div>
</div>

<!-- Recipient table -->
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-6">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300">
            <i class="fa fa-users mr-2 text-indigo-500"></i>{% trans %}Recipients{% endtrans %}
            <span class="ml-1 text-xs font-normal text-gray-400">({{ recipients|length }})</span>
        </h3>
        <div class="flex items-center gap-3">
            <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 cursor-pointer select-none">
                <input type="checkbox" id="filter-not-opened" class="rounded border-gray-300">
                {% trans %}Show not-opened only{% endtrans %}
            </label>
            <input type="text" id="recipient-search" placeholder="{% trans %}Search…{% endtrans %}"
                   class="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/40 outline-none w-48">
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm" id="recipients-table">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}User{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Country{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Plan{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Email Sent{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Opens{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Push Sent{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Clicks{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}First Opened{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800" id="recipients-tbody">
                {% for r in recipients %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors recipient-row
                    {% if r.email_sent and r.email_open_count == 0 %}not-opened{% endif %}"
                    data-search="{{ (r.username ~ ' ' ~ r.email)|lower }}">
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200">{{ r.username }}</div>
                        <div class="text-xs text-gray-400">{{ r.email }}</div>
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">{{ r.country or '—' }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">{{ r.plan_name or '—' }}</td>
                    <td class="px-4 py-3 text-center">
                        {% if r.email_sent %}
                        <i class="fa fa-check text-green-500"></i>
                        {% else %}
                        <span class="text-gray-300 dark:text-gray-600">—</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if r.email_open_count > 0 %}
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                            {{ r.email_open_count }}
                        </span>
                        {% else %}
                        <span class="text-gray-300 dark:text-gray-600">0</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if r.push_sent %}
                        <i class="fa fa-check text-purple-500"></i>
                        {% else %}
                        <span class="text-gray-300 dark:text-gray-600">—</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if r.push_click_count > 0 %}
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">
                            {{ r.push_click_count }}
                        </span>
                        {% else %}
                        <span class="text-gray-300 dark:text-gray-600">0</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-400">
                        {{ r.email_opened_at[:16] if r.email_opened_at else '—' }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if not recipients %}
        <div class="px-5 py-10 text-center text-gray-400 dark:text-gray-500 text-sm">
            {% trans %}No recipient data found.{% endtrans %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Clear analytics -->
<div class="rounded-xl border border-orange-200 dark:border-orange-900 bg-orange-50 dark:bg-orange-900/10 p-5">
    <h3 class="text-sm font-bold text-orange-700 dark:text-orange-400 mb-2 flex items-center gap-2">
        <i class="fa fa-eraser"></i> {% trans %}Clear Analytics Data{% endtrans %}
    </h3>
    <p class="text-xs text-orange-600 dark:text-orange-400 mb-3">
        {% trans %}Resets all open and click counts for this broadcast to zero. The broadcast record itself is kept.{% endtrans %}
    </p>
    <button type="button" id="btn-clear-analytics"
            class="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold transition-all"
            data-testid="btn-clear-analytics">
        <i class="fa fa-eraser mr-1.5"></i>{% trans %}Clear Analytics{% endtrans %}
    </button>
</div>
{% endblock %}

{% block page_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    var LABELS  = {{ chart_labels | safe }};
    var OPENS   = {{ chart_opens  | safe }};
    var CLICKS  = {{ chart_clicks | safe }};
    var isDark  = document.documentElement.classList.contains('dark');
    var gridCol = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
    var textCol = isDark ? '#9ca3af' : '#6b7280';

    function mkChart(id, label, data, color) {
        var ctx = document.getElementById(id);
        if (!ctx) return;
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: LABELS,
                datasets: [{
                    label: label,
                    data: data,
                    backgroundColor: color + '99',
                    borderColor: color,
                    borderWidth: 1,
                    borderRadius: 4,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { color: gridCol }, ticks: { color: textCol, font: { size: 11 } } },
                    y: { beginAtZero: true, grid: { color: gridCol }, ticks: { color: textCol, font: { size: 11 }, stepSize: 1, precision: 0 } }
                }
            }
        });
    }

    mkChart('chart-opens',  '{% trans %}Opens{% endtrans %}',  OPENS,  '#3b82f6');
    mkChart('chart-clicks', '{% trans %}Clicks{% endtrans %}', CLICKS, '#8b5cf6');

    // ── Recipient table filtering ──────────────────────────────────────────
    var filterNotOpened = document.getElementById('filter-not-opened');
    var searchInput     = document.getElementById('recipient-search');
    var rows            = document.querySelectorAll('.recipient-row');
    var noDataMsg       = null;

    function applyFilter() {
        var onlyNotOpened = filterNotOpened && filterNotOpened.checked;
        var q = searchInput ? searchInput.value.toLowerCase().trim() : '';
        var visible = 0;
        rows.forEach(function (row) {
            var matchesFilter = !onlyNotOpened || row.classList.contains('not-opened');
            var matchesSearch = !q || (row.dataset.search || '').includes(q);
            var show = matchesFilter && matchesSearch;
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        if (noDataMsg) noDataMsg.style.display = (visible === 0) ? '' : 'none';
    }

    if (filterNotOpened) filterNotOpened.addEventListener('change', applyFilter);
    if (searchInput)     searchInput.addEventListener('input', applyFilter);

    // ── Clear analytics ───────────────────────────────────────────────────
    var clearUrl = '{{ full_url("/admin/broadcast/" ~ send.id ~ "/clear-analytics") }}';
    var btnClear = document.getElementById('btn-clear-analytics');
    if (btnClear) {
        btnClear.addEventListener('click', function () {
            window.ocConfirm('{% trans %}Reset analytics for this broadcast?{% endtrans %}\n\n\u2022 All open/click counts will be reset to zero\n\u2022 Analytics history for this broadcast will be lost', function() {
            btnClear.disabled = true;
            btnClear.textContent = '{% trans %}Clearing…{% endtrans %}';
            fetch(clearUrl, { method: 'POST' })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    if (d.ok) { location.reload(); }
                    else {
                        btnClear.disabled = false;
                        btnClear.innerHTML = '<i class="fa fa-eraser mr-1.5"></i>{% trans %}Clear Analytics{% endtrans %}';
                        toastr.error('{% trans %}Failed to clear analytics.{% endtrans %}');
                    }
                })
                .catch(function () {
                    btnClear.disabled = false;
                    btnClear.innerHTML = '<i class="fa fa-eraser mr-1.5"></i>{% trans %}Clear Analytics{% endtrans %}';
                    toastr.error('{% trans %}Request failed.{% endtrans %}');
                });
            }); /* end ocConfirm */
        });
    }
})();
</script>
{% endblock %}