{% extends 'base.html.twig' %}

{% block title %}Newsletter Dashboard - Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
    --nl-primary: #7c3aed;
    --nl-primary-light: #a78bfa;
    --nl-primary-dark: #6d28d9;
    --nl-success: #10b981;
    --nl-warning: #f59e0b;
    --nl-danger: #ef4444;
    --nl-info: #3b82f6;
    --nl-bg: #f1f5f9;
    --nl-card: #ffffff;
    --nl-text: #1e293b;
    --nl-text-muted: #64748b;
    --nl-border: #e2e8f0;
}

body { font-family: 'Inter', sans-serif; background: var(--nl-bg); }
.nl-container { max-width: 1400px; margin: 0 auto; padding: 24px; }

.nl-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.nl-title { font-size: 1.75rem; font-weight: 700; color: var(--nl-text); }
.nl-subtitle { color: var(--nl-text-muted); font-size: 0.9rem; }

.nl-campaign-selector {
    display: flex; align-items: center; gap: 8px;
}
.nl-campaign-selector select {
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--nl-border);
    font-size: 14px; background: white; cursor: pointer;
}

/* Stats cards */
.nl-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.nl-stat-card {
    background: var(--nl-card); border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid var(--nl-border);
    transition: transform 0.15s; position: relative; overflow: hidden;
}
.nl-stat-card:hover { transform: translateY(-2px); }
.nl-stat-card .stat-icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px;
}
.nl-stat-card .stat-value {
    font-size: 1.8rem; font-weight: 700; color: var(--nl-text); line-height: 1.2;
}
.nl-stat-card .stat-label {
    font-size: 0.82rem; color: var(--nl-text-muted); margin-top: 4px;
}
.nl-stat-card .stat-sub {
    font-size: 0.72rem; color: var(--nl-text-muted); margin-top: 2px;
}

