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

{% block title %}Newsletter — Shamra Academia Admin{% endblock %}

{% block body %}
<div id="newsletter-app">
    <!-- Top Nav -->
    <div class="nl-header">
        <div class="nl-header-inner">
            <h1 class="nl-title">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                Newsletter
            </h1>
            <div class="nl-tabs">
                <button class="nl-tab active" data-tab="campaigns" onclick="switchTab('campaigns')">Campaigns</button>
                <button class="nl-tab" data-tab="lists" onclick="switchTab('lists')">Lists</button>
                <button class="nl-tab" data-tab="analytics" onclick="switchTab('analytics')">Analytics</button>
                <button class="nl-tab" data-tab="optouts" onclick="switchTab('optouts')">Opt-outs</button>
            </div>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="nl-stats-bar" id="stats-bar">
        <div class="nl-stat-card">
            <div class="nl-stat-label">Total Sent</div>
            <div class="nl-stat-value" id="stat-sent">—</div>
        </div>
        <div class="nl-stat-card">
            <div class="nl-stat-label">Opens</div>
            <div class="nl-stat-value" id="stat-opens">—</div>
        </div>
        <div class="nl-stat-card">
            <div class="nl-stat-label">Clicks</div>
            <div class="nl-stat-value" id="stat-clicks">—</div>
        </div>
        <div class="nl-stat-card">
            <div class="nl-stat-label">Opt-outs</div>
            <div class="nl-stat-value" id="stat-optouts">—</div>
        </div>
        <div class="nl-stat-card">
            <div class="nl-stat-label">SES Today</div>
            <div class="nl-stat-value" id="stat-ses">—</div>
        </div>
    </div>

    <!-- Tab Content -->
    <div class="nl-content">
        <!-- Campaigns Tab -->
        <div class="nl-tab-pane active" id="tab-campaigns">
            <div class="nl-toolbar">
                <h2>Campaigns</h2>
                <button class="nl-btn nl-btn-primary" onclick="showCreateCampaign()">
                    + New Campaign
                </button>
            </div>
            <div class="nl-table-wrap">
                <table class="nl-table" id="campaigns-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Subject</th>
                            <th>List</th>
                            <th>Status</th>
                            <th>Sent</th>
                            <th>Opens</th>
                            <th>Clicks</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="campaigns-tbody"></tbody>
                </table>
                <div class="nl-empty" id="campaigns-empty" style="display:none;">
                    <p>No campaigns yet. Create your first campaign to get started.</p>
                </div>
            </div>
        </div>

        <!-- Lists Tab -->
        <div class="nl-tab-pane" id="tab-lists">
            <div class="nl-toolbar">
                <h2>Email Lists</h2>
                <button class="nl-btn nl-btn-primary" onclick="showCreateList()">
                    + New List
                </button>
            </div>
            <div class="nl-table-wrap">
                <table class="nl-table" id="lists-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Members</th>
                            <th>Filters</th>
                            <th>Status</th>
                            <th>Last Refreshed</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="lists-tbody"></tbody>
                </table>
                <div class="nl-empty" id="lists-empty" style="display:none;">
                    <p>No lists yet. Create a list to target specific user segments.</p>
                </div>
            </div>
        </div>

        <!-- Analytics Tab -->
        <div class="nl-tab-pane" id="tab-analytics">
            <div class="nl-toolbar">
                <h2>Campaign Analytics</h2>
                <select id="analytics-campaign-select" class="nl-select" onchange="loadCampaignAnalytics()">
                    <option value="">Select a campaign…</option>
                </select>
            </div>
            <div id="analytics-content">
                <div class="nl-empty">
                    <p>Select a campaign to view detailed analytics.</p>
                </div>
            </div>
        </div>

        <!-- Opt-outs Tab -->
        <div class="nl-tab-pane" id="tab-optouts">
            <div class="nl-toolbar">
                <h2>Opt-out List</h2>
            </div>
            <div class="nl-table-wrap">
                <table class="nl-table" id="optouts-table">
                    <thead>
                        <tr>
                            <th>Email</th>
                            <th>Campaign</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody id="optouts-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Create List Modal -->
    <div class="nl-modal-overlay" id="modal-create-list" style="display:none;">
        <div class="nl-modal">
            <div class="nl-modal-header">
                <h3>Create Email List</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-create-list')">&times;</button>
            </div>
            <div class="nl-modal-body">
                <div class="nl-form-group">
                    <label>List Name *</label>
                    <input type="text" id="list-name" class="nl-input" placeholder="e.g. Syrian Researchers 2025">
                </div>
                <div class="nl-form-group">
                    <label>Description</label>
                    <textarea id="list-description" class="nl-input nl-textarea" placeholder="Optional description…"></textarea>
                </div>
                <h4 class="nl-section-title">Filters</h4>
                <div class="nl-filter-grid">
                    <div class="nl-form-group" style="grid-column:1/-1">
                        <label>Countries <small style="color:#6b7280;font-weight:400">(search & select multiple)</small></label>
                        <div class="nl-multiselect" id="country-multiselect">
                            <div class="nl-ms-tags" id="country-tags"></div>
                            <input type="text" class="nl-ms-input" id="country-search" placeholder="Type to search countries…" autocomplete="off">
                            <div class="nl-ms-dropdown" id="country-dropdown"></div>
                        </div>
                    </div>
                    <div class="nl-form-group">
                        <label>Locale</label>
                        <select id="filter-locale" class="nl-select">
                            <option value="">Any locale</option>
                            <option value="ar">Arabic (ar)</option>
                            <option value="en">English (en)</option>
                        </select>
                    </div>
                    <div class="nl-form-group">
                        <label>Registered After</label>
                        <input type="date" id="filter-reg-after" class="nl-input">
                    </div>
                    <div class="nl-form-group">
                        <label>Registered Before</label>
                        <input type="date" id="filter-reg-before" class="nl-input">
                    </div>
                    <div class="nl-form-group">
                        <label>Last Login After</label>
                        <input type="date" id="filter-login-after" class="nl-input">
                    </div>
                    <div class="nl-form-group">
                        <label>Last Login Before</label>
                        <input type="date" id="filter-login-before" class="nl-input">
                    </div>
                    <div class="nl-form-group">
                        <label>Study Degree</label>
                        <select id="filter-degree" class="nl-select">
                            <option value="">Any degree</option>
                        </select>
                    </div>
                    <div class="nl-form-group nl-checkbox-group">
                        <label><input type="checkbox" id="filter-stripe"> Has Stripe Subscription</label>
                    </div>
                    <div class="nl-form-group nl-checkbox-group">
                        <label><input type="checkbox" id="filter-academic"> Has Academic Subscription</label>
                    </div>
                </div>
                <div class="nl-preview-count">
                    <button class="nl-btn nl-btn-secondary" onclick="previewListCount()">Preview Count</button>
                    <span id="preview-count-result"></span>
                </div>
            </div>
            <div class="nl-modal-footer">
                <button class="nl-btn nl-btn-secondary" onclick="closeModal('modal-create-list')">Cancel</button>
                <button class="nl-btn nl-btn-primary" onclick="createList()">Create List</button>
            </div>
        </div>
    </div>

    <!-- Create Campaign Modal -->
    <div class="nl-modal-overlay" id="modal-create-campaign" style="display:none;">
        <div class="nl-modal nl-modal-lg">
            <div class="nl-modal-header">
                <h3 id="campaign-modal-title">Create Campaign</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-create-campaign')">&times;</button>
            </div>
            <div class="nl-modal-body">
                <div class="nl-form-row">
                    <div class="nl-form-group">
                        <label>Campaign Name *</label>
                        <input type="text" id="campaign-name" class="nl-input" placeholder="e.g. March 2026 Update">
                    </div>
                    <div class="nl-form-group">
                        <label>Email List</label>
                        <select id="campaign-list" class="nl-select">
                            <option value="">Select a list…</option>
                        </select>
                    </div>
                </div>
                <div class="nl-form-row">
                    <div class="nl-form-group">
                        <label>Subject Line *</label>
                        <input type="text" id="campaign-subject" class="nl-input" placeholder="Check out new features on Shamra Academia!">
                    </div>
                </div>
                <div class="nl-form-row">
                    <div class="nl-form-group">
                        <label>From Name</label>
                        <input type="text" id="campaign-from-name" class="nl-input" value="Shamra Academia">
                    </div>
                    <div class="nl-form-group">
                        <label>From Email</label>
                        <input type="email" id="campaign-from-email" class="nl-input" placeholder="noreply@shamra-academia.com">
                    </div>
                </div>
                <div class="nl-form-group">
                    <label>HTML Body *</label>
                    <div class="nl-placeholders-hint">
                        Placeholders: <code>{{ '{{first_name}}' }}</code> <code>{{ '{{email}}' }}</code> <code>{{ '{{unsubscribe_url}}' }}</code> <code>{{ '{{tracking_pixel}}' }}</code>
                    </div>
                    <textarea id="campaign-html" class="nl-input nl-textarea nl-code" rows="16" placeholder="Paste your HTML email template here…"></textarea>
                </div>
                <div class="nl-form-group">
                    <label>Plain Text Body (optional)</label>
                    <textarea id="campaign-text" class="nl-input nl-textarea" rows="4" placeholder="Plain text fallback…"></textarea>
                </div>
            </div>
            <div class="nl-modal-footer">
                <button class="nl-btn nl-btn-secondary" onclick="closeModal('modal-create-campaign')">Cancel</button>
                <button class="nl-btn nl-btn-primary" id="campaign-save-btn" onclick="saveCampaign()">Save Campaign</button>
            </div>
        </div>
    </div>

    <!-- View List Members Modal -->
    <div class="nl-modal-overlay" id="modal-view-members" style="display:none;">
        <div class="nl-modal nl-modal-lg">
            <div class="nl-modal-header">
                <h3 id="members-modal-title">List Members</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-view-members')">&times;</button>
            </div>
            <div class="nl-modal-body">
                <table class="nl-table">
                    <thead>
                        <tr><th>Email</th><th>First Name</th><th>Last Name</th><th>Added</th></tr>
                    </thead>
                    <tbody id="members-tbody"></tbody>
                </table>
                <div id="members-pagination" class="nl-pagination"></div>
            </div>
        </div>
    </div>

    <!-- Test Send Modal -->
    <div class="nl-modal-overlay" id="modal-test-send" style="display:none;">
        <div class="nl-modal">
            <div class="nl-modal-header">
                <h3>Send Test Email</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-test-send')">&times;</button>
            </div>
            <div class="nl-modal-body">
                <div class="nl-form-group">
                    <label>Test Email Addresses (one per line, max 10)</label>
                    <textarea id="test-emails" class="nl-input nl-textarea" rows="4" placeholder="test@example.com"></textarea>
                </div>
                <input type="hidden" id="test-campaign-id">
            </div>
            <div class="nl-modal-footer">
                <button class="nl-btn nl-btn-secondary" onclick="closeModal('modal-test-send')">Cancel</button>
                <button class="nl-btn nl-btn-primary" onclick="sendTestEmail()">Send Test</button>
            </div>
        </div>
    </div>

    <!-- Campaign Detail / Analytics Modal -->
    <div class="nl-modal-overlay" id="modal-campaign-detail" style="display:none;">
        <div class="nl-modal nl-modal-xl">
            <div class="nl-modal-header">
                <h3 id="detail-modal-title">Campaign Details</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-campaign-detail')">&times;</button>
            </div>
            <div class="nl-modal-body" id="detail-modal-body">
            </div>
        </div>
    </div>

    <!-- Email Preview Modal -->
    <div class="nl-modal-overlay" id="modal-preview" style="display:none;">
        <div class="nl-modal nl-modal-xl">
            <div class="nl-modal-header">
                <h3 id="preview-modal-title">Email Preview</h3>
                <button class="nl-modal-close" onclick="closeModal('modal-preview')">&times;</button>
            </div>
            <div class="nl-modal-body" style="padding:0;">
                <iframe id="preview-iframe" style="width:100%;height:70vh;border:none;border-radius:0 0 16px 16px;"></iframe>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --nl-primary: #7c3aed;
    --nl-primary-hover: #6d28d9;
    --nl-bg: #f9fafb;
    --nl-card: #ffffff;
    --nl-border: #e5e7eb;
    --nl-text: #1f2937;
    --nl-text-secondary: #6b7280;
    --nl-success: #10b981;
    --nl-warning: #f59e0b;
    --nl-danger: #ef4444;
    --nl-info: #3b82f6;
}

