{% extends "base.html" %}

{% block title %}Admin Trigger{% endblock %}
{% block page_id %}trigger{% endblock %}
{% block page_title %}Trigger{% endblock %}
{% block eyebrow %}Automation{% endblock %}

{# Consume flash messages here so base.html never sees them #}
{% set _consumed_flashes = get_flashed_messages(with_categories=true) %}

{% block head %}
<style>
    .trigger-toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 380px;
        pointer-events: none;
    }
    .trigger-toast {
        padding: 14px 18px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        animation: toastIn 0.3s ease;
        pointer-events: all;
    }
    .trigger-toast.success { background: linear-gradient(135deg, #16a34a, #15803d); }
    .trigger-toast.error   { background: linear-gradient(135deg, #dc2626, #b91c1c); }
    .trigger-toast.info    { background: linear-gradient(135deg, #2c7da0, #1a5f7a); }
    .trigger-toast-close { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0; opacity: 0.8; }
    .trigger-toast-close:hover { opacity: 1; }
    @keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
</style>
{% endblock %}

{% block content %}
    <!-- Toast Container -->
    <div class="trigger-toast-container" id="toastContainer">
        {% for category, message in _consumed_flashes %}
            <div class="trigger-toast {{ 'success' if category == 'success' else 'error' if category == 'error' else 'info' }}">
                <span>{{ message }}</span>
                <button class="trigger-toast-close" onclick="this.parentElement.remove()">&times;</button>
            </div>
        {% endfor %}
    </div>

    <!-- Split Layout: Email Left, WhatsApp Right -->
    <section class="panel-stack">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">

            <!-- ========== EMAIL TRIGGER (LEFT) ========== -->
            <article class="glass-card panel-card trigger-card">
                <div class="panel-header">
                    <div>
                        <p class="eyebrow">Email Pipeline</p>
                        <h3>📧 Send Matched Photo Emails</h3>
                    </div>
                </div>
                <p class="hero-copy">Reads matched photos from <strong>images_array</strong>, checks <strong>email_deliveries</strong> to skip already-sent ones, then sends gallery emails to users with new matches.</p>

                <button class="primary-btn trigger-btn" id="runTriggerButton" type="button" style="background: #2c7da0;">
                    Send Matched Photo Emails
                </button>

                <pre id="triggerResponse" class="response-box compact">Idle.</pre>
            </article>

            <!-- ========== WHATSAPP TRIGGER (RIGHT) ========== -->
            <article class="glass-card panel-card trigger-card">
                <div class="panel-header">
                    <div>
                        <p class="eyebrow">WhatsApp Pipeline</p>
                        <h3>💬 Send WhatsApp Messages</h3>
                    </div>
                </div>
                <p class="hero-copy">Reads matched users from <strong>images_array</strong>, checks <strong>whatsapp_logs</strong> to skip already-sent, then broadcasts gallery links via WhatsApp.</p>

                <button class="primary-btn trigger-btn" id="runWhatsAppButton" type="button" style="background: #16a34a;">
                    Send WhatsApp Broadcast
                </button>

                <pre id="whatsappResponse" class="response-box compact">Idle.</pre>
            </article>

        </div>
    </section>
{% endblock %}

{% block scripts %}
<script>
    // ========== EMAIL TRIGGER SCRIPT (EXISTING) ==========
    function showToast(message, type) { showFlashMessage(message, type); }

    const runBtn = document.getElementById('runTriggerButton');
    const responseBox = document.getElementById('triggerResponse');
    let pollInterval = null;
    let _userTriggered = false;

    function pollStatus() {
        fetch('/admin/api/trigger/status')
            .then(r => r.json())
            .then(data => {
                if (data.status === 'running') {
                    runBtn.disabled = true;
                    runBtn.textContent = 'Running...';
                    responseBox.textContent = 'Running email pipeline...';
                } else if (data.status === 'completed') {
                    clearInterval(pollInterval);
                    runBtn.disabled = false;
                    runBtn.textContent = 'Send Matched Photo Emails';
                    const result = data.result || {};
                    const sent    = result.emails_sent    ?? 0;
                    const skipped = result.emails_skipped ?? 0;
                    let lines = [`✓ ${result.message || 'Trigger completed.'}`];
                    lines.push('');
                    lines.push(`Emails sent    : ${sent}`);
                    lines.push(`Emails skipped : ${skipped}`);
                    if (result.summary && result.summary.length > 0) {
                        lines.push('');
                        lines.push('── Summary ──────────────────────────');
                        result.summary.forEach(s => {
                            if (s.error) {
                                lines.push(`✗ ${s.name} <${s.email}> — ${s.error}`);
                            } else {
                                lines.push(`✓ ${s.name} <${s.email}> — ${s.new_images_sent} new image(s)`);
                            }
                        });
                    }
                    responseBox.textContent = lines.join('\n');
                } else if (data.status === 'failed') {
                    clearInterval(pollInterval);
                    runBtn.disabled = false;
                    runBtn.textContent = 'Send Matched Photo Emails';
                    responseBox.textContent = `✗ Failed\n\n${data.result?.error || 'Unknown error'}`;
                }
            })
            .catch(err => {
                responseBox.textContent = `Error checking status: ${err.message}`;
            });
    }

    runBtn.addEventListener('click', () => {
        _userTriggered = true;
        runBtn.disabled = true;
        runBtn.textContent = 'Running...';
        responseBox.textContent = 'Starting email pipeline...';

        fetch('/admin/api/trigger/run', { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                if (data.status === 'started') {
                    pollInterval = setInterval(pollStatus, 2000);
                } else if (data.status === 'error' && data.message && data.message.includes('already running')) {
                    responseBox.textContent = 'Email pipeline is already running. Waiting for it to complete...';
                    pollInterval = setInterval(pollStatus, 2000);
                } else {
                    runBtn.disabled = false;
                    runBtn.textContent = 'Send Matched Photo Emails';
                    responseBox.textContent = `Error: ${data.message || 'Unknown error'}`;
                }
            })
            .catch(err => {
                runBtn.disabled = false;
                runBtn.textContent = 'Send Matched Photo Emails';
                responseBox.textContent = `Network error: ${err.message}`;
            });
    });

    // ========== WHATSAPP TRIGGER SCRIPT (NEW) ==========
    const whatsappBtn = document.getElementById('runWhatsAppButton');
    const whatsappBox = document.getElementById('whatsappResponse');

    whatsappBtn.addEventListener('click', () => {
        whatsappBtn.disabled = true;
        whatsappBtn.textContent = 'Broadcasting...';
        whatsappBox.textContent = 'Starting WhatsApp broadcast...';

        fetch('/admin/api/whatsapp/broadcast', { method: 'POST' })
            .then(r => r.json())
            .then(data => {
                whatsappBtn.disabled = false;
                whatsappBtn.textContent = 'Send WhatsApp Broadcast';

                let lines = ['✓ WhatsApp broadcast completed.', ''];
                lines.push(`Scanned : ${data.scanned ?? 0}`);
                lines.push(`Sent    : ${data.sent ?? 0}`);
                lines.push(`Skipped : ${data.skipped ?? 0}`);
                lines.push(`Failed  : ${data.failed ?? 0}`);

                if (data.logs && data.logs.length > 0) {
                    lines.push('');
                    lines.push('── Recipient Log ────────────────────');
                    data.logs.forEach(l => {
                        const status = l.status === 'sent' ? '✓' : '✗';
                        lines.push(`${status} UID #${l.user_id}: ${l.mobile || l.message || l.name}`);
                    });
                }

                whatsappBox.textContent = lines.join('\n');
            })
            .catch(err => {
                whatsappBtn.disabled = false;
                whatsappBtn.textContent = 'Send WhatsApp Broadcast';
                whatsappBox.textContent = `Network error: ${err.message}`;
            });
    });

    // Auto-dismiss flash toasts after 5s
    document.querySelectorAll('.trigger-toast').forEach(t => {
        setTimeout(() => { if (t.parentElement) t.remove(); }, 5000);
    });

    // Poll email status on page load
    pollStatus();
</script>
{% endblock %}