.stat-sent .stat-icon { background: #dcfce7; color: #16a34a; }
.stat-failed .stat-icon { background: #fef2f2; color: #ef4444; }
.stat-skipped .stat-icon { background: #fef9c3; color: #ca8a04; }
.stat-unique .stat-icon { background: #ede9fe; color: var(--nl-primary); }
.stat-fallback .stat-icon { background: #e0f2fe; color: #0284c7; }
.stat-last .stat-icon { background: #f1f5f9; color: #475569; }
.stat-opens .stat-icon { background: #fef3c7; color: #d97706; }
.stat-clicks .stat-icon { background: #dbeafe; color: #2563eb; }

/* Charts row */
.nl-charts-row {
    display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px;
}
@media (max-width: 960px) { .nl-charts-row { grid-template-columns: 1fr; } }

.chart-wrapper {
    position: relative; width: 100%; height: 260px;
}

.nl-card {
    background: var(--nl-card); border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid var(--nl-border);
}
.nl-card-title {
    font-size: 1rem; font-weight: 600; color: var(--nl-text); margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.nl-card-title .time-range {
    display: flex; gap: 4px;
}
.nl-card-title .time-range button {
    padding: 4px 12px; border-radius: 6px; border: 1px solid var(--nl-border);
    background: white; cursor: pointer; font-size: 12px; color: var(--nl-text-muted);
    transition: all 0.15s;
}
.nl-card-title .time-range button.active {
    background: var(--nl-primary); color: white; border-color: var(--nl-primary);
}

/* Tabs */
.nl-tabs {
    display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--nl-border);
}
.nl-tab {
    padding: 10px 24px; font-size: 14px; font-weight: 500; color: var(--nl-text-muted);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none;
}
.nl-tab:hover { color: var(--nl-primary); }
.nl-tab.active { color: var(--nl-primary); border-bottom-color: var(--nl-primary); font-weight: 600; }
.nl-tab-content { display: none; }
.nl-tab-content.active { display: block; }

/* Logs table */
.nl-logs-section { margin-bottom: 24px; }
.nl-filters {
    display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.nl-filters input, .nl-filters select {
    padding: 8px 12px; border: 1px solid var(--nl-border); border-radius: 8px;
    font-size: 13px; background: white;
}
.nl-filters .filter-btn {
    padding: 8px 20px; background: var(--nl-primary); color: white;
    border: none; border-radius: 8px; cursor: pointer; font-size: 13px;
    transition: background 0.15s;
}
.nl-filters .filter-btn:hover { background: var(--nl-primary-dark); }

.nl-table-wrap { overflow-x: auto; }
.nl-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.nl-table th {
    background: #f8fafc; color: var(--nl-text-muted); font-weight: 600;
    padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--nl-border);
    white-space: nowrap;
}
.nl-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--nl-border);
    color: var(--nl-text); vertical-align: middle;
}
.nl-table tr:hover { background: #f8fafc; }

.badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
}
.badge-sent { background: #dcfce7; color: #16a34a; }
.badge-failed { background: #fef2f2; color: #ef4444; }
.badge-skipped { background: #fef9c3; color: #ca8a04; }
.badge-click { background: #dbeafe; color: #2563eb; }
.badge-open { background: #fef3c7; color: #d97706; }

.nl-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; gap: 8px; flex-wrap: wrap;
}
.nl-pagination .page-info { color: var(--nl-text-muted); font-size: 13px; }
.nl-pagination .page-btns { display: flex; gap: 4px; }
.nl-pagination .page-btns button {
    padding: 6px 14px; border: 1px solid var(--nl-border); border-radius: 6px;
    background: white; cursor: pointer; font-size: 13px; transition: all 0.15s;
}
.nl-pagination .page-btns button:hover { background: var(--nl-primary); color: white; border-color: var(--nl-primary); }
.nl-pagination .page-btns button.active { background: var(--nl-primary); color: white; border-color: var(--nl-primary); }
.nl-pagination .page-btns button:disabled { opacity: 0.4; cursor: not-allowed; }

.nl-empty {
    text-align: center; padding: 60px 20px; color: var(--nl-text-muted);
}
.nl-empty .empty-icon { font-size: 48px; margin-bottom: 16px; }

.nl-loading {
    text-align: center; padding: 40px; color: var(--nl-text-muted);
}

/* Locale chart */
.locale-list { list-style: none; padding: 0; margin: 0; }
.locale-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.locale-list li:last-child { border-bottom: none; }
.locale-bar {
    height: 6px; border-radius: 3px; background: var(--nl-primary-light);
    margin-top: 4px; transition: width 0.5s;
}

/* Top URLs */
.top-url-list { list-style: none; padding: 0; margin: 0; }
.top-url-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid #f1f5f9; gap: 12px;
}
.top-url-list li:last-child { border-bottom: none; }
.top-url-text {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; color: var(--nl-text);
}
.top-url-count {
    font-weight: 600; font-size: 13px; color: var(--nl-primary); white-space: nowrap;
}
</style>
{% endblock %}

{% block body %}
<div class="nl-container">
    <!-- Back to Admin -->
    <div style="margin-bottom: 12px;">
        <a href="/jim19ud83/playground/dashboard" style="display:inline-flex;align-items:center;gap:6px;color:var(--nl-primary);text-decoration:none;font-size:14px;font-weight:500;">
            ← Back to Admin Dashboard
        </a>
    </div>

    <!-- Header -->
    <div class="nl-header">
        <div>
            <div class="nl-title">📧 Newsletter Dashboard</div>
            <div class="nl-subtitle">Track sent emails, delivery status, and engagement</div>
        </div>
        <div class="nl-campaign-selector">
            <label style="font-size:13px;color:var(--nl-text-muted);font-weight:500;">Campaign:</label>
            <select id="campaignSelect" onchange="switchCampaign(this.value)">
                {% if campaigns is empty %}
                    <option value="recommendations">recommendations</option>
                {% else %}
                    {% for c in campaigns %}
                        <option value="{{ c }}" {% if c == activeCampaign %}selected{% endif %}>{{ c }}</option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>
    </div>

    <!-- Stats Grid (delivery + engagement) -->
    <div class="nl-stats-grid" id="statsGrid">
        <div class="nl-stat-card stat-sent">
            <div class="stat-icon">✉️</div>
            <div class="stat-value" id="statSent">—</div>
            <div class="stat-label">Emails Sent</div>
        </div>
        <div class="nl-stat-card stat-unique">
            <div class="stat-icon">👤</div>
            <div class="stat-value" id="statUnique">—</div>
            <div class="stat-label">Unique Recipients</div>
        </div>
        <div class="nl-stat-card stat-opens">
            <div class="stat-icon">👁️</div>
            <div class="stat-value" id="statOpens">—</div>
            <div class="stat-label">Opens</div>
            <div class="stat-sub" id="statOpenRate"></div>
        </div>
        <div class="nl-stat-card stat-clicks">
            <div class="stat-icon">🔗</div>
            <div class="stat-value" id="statClicks">—</div>
            <div class="stat-label">Clicks</div>
            <div class="stat-sub" id="statClickRate"></div>
        </div>
        <div class="nl-stat-card stat-failed">
            <div class="stat-icon">❌</div>
            <div class="stat-value" id="statFailed">—</div>
            <div class="stat-label">Failed</div>
        </div>
        <div class="nl-stat-card stat-skipped">
            <div class="stat-icon">⏭️</div>
            <div class="stat-value" id="statSkipped">—</div>
            <div class="stat-label">Skipped</div>
        </div>
        <div class="nl-stat-card stat-fallback">
            <div class="stat-icon">🔄</div>
            <div class="stat-value" id="statFallback">—</div>
            <div class="stat-label">Recent Fallback</div>
        </div>
        <div class="nl-stat-card stat-last">
            <div class="stat-icon">🕐</div>
            <div class="stat-value" id="statLast" style="font-size:1rem;">—</div>
            <div class="stat-label">Last Sent</div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="nl-charts-row">
        <div class="nl-card">
            <div class="nl-card-title">
                <span>Sends &amp; Engagement Over Time</span>
                <div class="time-range">
                    <button onclick="loadChart(7)" id="btn7d">7d</button>
                    <button onclick="loadChart(30)" id="btn30d" class="active">30d</button>
                    <button onclick="loadChart(90)" id="btn90d">90d</button>
                </div>
            </div>
            <div class="chart-wrapper">
                <canvas id="dailyChart"></canvas>
            </div>
        </div>
        <div class="nl-card">
            <div class="nl-card-title">Locale Breakdown</div>
            <div id="localeBreakdown">
                <div class="nl-loading">Loading...</div>
            </div>
        </div>
    </div>

    <!-- Top Clicked URLs -->
    <div class="nl-card" style="margin-bottom:24px;">
        <div class="nl-card-title">Top Clicked Articles</div>
        <div id="topUrlsList">
            <div class="nl-loading">Loading...</div>
        </div>
    </div>

    <!-- Tabbed section: Send Log / Click & Open Events -->
    <div class="nl-card nl-logs-section">
        <div class="nl-tabs">
            <button class="nl-tab active" onclick="switchTab('sends')">📨 Send Log</button>
            <button class="nl-tab" onclick="switchTab('events')">📊 Click &amp; Open Events</button>
        </div>

        <!-- Send Log tab -->
        <div id="tab-sends" class="nl-tab-content active" style="padding-top:16px;">
            <div class="nl-card-title" style="margin-bottom:0;">
                <span></span>
                <span id="logCount" style="font-weight:400;font-size:13px;color:var(--nl-text-muted);"></span>
            </div>
            <div class="nl-filters">
                <select id="filterStatus">
                    <option value="">All statuses</option>
                    <option value="sent">✅ Sent</option>
                    <option value="failed">❌ Failed</option>
                    <option value="skipped">⏭ Skipped</option>
                </select>
                <input type="date" id="filterDateFrom" placeholder="From date">
                <input type="date" id="filterDateTo" placeholder="To date">
                <button class="filter-btn" onclick="loadLogs(1)">Filter</button>
            </div>
            <div class="nl-table-wrap">
                <table class="nl-table">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Recipient</th>
                            <th>Locale</th>
                            <th>Subject</th>
                            <th># Recs</th>
                            <th>Fallback</th>
                            <th>Error / Skip Reason</th>
                            <th>Sent At</th>
                        </tr>
                    </thead>
                    <tbody id="logsBody">
                        <tr><td colspan="8" class="nl-loading">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="nl-pagination">
                <div class="page-info" id="pageInfo"></div>
                <div class="page-btns" id="pageBtns"></div>
            </div>
        </div>

        <!-- Events tab -->
        <div id="tab-events" class="nl-tab-content" style="padding-top:16px;">
            <div class="nl-card-title" style="margin-bottom:0;">
                <span></span>
                <span id="eventCount" style="font-weight:400;font-size:13px;color:var(--nl-text-muted);"></span>
            </div>
            <div class="nl-filters">
                <select id="filterEventType">
                    <option value="">All events</option>
                    <option value="click">🔗 Clicks</option>
                    <option value="open">👁️ Opens</option>
                </select>
                <button class="filter-btn" onclick="loadEvents(1)">Filter</button>
            </div>
            <div class="nl-table-wrap">
                <table class="nl-table">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>User</th>
                            <th>Email</th>
                            <th>URL / Article</th>
                            <th>IP</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody id="eventsBody">
                        <tr><td colspan="6" class="nl-loading">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="nl-pagination">
                <div class="page-info" id="eventPageInfo"></div>
                <div class="page-btns" id="eventPageBtns"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
let currentCampaign = '{{ activeCampaign }}';
let currentPage = 1;
let currentEventPage = 1;
let dailyChart = null;
let currentDays = 30;
let totalSent = 0; // for calculating rates

// ─── Init ──────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
    loadStats();
    loadEventStats();
    loadChart(30);
    loadLocales();
    loadLogs(1);
    loadTopUrls();
});

function switchCampaign(c) {
    currentCampaign = c;
    loadStats();
    loadEventStats();
    loadChart(currentDays);
    loadLocales();
    loadLogs(1);
    loadTopUrls();
    history.replaceState(null, '', '?campaign=' + encodeURIComponent(c));
}

// ─── Tabs ──────────────────────────────────────────
function switchTab(tab) {
    document.querySelectorAll('.nl-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.nl-tab-content').forEach(t => t.classList.remove('active'));

    if (tab === 'events') {
        document.querySelectorAll('.nl-tab')[1].classList.add('active');
        document.getElementById('tab-events').classList.add('active');
        loadEvents(1);
    } else {
        document.querySelectorAll('.nl-tab')[0].classList.add('active');
        document.getElementById('tab-sends').classList.add('active');
    }
}

// ─── Delivery Stats ────────────────────────────────
function loadStats() {
    fetch('/jim19ud83/newsletters/api/stats?campaign=' + encodeURIComponent(currentCampaign))
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            const d = res.data;
            totalSent = Number(d.total_sent || 0);
            document.getElementById('statSent').textContent = totalSent.toLocaleString();
            document.getElementById('statFailed').textContent = Number(d.total_failed || 0).toLocaleString();
            document.getElementById('statSkipped').textContent = Number(d.total_skipped || 0).toLocaleString();
            document.getElementById('statUnique').textContent = Number(d.unique_recipients || 0).toLocaleString();
            document.getElementById('statFallback').textContent = Number(d.total_fallback || 0).toLocaleString();
            document.getElementById('statLast').textContent = d.last_sent ? formatDate(d.last_sent) : 'Never';
            // Recalculate rates if event stats are already loaded
            updateRates();
        })
        .catch(() => {
            ['statSent','statFailed','statSkipped','statUnique','statFallback'].forEach(id => {
                document.getElementById(id).textContent = '0';
            });
            document.getElementById('statLast').textContent = 'N/A';
        });
}

// ─── Engagement Stats ──────────────────────────────
let totalOpens = 0, totalClicks = 0, uniqueOpeners = 0, uniqueClickers = 0;

function loadEventStats() {
    fetch('/jim19ud83/newsletters/api/event-stats?campaign=' + encodeURIComponent(currentCampaign))
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            const d = res.data;
            totalOpens = Number(d.total_opens || 0);
            totalClicks = Number(d.total_clicks || 0);
            uniqueOpeners = Number(d.unique_openers || 0);
            uniqueClickers = Number(d.unique_clickers || 0);

            document.getElementById('statOpens').textContent = totalOpens.toLocaleString();
            document.getElementById('statClicks').textContent = totalClicks.toLocaleString();
            updateRates();
        })
        .catch(() => {
            document.getElementById('statOpens').textContent = '0';
            document.getElementById('statClicks').textContent = '0';
        });
}

function updateRates() {
    if (totalSent > 0) {
        const openRate = ((uniqueOpeners / totalSent) * 100).toFixed(1);
        const clickRate = ((uniqueClickers / totalSent) * 100).toFixed(1);
        document.getElementById('statOpenRate').textContent = uniqueOpeners + ' unique (' + openRate + '% rate)';
        document.getElementById('statClickRate').textContent = uniqueClickers + ' unique (' + clickRate + '% rate)';
    } else {
        document.getElementById('statOpenRate').textContent = '';
        document.getElementById('statClickRate').textContent = '';
    }
}

// ─── Chart (combined sends + engagement) ───────────
function loadChart(days) {
    currentDays = days;
    document.querySelectorAll('.time-range button').forEach(b => b.classList.remove('active'));
    document.getElementById('btn' + days + 'd').classList.add('active');

    // Fetch both sends and events data
    Promise.all([
        fetch('/jim19ud83/newsletters/api/daily?campaign=' + encodeURIComponent(currentCampaign) + '&days=' + days).then(r => r.json()),
        fetch('/jim19ud83/newsletters/api/daily-events?campaign=' + encodeURIComponent(currentCampaign) + '&days=' + days).then(r => r.json())
    ]).then(([sendsRes, eventsRes]) => {
        if (!sendsRes.success) return;
        const eventsData = eventsRes.success ? eventsRes.data : [];
        renderChart(sendsRes.data, eventsData);
    });
}

function renderChart(sendsData, eventsData) {
    const ctx = document.getElementById('dailyChart').getContext('2d');
    if (dailyChart) dailyChart.destroy();

    // Merge dates from both datasets
    const allDates = new Set();
    sendsData.forEach(d => allDates.add(d.date));
    eventsData.forEach(d => allDates.add(d.date));
    const labels = Array.from(allDates).sort();

    const sendsMap = {};
    sendsData.forEach(d => { sendsMap[d.date] = d; });
    const eventsMap = {};
    eventsData.forEach(d => { eventsMap[d.date] = d; });

    const sentArr = labels.map(d => parseInt((sendsMap[d] || {}).sent || 0));
    const failedArr = labels.map(d => parseInt((sendsMap[d] || {}).failed || 0));
    const opensArr = labels.map(d => parseInt((eventsMap[d] || {}).opens || 0));
    const clicksArr = labels.map(d => parseInt((eventsMap[d] || {}).clicks || 0));

    dailyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Sent',
                    data: sentArr,
                    backgroundColor: 'rgba(16, 185, 129, 0.7)',
                    borderColor: '#10b981',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'delivery',
                },
                {
                    label: 'Failed',
                    data: failedArr,
                    backgroundColor: 'rgba(239, 68, 68, 0.7)',
                    borderColor: '#ef4444',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'delivery',
                },
                {
                    label: 'Opens',
                    data: opensArr,
                    backgroundColor: 'rgba(245, 158, 11, 0.5)',
                    borderColor: '#f59e0b',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'engagement',
                },
                {
                    label: 'Clicks',
                    data: clicksArr,
                    backgroundColor: 'rgba(37, 99, 235, 0.6)',
                    borderColor: '#2563eb',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'engagement',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'top', labels: { usePointStyle: true, pointStyle: 'circle', padding: 16, font: { size: 12 } } },
                tooltip: {
                    backgroundColor: '#1e293b',
                    titleFont: { size: 13 },
                    bodyFont: { size: 12 },
                    padding: 12,
                    cornerRadius: 8,
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: { display: false },
                    ticks: { font: { size: 11 }, maxRotation: 45 }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    grid: { color: '#f1f5f9' },
                    ticks: { font: { size: 11 }, precision: 0 }
                }
            }
        }
    });
}