/* Reset for admin page */
#newsletter-app { max-width: 1400px; margin: 0 auto; padding: 0 24px 48px; }

/* Header */
.nl-header { background: var(--nl-card); border-bottom: 1px solid var(--nl-border); margin: 0 -24px; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
.nl-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.nl-title { font-size: 20px; font-weight: 700; color: var(--nl-text); display: flex; align-items: center; gap: 8px; }
.nl-title svg { color: var(--nl-primary); }
.nl-tabs { display: flex; gap: 4px; }
.nl-tab { padding: 8px 16px; border: none; background: none; font-size: 14px; font-weight: 500; color: var(--nl-text-secondary); cursor: pointer; border-radius: 8px; transition: all 0.15s; }
.nl-tab:hover { background: #f3f4f6; color: var(--nl-text); }
.nl-tab.active { background: var(--nl-primary); color: #fff; }

/* Stats Bar */
.nl-stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 24px 0; }
.nl-stat-card { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: 12px; padding: 20px; }
.nl-stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nl-text-secondary); margin-bottom: 4px; }
.nl-stat-value { font-size: 28px; font-weight: 700; color: var(--nl-text); }

/* Content */
.nl-content { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: 12px; overflow: hidden; }
.nl-tab-pane { display: none; padding: 24px; }
.nl-tab-pane.active { display: block; }
.nl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.nl-toolbar h2 { font-size: 18px; font-weight: 600; color: var(--nl-text); }

