{% 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 — top-right popups only, no inline banners -->
    <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>

    <section class="panel-stack">
        <article class="glass-card panel-card trigger-card">
            <div class="panel-header">
                <div>
                    <p class="eyebrow">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">Send Matched Photo Emails</button>
            <pre id="triggerResponse" class="response-box compact">Idle.</pre>
        </article>
    </section>
{% endblock %}

{% block scripts %}
<script>
    function showToast(message, type) {
        const container = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = `trigger-toast ${type}`;
        toast.innerHTML = `<span>${message}</span><button class="trigger-toast-close" onclick="this.parentElement.remove()">&times;</button>`;
        container.appendChild(toast);
        setTimeout(() => { if (toast.parentElement) toast.remove(); }, 5000);
    }

    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 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 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')) {
                    // Job already running — just poll until it finishes, keep button disabled
                    responseBox.textContent = 'Pipeline is already running. Waiting for it to complete...';

                    pollInterval = setInterval(pollStatus, 2000);
                } else {
                    runBtn.disabled = false;
                    runBtn.textContent = 'Run Face Matching + Email Sending';
                    responseBox.textContent = `Error: ${data.message || 'Unknown error'}`;

                }
            })
            .catch(err => {
                runBtn.disabled = false;
                runBtn.textContent = 'Run Face Matching + Email Sending';
                responseBox.textContent = `Network error: ${err.message}`;
            });
    });

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

    pollStatus();
</script>
{% endblock %}