// ─── Locales ───────────────────────────────────────
function loadLocales() {
    fetch('/jim19ud83/newsletters/api/locales?campaign=' + encodeURIComponent(currentCampaign))
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            renderLocales(res.data);
        })
        .catch(() => {
            document.getElementById('localeBreakdown').innerHTML = '<div class="nl-empty">No data</div>';
        });
}

function renderLocales(data) {
    const el = document.getElementById('localeBreakdown');
    if (!data || data.length === 0) {
        el.innerHTML = '<div class="nl-empty" style="padding:20px"><div class="empty-icon">🌐</div>No locale data yet</div>';
        return;
    }
    const max = Math.max(...data.map(d => parseInt(d.count)));
    const localeNames = { ar: 'Arabic (ar)', en: 'English (en)', unknown: 'Unknown' };

    let html = '<ul class="locale-list">';
    data.forEach(d => {
        const pct = max > 0 ? (parseInt(d.count) / max * 100) : 0;
        const name = localeNames[d.locale] || d.locale;
        html += '<li><div style="flex:1"><div style="display:flex;justify-content:space-between;font-size:13px;"><span style="font-weight:500">' + name + '</span><span style="color:var(--nl-text-muted)">' + Number(d.count).toLocaleString() + '</span></div><div class="locale-bar" style="width:' + pct + '%"></div></div></li>';
    });
    html += '</ul>';
    el.innerHTML = html;
}

