@include('whatsappcenter::admin.partials.styles')

{{-- ══════════════════════════════════════════════════════
     WhatsApp Web — Two-Panel Conversations Layout
     ══════════════════════════════════════════════════════ --}}
<style>
/* ── Outer wrapper ─────────────────────────────────────────────── */
.wac-conv-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 128px);
    min-height: 560px;
}

/* ── Stats row ─────────────────────────────────────────────────── */
.wac-conv-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-bottom: .65rem;
    flex-shrink: 0;
}
.wac-conv-stat {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: .65rem;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
[data-theme=dark] .wac-conv-stat { border-color: rgba(255,255,255,.07); }
.wac-conv-stat-icon {
    width: 42px; height: 42px;
    border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.wac-conv-stat-val  { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.wac-conv-stat-lbl  { font-size: .68rem; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--text-secondary); margin-top: 2px; }

/* ── Main split layout ─────────────────────────────────────────── */
.wac-split {
    display: flex;
    flex: 1;
    min-height: 0;
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.09);
    box-shadow: 0 2px 14px rgba(0,0,0,.08);
}
[data-theme=dark] .wac-split { border-color: rgba(255,255,255,.08); }

/* ══ LEFT PANEL ════════════════════════════════════════════════════ */
.wac-left {
    width: 340px;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-right: 1px solid rgba(0,0,0,.07);
    flex-shrink: 0;
}
[data-theme=dark] .wac-left { border-color: rgba(255,255,255,.07); }

.wac-left-hdr {
    padding: .7rem .85rem .6rem;
    background: #075E54;
    flex-shrink: 0;
}
.wac-left-title {
    font-size: 1rem; font-weight: 700; color: #fff;
    margin-bottom: .45rem; letter-spacing: -.01em;
}
.wac-left-search-wrap {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.14);
    border-radius: 20px;
    padding: .3rem .75rem;
}
.wac-left-search-wrap svg { flex-shrink: 0; opacity: .75; }
.wac-left-search {
    background: none; border: none; outline: none;
    color: #fff; font-size: .85rem; flex: 1;
    font-family: var(--wac-font, sans-serif);
}
.wac-left-search::placeholder { color: rgba(255,255,255,.6); }

.wac-left-filter {
    display: flex; gap: .35rem; padding: .4rem .75rem;
    background: var(--body-bg);
    border-bottom: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}
[data-theme=dark] .wac-left-filter { border-color: rgba(255,255,255,.06); }
.wac-filter-btn {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: 3px 10px; border-radius: 20px;
    border: 1px solid transparent; cursor: pointer; transition: all .12s;
    background: transparent; color: var(--text-secondary, #667781);
}
.wac-filter-btn.active,
.wac-filter-btn:hover {
    background: rgba(7,94,84,.1); color: #075E54;
    border-color: rgba(7,94,84,.2);
}
[data-theme=dark] .wac-filter-btn.active,
[data-theme=dark] .wac-filter-btn:hover {
    background: rgba(37,211,102,.12); color: #25D366;
    border-color: rgba(37,211,102,.2);
}

/* Contact list */
.wac-contact-list { flex: 1; overflow-y: auto; }
.wac-contact-list::-webkit-scrollbar { width: 3px; }
.wac-contact-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }

