{% extends 'layouts/app.html' %}

{% block title %}WhatsApp Bridge Monitor{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/pages/fm.css') }}">
<style>
/* =====================================================
   WA Monitor — scoped styles
   CSS variables defined here so monitor works without
   .fm-app wrapper (base.css does not define these)
   ===================================================== */

/* ── Design tokens — defined on :root so they inherit everywhere on this page ── */
:root {
    --panel:   #ffffff;
    --line:    #d9e1ec;
    --text:    #0f172a;
    --muted:   #475569;
    --muted2:  #64748b;
    --accent:  #2563eb;
    --good:    #16a34a;
    --warn:    #d97706;
    --bad:     #dc2626;
    --chip:    #eef2ff;
    --shadow:  0 2px 12px rgba(15,23,42,.07);
    --radius:  12px;
    --mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    --sans:    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.wa-monitor { display: flex; flex-direction: column; gap: 12px; }

.wa-topbar {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.wa-topbar h1 { margin: 0; font-size: 16px; color: var(--text); }
.wa-topbar .wa-meta { font-size: 12px; color: var(--muted2); margin-top: 2px; }

.wa-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 12px;
    align-items: start;
}

/* Session list */
.wa-session-list { display: flex; flex-direction: column; gap: 8px; }
.wa-session {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    cursor: pointer;
    transition: border-color .12s;
}
.wa-session:hover { border-color: #b6c6de; }
.wa-session.active { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.3); }
.wa-session-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-session-from { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.wa-session-name { font-size: 13px; font-weight: 700; margin-top: 4px; }
.wa-session-sub { font-size: 12px; color: var(--muted2); margin-top: 3px; }

/* Status badges inline */
.wa-status { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.wa-status.active   { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.wa-status.done     { border-color: #86efac; background: #f0fdf4; color: #166534; }
.wa-status.processing { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.wa-status.error    { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* Right panel */
.wa-right { display: flex; flex-direction: column; gap: 12px; }

/* Message thread */
.wa-chatlog {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.wa-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.wa-msg.inbound  { background: #eff6ff; border-color: #bfdbfe; }
.wa-msg.outbound { background: #f0fdf4; border-color: #86efac; margin-left: 20%; }
.wa-mmeta { font-size: 11px; font-family: var(--mono); color: var(--muted2); margin-bottom: 4px; }
.wa-mbody { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* DeepSeek response viewer */
.wa-json {
    font-family: var(--mono);
    font-size: 11px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 240px;
    overflow-y: auto;
}

/* Simulate panel */
.wa-simulate-form { display: flex; flex-direction: column; gap: 10px; }
.wa-simulate-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wa-simulate-form .fm-label { font-size: 12px; color: var(--muted2); margin-bottom: 4px; display: block; }

/* Live dot */
.wa-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--good); }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good);
          animation: wa-pulse 1.4s ease-in-out infinite; }
@keyframes wa-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Config panel */
.wa-config-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.wa-config-key { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted2); margin-bottom: 3px; }
.wa-config-val { font-size: 12px; }
.wa-config-val.set   { color: var(--good); }
.wa-config-val.unset { color: var(--bad); }

@media (max-width: 900px) {
    .wa-grid { grid-template-columns: 1fr; }
}

/* ── Component styles (repeated here to work outside .fm-app) ── */
.fm-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
}
.fm-section-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px;
}
.fm-section-title h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }

.fm-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: #1e3a8a; background: var(--chip);
    border: 1px solid #c7d2fe; border-radius: 999px; padding: 6px 10px;
}

.fm-btn {
    cursor: pointer; font-size: 12px; border-radius: 10px;
    padding: 9px 12px; border: 1px solid var(--line);
    background: var(--panel); color: var(--text); transition: background .15s;
    font-family: var(--sans); display: inline-flex; align-items: center; gap: 6px;
}
.fm-btn:hover   { background: #f1f5f9; }
.fm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.fm-btn.primary:hover { background: #1d4ed8; }
.fm-btn:active  { transform: translateY(1px); }

.fm-input, .fm-select {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 10px; font-size: 12px;
    background: var(--panel); color: var(--text);
    outline: none; font-family: var(--sans);
    transition: border-color .15s; width: 100%;
}
.fm-input:focus, .fm-select:focus { border-color: #93c5fd; }

.fm-label { font-size: 12px; color: var(--muted2); font-weight: 600; margin-bottom: 4px; display: block; }

.fm-mono { font-family: var(--mono); }
</style>
{% endblock %}

{% block sidebar %}
    {% set active_nav = 'fm_dashboard' %}
    {% include 'components/sidebar.html' %}
{% endblock %}

{% block topbar %}
<div class="topbar-title">
    <h1>WhatsApp Bridge Monitor</h1>
    <p>Twilio → DeepSeek → FM ticket pipeline</p>
</div>
<div class="topbar-actions">
    <span class="wa-live"><span class="wa-dot"></span> Live</span>
    <a href="/fm/dashboard" class="btn btn-secondary">FM Dashboard</a>
</div>
{% endblock %}

{% block content %}
<div class="wa-monitor" id="wa-monitor">

    <!-- Top bar -->
    <div class="wa-topbar">
        <div>
            <h1>WhatsApp Session Monitor</h1>
            <div class="wa-meta">
                Inbound: <strong id="wa-stat-inbound">—</strong> sessions ·
                Active: <strong id="wa-stat-active">—</strong> ·
                Done: <strong id="wa-stat-done">—</strong> ·
                Auto-refresh every 8s
            </div>
        </div>
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <button class="fm-btn" onclick="WA.refresh()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg> Refresh</button>
            <button class="fm-btn primary" onclick="WA.openSimulate()" style="background:#2563eb;color:#fff;border-color:#2563eb;font-weight:600"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Simulate Message</button>
        </div>
    </div>

    <!-- Config status -->
    <div class="fm-card">
        <div class="fm-section-title">
            <h2>Integration Status</h2>
            <span class="fm-chip fm-mono">/wa/inbound → Twilio Webhook</span>
        </div>
        <div class="wa-config-row">
            <div>
                <div class="wa-config-key">DEEPSEEK_API_KEY</div>
                <div class="wa-config-val" id="cfg-deepseek">Checking…</div>
            </div>
            <div>
                <div class="wa-config-key">GEMINI_API_KEY</div>
                <div class="wa-config-val" id="cfg-gemini">Checking…</div>
            </div>
            <div>
                <div class="wa-config-key">TWILIO_ACCOUNT_SID</div>
                <div class="wa-config-val" id="cfg-twilio-sid">Checking…</div>
            </div>
            <div>
                <div class="wa-config-key">TWILIO_AUTH_TOKEN</div>
                <div class="wa-config-val" id="cfg-twilio-token">Checking…</div>
            </div>
            <div>
                <div class="wa-config-key">TWILIO_WA_FROM</div>
                <div class="wa-config-val" id="cfg-twilio-from">Checking…</div>
            </div>
        </div>
        <div class="fm-hr" style="margin:10px 0"></div>
        <div style="font-size:12px;color:var(--muted2)">
            Webhook URL: <span class="fm-mono" style="color:var(--accent)" id="wa-webhook-url">—</span> ·
            Flush on <strong id="wa-cfg-count">4</strong> messages or
            <strong id="wa-cfg-timeout">5 min</strong> idle ·
            Keywords: <span class="fm-mono">done, finished, ready, send</span>
        </div>
    </div>

    <!-- Main grid -->
    <div class="wa-grid">

        <!-- Session list -->
        <div class="fm-card">
            <div class="fm-section-title">
                <h2>Sessions</h2>
                <span class="fm-chip" id="wa-session-count">0</span>
            </div>
            <div class="wa-session-list" id="wa-session-list">
                <div style="padding:32px;text-align:center;color:var(--muted2);font-size:13px">
                    No sessions yet.<br>Use ▶ Simulate to test the pipeline.
                </div>
            </div>
        </div>

        <!-- Right panel -->
        <div class="wa-right">

            <!-- Selected session detail -->
            <div class="fm-card" id="wa-detail-panel" style="display:none">
                <div class="fm-section-title">
                    <h2 id="wa-detail-from">Session</h2>
                    <div style="display:flex;gap:6px;align-items:center">
                        <span class="wa-status" id="wa-detail-status">—</span>
                        <button class="fm-btn" id="wa-flush-btn" onclick="WA.flushSelected()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Flush Now
                        </button>
                    </div>
                </div>

                <!-- Message thread -->
                <div class="fm-section-title" style="margin-top:12px">
                    <h2>Messages</h2>
                    <span class="fm-chip fm-mono" id="wa-msg-count">0 messages</span>
                </div>
                <div class="wa-chatlog" id="wa-chatlog"></div>

                <!-- Reply box -->
                <div style="margin-top:12px">
                    <div style="display:flex;gap:8px">
                        <input class="fm-input" id="wa-reply-input" style="flex:1"
                               placeholder="Send manual WhatsApp reply…" />
                        <button class="fm-btn primary" onclick="WA.sendReply()">Send</button>
                    </div>
                </div>
            </div>

            <!-- DeepSeek response -->
            <div class="fm-card" id="wa-ds-panel" style="display:none">
                <div class="fm-section-title">
                    <h2>DeepSeek Response</h2>
                    <span class="fm-chip">
                        Ticket: <a id="wa-ticket-link" href="#" class="fm-mono" style="color:var(--accent)">—</a>
                    </span>
                </div>
                <div class="wa-json" id="wa-ds-json">No response yet</div>
            </div>

            <!-- Simulate panel -->
            <div class="fm-card" id="wa-simulate-panel" style="display:none">
                <div class="fm-section-title">
                    <h2>Simulate WhatsApp Message</h2>
                    <button class="fm-btn" onclick="WA.closeSimulate()"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> Close</button>
                </div>

                <div class="wa-simulate-form">
                    <div class="wa-simulate-row">
                        <div>
                            <label class="fm-label">Sender phone (E.164)</label>
                            <input class="fm-input" id="sim-from" value="+2348012345678" style="width:100%"/>
                        </div>
                        <div>
                            <label class="fm-label">Display name</label>
                            <input class="fm-input" id="sim-name" value="Jane Okonkwo" style="width:100%"/>
                        </div>
                    </div>

                    <div>
                        <label class="fm-label">Message</label>
                        <textarea class="fm-input" id="sim-body" style="min-height:80px;width:100%"
                                  placeholder="Type the tenant's WhatsApp message…">My AC has been making a loud noise since last night and the cooling is very weak. I'm in Ikoyi Phase 2, Block A Flat 12.</textarea>
                    </div>

                    <div style="display:flex;gap:8px;flex-wrap:wrap">
                        <button class="fm-btn" onclick="WA.sendSimMessage()">Send 1 message</button>
                        <button class="fm-btn primary" onclick="WA.runScenario()">▶ Run full scenario (4 msgs → auto flush)</button>
                    </div>

                    <!-- Quick scenarios -->
                    <div style="font-size:12px;color:var(--muted2);margin-top:4px">Quick scenarios:</div>
                    <div style="display:flex;gap:6px;flex-wrap:wrap">
                        <button class="fm-btn" style="font-size:11px" onclick="WA.loadScenario('leak')"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg> Burst pipe</button>
                        <button class="fm-btn" style="font-size:11px" onclick="WA.loadScenario('ac')"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line><path d="M20 16l-4-4 4-4"></path><path d="M4 8l4 4-4 4"></path><path d="M16 4l-4 4-4-4"></path><path d="M8 20l4-4 4 4"></path></svg> AC fault</button>
                        <button class="fm-btn" style="font-size:11px" onclick="WA.loadScenario('electric')"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Electrical</button>
                        <button class="fm-btn" style="font-size:11px" onclick="WA.loadScenario('security')"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Security</button>
                    </div>
                </div>
            </div>

        </div><!-- /wa-right -->
    </div><!-- /wa-grid -->

</div>

<div class="fm-toast" id="wa-toast"></div>

{% endblock %}

{% block scripts %}
<script>
const WA = (() => {
    'use strict';

    let _sessions      = [];
    let _selectedId    = null;
    let _refreshTimer  = null;

    // ---- Scenarios ----
    const SCENARIOS = {
        leak: [
            'Hi, there is water leaking from under my kitchen sink. Its been dripping all morning.',
            'I am in Oak Estate, Unit 14. The water is now pooling on the floor.',
            'Its getting worse, can someone come today?',
            'done'
        ],
        ac: [
            'My AC is making a very loud noise and the cooling is weaker than normal.',
            'It started last night. I am in Ikoyi Phase 2, Block A Flat 12.',
            'No burning smell but the noise is constant. Can a technician come?',
            'done'
        ],
        electric: [
            'One of my sockets is sparking when I plug things in. Its dangerous.',
            'Victoria Island, Unit 3. The living room socket near the TV.',
            'I have turned off the socket for now but I need this fixed urgently.',
            'done'
        ],
        security: [
            'The CCTV camera at the entrance of our building has been offline for 2 days.',
            'Victoria Island, Gatehouse. The main entrance camera.',
            'We have had some security concerns recently so this is urgent.',
            'done'
        ]
    };

    let _simScenario  = null;
    let _simMsgIndex  = 0;
    let _simFrom      = '';
    let _simName      = '';

    // ---- API helpers ----
    async function _get(path) {
        const r = await fetch(path);
        if (!r.ok) throw new Error(`GET ${path} → ${r.status}`);
        return r.json();
    }
    async function _post(path, data) {
        const r = await fetch(path, {
            method: 'POST', headers: {'Content-Type':'application/json'},
            body: JSON.stringify(data)
        });
        const body = await r.json().catch(() => ({}));
        if (!r.ok) {
            const msg = body.error || `HTTP ${r.status}`;
            throw new Error(msg);
        }
        return body;
    }

    // ---- Refresh session list ----
    async function refresh() {
        try {
            const sessions = await _get('/wa/api/sessions?limit=30');
            _sessions = sessions;
            _renderList(sessions);
            _updateStats(sessions);

            // Re-render selected session if still exists
            if (_selectedId) {
                const still = sessions.find(s => s.id === _selectedId);
                if (still) _renderDetail(still);
            }

            _checkConfig();
        } catch(e) {
            console.error('WA refresh error', e);
        }
    }

    function _renderList(sessions) {
        const el = document.getElementById('wa-session-list');
        document.getElementById('wa-session-count').textContent = sessions.length;

        if (!sessions.length) {
            el.innerHTML = `<div style="padding:32px;text-align:center;color:var(--muted2);font-size:13px">
                No sessions yet.<br>Use ▶ Simulate to test the pipeline.
            </div>`;
            return;
        }

        el.innerHTML = sessions.map(s => {
            const name = s.display_name || _formatPhone(s.wa_from);
            const sub  = s.ticket_ref
                ? `→ <a href="/fm/ticket/${s.ticket_ref}" style="color:var(--accent);font-family:monospace">${s.ticket_ref}</a>`
                : `${s.message_count || s.msg_count} message${(s.message_count||s.msg_count)===1?'':'s'} · ${_relTime(s.last_message_at)}`;

            return `<div class="wa-session${s.id === _selectedId ? ' active' : ''}"
                         data-id="${s.id}" onclick="WA.selectSession(${s.id})">
                <div class="wa-session-top">
                    <span class="wa-session-from">${_esc(_formatPhone(s.wa_from))}</span>
                    <span class="wa-status ${s.status}">${s.status}</span>
                </div>
                <div class="wa-session-name">${_esc(name)}</div>
                <div class="wa-session-sub">${sub}</div>
            </div>`;
        }).join('');
    }

    function _updateStats(sessions) {
        document.getElementById('wa-stat-inbound').textContent = sessions.length;
        document.getElementById('wa-stat-active').textContent  = sessions.filter(s => s.status === 'active').length;
        document.getElementById('wa-stat-done').textContent    = sessions.filter(s => s.status === 'done').length;
    }

    // ---- Select session ----
    async function selectSession(id) {
        _selectedId = id;
        // Highlight
        document.querySelectorAll('.wa-session').forEach(el => {
            el.classList.toggle('active', parseInt(el.dataset.id) === id);
        });

        try {
            const d = await _get(`/wa/api/sessions/${id}`);
            _renderDetail(d.session, d.messages);
        } catch(e) {
            toast('Failed to load session', 'error');
        }
    }

    function _renderDetail(session, messages) {
        const panel = document.getElementById('wa-detail-panel');
        panel.style.display = '';

        document.getElementById('wa-detail-from').textContent =
            (session.display_name || _formatPhone(session.wa_from));
        document.getElementById('wa-detail-status').textContent = session.status;
        document.getElementById('wa-detail-status').className  = `wa-status ${session.status}`;

        const flushBtn = document.getElementById('wa-flush-btn');
        flushBtn.style.display = session.status === 'active' ? '' : 'none';

        if (messages) {
            const count = messages.filter(m => m.direction === 'inbound').length;
            document.getElementById('wa-msg-count').textContent = `${messages.length} messages`;
            const log = document.getElementById('wa-chatlog');
            log.innerHTML = messages.map(m =>
                `<div class="wa-msg ${m.direction}">
                    <div class="wa-mmeta">${_esc(m.received_at?.slice(0,16)||'')} · ${m.direction}</div>
                    <div class="wa-mbody">${_esc(m.body)}</div>
                </div>`
            ).join('');
            log.scrollTop = log.scrollHeight;
        }

        // DeepSeek response
        if (session.deepseek_response) {
            const dsPanel = document.getElementById('wa-ds-panel');
            dsPanel.style.display = '';
            try {
                const parsed = JSON.parse(session.deepseek_response);
                document.getElementById('wa-ds-json').textContent = JSON.stringify(parsed, null, 2);
            } catch {
                document.getElementById('wa-ds-json').textContent = session.deepseek_response;
            }
            const ticketLink = document.getElementById('wa-ticket-link');
            if (session.ticket_ref) {
                ticketLink.textContent = session.ticket_ref;
                ticketLink.href = `/fm/ticket/${session.ticket_ref}`;
            }
        }
    }

    // ---- Flush ----
    async function flushSelected() {
        if (!_selectedId) return;
        await _post(`/wa/api/sessions/${_selectedId}/flush`, {});
        toast('Flushing to DeepSeek…', 'success');
        setTimeout(refresh, 2000);
    }

    // ---- Reply ----
    async function sendReply() {
        if (!_selectedId) return;
        const body = document.getElementById('wa-reply-input').value.trim();
        if (!body) return;
        const r = await _post(`/wa/api/sessions/${_selectedId}/reply`, {body});
        if (r.sent) {
            toast('Reply sent via WhatsApp', 'success');
            document.getElementById('wa-reply-input').value = '';
        } else {
            toast('Reply failed (check Twilio config)', 'error');
        }
    }

    // ---- Simulate ----
    function openSimulate() {
        document.getElementById('wa-simulate-panel').style.display = '';
    }
    function closeSimulate() {
        document.getElementById('wa-simulate-panel').style.display = 'none';
    }

    async function sendSimMessage() {
        const from = document.getElementById('sim-from').value.trim();
        const name = document.getElementById('sim-name').value.trim();
        const body = document.getElementById('sim-body').value.trim();
        if (!body) return toast('Enter a message', 'error');

        let r;
        try {
            r = await _post('/wa/api/simulate', {from, name, body});
        } catch(e) {
            toast('Simulate failed: ' + e.message, 'error');
            return;
        }

        if (r.duplicate) {
            toast('Duplicate message — already buffered', 'error');
            return;
        }

        toast(
            r.flushing
                ? `Msg ${r.message_count} sent — flushing to DeepSeek (${r.flush_trigger})…`
                : `Message ${r.message_count} buffered · session ${r.session_id}`,
            'success'
        );

        // Refresh list, then auto-select the new session
        await refresh();
        if (r.session_id) {
            selectSession(r.session_id);
        }
        if (r.flushing) {
            setTimeout(refresh, 3500);
        }
    }

    async function runScenario() {
        const from = document.getElementById('sim-from').value.trim();
        const name = document.getElementById('sim-name').value.trim();
        const msgs = _simScenario || SCENARIOS.ac;

        toast(`Running scenario (${msgs.length} messages)…`, 'success');
        let lastResult = null;

        for (let i = 0; i < msgs.length; i++) {
            await new Promise(res => setTimeout(res, 700));
            try {
                lastResult = await _post('/wa/api/simulate', {from, name, body: msgs[i]});
            } catch(e) {
                toast('Scenario error: ' + e.message, 'error');
                break;
            }
            await refresh();
            if (lastResult && lastResult.session_id) selectSession(lastResult.session_id);
        }

        toast('Scenario complete — flushing to DeepSeek…', 'success');
        setTimeout(refresh, 3500);
    }

    function loadScenario(key) {
        _simScenario = SCENARIOS[key];
        // Set the first message as preview
        document.getElementById('sim-body').value = SCENARIOS[key][0];
        toast(`Loaded: ${key} scenario (${SCENARIOS[key].length} messages)`, 'success');
    }

    // ---- Config check ----
    async function _checkConfig() {
        let d;
        try {
            d = await _get('/wa/api/config');
        } catch(e) {
            console.error('Config fetch failed', e);
            ['cfg-deepseek','cfg-twilio-sid','cfg-twilio-token','cfg-twilio-from'].forEach(id => {
                document.getElementById(id).innerHTML = '<span style="color:#dc2626">Error loading config</span>';
            });
            return;
        }

        const svgCheck = `<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 13.5 4 8.5'></polyline></svg>`;
        const svgX     = `<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>`;
        const ok   = v  => `<span class="wa-config-val set">${svgCheck} ${_esc(String(v))}</span>`;
        const fail = k  => `<span class="wa-config-val unset">${svgX} ${_esc(k)} not set</span>`;

        // All values now arrive as strings (''/non-empty) — no .slice() on bools
        document.getElementById('cfg-deepseek').innerHTML     = d.deepseek_key  ? ok(d.deepseek_key)              : fail('DEEPSEEK_API_KEY');
        document.getElementById('cfg-gemini').innerHTML       = d.gemini_key    ? ok(d.gemini_key)                : fail('GEMINI_API_KEY');
        document.getElementById('cfg-twilio-sid').innerHTML   = d.twilio_sid    ? ok('•••' + d.twilio_sid.slice(-4)) : fail('TWILIO_ACCOUNT_SID');
        document.getElementById('cfg-twilio-token').innerHTML = d.twilio_token  ? ok(d.twilio_token)              : fail('TWILIO_AUTH_TOKEN');
        document.getElementById('cfg-twilio-from').innerHTML  = d.twilio_from   ? ok(d.twilio_from)               : fail('TWILIO_WA_FROM');
        document.getElementById('wa-webhook-url').textContent = d.webhook_url   || (window.location.origin + '/wa/inbound');
        document.getElementById('wa-cfg-count').textContent   = d.flush_count   || '4';
        document.getElementById('wa-cfg-timeout').textContent = d.flush_timeout ? Math.round(d.flush_timeout / 60) + ' min' : '5 min';
    }

    // ---- Helpers ----
    function _formatPhone(raw) {
        return (raw || '').replace('whatsapp:', '');
    }
    function _relTime(ts) {
        if (!ts) return '';
        const diff = Math.floor((Date.now() - new Date(ts + 'Z').getTime()) / 1000);
        if (diff < 60)  return `${diff}s ago`;
        if (diff < 3600) return `${Math.floor(diff/60)}m ago`;
        return `${Math.floor(diff/3600)}h ago`;
    }
    function _esc(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
    function toast(msg, type) {
        const el = document.getElementById('wa-toast');
        el.textContent = msg;
        el.className = `fm-toast show ${type||''}`;
        clearTimeout(el._t);
        el._t = setTimeout(() => el.classList.remove('show'), 3200);
    }

    // ---- Init ----
    function _init() {
        refresh();
        _refreshTimer = setInterval(refresh, 8000);
    }

    document.addEventListener('DOMContentLoaded', _init);

    return { refresh, selectSession, flushSelected, sendReply,
             openSimulate, closeSimulate, sendSimMessage, runScenario,
             loadScenario, toast };
})();
</script>
{% endblock %}