// ─── Top URLs ──────────────────────────────────────
function loadTopUrls() {
    fetch('/jim19ud83/newsletters/api/top-urls?campaign=' + encodeURIComponent(currentCampaign))
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            renderTopUrls(res.data);
        })
        .catch(() => {
            document.getElementById('topUrlsList').innerHTML = '<div class="nl-empty" style="padding:20px">No data</div>';
        });
}

function renderTopUrls(data) {
    const el = document.getElementById('topUrlsList');
    if (!data || data.length === 0) {
        el.innerHTML = '<div class="nl-empty" style="padding:20px"><div class="empty-icon">🔗</div>No clicks recorded yet.<br><small>Click data will appear after the next send.</small></div>';
        return;
    }
    let html = '<ul class="top-url-list">';
    data.forEach(d => {
        // Extract title from URL (after /show/ slug)
        let displayUrl = d.url || '';
        const showMatch = displayUrl.match(/\/show\/([^?]+)/);
        const displayText = showMatch ? decodeURIComponent(showMatch[1].replace(/-/g, ' ')) : displayUrl;

        html += '<li>';
        html += '<a href="' + escapeHtml(d.url) + '" target="_blank" class="top-url-text" title="' + escapeHtml(d.url) + '">' + escapeHtml(displayText) + '</a>';
        html += '<span class="top-url-count">' + d.clicks + ' clicks (' + d.unique_users + ' users)</span>';
        html += '</li>';
    });
    html += '</ul>';
    el.innerHTML = html;
}