.wac-contact-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .1s;
}
.wac-contact-item:hover { background: rgba(0,0,0,.03); }
.wac-contact-item.active { background: rgba(7,94,84,.07); border-left: 3px solid #075E54; }
[data-theme=dark] .wac-contact-item.active { background: rgba(37,211,102,.07); border-color: #25D366; }
[data-theme=dark] .wac-contact-item:hover  { background: rgba(255,255,255,.04); }
[data-theme=dark] .wac-contact-item        { border-color: rgba(255,255,255,.04); }

.wac-contact-av {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 50%; background: #25D366;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff;
    flex-shrink: 0; overflow: hidden;
}
.wac-contact-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.wac-contact-body   { flex: 1; min-width: 0; }
.wac-contact-name   { font-weight: 600; font-size: .87rem; color: var(--text-primary, #111b21);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wac-contact-preview{ font-size: .73rem; color: var(--text-secondary, #667781);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wac-contact-side   { text-align: right; flex-shrink: 0; }
.wac-contact-time   { font-size: .68rem; color: var(--text-secondary, #667781); }
.wac-state-pip {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 5px; margin-left: auto; display: inline-block;
}
.wac-state-pip.flow     { background: #25D366; }
.wac-state-pip.handover { background: #f59e0b; }
.wac-state-pip.idle     { background: #9ca3af; }

.wac-list-msg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1rem; gap: .5rem; opacity: .65;
    font-size: .84rem; color: var(--text-secondary, #667781);
}
.wac-list-msg .ico { font-size: 2rem; }

/* ══ RIGHT PANEL ═══════════════════════════════════════════════════ */
.wac-right {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background-color: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c5b99a' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
[data-theme=dark] .wac-right { background-color: #1a1f2e; }

.wac-right-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; gap: .85rem;
}
.wac-right-empty-icon  { font-size: 5rem; opacity: .35; }
.wac-right-empty-title { font-size: 1.15rem; font-weight: 700; color: #54656f; }
.wac-right-empty-sub   { font-size: .83rem; color: #667781; }

/* ══ INLINE CHAT PANEL STYLES ══════════════════════════════════════ */
.wa-panel-wrap { display: flex; flex-direction: column; height: 100%; }

.wa-phdr {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .9rem; background: #075E54; color: #fff; flex-shrink: 0;
}
[data-theme=dark] .wa-phdr { background: #054d44; }
.wa-phdr-av {
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
    background: #25D366;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; color: #fff;
    flex-shrink: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.2);
}
.wa-phdr-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.wa-phdr-info  { flex: 1; min-width: 0; }
.wa-phdr-name  { font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-phdr-phone { font-size: .7rem; opacity: .8; margin-top: 1px; }
.wa-phdr-state {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; letter-spacing: .04em; flex-shrink: 0;
}
.wa-phdr-state.bot      { background: rgba(255,255,255,.18); color: #fff; }
.wa-phdr-state.handover { background: #f59e0b; color: #fff; }
.wa-phdr-state.idle     { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.wa-phdr-actions { display: flex; gap: .35rem; margin-left: .2rem; }
.wa-phdr-btn {
    background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; transition: background .12s;
    text-decoration: none; flex-shrink: 0;
}
.wa-phdr-btn:hover { background: rgba(255,255,255,.24); color: #fff; }

.wa-pbody {
    flex: 1; overflow-y: auto;
    padding: .85rem .75rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.wa-pbody::-webkit-scrollbar { width: 4px; }
.wa-pbody::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 2px; }

.wa-date-sep { display: flex; align-items: center; justify-content: center; margin: .6rem 0 .4rem; }
.wa-date-sep span {
    background: rgba(255,255,255,.88); color: #667781; font-size: .7rem;
    padding: 3px 11px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.1); font-weight: 500;
}
[data-theme=dark] .wa-date-sep span { background: rgba(40,50,70,.9); color: #8696a0; }

.wa-row     { display: flex; margin: 1px 0; }
.wa-row.out { justify-content: flex-end; }
.wa-row.in  { justify-content: flex-start; }

.wa-bbl {
    max-width: 66%; padding: .45rem .75rem .28rem; border-radius: 7.5px;
    font-size: .875rem; line-height: 1.45; position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,.12); word-break: break-word; white-space: pre-wrap;
}
.wa-bbl.in  { background: #fff; border-top-left-radius: 0; color: #111b21; }
.wa-bbl.out { background: #d9fdd3; border-top-right-radius: 0; color: #111b21; }
[data-theme=dark] .wa-bbl.in  { background: #202c33; color: #e9edef; }
[data-theme=dark] .wa-bbl.out { background: #005c4b; color: #e9edef; }
.wa-bbl.in::before  { content:''; position:absolute; top:0; left:-8px; width:0; height:0;
                      border-top:8px solid #fff; border-left:8px solid transparent; }
.wa-bbl.out::after  { content:''; position:absolute; top:0; right:-8px; width:0; height:0;
                      border-top:8px solid #d9fdd3; border-right:8px solid transparent; }
[data-theme=dark] .wa-bbl.in::before  { border-top-color: #202c33; }
[data-theme=dark] .wa-bbl.out::after  { border-top-color: #005c4b; }

.wa-bbl-foot { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; }
.wa-bbl-time { font-size:.69rem; color:#667781; white-space:nowrap; }
[data-theme=dark] .wa-bbl-time { color:#8696a0; }
.wa-src       { font-size:.6rem; font-weight:700; text-transform:uppercase;
                padding:1px 5px; border-radius:3px; letter-spacing:.03em; }
.wa-src-bot   { background:#25D366; color:#fff; }
.wa-src-ai    { background:#7c3aed; color:#fff; }
.wa-src-human { background:#0ea5e9; color:#fff; }
.wa-tick      { font-size:.95rem; font-weight:900; color:#53bdeb; line-height:1; letter-spacing:-2px; }
.wa-tick.sent { color:#8696a0; }

.wa-agent-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:.3rem .85rem; background:#fff3cd; border-top:1px solid #ffc107;
    font-size:.73rem; color:#856404; flex-shrink:0;
}
[data-theme=dark] .wa-agent-bar { background:rgba(255,193,7,.07); color:#fbbf24; border-color:rgba(255,193,7,.2); }
.wa-agent-badge { display:flex; align-items:center; gap:5px; font-weight:600; }
.wa-agent-dot   { width:7px; height:7px; border-radius:50%; background:#25D366; animation:waPulse 1.5s infinite; }
@keyframes waPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

.wa-pfooter {
    display:flex; align-items:flex-end; gap:.45rem;
    padding:.55rem .75rem; background:#f0f2f5; border-top:1px solid rgba(0,0,0,.06); flex-shrink:0;
}
[data-theme=dark] .wa-pfooter { background:#1f2c33; }
.wa-emoji-btn {
    background:none; border:none; color:#54656f; font-size:1.35rem;
    cursor:pointer; padding:4px; line-height:1; flex-shrink:0; align-self:flex-end; margin-bottom:4px;
}
.wa-input-pill {
    flex:1; background:#fff; border-radius:20px;
    display:flex; align-items:flex-end; padding:.4rem .85rem;
    box-shadow:0 1px 3px rgba(0,0,0,.07);
}
[data-theme=dark] .wa-input-pill { background:#2a3942; }
#wacReplyText {
    flex:1; border:none; outline:none; background:transparent;
    resize:none; font-size:.875rem; max-height:110px;
    color:var(--text-primary,#111b21); line-height:1.5;
    font-family:inherit; padding:0; overflow-y:auto;
}
#wacReplyText::placeholder { color:#8696a0; }
.wa-send-btn {
    width:44px; height:44px; min-width:44px;
    background:#075E54; border:none; border-radius:50%;
    color:#fff; font-size:.95rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
    transition:background .12s,transform .1s;
    box-shadow:0 2px 6px rgba(7,94,84,.3);
}
.wa-send-btn:hover  { background:#128C7E; transform:scale(1.05); }
.wa-send-btn:active { transform:scale(.95); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:768px){
    .wac-left{ width:100%; max-width:100%; border-right:none; }
    .wac-split{ flex-direction:column; }
    .wac-left.hide{ display:none!important; }
    .wac-right.hide{ display:none!important; }
}
@keyframes wacSpin { to{ transform:rotate(360deg) } }
</style>

<div class="wac-page container-fluid">

    {{-- Page header --}}
    <div class="wac-page-header" style="margin-bottom:.6rem">
        <div>
            <h4 class="wac-title">Conversations</h4>
            <p class="wac-subtitle">All customer WhatsApp chats</p>
        </div>
        <div style="display:flex;gap:.5rem;align-items:center">
            <button class="wac-btn-teal" onclick="wacLoadContacts()" title="Refresh contact list">
                <svg id="wacRefreshIcon" width="13" height="13" fill="none" stroke="currentColor"
                     stroke-width="2.2" viewBox="0 0 24 24">
                    <path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                </svg>
                Refresh
            </button>
        </div>
    </div>

    <div class="wac-conv-page">

        {{-- ── Stats ── --}}
        <div class="wac-conv-stats">
            <div class="wac-conv-stat">
                <div class="wac-conv-stat-icon" style="background:rgba(59,130,246,.1)">💬</div>
                <div>
                    <div class="wac-conv-stat-val" id="wacStatTotal" style="color:#3b82f6">—</div>
                    <div class="wac-conv-stat-lbl">Total Contacts</div>
                </div>
            </div>
            <div class="wac-conv-stat">
                <div class="wac-conv-stat-icon" style="background:rgba(245,158,11,.1)">🙋</div>
                <div>
                    <div class="wac-conv-stat-val" id="wacStatHandover" style="color:#f59e0b">—</div>
                    <div class="wac-conv-stat-lbl">Handovers</div>
                </div>
            </div>
            <div class="wac-conv-stat">
                <div class="wac-conv-stat-icon" style="background:rgba(37,211,102,.1)">🟢</div>
                <div>
                    <div class="wac-conv-stat-val" id="wacStatActive" style="color:#25D366">—</div>
                    <div class="wac-conv-stat-lbl">Active Today</div>
                </div>
            </div>
        </div>

        {{-- ── Main split ── --}}
        <div class="wac-split">

            {{-- LEFT: contact sidebar --}}
            <div class="wac-left" id="wacLeftPanel">
                <div class="wac-left-hdr">
                    <div class="wac-left-title">💬 Chats</div>
                    <div class="wac-left-search-wrap">
                        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
                        </svg>
                        <input type="search" class="wac-left-search" id="wacSearch"
                               placeholder="Search by name or number…" autocomplete="off">
                    </div>
                </div>
                <div class="wac-left-filter">
                    <button class="wac-filter-btn active" onclick="wacSetFilter(this,'all')">All</button>
                    <button class="wac-filter-btn"        onclick="wacSetFilter(this,'IN_FLOW')">🤖 Bot</button>
                    <button class="wac-filter-btn"        onclick="wacSetFilter(this,'HANDOVER')">🙋 Agent</button>
                    <button class="wac-filter-btn"        onclick="wacSetFilter(this,'IDLE')">⏸ Idle</button>
                </div>
                <div class="wac-contact-list" id="wacContactList">
                    <div class="wac-list-msg"><div class="ico">⏳</div><div>Loading conversations…</div></div>
                </div>
            </div>

            {{-- RIGHT: chat panel --}}
            <div class="wac-right" id="wacRightPanel">
                <div class="wac-right-empty">
                    <div class="wac-right-empty-icon">💬</div>
                    <div class="wac-right-empty-title">WhatsApp Center</div>
                    <div class="wac-right-empty-sub">Select a conversation to start chatting</div>
                </div>
            </div>

        </div>{{-- /.wac-split --}}
    </div>{{-- /.wac-conv-page --}}
</div>

<script>
(function () {
    /* ── Constants ───────────────────────────────────────────── */
    var DATA_URL  = '{{ route("admin.whatsappcenter.conversations.data") }}';
    var CHAT_BASE = '{{ url("admin/whatsappcenter/conversations") }}';
    var CSRF      = document.querySelector('meta[name=csrf-token]') ?
                    document.querySelector('meta[name=csrf-token]').getAttribute('content') :
                    '{{ csrf_token() }}';

    /* ── State ───────────────────────────────────────────────── */
    var allContacts  = [];
    var activePhone  = null;
    var activeFilter = 'all';
    var searchQuery  = '';
    var chatTimer    = null;

    /* ══════════════════════════════════════════════════════════
       CONTACTS
    ══════════════════════════════════════════════════════════ */
    window.wacLoadContacts = function () {
        var ic = document.getElementById('wacRefreshIcon');
        if (ic) ic.style.animation = 'wacSpin 1s linear infinite';

        fetch(DATA_URL + '?per_page=500&sort=last_message_at&dir=desc', {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r){ return r.json(); })
        .then(function(resp){
            allContacts = resp.data || [];
            updateStats();
            renderList();
        })
        .catch(function(){
            document.getElementById('wacContactList').innerHTML =
                '<div class="wac-list-msg" style="color:#ef4444"><div class="ico">⚠️</div><div>Failed to load contacts</div></div>';
        })
        .finally(function(){
            var ic2 = document.getElementById('wacRefreshIcon');
            if (ic2) ic2.style.animation = '';
        });
    };

    function updateStats() {
        var total    = allContacts.length;
        var handover = allContacts.filter(function(c){ return c.state === 'HANDOVER'; }).length;
        var active   = allContacts.filter(function(c){ return c.last_message_at && c.last_message_at !== '—'; }).length;
        setEl('wacStatTotal',    total);
        setEl('wacStatHandover', handover);
        setEl('wacStatActive',   active);
    }

    function renderList() {
        var items = allContacts;
        if (activeFilter !== 'all') {
            items = items.filter(function(c){ return c.state === activeFilter; });
        }
        if (searchQuery) {
            var q = searchQuery.toLowerCase();
            items = items.filter(function(c){
                return (c.contact_name||'').toLowerCase().indexOf(q) !== -1
                    || (c.phone||'').indexOf(q) !== -1;
            });
        }

        var list = document.getElementById('wacContactList');
        if (!items.length) {
            list.innerHTML = '<div class="wac-list-msg"><div class="ico">🔍</div><div>No conversations found</div></div>';
            return;
        }

        list.innerHTML = items.map(function(c) {
            var initial   = (c.contact_name || '?').charAt(0).toUpperCase();
            var stateKey  = (c.state || 'IDLE').toUpperCase();
            var pipClass  = stateKey === 'HANDOVER' ? 'handover' : (stateKey === 'IDLE' ? 'idle' : 'flow');
            var isActive  = c.phone === activePhone ? ' active' : '';
            return '<div class="wac-contact-item' + isActive + '" data-phone="' + esc(c.phone) + '"'
                 + ' onclick="wacOpenChat(\'' + esc(c.phone) + '\',this)">'
                 + '<div class="wac-contact-av" id="wac-av-' + esc(c.phone) + '">' + initial + '</div>'
                 + '<div class="wac-contact-body">'
                 +   '<div class="wac-contact-name">' + esc(c.contact_name || 'Unknown') + '</div>'
                 +   '<div class="wac-contact-preview">' + esc(c.phone) + '</div>'
                 + '</div>'
                 + '<div class="wac-contact-side">'
                 +   '<div class="wac-contact-time">' + esc(c.last_message_at || '') + '</div>'
                 +   '<div class="wac-state-pip ' + pipClass + '"></div>'
                 + '</div>'
                 + '</div>';
        }).join('');

        // lazy-load avatars
        items.forEach(function(c) { loadAvatar(c.phone, c.contact_name || c.phone); });
    }

    function loadAvatar(phone, name) {
        var el = document.getElementById('wac-av-' + phone);
        if (!el) return;
        var img = new Image();
        img.onload  = function(){ el.innerHTML = ''; el.appendChild(img); };
        img.onerror = function(){};
        img.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name)
                + '&background=25D366&color=fff&size=88&bold=true&rounded=true';
        img.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:50%';
    }

    /* ── Filters & Search ────────────────────────────────────── */
    window.wacSetFilter = function (btn, filter) {
        document.querySelectorAll('.wac-filter-btn').forEach(function(b){ b.classList.remove('active'); });
        btn.classList.add('active');
        activeFilter = filter;
        renderList();
    };

    document.getElementById('wacSearch').addEventListener('input', function () {
        searchQuery = this.value;
        renderList();
    });

    /* ══════════════════════════════════════════════════════════
       OPEN & LOAD CHAT
    ══════════════════════════════════════════════════════════ */
    window.wacOpenChat = function (phone, el) {
        if (activePhone === phone) return;
        activePhone = phone;

        document.querySelectorAll('.wac-contact-item').forEach(function(i){ i.classList.remove('active'); });
        if (el) el.classList.add('active');

        clearInterval(chatTimer);

        var right = document.getElementById('wacRightPanel');
        right.innerHTML = '<div class="wac-right-empty">'
            + '<div style="font-size:2.5rem;opacity:.35">⏳</div>'
            + '<div style="color:#667781;font-size:.85rem">Loading conversation…</div>'
            + '</div>';

        wacFetchPanel(phone);

        // Refresh messages every 12s (only body, not full panel)
        chatTimer = setInterval(function(){ wacRefreshBody(phone); }, 12000);
    };

    window.wacFetchPanel = function (phone) {
        fetch(CHAT_BASE + '/' + encodeURIComponent(phone) + '/chat', {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': CSRF }
        })
        .then(function(r){ return r.json(); })
        .then(function(d){
            var right = document.getElementById('wacRightPanel');
            right.innerHTML = d.html;
            right.querySelectorAll('script').forEach(function(s){
                var ns = document.createElement('script');
                ns.textContent = s.textContent;
                document.head.appendChild(ns);
                ns.remove();
            });
            var box = right.querySelector('#wacChatBox');
            if (box) box.scrollTop = box.scrollHeight;
        })
        .catch(function(){
            document.getElementById('wacRightPanel').innerHTML =
                '<div class="wac-right-empty">'
                + '<div style="font-size:2.5rem">⚠️</div>'
                + '<div style="color:#ef4444;font-weight:600">Failed to load chat</div>'
                + '<button class="wac-btn-teal" style="margin-top:.5rem" onclick="wacFetchPanel(\'' + esc(phone) + '\')">Retry</button>'
                + '</div>';
        });
    };

    window.wacRefreshBody = function (phone) {
        if (activePhone !== phone) return;
        fetch(CHAT_BASE + '/' + encodeURIComponent(phone) + '/chat', {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': CSRF }
        })
        .then(function(r){ return r.json(); })
        .then(function(d){
            var right = document.getElementById('wacRightPanel');
            var box   = right ? right.querySelector('#wacChatBox') : null;
            if (!box) return;
            var tmp  = document.createElement('div');
            tmp.innerHTML = d.html;
            var nb = tmp.querySelector('#wacChatBox');
            if (!nb) return;
            var atBottom = box.scrollTop + box.clientHeight >= box.scrollHeight - 60;
            box.innerHTML  = nb.innerHTML;
            if (atBottom) box.scrollTop = box.scrollHeight;
        }).catch(function(){});
    };

    /* ══════════════════════════════════════════════════════════
       SEND MESSAGE  (global — called by chat panel button)
    ══════════════════════════════════════════════════════════ */
    window.wacSend = function () {
        var ta = document.getElementById('wacReplyText');
        if (!ta || !activePhone) return;
        var txt = ta.value.trim();
        if (!txt) return;

        var box  = document.getElementById('wacChatBox');
        var now  = new Date();
        var time = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });

        /* optimistic bubble */
        var row = document.createElement('div');
        row.className = 'wa-row out';
        row.innerHTML = '<div class="wa-bbl out">' + escHtml(txt)
            + '<div class="wa-bbl-foot">'
            +   '<span class="wa-bbl-time">' + time + '</span>'
            +   '<span class="wa-src wa-src-human">Agent</span>'
            +   '<span class="wa-tick sent" id="wacLastTick">✓</span>'
            + '</div></div>';
        if (box) { box.appendChild(row); box.scrollTop = box.scrollHeight; }

        ta.value = '';
        ta.style.height = 'auto';

        fetch(CHAT_BASE + '/' + encodeURIComponent(activePhone) + '/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
            body: JSON.stringify({ message: txt })
        })
        .then(function(r){ return r.json(); })
        .then(function(d){
            var tick = document.getElementById('wacLastTick');
            if (tick) {
                if (d.success) { tick.textContent = '✓✓'; tick.classList.remove('sent'); }
                else { tick.textContent = '⚠'; tick.style.color = '#ef4444'; }
            }
        })
        .catch(function(){
            var tick = document.getElementById('wacLastTick');
            if (tick) { tick.textContent = '⚠'; tick.style.color = '#ef4444'; }
        });
    };

    /* ── Helpers ─────────────────────────────────────────────── */
    function esc(s) {
        return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;')
                            .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
    }
    function escHtml(s) {
        return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;')
                            .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/\n/g,'<br>');
    }
    function setEl(id, val) { var e=document.getElementById(id); if(e) e.textContent=val; }

    /* ── Init ────────────────────────────────────────────────── */
    wacLoadContacts();
    setInterval(wacLoadContacts, 30000); // refresh contact list every 30s

})();
</script>