/* Table */
.nl-table-wrap { overflow-x: auto; }
.nl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nl-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--nl-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--nl-border); }
.nl-table td { padding: 12px; border-bottom: 1px solid var(--nl-border); color: var(--nl-text); }
.nl-table tr:hover td { background: #f9fafb; }
.nl-empty { padding: 48px 24px; text-align: center; color: var(--nl-text-secondary); }

/* Buttons */
.nl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.nl-btn-primary { background: var(--nl-primary); color: #fff; }
.nl-btn-primary:hover { background: var(--nl-primary-hover); }
.nl-btn-secondary { background: #f3f4f6; color: var(--nl-text); }
.nl-btn-secondary:hover { background: #e5e7eb; }
.nl-btn-danger { background: var(--nl-danger); color: #fff; }
.nl-btn-danger:hover { background: #dc2626; }
.nl-btn-success { background: var(--nl-success); color: #fff; }
.nl-btn-success:hover { background: #059669; }
.nl-btn-sm { padding: 5px 10px; font-size: 13px; }
.nl-btn-group { display: flex; gap: 6px; }

/* Badges */
.nl-badge { display: inline-block; padding: 3px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.nl-badge-draft { background: #f3f4f6; color: var(--nl-text-secondary); }
.nl-badge-sending { background: #fef3c7; color: #92400e; }
.nl-badge-sent { background: #d1fae5; color: #065f46; }
.nl-badge-active { background: #d1fae5; color: #065f46; }
.nl-badge-building { background: #dbeafe; color: #1e40af; }
.nl-badge-paused { background: #fef3c7; color: #92400e; }

/* Forms */
.nl-input { width: 100%; padding: 8px 12px; border: 1px solid var(--nl-border); border-radius: 8px; font-size: 14px; color: var(--nl-text); transition: border-color 0.15s; font-family: inherit; }
.nl-input:focus { outline: none; border-color: var(--nl-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.nl-textarea { min-height: 80px; resize: vertical; }
.nl-code { font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; line-height: 1.6; }
.nl-select { width: 100%; padding: 8px 12px; border: 1px solid var(--nl-border); border-radius: 8px; font-size: 14px; color: var(--nl-text); background: #fff; cursor: pointer; }
.nl-form-group { margin-bottom: 16px; }
.nl-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--nl-text); margin-bottom: 4px; }
.nl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nl-checkbox-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nl-section-title { font-size: 14px; font-weight: 600; color: var(--nl-primary); margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--nl-border); }
.nl-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nl-preview-count { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.nl-preview-count span { font-weight: 600; color: var(--nl-primary); }
.nl-placeholders-hint { font-size: 12px; color: var(--nl-text-secondary); margin-bottom: 8px; }
.nl-placeholders-hint code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 11px; }

/* Modal */
.nl-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.nl-modal { background: var(--nl-card); border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.nl-modal-lg { max-width: 780px; }
.nl-modal-xl { max-width: 960px; }
.nl-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--nl-border); }
.nl-modal-header h3 { font-size: 18px; font-weight: 600; }
.nl-modal-close { width: 32px; height: 32px; border: none; background: #f3f4f6; border-radius: 8px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nl-modal-body { padding: 24px; }
.nl-modal-footer { padding: 16px 24px; border-top: 1px solid var(--nl-border); display: flex; justify-content: flex-end; gap: 8px; }

/* Analytics */
.nl-analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.nl-analytics-card { background: #f9fafb; border-radius: 10px; padding: 16px; text-align: center; }
.nl-analytics-card .nl-stat-value { font-size: 24px; }
.nl-top-urls { margin-top: 24px; }
.nl-top-urls h4 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.nl-url-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nl-url-bar .url-text { flex: 1; font-size: 12px; color: var(--nl-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-url-bar .url-count { font-weight: 600; font-size: 13px; min-width: 40px; text-align: right; }
.nl-url-bar .url-bar-fill { height: 6px; background: var(--nl-primary); border-radius: 3px; flex-shrink: 0; }

/* Pagination */
.nl-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 16px; }
.nl-pagination button { padding: 4px 10px; border: 1px solid var(--nl-border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
.nl-pagination button.active { background: var(--nl-primary); color: #fff; border-color: var(--nl-primary); }

/* Toast */
.nl-toast { position: fixed; bottom: 24px; right: 24px; background: var(--nl-text); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 1000; opacity: 0; transform: translateY(20px); transition: all 0.3s; }
.nl-toast.show { opacity: 1; transform: translateY(0); }
.nl-toast.error { background: var(--nl-danger); }
.nl-toast.success { background: var(--nl-success); }

/* Multi-select */
.nl-multiselect { position: relative; border: 1px solid var(--nl-border); border-radius: 8px; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: #fff; cursor: text; }
.nl-multiselect:focus-within { border-color: var(--nl-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.nl-ms-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.nl-ms-tag { display: inline-flex; align-items: center; gap: 4px; background: #ede9fe; color: var(--nl-primary); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.nl-ms-tag button { background: none; border: none; color: var(--nl-primary); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.nl-ms-tag button:hover { color: var(--nl-danger); }
.nl-ms-input { border: none; outline: none; font-size: 14px; flex: 1; min-width: 120px; padding: 4px 0; background: transparent; }
.nl-ms-dropdown { position: absolute; top: 100%; left: -1px; right: -1px; background: #fff; border: 1px solid var(--nl-border); border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 20; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.nl-ms-dropdown.open { display: block; }
.nl-ms-option { padding: 8px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.nl-ms-option:hover { background: #f3f4f6; }
.nl-ms-option.selected { background: #ede9fe; color: var(--nl-primary); }
.nl-ms-option .check { width: 16px; }
.nl-ms-no-results { padding: 12px; text-align: center; font-size: 13px; color: var(--nl-text-secondary); }

/* Responsive */
@media (max-width: 768px) {
    .nl-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .nl-form-row, .nl-filter-grid { grid-template-columns: 1fr; }
    .nl-analytics-grid { grid-template-columns: repeat(2, 1fr); }
    .nl-header-inner { flex-direction: column; gap: 12px; }
}
</style>

<div class="nl-toast" id="nl-toast"></div>

<script>
const BASE = '/jim19ud83/newsletter/api';
let editingCampaignId = null;
let allCountries = [];
let selectedCountries = [];

function initCountryMultiselect() {
    const searchInput = document.getElementById('country-search');
    const dropdown = document.getElementById('country-dropdown');

    searchInput.addEventListener('focus', () => { renderCountryDropdown(''); dropdown.classList.add('open'); });
    searchInput.addEventListener('input', () => { renderCountryDropdown(searchInput.value); dropdown.classList.add('open'); });
    document.addEventListener('click', (e) => {
        if (!document.getElementById('country-multiselect').contains(e.target)) {
            dropdown.classList.remove('open');
        }
    });
}

function renderCountryDropdown(query) {
    const dropdown = document.getElementById('country-dropdown');
    const q = query.toLowerCase().trim();
    const filtered = q ? allCountries.filter(c => c.toLowerCase().includes(q)) : allCountries;

    if (!filtered.length) {
        dropdown.innerHTML = '<div class="nl-ms-no-results">No countries found</div>';
        return;
    }

    dropdown.innerHTML = filtered.map(c => {
        const sel = selectedCountries.includes(c);
        return `<div class="nl-ms-option ${sel ? 'selected' : ''}" onclick="toggleCountry('${esc(c)}')">
            <span class="check">${sel ? '✓' : ''}</span>${esc(c)}
        </div>`;
    }).join('');
}

function toggleCountry(country) {
    const idx = selectedCountries.indexOf(country);
    if (idx === -1) selectedCountries.push(country);
    else selectedCountries.splice(idx, 1);
    renderCountryTags();
    renderCountryDropdown(document.getElementById('country-search').value);
}

function renderCountryTags() {
    const container = document.getElementById('country-tags');
    container.innerHTML = selectedCountries.map(c =>
        `<span class="nl-ms-tag">${esc(c)}<button onclick="toggleCountry('${esc(c)}')">&times;</button></span>`
    ).join('');
}

// ─── Utilities ───────────────────────────────────────────────────

function toast(msg, type = 'info') {
    const el = document.getElementById('nl-toast');
    el.textContent = msg;
    el.className = 'nl-toast show ' + (type === 'error' ? 'error' : type === 'success' ? 'success' : '');
    setTimeout(() => el.className = 'nl-toast', 3000);
}

async function api(path, opts = {}) {
    const url = BASE + path;
    const defaultOpts = { headers: { 'Content-Type': 'application/json' } };
    const res = await fetch(url, { ...defaultOpts, ...opts });
    const json = await res.json();
    if (!json.success) throw new Error(json.error || 'Request failed');
    return json;
}

function badge(status) {
    const cls = {
        draft: 'nl-badge-draft', sending: 'nl-badge-sending', sent: 'nl-badge-sent',
        active: 'nl-badge-active', building: 'nl-badge-building', paused: 'nl-badge-paused',
    };
    return `<span class="nl-badge ${cls[status] || 'nl-badge-draft'}">${status}</span>`;
}

function num(n) { return (n || 0).toLocaleString(); }
function pct(val) { return (val || 0).toFixed(1) + '%'; }

function closeModal(id) { document.getElementById(id).style.display = 'none'; }
function openModal(id) { document.getElementById(id).style.display = 'flex'; }

function esc(str) {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// ─── Tabs ────────────────────────────────────────────────────────

function switchTab(tab) {
    document.querySelectorAll('.nl-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
    document.querySelectorAll('.nl-tab-pane').forEach(p => p.classList.toggle('active', p.id === 'tab-' + tab));

    if (tab === 'campaigns') loadCampaigns();
    if (tab === 'lists') loadLists();
    if (tab === 'analytics') loadAnalyticsCampaignList();
    if (tab === 'optouts') loadOptOuts();
}

// ─── Stats ───────────────────────────────────────────────────────

async function loadStats() {
    try {
        const { data } = await api('/stats');
        document.getElementById('stat-sent').textContent = num(data.campaigns.total_sent);
        document.getElementById('stat-opens').textContent = num(data.campaigns.total_opens);
        document.getElementById('stat-clicks').textContent = num(data.campaigns.total_clicks);
        document.getElementById('stat-optouts').textContent = num(data.optOuts);
        document.getElementById('stat-ses').textContent = num(data.ses.sentLast24Hours) + ' / ' + num(data.ses.max24HourSend);
    } catch (e) {
        console.error('Failed to load stats', e);
    }
}

// ─── Lists ───────────────────────────────────────────────────────

async function loadLists() {
    try {
        const { data } = await api('/lists');
        const tbody = document.getElementById('lists-tbody');
        const empty = document.getElementById('lists-empty');

        if (!data.length) {
            tbody.innerHTML = '';
            empty.style.display = 'block';
            return;
        }
        empty.style.display = 'none';

        tbody.innerHTML = data.map(l => `
            <tr>
                <td><strong>${esc(l.name)}</strong><br><small style="color:#6b7280">${esc(l.description || '')}</small></td>
                <td><strong>${num(l.memberCount)}</strong></td>
                <td><code style="font-size:11px">${esc(JSON.stringify(l.filters || {}))}</code></td>
                <td>${badge(l.status)}</td>
                <td>${l.lastRefreshedAt || '—'}</td>
                <td>
                    <div class="nl-btn-group">
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="viewListMembers(${l.id}, '${esc(l.name)}')">Members</button>
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="refreshList(${l.id})">Refresh</button>
                        <button class="nl-btn nl-btn-sm nl-btn-danger" onclick="deleteList(${l.id})">Delete</button>
                    </div>
                </td>
            </tr>
        `).join('');
    } catch (e) {
        toast('Failed to load lists: ' + e.message, 'error');
    }
}

async function loadFilterOptions() {
    try {
        const { data } = await api('/filters');
        allCountries = data.countries || [];
        initCountryMultiselect();
        const degreeSelect = document.getElementById('filter-degree');
        data.study_degrees.forEach(d => {
            const opt = document.createElement('option');
            opt.value = d;
            opt.textContent = d;
            degreeSelect.appendChild(opt);
        });
    } catch (e) {
        console.error('Failed to load filters', e);
    }
}

function getFilters() {
    const f = {};
    const countries = selectedCountries.slice();
    const locale = document.getElementById('filter-locale').value;
    const regAfter = document.getElementById('filter-reg-after').value;
    const regBefore = document.getElementById('filter-reg-before').value;
    const loginAfter = document.getElementById('filter-login-after').value;
    const loginBefore = document.getElementById('filter-login-before').value;
    const degree = document.getElementById('filter-degree').value;
    const stripe = document.getElementById('filter-stripe').checked;
    const academic = document.getElementById('filter-academic').checked;

    if (countries.length === 1) f.country = countries[0];
    else if (countries.length > 1) f.countries = countries;
    if (locale) f.locale = locale;
    if (regAfter) f.registered_after = regAfter;
    if (regBefore) f.registered_before = regBefore;
    if (loginAfter) f.last_login_after = loginAfter;
    if (loginBefore) f.last_login_before = loginBefore;
    if (degree) f.study_degree = degree;
    if (stripe) f.has_stripe = true;
    if (academic) f.has_academic_sub = true;

    return f;
}

function showCreateList() {
    document.getElementById('list-name').value = '';
    document.getElementById('list-description').value = '';
    selectedCountries = [];
    renderCountryTags();
    document.getElementById('filter-locale').value = '';
    document.getElementById('filter-reg-after').value = '';
    document.getElementById('filter-reg-before').value = '';
    document.getElementById('filter-login-after').value = '';
    document.getElementById('filter-login-before').value = '';
    document.getElementById('filter-degree').value = '';
    document.getElementById('filter-stripe').checked = false;
    document.getElementById('filter-academic').checked = false;
    document.getElementById('preview-count-result').textContent = '';
    openModal('modal-create-list');
}

async function previewListCount() {
    try {
        const { data } = await api('/lists/preview', {
            method: 'POST',
            body: JSON.stringify({ filters: getFilters() }),
        });
        document.getElementById('preview-count-result').textContent = num(data.count) + ' users match';
    } catch (e) {
        toast('Failed to preview: ' + e.message, 'error');
    }
}

async function createList() {
    const name = document.getElementById('list-name').value.trim();
    if (!name) { toast('List name is required', 'error'); return; }

    try {
        const { data } = await api('/lists/create', {
            method: 'POST',
            body: JSON.stringify({
                name: name,
                description: document.getElementById('list-description').value.trim(),
                filters: getFilters(),
            }),
        });
        toast('List created with ' + num(data.memberCount) + ' members', 'success');
        closeModal('modal-create-list');
        loadLists();
        loadStats();
    } catch (e) {
        toast('Failed to create list: ' + e.message, 'error');
    }
}

async function refreshList(id) {
    try {
        toast('Refreshing list…');
        const { data } = await api(`/lists/${id}/refresh`, { method: 'POST' });
        toast('List refreshed: ' + num(data.memberCount) + ' members', 'success');
        loadLists();
    } catch (e) {
        toast('Failed to refresh: ' + e.message, 'error');
    }
}

async function deleteList(id) {
    if (!confirm('Delete this list and all its members?')) return;
    try {
        await api(`/lists/${id}`, { method: 'DELETE' });
        toast('List deleted', 'success');
        loadLists();
    } catch (e) {
        toast('Failed to delete: ' + e.message, 'error');
    }
}

async function viewListMembers(id, name, page = 1) {
    try {
        const { data, total } = await api(`/lists/${id}/members?page=${page}&per_page=50`);
        document.getElementById('members-modal-title').textContent = 'Members: ' + name;
        const tbody = document.getElementById('members-tbody');
        tbody.innerHTML = data.map(m => `
            <tr>
                <td>${esc(m.email)}</td>
                <td>${esc(m.firstName || '')}</td>
                <td>${esc(m.lastName || '')}</td>
                <td>${m.addedAt}</td>
            </tr>
        `).join('');

        const pages = Math.ceil(total / 50);
        const pagination = document.getElementById('members-pagination');
        if (pages > 1) {
            let html = '';
            for (let p = 1; p <= Math.min(pages, 20); p++) {
                html += `<button class="${p === page ? 'active' : ''}" onclick="viewListMembers(${id}, '${esc(name)}', ${p})">${p}</button>`;
            }
            pagination.innerHTML = html;
        } else {
            pagination.innerHTML = '';
        }

        openModal('modal-view-members');
    } catch (e) {
        toast('Failed to load members: ' + e.message, 'error');
    }
}

// ─── Campaigns ───────────────────────────────────────────────────

async function loadCampaigns() {
    try {
        const { data } = await api('/campaigns');
        const tbody = document.getElementById('campaigns-tbody');
        const empty = document.getElementById('campaigns-empty');

        if (!data.length) {
            tbody.innerHTML = '';
            empty.style.display = 'block';
            return;
        }
        empty.style.display = 'none';

        tbody.innerHTML = data.map(c => `
            <tr>
                <td><strong>${esc(c.name)}</strong></td>
                <td>${esc(c.subject)}</td>
                <td>${esc(c.listName || '—')}</td>
                <td>${badge(c.status)}</td>
                <td>${num(c.sentCount)}</td>
                <td>${num(c.openCount)} <small style="color:#6b7280">(${pct(c.openRate)})</small></td>
                <td>${num(c.clickCount)} <small style="color:#6b7280">(${pct(c.clickRate)})</small></td>
                <td>
                    <div class="nl-btn-group">
                        ${c.status === 'draft' ? `
                            <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="editCampaign(${c.id})">Edit</button>
                            <button class="nl-btn nl-btn-sm nl-btn-success" onclick="sendCampaign(${c.id})">Send</button>
                        ` : ''}
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="previewCampaign(${c.id})">Preview</button>
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="showTestSend(${c.id})">Test</button>
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="viewCampaignDetail(${c.id})">Details</button>
                        <button class="nl-btn nl-btn-sm nl-btn-secondary" onclick="viewFeedback(${c.id})">Feedback</button>
                        <button class="nl-btn nl-btn-sm nl-btn-danger" onclick="deleteCampaign(${c.id})">Delete</button>
                    </div>
                </td>
            </tr>
        `).join('');
    } catch (e) {
        toast('Failed to load campaigns: ' + e.message, 'error');
    }
}

function showCreateCampaign() {
    editingCampaignId = null;
    document.getElementById('campaign-modal-title').textContent = 'Create Campaign';
    document.getElementById('campaign-name').value = '';
    document.getElementById('campaign-subject').value = '';
    document.getElementById('campaign-html').value = '';
    document.getElementById('campaign-text').value = '';
    document.getElementById('campaign-from-name').value = 'Shamra Academia';
    document.getElementById('campaign-from-email').value = '';
    document.getElementById('campaign-list').value = '';

    loadListOptions();
    openModal('modal-create-campaign');
}

async function loadListOptions() {
    try {
        const { data } = await api('/lists');
        const select = document.getElementById('campaign-list');
        // Clear all but first option
        while (select.options.length > 1) select.remove(1);
        data.forEach(l => {
            const opt = document.createElement('option');
            opt.value = l.id;
            opt.textContent = l.name + ' (' + num(l.memberCount) + ')';
            select.appendChild(opt);
        });
    } catch (e) {
        console.error('Failed to load list options', e);
    }
}

async function saveCampaign() {
    const name = document.getElementById('campaign-name').value.trim();
    const subject = document.getElementById('campaign-subject').value.trim();
    const htmlBody = document.getElementById('campaign-html').value;

    if (!name || !subject || !htmlBody) {
        toast('Name, subject, and HTML body are required', 'error');
        return;
    }

    const payload = {
        name: name,
        subject: subject,
        htmlBody: htmlBody,
        textBody: document.getElementById('campaign-text').value || null,
        fromName: document.getElementById('campaign-from-name').value || 'Shamra Academia',
        fromEmail: document.getElementById('campaign-from-email').value || null,
        listId: document.getElementById('campaign-list').value || null,
    };

    try {
        if (editingCampaignId) {
            await api(`/campaigns/${editingCampaignId}/update`, { method: 'POST', body: JSON.stringify(payload) });
            toast('Campaign updated', 'success');
        } else {
            const { data } = await api('/campaigns/create', { method: 'POST', body: JSON.stringify(payload) });
            toast('Campaign created', 'success');
        }
        closeModal('modal-create-campaign');
        loadCampaigns();
    } catch (e) {
        toast('Failed to save campaign: ' + e.message, 'error');
    }
}

async function editCampaign(id) {
    try {
        const { data } = await api(`/campaigns/${id}`);
        editingCampaignId = id;
        document.getElementById('campaign-modal-title').textContent = 'Edit Campaign';
        document.getElementById('campaign-name').value = data.campaign.name;
        document.getElementById('campaign-subject').value = data.campaign.subject;
        document.getElementById('campaign-html').value = data.htmlBody || '';
        document.getElementById('campaign-text').value = data.textBody || '';
        document.getElementById('campaign-from-name').value = data.fromName || 'Shamra Academia';
        document.getElementById('campaign-from-email').value = data.fromEmail || '';

        await loadListOptions();
        document.getElementById('campaign-list').value = data.listId || '';

        openModal('modal-create-campaign');
    } catch (e) {
        toast('Failed to load campaign: ' + e.message, 'error');
    }
}

async function sendCampaign(id) {
    if (!confirm('Are you sure you want to send this campaign to all list members? This cannot be undone.')) return;

    try {
        const { data } = await api(`/campaigns/${id}/send`, { method: 'POST' });
        toast('Campaign sending started! ' + num(data.recipients) + ' recipients queued.', 'success');
        loadCampaigns();
        loadStats();
    } catch (e) {
        toast('Failed to send: ' + e.message, 'error');
    }
}

function showTestSend(id) {
    document.getElementById('test-campaign-id').value = id;
    document.getElementById('test-emails').value = '';
    openModal('modal-test-send');
}

async function sendTestEmail() {
    const campaignId = document.getElementById('test-campaign-id').value;
    const emailsText = document.getElementById('test-emails').value.trim();
    const emails = emailsText.split('\n').map(e => e.trim()).filter(e => e);

    if (!emails.length) {
        toast('Enter at least one email address', 'error');
        return;
    }

    try {
        const { data } = await api(`/campaigns/${campaignId}/test`, {
            method: 'POST',
            body: JSON.stringify({ emails: emails }),
        });
        toast('Test emails sent: ' + data.sent + ' of ' + data.total, 'success');
        closeModal('modal-test-send');
    } catch (e) {
        toast('Failed to send test: ' + e.message, 'error');
    }
}

async function deleteCampaign(id) {
    if (!confirm('Delete this campaign and all its send records?')) return;
    try {
        await api(`/campaigns/${id}`, { method: 'DELETE' });
        toast('Campaign deleted', 'success');
        loadCampaigns();
        loadStats();
    } catch (e) {
        toast('Failed to delete: ' + e.message, 'error');
    }
}

async function previewCampaign(id) {
    try {
        const { data } = await api(`/campaigns/${id}`);
        document.getElementById('preview-modal-title').textContent = data.campaign.name + ' — ' + (data.campaign.subject || '');
        const iframe = document.getElementById('preview-iframe');
        const html = (data.htmlBody || '')
            .replace(/\{\{first_name\}\}/g, 'أحمد')
            .replace(/\{\{email\}\}/g, 'example@shamra-academia.com')
            .replace(/\{\{email_b64\}\}/g, '#')
            .replace(/\{\{campaign_id\}\}/g, id)
            .replace(/\{\{feedback_sig\}\}/g, '#')
            .replace(/\{\{unsubscribe_url\}\}/g, '#')
            .replace(/\{\{tracking_pixel\}\}/g, '');
        iframe.srcdoc = html;
        openModal('modal-preview');
    } catch (e) {
        toast('Failed to load preview: ' + e.message, 'error');
    }
}

async function viewFeedback(campaignId) {
    try {
        const json = await api(`/feedback/${campaignId}`);
        const body = document.getElementById('detail-modal-body');
        document.getElementById('detail-modal-title').textContent = 'Feedback — Campaign #' + campaignId;

        if (!json.data.length) {
            body.innerHTML = '<div class="nl-empty"><p>No feedback received yet for this campaign.</p></div>';
            openModal('modal-campaign-detail');
            return;
        }

        const stars = (r) => '★'.repeat(r) + '☆'.repeat(5 - r);

        body.innerHTML = `
            <div class="nl-analytics-grid" style="grid-template-columns:repeat(2,1fr);margin-bottom:20px">
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Responses</div>
                    <div class="nl-stat-value">${json.totalResponses}</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Avg Rating</div>
                    <div class="nl-stat-value" style="color:#f59e0b">${json.averageRating || '—'} / 5</div>
                </div>
            </div>
            <table class="nl-table">
                <thead><tr><th>User</th><th>Rating</th><th>What Liked</th><th>To Improve</th><th>Comments</th><th>Date</th></tr></thead>
                <tbody>${json.data.map(f => `
                    <tr>
                        <td><strong>${esc(f.firstName || '')}</strong><br><small style="color:#6b7280">${esc(f.email || '')}</small></td>
                        <td style="color:#f59e0b;font-size:16px;white-space:nowrap">${stars(f.rating || 0)}</td>
                        <td style="font-size:13px;max-width:160px">${esc(f.whatLiked || '—')}</td>
                        <td style="font-size:13px;max-width:160px">${esc(f.whatToImprove || '—')}</td>
                        <td style="font-size:13px;max-width:160px">${esc(f.comments || '—')}</td>
                        <td style="font-size:12px;white-space:nowrap">${f.createdAt}</td>
                    </tr>
                `).join('')}</tbody>
            </table>
        `;

        openModal('modal-campaign-detail');
    } catch (e) {
        toast('Failed to load feedback: ' + e.message, 'error');
    }
}

async function viewCampaignDetail(id) {
    try {
        const { data } = await api(`/campaigns/${id}`);
        const body = document.getElementById('detail-modal-body');
        document.getElementById('detail-modal-title').textContent = data.campaign.name;

        let urlsHtml = '';
        if (data.top_urls && data.top_urls.length) {
            const maxClicks = Math.max(...data.top_urls.map(u => parseInt(u.clicks)));
            urlsHtml = `
                <div class="nl-top-urls">
                    <h4>Top Clicked URLs</h4>
                    ${data.top_urls.map(u => `
                        <div class="nl-url-bar">
                            <span class="url-text" title="${esc(u.url)}">${esc(u.url)}</span>
                            <span class="url-count">${u.clicks}</span>
                            <div class="url-bar-fill" style="width:${Math.round(u.clicks / maxClicks * 100)}px"></div>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        body.innerHTML = `
            <div class="nl-analytics-grid">
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Sent</div>
                    <div class="nl-stat-value">${num(data.totals.sent)}</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Opens</div>
                    <div class="nl-stat-value">${num(data.totals.opens)}</div>
                    <div style="font-size:13px;color:#6b7280;margin-top:4px">${pct(data.rates.open_rate)} open rate</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Clicks</div>
                    <div class="nl-stat-value">${num(data.totals.clicks)}</div>
                    <div style="font-size:13px;color:#6b7280;margin-top:4px">${pct(data.rates.click_rate)} click rate</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Unsubscribes</div>
                    <div class="nl-stat-value">${num(data.totals.unsubs)}</div>
                </div>
            </div>
            <div style="margin-bottom:16px">
                <strong>Status:</strong> ${badge(data.campaign.status)}
                &nbsp;&nbsp;<strong>Sent at:</strong> ${data.campaign.sentAt || '—'}
                &nbsp;&nbsp;<strong>Failed:</strong> ${num(data.totals.failed)}
            </div>
            ${urlsHtml}
            <div style="margin-top:24px">
                <button class="nl-btn nl-btn-secondary" onclick="loadCampaignSends(${data.campaign.id})">View Send Log</button>
            </div>
            <div id="campaign-sends-log"></div>
        `;

        openModal('modal-campaign-detail');
    } catch (e) {
        toast('Failed to load campaign details: ' + e.message, 'error');
    }
}

async function loadCampaignSends(id, page = 1) {
    try {
        const json = await api(`/campaigns/${id}/sends?page=${page}&per_page=30`);
        const container = document.getElementById('campaign-sends-log');
        container.innerHTML = `
            <table class="nl-table" style="margin-top:16px">
                <thead><tr><th>Email</th><th>Status</th><th>Opened</th><th>Clicks</th><th>Sent At</th></tr></thead>
                <tbody>${json.data.map(s => `
                    <tr>
                        <td>${esc(s.email)}</td>
                        <td>${badge(s.status)}</td>
                        <td>${s.opened ? '✓' : '—'}</td>
                        <td>${s.clickCount}</td>
                        <td>${s.sentAt || '—'}</td>
                    </tr>
                `).join('')}</tbody>
            </table>
        `;
    } catch (e) {
        toast('Failed to load sends: ' + e.message, 'error');
    }
}

// ─── Analytics Tab ───────────────────────────────────────────────

async function loadAnalyticsCampaignList() {
    try {
        const { data } = await api('/campaigns');
        const select = document.getElementById('analytics-campaign-select');
        while (select.options.length > 1) select.remove(1);
        data.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name + ' — ' + c.status + ' (' + num(c.sentCount) + ' sent)';
            select.appendChild(opt);
        });
    } catch (e) {
        console.error('Failed to load campaigns for analytics', e);
    }
}

async function loadCampaignAnalytics() {
    const id = document.getElementById('analytics-campaign-select').value;
    const container = document.getElementById('analytics-content');
    if (!id) {
        container.innerHTML = '<div class="nl-empty"><p>Select a campaign to view analytics.</p></div>';
        return;
    }

    try {
        const { data } = await api(`/campaigns/${id}`);

        let urlsHtml = '';
        if (data.top_urls && data.top_urls.length) {
            const maxClicks = Math.max(...data.top_urls.map(u => parseInt(u.clicks)));
            urlsHtml = data.top_urls.map(u => `
                <div class="nl-url-bar">
                    <span class="url-text" title="${esc(u.url)}">${esc(u.url)}</span>
                    <span class="url-count">${u.clicks} clicks (${u.unique_clickers} unique)</span>
                    <div class="url-bar-fill" style="width:${Math.round(u.clicks / maxClicks * 120)}px"></div>
                </div>
            `).join('');
        }

        container.innerHTML = `
            <div class="nl-analytics-grid">
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Recipients</div>
                    <div class="nl-stat-value">${num(data.totals.recipients)}</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Delivered</div>
                    <div class="nl-stat-value">${num(data.totals.sent)}</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Open Rate</div>
                    <div class="nl-stat-value">${pct(data.rates.open_rate)}</div>
                    <div style="font-size:13px;color:#6b7280">${num(data.totals.opens)} opens</div>
                </div>
                <div class="nl-analytics-card">
                    <div class="nl-stat-label">Click Rate</div>
                    <div class="nl-stat-value">${pct(data.rates.click_rate)}</div>
                    <div style="font-size:13px;color:#6b7280">${num(data.totals.clicks)} clicks</div>
                </div>
            </div>
            <div style="display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px">
                <div><strong>Failed:</strong> ${num(data.totals.failed)}</div>
                <div><strong>Unsubscribes:</strong> ${num(data.totals.unsubs)}</div>
                <div><strong>Status:</strong> ${badge(data.campaign.status)}</div>
            </div>
            ${urlsHtml ? `<div class="nl-top-urls"><h4>Click Performance by URL</h4>${urlsHtml}</div>` : ''}
        `;
    } catch (e) {
        toast('Failed to load analytics: ' + e.message, 'error');
    }
}

// ─── Opt-outs Tab ────────────────────────────────────────────────

async function loadOptOuts() {
    try {
        const { data } = await api('/optouts');
        const tbody = document.getElementById('optouts-tbody');
        tbody.innerHTML = data.map(o => `
            <tr>
                <td>${esc(o.email)}</td>
                <td>${o.campaignId || '—'}</td>
                <td>${o.createdAt}</td>
            </tr>
        `).join('');
    } catch (e) {
        toast('Failed to load opt-outs: ' + e.message, 'error');
    }
}

// ─── Init ────────────────────────────────────────────────────────

document.addEventListener('DOMContentLoaded', () => {
    loadStats();
    loadCampaigns();
    loadFilterOptions();
});
</script>
{% endblock %}