// ─── Send Logs Table ───────────────────────────────
function loadLogs(page) {
    currentPage = page;
    const status = document.getElementById('filterStatus').value;
    const dateFrom = document.getElementById('filterDateFrom').value;
    const dateTo = document.getElementById('filterDateTo').value;

    let url = '/jim19ud83/newsletters/api/logs?campaign=' + encodeURIComponent(currentCampaign) +
              '&page=' + page + '&per_page=50';
    if (status) url += '&status=' + status;
    if (dateFrom) url += '&date_from=' + dateFrom;
    if (dateTo) url += '&date_to=' + dateTo;

    fetch(url)
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            renderLogs(res.data, res.total, res.page, res.total_pages);
        })
        .catch(() => {
            document.getElementById('logsBody').innerHTML = '<tr><td colspan="8" class="nl-loading">Error loading logs</td></tr>';
        });
}

function renderLogs(logs, total, page, totalPages) {
    const tbody = document.getElementById('logsBody');
    document.getElementById('logCount').textContent = total + ' total entries';

    if (logs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="nl-empty" style="padding:40px"><div class="empty-icon">📭</div>No log entries found</td></tr>';
        document.getElementById('pageInfo').textContent = '';
        document.getElementById('pageBtns').innerHTML = '';
        return;
    }

    let html = '';
    logs.forEach(function(log) {
        const statusClass = log.status === 'sent' ? 'badge-sent' : (log.status === 'failed' ? 'badge-failed' : 'badge-skipped');
        const statusLabel = log.status.charAt(0).toUpperCase() + log.status.slice(1);
        const errorOrSkip = log.error_message || log.skip_reason || '—';
        const isFallback = log.is_recent_fallback ? '✅' : '—';

        html += '<tr>';
        html += '<td><span class="badge ' + statusClass + '">' + statusLabel + '</span></td>';
        html += '<td title="' + escapeHtml(log.recipient_email) + '"><div style="font-weight:500">' + escapeHtml(log.recipient_name || '') + '</div><div style="font-size:11px;color:var(--nl-text-muted)">' + escapeHtml(log.recipient_email) + '</div></td>';
        html += '<td>' + (log.locale || '—') + '</td>';
        html += '<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escapeHtml(log.subject || '') + '">' + escapeHtml(log.subject || '—') + '</td>';
        html += '<td style="text-align:center">' + (log.recommendation_count != null ? log.recommendation_count : '—') + '</td>';
        html += '<td style="text-align:center">' + isFallback + '</td>';
        html += '<td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--nl-text-muted)" title="' + escapeHtml(errorOrSkip) + '">' + escapeHtml(errorOrSkip) + '</td>';
        html += '<td style="white-space:nowrap;font-size:12px">' + formatDate(log.sent_at) + '</td>';
        html += '</tr>';
    });
    tbody.innerHTML = html;

    const from = (page - 1) * 50 + 1;
    const to = Math.min(page * 50, total);
    document.getElementById('pageInfo').textContent = 'Showing ' + from + '–' + to + ' of ' + total;
    renderPaginationButtons('pageBtns', page, totalPages, 'loadLogs');
}

// ─── Events Table ──────────────────────────────────
function loadEvents(page) {
    currentEventPage = page;
    const eventType = document.getElementById('filterEventType').value;

    let url = '/jim19ud83/newsletters/api/events?campaign=' + encodeURIComponent(currentCampaign) +
              '&page=' + page + '&per_page=50';
    if (eventType) url += '&event_type=' + eventType;

    fetch(url)
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            renderEvents(res.data, res.total, res.page, res.total_pages);
        })
        .catch(() => {
            document.getElementById('eventsBody').innerHTML = '<tr><td colspan="6" class="nl-loading">Error loading events</td></tr>';
        });
}

function renderEvents(events, total, page, totalPages) {
    const tbody = document.getElementById('eventsBody');
    document.getElementById('eventCount').textContent = total + ' total events';

    if (events.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="nl-empty" style="padding:40px"><div class="empty-icon">📊</div>No events recorded yet.<br><small>Click and open data will appear after the next send.</small></td></tr>';
        document.getElementById('eventPageInfo').textContent = '';
        document.getElementById('eventPageBtns').innerHTML = '';
        return;
    }

    let html = '';
    events.forEach(function(ev) {
        const typeClass = ev.event_type === 'click' ? 'badge-click' : 'badge-open';
        const typeLabel = ev.event_type === 'click' ? '🔗 Click' : '👁️ Open';

        // Extract article title from URL
        let urlDisplay = '—';
        if (ev.url) {
            const showMatch = ev.url.match(/\/show\/([^?]+)/);
            urlDisplay = showMatch ? decodeURIComponent(showMatch[1].replace(/-/g, ' ').substring(0, 60)) : ev.url.substring(0, 60);
        }

        html += '<tr>';
        html += '<td><span class="badge ' + typeClass + '">' + typeLabel + '</span></td>';
        html += '<td>' + escapeHtml(ev.user_name || ('User #' + ev.user_id)) + '</td>';
        html += '<td style="font-size:12px">' + escapeHtml(ev.email) + '</td>';
        html += '<td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px" title="' + escapeHtml(ev.url || '') + '">' + escapeHtml(urlDisplay) + '</td>';
        html += '<td style="font-size:11px;color:var(--nl-text-muted)">' + escapeHtml(ev.ip_address || '—') + '</td>';
        html += '<td style="white-space:nowrap;font-size:12px">' + formatDate(ev.created_at) + '</td>';
        html += '</tr>';
    });
    tbody.innerHTML = html;

    const from = (page - 1) * 50 + 1;
    const to = Math.min(page * 50, total);
    document.getElementById('eventPageInfo').textContent = 'Showing ' + from + '–' + to + ' of ' + total;
    renderPaginationButtons('eventPageBtns', page, totalPages, 'loadEvents');
}

// ─── Shared Pagination ─────────────────────────────
function renderPaginationButtons(containerId, page, totalPages, loadFn) {
    let btns = '';
    btns += '<button onclick="' + loadFn + '(1)" ' + (page <= 1 ? 'disabled' : '') + '>&laquo;</button>';
    btns += '<button onclick="' + loadFn + '(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>&lsaquo;</button>';

    const startPage = Math.max(1, page - 2);
    const endPage = Math.min(totalPages, page + 2);
    for (let p = startPage; p <= endPage; p++) {
        btns += '<button onclick="' + loadFn + '(' + p + ')" class="' + (p === page ? 'active' : '') + '">' + p + '</button>';
    }

    btns += '<button onclick="' + loadFn + '(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>&rsaquo;</button>';
    btns += '<button onclick="' + loadFn + '(' + totalPages + ')" ' + (page >= totalPages ? 'disabled' : '') + '>&raquo;</button>';
    document.getElementById(containerId).innerHTML = btns;
}

// ─── Helpers ───────────────────────────────────────
function formatDate(str) {
    if (!str) return '—';
    const d = new Date(str);
    if (isNaN(d)) return str;
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' ' +
           d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
}

function escapeHtml(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}
</script>
{% endblock %}