@extends('layouts.app')

@section('title', 'WA Inbox')

@push('styles')
<style>
/* ======================================================
   WA INBOX — SPLIT PANEL LAYOUT
====================================================== */
.wa-container {
    display: flex;
    gap: 0;
    height: calc(100vh - 130px);
    min-height: 500px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ---- LEFT PANEL: conversation list ---- */
.wa-list-panel {
    width: 320px;
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gray-200);
    background: var(--white);
}
.wa-list-header {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}
.wa-list-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: .625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wa-search {
    position: relative;
}
.wa-search input {
    width: 100%;
    padding: .5rem .75rem .5rem 2.125rem;
    font-size: .8125rem;
    font-family: inherit;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    outline: none;
    background: var(--gray-50);
    color: var(--gray-800);
    transition: border-color .15s;
}
.wa-search input:focus { border-color: var(--primary); background: var(--white); }
.wa-search svg { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--gray-400); pointer-events: none; }

/* Filter tabs */
.wa-filter-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
}
.wa-filter-tab {
    flex: 1;
    padding: .5rem .25rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--gray-500);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .15s;
    font-family: inherit;
}
.wa-filter-tab:hover { color: var(--gray-700); }
.wa-filter-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Conversation list */
.wa-conv-list { flex: 1; overflow-y: auto; }
.wa-conv-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    position: relative;
}
.wa-conv-item:hover { background: var(--gray-50); }
.wa-conv-item.active { background: var(--primary-50); border-right: 2px solid var(--primary); }
.wa-conv-item.unread { background: var(--primary-50); }
.wa-conv-item.unread:hover { background: #dde4ff; }
.wa-conv-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
}
.wa-conv-avatar .bot-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--white);
}
.wa-conv-body { flex: 1; min-width: 0; }
.wa-conv-name {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-conv-item.unread .wa-conv-name { font-weight: 700; }
.wa-conv-preview {
    font-size: .75rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.wa-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex-shrink: 0;
}
.wa-conv-time { font-size: .6875rem; color: var(--gray-400); }
.wa-unread-badge {
    background: var(--success);
    color: white;
    font-size: .625rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}
.wa-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- RIGHT PANEL: chat area ---- */
.wa-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f0f2f5;
}
.wa-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    gap: .75rem;
}
.wa-chat-empty svg { width: 48px; height: 48px; color: var(--gray-300); }

/* Chat header */
.wa-chat-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.wa-chat-header-info { display: flex; align-items: center; gap: .75rem; }
.wa-chat-name { font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.wa-chat-sub  { font-size: .75rem; color: var(--gray-500); }
.wa-chat-actions { display: flex; gap: .375rem; align-items: center; }

/* Messages */
.wa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.wa-date-divider { text-align: center; margin: .5rem 0; }
.wa-date-divider span {
    font-size: .6875rem;
    color: var(--gray-500);
    background: #d1d7db;
    padding: 2px 10px;
    border-radius: 20px;
}
.wa-bubble-row { display: flex; }
.wa-bubble-row.inbound  { justify-content: flex-start; }
.wa-bubble-row.outbound { justify-content: flex-end; }
.wa-bubble {
    max-width: 72%;
    padding: .5rem .875rem .375rem;
    border-radius: 8px;
    position: relative;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.wa-bubble.inbound  { background: var(--white); border-radius: 0 8px 8px 8px; }
.wa-bubble.outbound { background: #d9fdd3; border-radius: 8px 0 8px 8px; }
.wa-bubble.bot      { background: #e8f4fd; }
.wa-bubble-sender { font-size: .6875rem; font-weight: 600; color: var(--primary); margin-bottom: .2rem; }
.wa-bubble-text { font-size: .875rem; color: var(--gray-800); line-height: 1.5; white-space: pre-wrap; }
.wa-bubble-caption { font-size: .875rem; color: var(--gray-800); line-height: 1.5; white-space: pre-wrap; margin-top: .25rem; }
.wa-bubble-media img { max-width: 240px; max-height: 240px; border-radius: 6px; display: block; cursor: zoom-in; }
.wa-bubble-media video, .wa-bubble-media audio { display: block; max-width: 280px; border-radius: 6px; }
.wa-bubble-time { font-size: .6375rem; color: var(--gray-400); text-align: right; margin-top: .25rem; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }

/* Input */
.wa-input-area {
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: .75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}
.wa-input-area > div:last-of-type {
    display: flex;
    align-items: flex-end;
    gap: .625rem;
}
.wa-input-area textarea {
    flex: 1;
    padding: .625rem .875rem;
    font-size: .9375rem;
    font-family: inherit;
    border: 1.5px solid var(--gray-200);
    border-radius: 20px;
    outline: none;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
    transition: border-color .15s;
    background: var(--gray-50);
}
.wa-input-area textarea:focus { border-color: var(--primary); background: var(--white); }
.wa-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #25d366;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.wa-send-btn:hover { background: #128c7e; }
.wa-send-btn svg { width: 18px; height: 18px; }

/* Right sidebar info */
.wa-info-panel {
    width: 260px;
    flex-shrink: 0;
    border-left: 1px solid var(--gray-200);
    background: var(--white);
    overflow-y: auto;
    display: none; /* hidden by default, shown when conv selected */
}
.wa-info-panel.visible { display: block; }
.wa-info-section { padding: .875rem 1rem; border-bottom: 1px solid var(--gray-100); }
.wa-info-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-bottom: .5rem; }
.wa-info-row { font-size: .8125rem; color: var(--gray-700); margin-bottom: .375rem; }

/* Tags */
.wa-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: .6375rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    white-space: nowrap;
    color: white;
}
.wa-tag-remove {
    cursor: pointer;
    opacity: .7;
    font-size: .625rem;
    line-height: 1;
    margin-left: 1px;
}
.wa-tag-remove:hover { opacity: 1; }
.wa-tag-filter {
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity .12s;
}
.wa-tag-filter:hover  { opacity: .85; }
.wa-tag-filter.active { border-color: rgba(0,0,0,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset; }

/* Tags di list item juga clickable */
.wa-conv-tags .wa-tag {
    cursor: pointer;
    transition: opacity .12s;
}
.wa-conv-tags .wa-tag:hover { opacity: .82; }

/* Tag dropdown */
.tag-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 190px;
    z-index: 500;
    overflow: hidden;
}
.tag-dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    font-size: .8125rem;
    cursor: pointer;
    transition: background .12s;
}
.tag-dropdown-item:hover { background: var(--gray-50); }
.tag-dropdown-item.selected { background: var(--primary-50); }
.tag-dropdown-divider { height: 1px; background: var(--gray-100); margin: .25rem 0; }
.tag-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
    .wa-info-panel { display: none !important; }
    .wa-list-panel { width: 260px; min-width: 220px; }
}
@media (max-width: 640px) {
    .wa-container { flex-direction: column; height: auto; }
    .wa-list-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--gray-200); max-height: 300px; }
    .wa-chat-panel { min-height: 400px; }
}
</style>
@endpush

@section('content')

<div class="page-header" style="margin-bottom:.875rem;">
    <div>
        <h1 class="page-title">WA Inbox</h1>
        <p class="page-subtitle">{{ $summary['unread'] }} belum dibaca · {{ $summary['open'] }} aktif · {{ $summary['bot_on'] }} bot ON</p>
    </div>
    <div class="page-actions">
        <button class="btn btn-secondary" onclick="doSync()" id="syncBtn">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            Sinkronisasi
        </button>
        <button class="btn btn-primary" onclick="openModal('startConvModal')">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Mulai Percakapan
        </button>
    </div>
</div>

<div class="wa-container" id="waContainer">

    {{-- ============================================================
         LEFT PANEL — Conversation List
    ============================================================ --}}
    <div class="wa-list-panel">

        <div class="wa-list-header">
            <div class="wa-list-title">
                Percakapan
                <span style="font-size:.75rem;background:var(--danger);color:white;padding:1px 7px;border-radius:20px;font-weight:700;">
                    {{ $summary['unread'] }}
                </span>
            </div>
            <div class="wa-search">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="text" id="convSearch" placeholder="Cari kontak / nomor...">
            </div>
        </div>

        {{-- Filter tabs --}}
        <div class="wa-filter-tabs">
            <button class="wa-filter-tab active" onclick="filterConv(this,'all')">Semua</button>
            <button class="wa-filter-tab" onclick="filterConv(this,'unread')">Belum Baca</button>
            <button class="wa-filter-tab" onclick="filterConv(this,'assigned')">Assigned</button>
            <button class="wa-filter-tab" onclick="filterConv(this,'resolved')">Selesai</button>
        </div>

        {{-- Tag filter chips --}}
        @if(count($availableTags))
        <div id="tagFilterBar" style="padding:.4rem .75rem;display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--gray-100);flex-shrink:0;">
            @foreach($availableTags as $tag)
            <span class="wa-tag wa-tag-filter"
                  style="background:{{ $tag['color'] }};"
                  data-tag="{{ $tag['name'] }}"
                  onclick="filterByTag('{{ addslashes($tag['name']) }}')">{{ $tag['name'] }}</span>
            @endforeach
        </div>
        @endif

        {{-- List --}}
        <div class="wa-conv-list" id="convList">
            @forelse($conversations as $conv)
            @php $convTags = $conv->tags ?? []; @endphp
            <div class="wa-conv-item {{ $conv->unread_count > 0 ? 'unread' : '' }}"
                 data-id="{{ $conv->id }}"
                 data-status="{{ $conv->status }}"
                 data-unread="{{ $conv->unread_count }}"
                 data-name="{{ $conv->display_name }}"
                 data-number="{{ $conv->wa_number }}"
                 data-tags="{{ json_encode($convTags) }}"
                 data-is-bot="{{ $conv->is_bot_active ? 'true' : 'false' }}"
                 onclick="openConversation(this)">

                <div class="wa-conv-avatar">
                    {{ strtoupper(substr($conv->display_name, 0, 2)) }}
                    @if($conv->is_bot_active)<div class="bot-dot" title="Bot aktif"></div>@endif
                </div>

                <div class="wa-conv-body">
                    <div class="wa-conv-name">{{ $conv->display_name }}</div>
                    <div style="font-size:.7rem;color:var(--gray-400);margin-top:1px;">{{ $conv->wa_number }}</div>
                    @if(count($convTags))
                    <div class="wa-conv-tags" style="display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;">
                        @foreach($convTags as $tag)
                        @php $tagColor = collect($availableTags)->firstWhere('name', $tag)['color'] ?? '#6b7280'; @endphp
                        <span class="wa-tag"
                              style="background:{{ $tagColor }};"
                              title="Filter: {{ $tag }}"
                              onclick="event.stopPropagation();filterByTag('{{ addslashes($tag) }}')">{{ $tag }}</span>
                        @endforeach
                    </div>
                    @endif
                    <div class="wa-conv-preview" style="{{ count($convTags) ? 'margin-top:2px;' : '' }}">
                        @if($conv->status === 'resolved')
                        <span style="color:var(--success);">✓ Selesai</span>
                        @else
                        {{ Str::limit($conv->last_message ?? 'Belum ada pesan', 42) }}
                        @endif
                    </div>
                </div>

                <div class="wa-conv-meta">
                    <span class="wa-conv-time">
                        {{ $conv->last_message_at?->locale('id')->diffForHumans(short: true) ?? '' }}
                    </span>
                    @if($conv->unread_count > 0)
                    <span class="wa-unread-badge">{{ $conv->unread_count > 99 ? '99+' : $conv->unread_count }}</span>
                    @endif
                </div>
            </div>
            @empty
            <div style="padding:2rem;text-align:center;color:var(--gray-400);font-size:.875rem;">
                Tidak ada percakapan
            </div>
            @endforelse
        </div>

        {{-- Pagination kecil --}}
        @if($conversations->hasPages())
        <div style="border-top:1px solid var(--gray-200);padding:.5rem;display:flex;gap:.25rem;justify-content:center;">
            @if(!$conversations->onFirstPage())
            <a href="{{ $conversations->previousPageUrl() }}" class="page-link btn-sm" style="font-size:.75rem;">‹</a>
            @endif
            <span style="font-size:.75rem;padding:.375rem .5rem;color:var(--gray-500);">{{ $conversations->currentPage() }}/{{ $conversations->lastPage() }}</span>
            @if($conversations->hasMorePages())
            <a href="{{ $conversations->nextPageUrl() }}" class="page-link btn-sm" style="font-size:.75rem;">›</a>
            @endif
        </div>
        @endif
    </div>

    {{-- ============================================================
         RIGHT PANEL — Chat Area
    ============================================================ --}}
    <div class="wa-chat-panel" id="waChatPanel">

        {{-- Empty state --}}
        <div class="wa-chat-empty" id="chatEmptyState">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            <div style="font-size:.9375rem;font-weight:500;color:var(--gray-500);">Pilih percakapan</div>
            <div style="font-size:.8125rem;color:var(--gray-400);">Klik kontak di sebelah kiri untuk membuka chat</div>
        </div>

        {{-- Chat header (hidden until conv selected) --}}
        <div class="wa-chat-header" id="chatHeader" style="display:none;">
            <div class="wa-chat-header-info">
                <div style="width:38px;height:38px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;color:white;font-size:.8125rem;font-weight:700;flex-shrink:0;" id="chatAvatar"></div>
                <div>
                    <div class="wa-chat-name" id="chatName">—</div>
                    <div class="wa-chat-sub" id="chatSub">—</div>
                </div>
            </div>
            <div class="wa-chat-actions" id="chatActions"></div>
        </div>

        {{-- Messages area --}}
        <div class="wa-messages" id="chatMessages" style="display:none;"></div>

        {{-- Loading --}}
        <div id="chatLoading" style="display:none;flex:1;align-items:center;justify-content:center;">
            <div style="width:28px;height:28px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;"></div>
        </div>

        {{-- Input --}}
        <div class="wa-input-area" id="chatInput" style="display:none;">
            {{-- Bot active notice --}}
            <div id="botActiveNotice" style="display:none;align-items:center;gap:.625rem;padding:.625rem 1rem;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:.8125rem;color:#92400e;">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;flex-shrink:0;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2M9 9h6M9 12h6"/></svg>
                <span>AI sedang aktif. Klik <strong>Ambil Alih</strong> di atas untuk membalas sendiri.</span>
            </div>
            {{-- Attachment preview bar --}}
            <div id="attachPreview" style="display:none;padding:.5rem .75rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200);align-items:center;gap:.5rem;flex-wrap:wrap;">
                <img id="attachImgPreview" src="" style="display:none;height:48px;width:48px;object-fit:cover;border-radius:4px;border:1px solid var(--gray-200);">
                <div style="flex:1;min-width:0;">
                    <div id="attachName" style="font-size:.8125rem;font-weight:500;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></div>
                    <div id="attachSize" style="font-size:.75rem;color:var(--gray-400);"></div>
                </div>
                <button type="button" onclick="clearAttachment()" style="background:none;border:none;cursor:pointer;color:var(--gray-400);padding:.25rem;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div id="msgInputRow" style="display:flex;align-items:flex-end;gap:.25rem;">
                {{-- Attach button --}}
                <label for="attachFile" title="Lampiran" style="cursor:pointer;padding:.5rem;color:var(--gray-400);flex-shrink:0;display:flex;align-items:center;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='var(--gray-400)'">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:20px;height:20px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                </label>
                <input type="file" id="attachFile" style="display:none;" accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.txt" onchange="onAttachSelect(this)">
                <textarea id="msgText" rows="1" placeholder="Ketik pesan... (Enter kirim, Shift+Enter baru)" style="flex:1;"></textarea>
                <button class="wa-send-btn" onclick="sendMessage()" id="sendBtn">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Resolved bar --}}
        <div id="resolvedBar" style="display:none;background:var(--gray-50);border-top:1px solid var(--gray-200);padding:.75rem 1.25rem;text-align:center;font-size:.875rem;color:var(--gray-500);">
            ✓ Percakapan sudah diselesaikan
        </div>
    </div>

    {{-- ============================================================
         INFO PANEL — Kanan
    ============================================================ --}}
    <div class="wa-info-panel" id="waInfoPanel">
        <div class="wa-info-section">
            <div class="wa-info-label">Info Kontak</div>
            <div id="infoContent">
                <div class="wa-info-row text-muted">Pilih percakapan terlebih dahulu</div>
            </div>
        </div>
        <div class="wa-info-section" id="infoActions" style="display:none;">
            <div class="wa-info-label">Aksi</div>
            <div style="display:flex;flex-direction:column;gap:.5rem;" id="infoActionBtns"></div>
        </div>
    </div>

</div>

{{-- Sinkronisasi Modal --}}
<div class="modal-overlay" id="syncModal">
    <div class="modal" style="max-width:480px;">
        <div class="modal-header">
            <span class="modal-title">Sinkronisasi Percakapan</span>
            <button class="modal-close" onclick="closeModal('syncModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body" id="syncResultBody" style="font-size:.875rem;">
            <div style="text-align:center;padding:1.5rem 0;">
                <div style="width:32px;height:32px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto .75rem;"></div>
                <div style="color:var(--gray-500);">Sedang menyinkronkan data...</div>
            </div>
        </div>
        <div class="modal-footer" id="syncModalFooter" style="display:none;">
            <button class="btn btn-secondary" onclick="closeModal('syncModal')">Tutup</button>
            <button class="btn btn-primary" onclick="location.reload()">Refresh Inbox</button>
        </div>
    </div>
</div>

{{-- Mulai Percakapan Modal --}}
<div class="modal-overlay" id="startConvModal">
    <div class="modal" style="max-width:440px;">
        <div class="modal-header">
            <span class="modal-title">Mulai Percakapan Baru</span>
            <button class="modal-close" onclick="closeModal('startConvModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body" style="display:flex;flex-direction:column;gap:.875rem;">
            <div class="form-group" style="margin:0;">
                <label class="form-label">Cari Kontak <span style="color:var(--gray-400);font-weight:400;">(opsional)</span></label>
                <input type="text" id="startConvSearch" class="form-control" placeholder="Ketik nama kontak...">
                <div id="startConvResults" style="display:none;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);max-height:160px;overflow-y:auto;margin-top:.25rem;"></div>
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label">Nomor WhatsApp <span style="color:var(--danger);">*</span></label>
                <input type="text" id="startConvPhone" class="form-control" placeholder="cth: 08123456789 atau 628123456789">
                <input type="hidden" id="startConvName">
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label">Pesan Awal <span style="color:var(--danger);">*</span></label>
                <textarea id="startConvMsg" class="form-control" rows="3" placeholder="Ketik pesan pertama..."></textarea>
            </div>
            <div id="startConvError" style="display:none;color:var(--danger);font-size:.8125rem;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('startConvModal')">Batal</button>
            <button class="btn btn-primary" id="startConvBtn" onclick="doStartConv()">Kirim & Buka Chat</button>
        </div>
    </div>
</div>

{{-- Modal Buat Tag Baru --}}
<div class="modal-overlay" id="newTagModal">
    <div class="modal" style="max-width:360px;">
        <div class="modal-header">
            <span class="modal-title">Buat Tag Baru</span>
            <button class="modal-close" onclick="closeModal('newTagModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body" style="display:flex;flex-direction:column;gap:.875rem;">
            <div class="form-group" style="margin:0;">
                <label class="form-label">Nama Tag <span style="color:var(--danger);">*</span></label>
                <input type="text" id="newTagName" class="form-control" placeholder="cth: Urgent, Premium, Konsultasi..." maxlength="50">
            </div>
            <div class="form-group" style="margin:0;">
                <label class="form-label">Warna</label>
                <div id="colorPicker" style="display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem;"></div>
                <div id="newTagPreview" style="margin-top:.5rem;">
                    Preview: <span id="newTagPreviewBadge" class="wa-tag" style="background:#7c3aed;">Nama Tag</span>
                </div>
            </div>
            <div id="newTagError" style="display:none;color:var(--danger);font-size:.8125rem;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('newTagModal')">Batal</button>
            <button class="btn btn-primary" onclick="saveNewTag()">Buat Tag</button>
        </div>
    </div>
</div>

{{-- Flash Toast --}}
<div id="flashToast" style="display:none;position:fixed;top:1.25rem;right:1.25rem;z-index:9999;padding:.75rem 1.125rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.18);max-width:380px;line-height:1.4;"></div>

{{-- Pipeline Modal --}}
<div class="modal-overlay" id="pipelineModal">
    <div class="modal" style="max-width:480px;">
        <div class="modal-header">
            <span class="modal-title">Masukkan ke Pipeline CRM</span>
            <button class="modal-close" onclick="closeModal('pipelineModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body" style="display:flex;flex-direction:column;gap:.875rem;">

            {{-- Info kontak --}}
            <div id="pipelineContactInfo" style="display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;background:var(--gray-50);border-radius:var(--radius);border:1px solid var(--gray-200);">
                <div style="width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;color:white;font-size:.75rem;font-weight:700;flex-shrink:0;" id="pipelineAvatar"></div>
                <div>
                    <div style="font-size:.875rem;font-weight:600;color:var(--gray-800);" id="pipelineContactName">—</div>
                    <div style="font-size:.75rem;color:var(--gray-400);" id="pipelineContactNum">—</div>
                </div>
            </div>

            <div class="form-group" style="margin:0;">
                <label class="form-label">Judul Deal <span style="color:var(--danger);">*</span></label>
                <input type="text" id="dealTitle" class="form-control" placeholder="cth: Penawaran Produk A untuk [Nama]">
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label">Stage Pipeline <span style="color:var(--danger);">*</span></label>
                    <select id="dealStage" class="form-control">
                        @forelse($stages as $stage)
                        <option value="{{ $stage->id }}">{{ $stage->name }}</option>
                        @empty
                        <option value="">Belum ada stage</option>
                        @endforelse
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label">Prioritas</label>
                    <select id="dealPriority" class="form-control">
                        <option value="medium">Menengah</option>
                        <option value="high">Tinggi</option>
                        <option value="low">Rendah</option>
                    </select>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label">Nilai Deal (Rp)</label>
                    <input type="number" id="dealValue" class="form-control" placeholder="0" min="0">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label">Target Tutup</label>
                    <input type="date" id="dealClose" class="form-control">
                </div>
            </div>

            <div class="form-group" style="margin:0;">
                <label class="form-label">Catatan</label>
                <textarea id="dealNotes" class="form-control" rows="2" placeholder="Catatan tambahan tentang deal ini..."></textarea>
            </div>

            <div id="pipelineError" style="display:none;color:var(--danger);font-size:.8125rem;padding:.5rem .75rem;background:#fef2f2;border-radius:var(--radius);"></div>
            <div id="pipelineSuccess" style="display:none;padding:.75rem .875rem;background:#f0fdf4;border:1px solid #86efac;border-radius:var(--radius);">
                <div style="font-size:.875rem;font-weight:600;color:#166534;margin-bottom:.375rem;">Deal berhasil dibuat!</div>
                <a id="pipelineDealLink" href="#" target="_blank" class="btn btn-success btn-sm" style="justify-content:center;">
                    Lihat Deal di Pipeline →
                </a>
            </div>
        </div>
        <div class="modal-footer" id="pipelineFooter">
            <button class="btn btn-secondary" onclick="closeModal('pipelineModal')">Batal</button>
            <button class="btn btn-primary" id="pipelineSubmitBtn" onclick="submitPipeline()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:15px;height:15px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Masukkan ke Pipeline
            </button>
        </div>
    </div>
</div>

{{-- Assign Modal --}}
<div class="modal-overlay" id="assignModal">
    <div class="modal" style="max-width:420px;">
        <div class="modal-header">
            <span class="modal-title">Serahkan ke Agent</span>
            <button class="modal-close" onclick="closeModal('assignModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="modal-body" style="display:flex;flex-direction:column;gap:.875rem;">
            <div class="form-group" style="margin:0;">
                <label class="form-label">Pilih Agent</label>
                <select id="assignSelect" class="form-control" onchange="onAgentChange(this)">
                    <option value="">— Pilih agent —</option>
                    @foreach($users as $user)
                    <option value="{{ $user->id }}" data-phone="{{ $user->phone ?? '' }}" data-name="{{ $user->name }}">
                        {{ $user->name }}{{ $user->phone ? '' : ' ⚠ (no WA)' }}
                    </option>
                    @endforeach
                </select>
            </div>

            {{-- Info notifikasi WA --}}
            <div id="assignNotifInfo" style="display:none;padding:.625rem .875rem;border-radius:var(--radius);font-size:.8125rem;border:1px solid var(--gray-200);background:var(--gray-50);">
                <div id="assignNotifHasPhone" style="display:none;color:#166534;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;display:inline;margin-right:.25rem;vertical-align:middle;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    Ringkasan chat akan dikirim otomatis ke WA agent (<span id="assignAgentPhone"></span>)
                </div>
                <div id="assignNotifNoPhone" style="display:none;color:#92400e;">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;display:inline;margin-right:.25rem;vertical-align:middle;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    Agent ini belum punya nomor WA — notifikasi tidak akan terkirim.
                    <a href="/users" target="_blank" style="color:var(--primary);text-decoration:underline;">Edit profil agent →</a>
                </div>
            </div>

            {{-- Hasil setelah assign --}}
            <div id="assignResult" style="display:none;padding:.75rem .875rem;border-radius:var(--radius);font-size:.875rem;"></div>
        </div>
        <div class="modal-footer" id="assignFooter">
            <button class="btn btn-secondary" onclick="closeModal('assignModal')">Batal</button>
            <button class="btn btn-primary" id="assignBtn" onclick="doAssign()">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                Assign &amp; Kirim Ringkasan
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
var activeConvId        = null;
var activeConvData      = null;
var pollInterval        = null;
var lastPollTime        = null;
var renderedMessageIds  = new Set(); // cegah pesan sama dirender dua kali
var lastRenderedDate    = null;      // track tanggal divider lintas panggilan renderMessages

// Polling list kiri — berjalan terus sejak halaman dibuka
var listPollTime        = new Date().toISOString();
var listPollInterval    = null;

function startListPolling() {
    if (listPollInterval) clearInterval(listPollInterval);
    listPollInterval = setInterval(pollConvList, 5000); // setiap 5 detik
}

function pollConvList() {
    // Kumpulkan semua conversation id yang sudah ada di DOM
    var knownIds = [];
    document.querySelectorAll('.wa-conv-item[data-id]').forEach(function(el) {
        knownIds.push(el.dataset.id);
    });

    var url = '/wa/inbox/list-updates?since=' + encodeURIComponent(listPollTime)
            + '&known_ids[]=' + knownIds.join('&known_ids[]=');

    fetch(url, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf } })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        listPollTime = data.server_time || new Date().toISOString();

        if (!data.conversations || data.conversations.length === 0) return;

        var listEl  = document.getElementById('convList');
        var changed = false;

        data.conversations.forEach(function(conv) {
            var existing = listEl.querySelector('.wa-conv-item[data-id="' + conv.id + '"]');

            if (existing) {
                // Update unread badge
                var badge = existing.querySelector('.wa-unread-badge');
                if (conv.unread_count > 0) {
                    var label = conv.unread_count > 99 ? '99+' : conv.unread_count;
                    if (badge) {
                        badge.textContent = label;
                    } else {
                        var meta = existing.querySelector('.wa-conv-meta');
                        if (meta) {
                            var b = document.createElement('span');
                            b.className   = 'wa-unread-badge';
                            b.textContent = label;
                            meta.appendChild(b);
                        }
                    }
                    existing.classList.add('unread');
                    existing.dataset.unread = conv.unread_count;
                } else {
                    if (badge) badge.remove();
                    // Jangan hapus class unread jika ini conversation yang sedang aktif (sudah dibaca)
                    if (conv.id !== activeConvId) existing.classList.remove('unread');
                }

                // Update preview last message
                var preview = existing.querySelector('.wa-conv-preview');
                if (preview && conv.status !== 'resolved' && conv.last_message) {
                    var short = conv.last_message.length > 42 ? conv.last_message.substring(0, 42) + '…' : conv.last_message;
                    preview.textContent = short;
                }

                // Update waktu
                var timeEl = existing.querySelector('.wa-conv-time');
                if (timeEl && conv.last_message_at) {
                    timeEl.textContent = relativeTime(conv.last_message_at);
                }

                // Update status dan is_bot_active
                existing.dataset.status = conv.status;
                existing.dataset.isBot  = conv.is_bot_active ? 'true' : 'false';

                // Sync bot-dot di avatar
                var existingDot = existing.querySelector('.bot-dot');
                if (conv.is_bot_active && !existingDot) {
                    var avEl = existing.querySelector('.wa-conv-avatar');
                    if (avEl) { var d = document.createElement('div'); d.className = 'bot-dot'; d.title = 'Bot aktif'; avEl.appendChild(d); }
                } else if (!conv.is_bot_active && existingDot) {
                    existingDot.remove();
                }

                // Update bot button di header jika ini conversation aktif
                if (conv.id === activeConvId) {
                    var hBtn = document.getElementById('chatBotBtn');
                    if (hBtn) {
                        hBtn.className = 'btn btn-sm ' + (conv.is_bot_active ? 'btn-success' : 'btn-secondary');
                        hBtn.innerHTML = '🤖 Bot ' + (conv.is_bot_active ? 'ON' : 'OFF');
                        hBtn.title     = conv.is_bot_active ? 'Bot aktif (klik untuk nonaktifkan)' : 'Bot nonaktif (klik untuk aktifkan)';
                    }
                }

                // Pindahkan ke atas list jika ada pesan baru (bukan conversation aktif agar tidak ganggu)
                if (conv.unread_count > 0 && conv.id !== activeConvId && existing !== listEl.firstChild) {
                    listEl.insertBefore(existing, listEl.firstChild);
                }

            } else {
                // Percakapan baru — tambah ke atas list
                var initials = conv.display_name.substring(0, 2).toUpperCase();
                var short    = conv.last_message
                    ? (conv.last_message.length > 42 ? conv.last_message.substring(0, 42) + '…' : conv.last_message)
                    : 'Belum ada pesan';

                var unreadBadge = conv.unread_count > 0
                    ? '<span class="wa-unread-badge">' + (conv.unread_count > 99 ? '99+' : conv.unread_count) + '</span>'
                    : '';

                var tagsBadgesHtml = '';
                if (conv.tags && conv.tags.length) {
                    tagsBadgesHtml = '<div class="wa-conv-tags" style="display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;">'
                        + conv.tags.map(function(t) {
                            var safe = escAttr(t);
                            return '<span class="wa-tag" style="background:' + getTagColor(t) + ';cursor:pointer;" title="Filter: ' + safe + '" onclick="event.stopPropagation();filterByTag(\'' + safe + '\')">' + escHtml(t) + '</span>';
                          }).join('')
                        + '</div>';
                }

                var newItem = document.createElement('div');
                newItem.className         = 'wa-conv-item' + (conv.unread_count > 0 ? ' unread' : '');
                newItem.dataset.id        = conv.id;
                newItem.dataset.status    = conv.status;
                newItem.dataset.unread    = conv.unread_count;
                newItem.dataset.name      = conv.display_name;
                newItem.dataset.number    = conv.wa_number;
                newItem.dataset.tags      = JSON.stringify(conv.tags || []);
                newItem.dataset.isBot     = conv.is_bot_active ? 'true' : 'false';
                newItem.innerHTML =
                    '<div class="wa-conv-avatar">' + escHtml(initials)
                    + (conv.is_bot_active ? '<div class="bot-dot" title="Bot aktif"></div>' : '')
                    + '</div>'
                    + '<div class="wa-conv-body">'
                    +   '<div class="wa-conv-name">' + escHtml(conv.display_name) + '</div>'
                    +   '<div style="font-size:.7rem;color:var(--gray-400);margin-top:1px;">' + escHtml(conv.wa_number) + '</div>'
                    +   tagsBadgesHtml
                    +   '<div class="wa-conv-preview">' + escHtml(short) + '</div>'
                    + '</div>'
                    + '<div class="wa-conv-meta">'
                    +   '<span class="wa-conv-time">' + relativeTime(conv.last_message_at) + '</span>'
                    +   unreadBadge
                    + '</div>';
                newItem.onclick = function() { openConversation(this); };

                // Hapus empty state jika ada
                var emptyEl = listEl.querySelector('div:not(.wa-conv-item)');
                if (emptyEl && emptyEl.textContent.trim().includes('Tidak ada')) emptyEl.remove();

                listEl.insertBefore(newItem, listEl.firstChild);
                changed = true;
            }
        });

        // Update counter unread di header
        if (changed) {
            var totalUnread = 0;
            listEl.querySelectorAll('.wa-conv-item').forEach(function(el) {
                totalUnread += parseInt(el.dataset.unread || 0);
            });
            var headerBadge = document.querySelector('.wa-list-title span');
            if (headerBadge) headerBadge.textContent = totalUnread;
        }
    })
    .catch(function() {}); // silent fail — tidak ganggu UX
}

// -------------------------------------------------------
// Tag system
// -------------------------------------------------------

// Available tags injected from PHP
var availableTags = @json($availableTags);

// Active tag filter (null = no filter)
var activeTagFilter = null;

function getTagColor(name) {
    var t = availableTags.find(function(t) { return t.name === name; });
    return t ? t.color : '#6b7280';
}

function renderInfoPanelTags(tags) {
    var el = document.getElementById('infoPanelTags');
    if (! el) return;
    el.innerHTML = '';
    (tags || []).forEach(function(tag) {
        var span = document.createElement('span');
        span.className = 'wa-tag';
        span.style.background = getTagColor(tag);
        span.innerHTML = escHtml(tag)
            + '<span class="wa-tag-remove" onclick="removeTag(\'' + escAttr(tag) + '\',event)" title="Hapus tag">✕</span>';
        el.appendChild(span);
    });
}

function toggleTagDropdown() {
    var dd = document.getElementById('tagDropdown');
    if (dd.style.display === 'none') {
        buildTagDropdown();
        dd.style.display = 'block';
        // tutup jika klik di luar
        setTimeout(function() {
            document.addEventListener('click', closeTagDropdownOutside);
        }, 10);
    } else {
        dd.style.display = 'none';
    }
}

function closeTagDropdownOutside(e) {
    var dd  = document.getElementById('tagDropdown');
    var btn = document.getElementById('addTagBtn');
    if (dd && !dd.contains(e.target) && btn && !btn.contains(e.target)) {
        dd.style.display = 'none';
        document.removeEventListener('click', closeTagDropdownOutside);
    }
}

function buildTagDropdown() {
    var dd = document.getElementById('tagDropdown');
    if (!dd) return;

    // Baca tags aktif dari DOM item
    var item      = document.querySelector('.wa-conv-item[data-id="' + activeConvId + '"]');
    var currTags  = [];
    try { currTags = JSON.parse(item ? (item.dataset.tags || '[]') : '[]'); } catch(e) {}

    dd.innerHTML = '';

    // List tag tersedia
    availableTags.forEach(function(t) {
        var row     = document.createElement('div');
        var isSel   = currTags.includes(t.name);
        row.className = 'tag-dropdown-item' + (isSel ? ' selected' : '');
        row.innerHTML = '<span class="tag-dot" style="background:' + t.color + '"></span>'
            + '<span style="flex:1;">' + escHtml(t.name) + '</span>'
            + (isSel ? '<span style="font-size:.75rem;color:var(--primary);">✓</span>' : '');
        row.onclick = function(e) {
            e.stopPropagation();
            toggleTagOnConversation(t.name);
        };
        dd.appendChild(row);
    });

    // Divider + buat tag baru
    var div = document.createElement('div');
    div.className = 'tag-dropdown-divider';
    dd.appendChild(div);

    var newRow = document.createElement('div');
    newRow.className = 'tag-dropdown-item';
    newRow.innerHTML = '<span style="font-size:.875rem;">+</span> <span>Buat tag baru...</span>';
    newRow.onclick = function(e) {
        e.stopPropagation();
        dd.style.display = 'none';
        document.removeEventListener('click', closeTagDropdownOutside);
        openNewTagModal();
    };
    dd.appendChild(newRow);
}

function toggleTagOnConversation(tagName) {
    var item = document.querySelector('.wa-conv-item[data-id="' + activeConvId + '"]');
    var tags = [];
    try { tags = JSON.parse(item ? (item.dataset.tags || '[]') : '[]'); } catch(e) {}

    var idx = tags.indexOf(tagName);
    if (idx === -1) {
        tags.push(tagName);
    } else {
        tags.splice(idx, 1);
    }
    saveConversationTags(tags);
}

function removeTag(tagName, e) {
    if (e) e.stopPropagation();
    var item = document.querySelector('.wa-conv-item[data-id="' + activeConvId + '"]');
    var tags = [];
    try { tags = JSON.parse(item ? (item.dataset.tags || '[]') : '[]'); } catch(e) {}
    tags = tags.filter(function(t) { return t !== tagName; });
    saveConversationTags(tags);
}

function saveConversationTags(tags) {
    fetch('/wa/inbox/' + activeConvId + '/tags', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ tags: tags }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (! d.success) return;

        var savedTags = d.tags || [];

        // Update data-tags di list item
        var item = document.querySelector('.wa-conv-item[data-id="' + activeConvId + '"]');
        if (item) {
            item.dataset.tags = JSON.stringify(savedTags);
            // Re-render badges di list item
            var tagsEl = item.querySelector('.wa-conv-tags');
            if (tagsEl) tagsEl.remove();
            if (savedTags.length > 0) {
                var body = item.querySelector('.wa-conv-body');
                var name = item.querySelector('.wa-conv-name');
                var tagsDiv = document.createElement('div');
                tagsDiv.className = 'wa-conv-tags';
                tagsDiv.style.cssText = 'display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;';
                savedTags.forEach(function(tag) {
                    var span = document.createElement('span');
                    span.className = 'wa-tag';
                    span.style.background = getTagColor(tag);
                    span.title = 'Filter: ' + tag;
                    span.textContent = tag;
                    span.onclick = (function(t) {
                        return function(e) { e.stopPropagation(); filterByTag(t); };
                    })(tag);
                    tagsDiv.appendChild(span);
                });
                name.insertAdjacentElement('afterend', tagsDiv);
            }
        }

        // Update info panel
        renderInfoPanelTags(savedTags);

        // Re-build dropdown
        var dd = document.getElementById('tagDropdown');
        if (dd && dd.style.display !== 'none') {
            buildTagDropdown();
        }
    })
    .catch(function() { showFlash('Gagal menyimpan tag.', 'error'); });
}

// Filter conversation list by tag — cukup terima nama, bukan element
function filterByTag(tagName) {
    if (activeTagFilter === tagName) {
        // Deaktif filter
        activeTagFilter = null;
        document.querySelectorAll('.wa-tag-filter').forEach(function(t) { t.classList.remove('active'); });
        document.querySelectorAll('.wa-conv-item').forEach(function(item) { item.style.display = 'flex'; });
    } else {
        activeTagFilter = tagName;
        // Highlight chip di filter bar yang sesuai, clear sisanya
        document.querySelectorAll('.wa-tag-filter').forEach(function(t) {
            t.classList.toggle('active', t.dataset.tag === tagName);
        });
        // Tampilkan hanya conversation yang punya tag ini
        document.querySelectorAll('.wa-conv-item').forEach(function(item) {
            var itemTags = [];
            try { itemTags = JSON.parse(item.dataset.tags || '[]'); } catch(e) {}
            item.style.display = itemTags.includes(tagName) ? 'flex' : 'none';
        });
    }
}

// -------------------------------------------------------
// Modal buat tag baru
// -------------------------------------------------------
var TAG_COLORS = ['#7c3aed','#dc2626','#d97706','#059669','#2563eb','#db2777','#0891b2','#65a30d','#6b7280'];
var selectedNewTagColor = TAG_COLORS[0];

function openNewTagModal() {
    document.getElementById('newTagName').value = '';
    selectedNewTagColor = TAG_COLORS[0];
    renderColorPicker();
    document.getElementById('newTagError').style.display = 'none';
    openModal('newTagModal');
    setTimeout(function() { document.getElementById('newTagName').focus(); }, 150);
}

function renderColorPicker() {
    var el = document.getElementById('colorPicker');
    if (!el) return;
    el.innerHTML = '';
    TAG_COLORS.forEach(function(c) {
        var dot = document.createElement('div');
        dot.style.cssText = 'width:22px;height:22px;border-radius:50%;background:' + c + ';cursor:pointer;transition:transform .12s;border:2.5px solid ' + (c === selectedNewTagColor ? 'white' : 'transparent') + ';box-shadow:' + (c === selectedNewTagColor ? '0 0 0 2px ' + c : 'none') + ';';
        dot.title = c;
        dot.onclick = function() {
            selectedNewTagColor = c;
            renderColorPicker();
            var preview = document.getElementById('newTagPreviewBadge');
            if (preview) preview.style.background = selectedNewTagColor;
        };
        el.appendChild(dot);
    });
    // Sync preview text
    var nameEl   = document.getElementById('newTagName');
    var preview  = document.getElementById('newTagPreviewBadge');
    if (nameEl && preview) {
        preview.textContent = nameEl.value || 'Nama Tag';
        preview.style.background = selectedNewTagColor;
        nameEl.oninput = function() {
            preview.textContent = this.value || 'Nama Tag';
        };
    }
}

function saveNewTag() {
    var name = document.getElementById('newTagName').value.trim();
    var errEl = document.getElementById('newTagError');
    if (!name) { errEl.textContent = 'Nama tag wajib diisi.'; errEl.style.display = 'block'; return; }

    fetch('/wa/inbox/tags/global', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ name: name, color: selectedNewTagColor }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.success) { errEl.textContent = d.message || 'Gagal.'; errEl.style.display = 'block'; return; }

        // Update daftar global
        availableTags = d.tags;

        // Tambah chip di filter bar
        var bar = document.getElementById('tagFilterBar');
        if (bar) {
            var span = document.createElement('span');
            span.className = 'wa-tag wa-tag-filter';
            span.style.background = selectedNewTagColor;
            span.dataset.tag = name;
            span.textContent = name;
            span.onclick = (function(n) { return function() { filterByTag(n); }; })(name);
            bar.appendChild(span);
        }

        closeModal('newTagModal');

        // Langsung tambahkan ke conversation aktif
        toggleTagOnConversation(name);
    })
    .catch(function() { errEl.textContent = 'Terjadi kesalahan koneksi.'; errEl.style.display = 'block'; });
}

function relativeTime(iso) {
    if (!iso) return '';
    var diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
    if (diff < 60)   return 'baru saja';
    if (diff < 3600) return Math.floor(diff/60) + ' mnt lalu';
    if (diff < 86400)return Math.floor(diff/3600) + ' jam lalu';
    return Math.floor(diff/86400) + ' hr lalu';
}

// -------------------------------------------------------
// WebSocket via Reverb — menggantikan polling jika tersedia
// -------------------------------------------------------
var echoInboxChannel      = null;
var echoConvChannel       = null;
var usingWebSocket        = false;
var currentEchoConvId     = null;

function initWebSocket() {
    if (!window.echoReady || !window.Echo) {
        console.log('Echo tidak tersedia, pakai polling.');
        startListPolling();
        return;
    }

    try {
        echoInboxChannel = window.Echo.private('inbox')
            .listen('.new-message', function(data) {
                handleWsNewMessage(data);
            })
            .listen('.conversation-updated', function(data) {
                handleWsConvUpdated(data);
            })
            .error(function(err) {
                console.warn('Echo inbox channel error:', err);
                if (!usingWebSocket) startListPolling();
            });

        window.Echo.connector.pusher.connection.bind('connected', function() {
            usingWebSocket = true;
            if (listPollInterval) { clearInterval(listPollInterval); listPollInterval = null; }
            console.log('✓ WebSocket Reverb terhubung');
        });

        window.Echo.connector.pusher.connection.bind('disconnected', function() {
            usingWebSocket = false;
            console.warn('WebSocket terputus, fallback ke polling');
            startListPolling();
        });

        window.Echo.connector.pusher.connection.bind('failed', function() {
            usingWebSocket = false;
            startListPolling();
        });

    } catch(e) {
        console.warn('Echo init error:', e);
        startListPolling();
    }
}

function subscribeConversation(convId) {
    if (echoConvChannel && currentEchoConvId !== convId) {
        window.Echo.leave('conversation.' + currentEchoConvId);
        echoConvChannel    = null;
        currentEchoConvId  = null;
    }
    if (!window.echoReady || !window.Echo || currentEchoConvId === convId) return;

    currentEchoConvId = convId;
    echoConvChannel   = window.Echo.private('conversation.' + convId)
        .listen('.new-message', function(data) {
            if (data.conversation_id === convId && data.message) {
                var msg = data.message;
                // Pesan dari diri sendiri sudah di-render saat send, skip
                if (msg.direction === 'outbound') return;
                if (!renderedMessageIds.has(msg.id)) {
                    renderMessages([{
                        id:           msg.id,
                        content:      msg.content,
                        direction:    msg.direction,
                        is_bot:       msg.is_bot,
                        sent_at:      msg.sent_at,
                        status:       msg.status,
                        user:         null,
                    }], false);
                    lastPollTime = msg.sent_at || new Date().toISOString();
                }
            }
        });
}

function handleWsNewMessage(data) {
    // Update atau tambah item di conversation list
    var existing = document.querySelector('.wa-conv-item[data-id="' + data.conversation_id + '"]');
    if (existing) {
        // Update last message & unread
        var preview = existing.querySelector('.conv-preview');
        if (preview) preview.textContent = data.last_message || '';
        var badge = existing.querySelector('.unread-badge');
        if (data.unread_count > 0) {
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'unread-badge';
                existing.appendChild(badge);
            }
            badge.textContent = data.unread_count;
            existing.classList.add('unread');
        }
        // Pindahkan ke atas list
        var list = existing.parentNode;
        if (list && list.firstChild !== existing) {
            list.insertBefore(existing, list.firstChild);
        }
        listPollTime = new Date().toISOString();
    } else {
        // Conversation baru — refresh list via polling sekali
        pollConvList();
    }
    listPollTime = new Date().toISOString();
}

function handleWsConvUpdated(data) {
    var existing = document.querySelector('.wa-conv-item[data-id="' + data.conversation_id + '"]');
    if (existing) {
        existing.dataset.status = data.status;
        if (data.status === 'resolved') existing.style.opacity = '0.6';
        else existing.style.opacity = '';
    }
    // Jika di dalam conversation yang sama, update header
    if (activeConvId === data.conversation_id) {
        var newData = Object.assign({}, activeConvData, {
            isBot:  data.is_bot_active ? 'true' : 'false',
            status: data.status,
        });
        activeConvData = newData;
        buildChatActions(newData);
        syncBotNotice();
    }
}

// Mulai WebSocket, fallback ke polling jika gagal
initWebSocket();

// -------------------------------------------------------
// Open conversation
// -------------------------------------------------------
function openConversation(el) {
    // Highlight active
    document.querySelectorAll('.wa-conv-item').forEach(function(i) { i.classList.remove('active'); });
    el.classList.add('active');
    el.classList.remove('unread');

    activeConvId       = el.dataset.id;
    activeConvData     = el.dataset;
    renderedMessageIds.clear();
    lastRenderedDate   = null;

    // Show chat UI
    document.getElementById('chatEmptyState').style.display  = 'none';
    document.getElementById('chatHeader').style.display      = 'flex';
    document.getElementById('chatLoading').style.display     = 'flex';
    document.getElementById('chatMessages').style.display    = 'none';
    document.getElementById('chatInput').style.display       = 'none';
    document.getElementById('resolvedBar').style.display     = 'none';
    document.getElementById('waInfoPanel').classList.add('visible');

    // Header
    document.getElementById('chatAvatar').textContent = el.dataset.name.substring(0, 2).toUpperCase();
    document.getElementById('chatName').textContent   = el.dataset.name;
    document.getElementById('chatSub').textContent    = el.dataset.number;
    buildChatActions(el.dataset);
    buildInfoPanel(el.dataset);
    // Reset bot notice (will be re-synced after messages load)
    var notice = document.getElementById('botActiveNotice');
    if (notice) notice.style.display = 'none';

    // Load messages
    loadMessages(activeConvId, true);

    // Subscribe ke conversation channel (WebSocket)
    subscribeConversation(activeConvId);

    // Polling hanya sebagai fallback jika WebSocket tidak terhubung
    if (pollInterval) clearInterval(pollInterval);
    pollInterval = setInterval(function() {
        if (activeConvId && !usingWebSocket) pollNewMessages(activeConvId);
    }, 4000);
}

// -------------------------------------------------------
// Load all messages (initial load)
// -------------------------------------------------------
function loadMessages(convId, scrollBottom) {
    fetch('/wa/inbox/' + convId + '/messages', {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        // Gunakan waktu server agar perbandingan sent_at di poll berikutnya akurat
        lastPollTime = data.server_time || new Date().toISOString();
        document.getElementById('chatLoading').style.display  = 'none';
        document.getElementById('chatMessages').style.display = 'flex';

        renderMessages(data.messages, true);
        showInputOrResolved(data.status);
    })
    .catch(function() {
        document.getElementById('chatLoading').style.display = 'none';
        document.getElementById('chatMessages').innerHTML = '<div style="text-align:center;padding:2rem;color:var(--danger);font-size:.875rem;">Gagal memuat pesan.</div>';
        document.getElementById('chatMessages').style.display = 'flex';
    });
}

// -------------------------------------------------------
// Poll new messages
// -------------------------------------------------------
function pollNewMessages(convId) {
    if (! lastPollTime) return;
    fetch('/wa/inbox/' + convId + '/messages?since=' + encodeURIComponent(lastPollTime), {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        // Selalu update lastPollTime dari server_time agar tidak ada drift timezone
        lastPollTime = data.server_time || new Date().toISOString();
        if (data.messages && data.messages.length > 0) {
            renderMessages(data.messages, false);
            var item = document.querySelector('.wa-conv-item[data-id="' + convId + '"]');
            if (item) {
                var badge = item.querySelector('.wa-unread-badge');
                if (badge) badge.remove();
            }
        }
    })
    .catch(function() {});
}

// -------------------------------------------------------
// Render messages
// -------------------------------------------------------
// -------------------------------------------------------
// Render media content dalam bubble
// -------------------------------------------------------
function renderMediaContent(msg) {
    var type = msg.message_type;
    var meta = msg.media_meta || {};
    var url  = msg.media_url || meta.url || '';

    if (type === 'image' && url) {
        return '<a href="' + escHtml(url) + '" target="_blank" rel="noopener">'
             + '<img src="' + escHtml(url) + '" style="max-width:240px;max-height:240px;border-radius:6px;display:block;margin-bottom:.25rem;cursor:zoom-in;" loading="lazy" onerror="this.style.display=\'none\'">'
             + '</a>';
    }
    if (type === 'video' && url) {
        return '<video controls style="max-width:280px;border-radius:6px;display:block;margin-bottom:.25rem;">'
             + '<source src="' + escHtml(url) + '" type="' + escHtml(meta.mime || 'video/mp4') + '">'
             + '</video>';
    }
    if (type === 'audio' && url) {
        return '<audio controls style="width:220px;display:block;margin-bottom:.25rem;">'
             + '<source src="' + escHtml(url) + '" type="' + escHtml(meta.mime || 'audio/ogg') + '">'
             + '</audio>';
    }
    if (type === 'document') {
        var fname = meta.filename || msg.content || 'Dokumen';
        var fsize = meta.size ? ' · ' + meta.size : '';
        var icon  = '📄';
        if (meta.mime) {
            if (meta.mime.includes('pdf'))   icon = '📕';
            if (meta.mime.includes('image')) icon = '🖼️';
            if (meta.mime.includes('sheet') || meta.mime.includes('excel')) icon = '📊';
            if (meta.mime.includes('word'))  icon = '📝';
            if (meta.mime.includes('zip'))   icon = '📦';
        }
        return url
            ? '<a href="' + escHtml(url) + '" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:rgba(0,0,0,.06);border-radius:6px;text-decoration:none;color:inherit;margin-bottom:.25rem;">'
              + '<span style="font-size:1.25rem;">' + icon + '</span>'
              + '<div style="min-width:0;"><div style="font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;">' + escHtml(fname) + '</div>'
              + '<div style="font-size:.6875rem;color:var(--gray-400);">Download' + escHtml(fsize) + '</div></div>'
              + '</a>'
            : '<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:rgba(0,0,0,.06);border-radius:6px;margin-bottom:.25rem;">'
              + '<span style="font-size:1.25rem;">' + icon + '</span>'
              + '<div style="font-size:.8125rem;font-weight:500;">' + escHtml(fname) + escHtml(fsize ? ' · ' + fsize : '') + '</div>'
              + '</div>';
    }
    return '';
}

// -------------------------------------------------------
// Attachment file picker
// -------------------------------------------------------
var activeAttachFile = null;

function onAttachSelect(input) {
    var file = input.files[0];
    if (!file) return;
    activeAttachFile = file;

    var preview = document.getElementById('attachPreview');
    var imgPrev = document.getElementById('attachImgPreview');
    var nameEl  = document.getElementById('attachName');
    var sizeEl  = document.getElementById('attachSize');

    nameEl.textContent = file.name;
    sizeEl.textContent = (file.size / 1024).toFixed(1) + ' KB';
    preview.style.display = 'flex';

    if (file.type.startsWith('image/')) {
        var reader = new FileReader();
        reader.onload = function(e) { imgPrev.src = e.target.result; imgPrev.style.display = 'block'; };
        reader.readAsDataURL(file);
    } else {
        imgPrev.style.display = 'none';
    }
}

function clearAttachment() {
    activeAttachFile = null;
    document.getElementById('attachFile').value = '';
    document.getElementById('attachPreview').style.display = 'none';
    document.getElementById('attachImgPreview').style.display = 'none';
}

function renderMessages(messages, replace) {
    var container = document.getElementById('chatMessages');

    if (replace) {
        container.innerHTML = '';
        renderedMessageIds.clear();
        lastRenderedDate = null;
    }

    if (!messages || messages.length === 0) {
        if (replace) {
            container.innerHTML = '<div style="margin:auto;text-align:center;color:var(--gray-400);font-size:.875rem;">Belum ada pesan</div>';
        }
        return;
    }

    messages.forEach(function(msg) {
        // Jangan render ulang pesan yang sudah ada di layar
        if (msg.id && renderedMessageIds.has(msg.id)) return;
        if (msg.id) renderedMessageIds.add(msg.id);

        // Tambahkan divider tanggal hanya jika tanggal berubah dari pesan terakhir yang dirender
        var msgDate = msg.sent_at ? msg.sent_at.substring(0, 10) : '';
        if (msgDate && msgDate !== lastRenderedDate) {
            var div = document.createElement('div');
            div.className = 'wa-date-divider';
            div.innerHTML = '<span>' + formatDate(msg.sent_at) + '</span>';
            container.appendChild(div);
            lastRenderedDate = msgDate;
        }

        var row = document.createElement('div');
        row.className = 'wa-bubble-row ' + msg.direction;

        var isBot       = msg.is_bot;
        var bubbleClass = 'wa-bubble ' + msg.direction + (isBot ? ' bot' : '');

        var senderLabel = '';
        if (msg.direction === 'outbound') {
            senderLabel = isBot
                ? '<div class="wa-bubble-sender">🤖 Bot</div>'
                : (msg.user ? '<div class="wa-bubble-sender">' + escHtml(msg.user.name) + '</div>' : '');
        }

        var statusIcon = '';
        if (msg.direction === 'outbound') {
            if      (msg.status === 'read')      statusIcon = '<span style="color:#53bdeb;">✓✓</span>';
            else if (msg.status === 'delivered') statusIcon = '✓✓';
            else if (msg.status === 'sent')      statusIcon = '✓';
            else if (msg.status === 'failed')    statusIcon = '<span style="color:var(--danger);">⚠</span>';
        }

        var mediaHtml   = renderMediaContent(msg);
        var isMediaType = msg.message_type !== 'text';
        var showCaption = isMediaType && mediaHtml && msg.message_type !== 'document' && msg.content;
        var showText    = !isMediaType || !mediaHtml;
        row.innerHTML = '<div class="' + bubbleClass + '">'
            + senderLabel
            + mediaHtml
            + (showCaption ? '<div class="wa-bubble-caption">' + escHtml(msg.content) + '</div>' : '')
            + (showText    ? '<div class="wa-bubble-text">'    + escHtml(msg.content) + '</div>' : '')
            + '<div class="wa-bubble-time">' + formatTime(msg.sent_at) + ' ' + statusIcon + '</div>'
            + '</div>';

        container.appendChild(row);
    });

    container.scrollTop = container.scrollHeight;
}

// -------------------------------------------------------
// Send message
// -------------------------------------------------------
function sendMessage() {
    var txt  = document.getElementById('msgText').value.trim();
    var btn  = document.getElementById('sendBtn');
    if ((! txt && ! activeAttachFile) || ! activeConvId) return;

    btn.disabled = true;

    var promise;
    if (activeAttachFile) {
        var fd = new FormData();
        fd.append('_token', csrf);
        fd.append('file', activeAttachFile);
        if (txt) fd.append('caption', txt);
        promise = fetch('/wa/inbox/' + activeConvId + '/send-media', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: fd,
        });
    } else {
        promise = fetch('/wa/inbox/' + activeConvId + '/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ message: txt }),
        });
    }

    promise
    .then(function(r) { return r.json(); })
    .then(function(data) {
        btn.disabled = false;
        if (data.message) {
            renderMessages([data.message], false);
            lastPollTime = new Date().toISOString();
        }
        if (data.success) {
            document.getElementById('msgText').value = '';
            document.getElementById('msgText').style.height = 'auto';
            clearAttachment();
        } else {
            showFlash('Gagal kirim: ' + (data.error || 'Periksa konfigurasi device Kirimi di Pengaturan.'), 'error');
        }
    })
    .catch(function() {
        btn.disabled = false;
        showFlash('Gagal mengirim pesan. Periksa koneksi server.', 'error');
    });
}

// -------------------------------------------------------
// Build action buttons di header
// -------------------------------------------------------
function buildChatActions(data) {
    var container = document.getElementById('chatActions');
    container.innerHTML = '';

    var isBotOn = data.isBot === 'true';

    // Status badge
    var statusBadge = document.createElement('span');
    statusBadge.style.cssText = 'font-size:.75rem;padding:2px 10px;border-radius:20px;font-weight:600;'
        + (data.status === 'resolved'
            ? 'background:#dcfce7;color:#166534;'
            : data.status === 'assigned'
                ? 'background:#dbeafe;color:#1e40af;'
                : 'background:#f0fdf4;color:#15803d;');
    statusBadge.textContent = data.status === 'resolved' ? 'Selesai'
        : data.status === 'assigned' ? 'Assigned' : 'Open';
    container.appendChild(statusBadge);

    // AI / Bot button — Ambil Alih when bot is ON
    if (isBotOn) {
        var takeoverBtn = document.createElement('button');
        takeoverBtn.id        = 'chatBotBtn';
        takeoverBtn.className = 'btn btn-sm btn-warning';
        takeoverBtn.style.cssText = 'background:#f59e0b;color:white;border-color:#f59e0b;';
        takeoverBtn.innerHTML = '🤖 Ambil Alih';
        takeoverBtn.title     = 'AI sedang aktif — klik untuk ambil alih dan balas sendiri';
        takeoverBtn.onclick   = function() { toggleBot(data.id); };
        container.appendChild(takeoverBtn);
    } else {
        var botBtn = document.createElement('button');
        botBtn.id        = 'chatBotBtn';
        botBtn.className = 'btn btn-sm btn-secondary';
        botBtn.innerHTML = '🤖 Aktifkan AI';
        botBtn.title     = 'Aktifkan bot AI untuk membalas otomatis';
        botBtn.onclick   = function() { toggleBot(data.id); };
        container.appendChild(botBtn);
    }

    // Assign
    var assignBtn = document.createElement('button');
    assignBtn.className = 'btn btn-sm btn-secondary';
    assignBtn.textContent = 'Assign';
    assignBtn.onclick = function() { openAssignModal(); };
    container.appendChild(assignBtn);

    // Resolve
    if (data.status !== 'resolved') {
        var resolveBtn = document.createElement('button');
        resolveBtn.className = 'btn btn-sm btn-success';
        resolveBtn.textContent = '✓ Selesai';
        resolveBtn.onclick = function() { resolveConv(data.id); };
        container.appendChild(resolveBtn);
    }
}

// -------------------------------------------------------
// Build info panel kanan
// -------------------------------------------------------
function buildInfoPanel(data) {
    var tags = [];
    try { tags = JSON.parse(data.tags || '[]'); } catch(e) {}

    document.getElementById('infoContent').innerHTML =
        '<div class="wa-info-row"><strong>Nomor:</strong> ' + escHtml(data.number) + '</div>'
        + '<div class="wa-info-row"><strong>Nama:</strong> ' + escHtml(data.name) + '</div>'
        + '<div style="margin-top:.625rem;">'
        +   '<div style="font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400);margin-bottom:.375rem;">Tags</div>'
        +   '<div id="infoPanelTags" style="display:flex;flex-wrap:wrap;gap:.3rem;min-height:22px;"></div>'
        +   '<div style="position:relative;margin-top:.375rem;">'
        +     '<button id="addTagBtn" onclick="toggleTagDropdown()" '
        +       'style="display:inline-flex;align-items:center;gap:.2rem;padding:2px 8px;font-size:.75rem;border:1.5px dashed var(--gray-300);border-radius:20px;background:none;cursor:pointer;color:var(--gray-500);transition:all .12s;font-family:inherit;"'
        +       ' onmouseover="this.style.borderColor=\'var(--primary)\';this.style.color=\'var(--primary)\'"'
        +       ' onmouseout="this.style.borderColor=\'var(--gray-300)\';this.style.color=\'var(--gray-500)\'">'
        +       '+ Tambah Tag'
        +     '</button>'
        +     '<div id="tagDropdown" class="tag-dropdown" style="display:none;"></div>'
        +   '</div>'
        + '</div>';

    document.getElementById('infoActions').style.display = 'block';
    document.getElementById('infoActionBtns').innerHTML =
        '<button onclick="openPipelineModal()" class="btn btn-primary btn-sm" style="justify-content:center;">'
        + '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:13px;height:13px;margin-right:.3rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>'
        + 'Masukkan ke Pipeline</button>'
        + '<a href="https://wa.me/' + encodeURIComponent(data.number) + '" target="_blank" class="btn btn-success btn-sm" style="justify-content:center;">Buka di WhatsApp</a>'
        + '<a href="/contacts/api/search?q=' + encodeURIComponent(data.number) + '" class="btn btn-secondary btn-sm" style="justify-content:center;">Cari di CRM</a>';

    renderInfoPanelTags(tags);
}

// -------------------------------------------------------
// Pipeline modal
// -------------------------------------------------------
function openPipelineModal() {
    if (! activeConvData) return;

    // Reset form
    document.getElementById('dealTitle').value    = activeConvData.name && activeConvData.name !== activeConvData.number
        ? 'Deal - ' + activeConvData.name
        : 'Deal - ' + activeConvData.number;
    document.getElementById('dealValue').value    = '';
    document.getElementById('dealNotes').value    = '';
    document.getElementById('dealClose').value    = '';
    document.getElementById('dealPriority').value = 'medium';
    document.getElementById('pipelineError').style.display   = 'none';
    document.getElementById('pipelineSuccess').style.display = 'none';
    document.getElementById('pipelineFooter').style.display  = 'flex';
    document.getElementById('pipelineSubmitBtn').disabled    = false;
    document.getElementById('pipelineSubmitBtn').textContent = 'Masukkan ke Pipeline';

    // Info kontak
    document.getElementById('pipelineAvatar').textContent    = activeConvData.name.substring(0, 2).toUpperCase();
    document.getElementById('pipelineContactName').textContent = activeConvData.name;
    document.getElementById('pipelineContactNum').textContent  = activeConvData.number;

    openModal('pipelineModal');
    setTimeout(function() { document.getElementById('dealTitle').focus(); }, 150);
}

function submitPipeline() {
    var stageEl = document.getElementById('dealStage');
    var title   = document.getElementById('dealTitle').value.trim();
    var stageId = stageEl ? stageEl.value : '';
    var value   = document.getElementById('dealValue').value;
    var priority= document.getElementById('dealPriority').value;
    var close   = document.getElementById('dealClose').value;
    var notes   = document.getElementById('dealNotes').value.trim();
    var errEl   = document.getElementById('pipelineError');
    var btn     = document.getElementById('pipelineSubmitBtn');

    errEl.style.display = 'none';

    if (! title)   { errEl.textContent = 'Judul deal wajib diisi.'; errEl.style.display = 'block'; return; }
    if (! stageId) { errEl.textContent = 'Pilih stage pipeline terlebih dahulu.'; errEl.style.display = 'block'; return; }

    btn.disabled    = true;
    btn.textContent = 'Menyimpan...';

    fetch('/wa/inbox/' + activeConvId + '/deal', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({
            title          : title,
            stage_id       : stageId,
            value          : value ? parseFloat(value) : null,
            priority       : priority,
            expected_close : close || null,
            notes          : notes || null,
        }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (! d.success) {
            btn.disabled    = false;
            btn.textContent = 'Masukkan ke Pipeline';
            errEl.textContent   = d.message || 'Terjadi kesalahan.';
            errEl.style.display = 'block';
            return;
        }

        // Sembunyikan footer, tampilkan sukses
        document.getElementById('pipelineFooter').style.display  = 'none';
        document.getElementById('pipelineSuccess').style.display = 'block';
        document.getElementById('pipelineDealLink').href         = d.deal_url;

        showFlash(d.message, 'success');
    })
    .catch(function() {
        btn.disabled    = false;
        btn.textContent = 'Masukkan ke Pipeline';
        errEl.textContent   = 'Terjadi kesalahan koneksi.';
        errEl.style.display = 'block';
    });
}

// -------------------------------------------------------
// Show input or resolved bar
// -------------------------------------------------------
function showInputOrResolved(status) {
    if (status === 'resolved') {
        document.getElementById('chatInput').style.display   = 'none';
        document.getElementById('resolvedBar').style.display = 'block';
    } else {
        document.getElementById('chatInput').style.display   = 'flex';
        document.getElementById('resolvedBar').style.display = 'none';
        syncBotNotice();
    }
}

function syncBotNotice() {
    var isBotOn  = activeConvData && activeConvData.isBot === 'true';
    var notice   = document.getElementById('botActiveNotice');
    var inputRow = document.getElementById('msgInputRow');
    var textarea = document.getElementById('msgText');
    var sendBtn  = document.getElementById('sendBtn');
    if (notice)   notice.style.display   = isBotOn ? 'flex' : 'none';
    if (textarea) textarea.disabled      = isBotOn;
    if (sendBtn)  sendBtn.disabled       = isBotOn;
    if (inputRow) inputRow.style.opacity = isBotOn ? '0.45' : '1';
    var attachLbl = document.querySelector('label[for="attachFile"]');
    if (attachLbl) attachLbl.style.pointerEvents = isBotOn ? 'none' : '';
}

// -------------------------------------------------------
// Toggle bot
// -------------------------------------------------------
function toggleBot(convId) {
    fetch('/wa/inbox/' + convId + '/bot', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var isOn = data.is_bot_active;
        showFlash(isOn ? '🤖 AI diaktifkan — bot akan membalas otomatis.' : '✋ Anda mengambil alih percakapan.', 'success');

        // Update data attribute di list item dan activeConvData
        var listItem = document.querySelector('.wa-conv-item[data-id="' + convId + '"]');
        if (listItem) listItem.dataset.isBot = isOn ? 'true' : 'false';
        if (activeConvData) activeConvData.isBot = isOn ? 'true' : 'false';

        // Update dot di list
        var item = document.querySelector('.wa-conv-item[data-id="' + convId + '"] .bot-dot');
        if (isOn && !item) {
            var avatar = document.querySelector('.wa-conv-item[data-id="' + convId + '"] .wa-conv-avatar');
            if (avatar) {
                var dot = document.createElement('div');
                dot.className = 'bot-dot';
                dot.title = 'Bot aktif';
                avatar.appendChild(dot);
            }
        } else if (!isOn && item) {
            item.remove();
        }

        // Rebuild action buttons (Ambil Alih ↔ Aktifkan AI)
        buildChatActions(Object.assign({}, activeConvData, { isBot: isOn ? 'true' : 'false' }));

        // Sync bot notice + disable/enable input
        syncBotNotice();
    })
    .catch(function() { showFlash('Gagal toggle bot.', 'error'); });
}

// -------------------------------------------------------
// Assign
// -------------------------------------------------------
function onAgentChange(sel) {
    var opt       = sel.options[sel.selectedIndex];
    var phone     = opt ? opt.dataset.phone : '';
    var infoEl    = document.getElementById('assignNotifInfo');
    var hasPhoneEl= document.getElementById('assignNotifHasPhone');
    var noPhoneEl = document.getElementById('assignNotifNoPhone');
    var phoneSpan = document.getElementById('assignAgentPhone');
    var resultEl  = document.getElementById('assignResult');

    resultEl.style.display = 'none';

    if (! opt || ! opt.value) {
        infoEl.style.display = 'none';
        return;
    }

    infoEl.style.display    = 'block';
    if (phone) {
        hasPhoneEl.style.display = 'block';
        noPhoneEl.style.display  = 'none';
        phoneSpan.textContent    = phone;
        document.getElementById('assignBtn').textContent = 'Assign & Kirim Ringkasan';
    } else {
        hasPhoneEl.style.display = 'none';
        noPhoneEl.style.display  = 'block';
        document.getElementById('assignBtn').textContent = 'Assign (tanpa notifikasi)';
    }
}

function openAssignModal() {
    // Reset
    document.getElementById('assignSelect').value   = '';
    document.getElementById('assignNotifInfo').style.display  = 'none';
    document.getElementById('assignResult').style.display     = 'none';
    document.getElementById('assignFooter').style.display     = 'flex';
    document.getElementById('assignBtn').disabled             = false;
    document.getElementById('assignBtn').innerHTML =
        '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:14px;height:14px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
        + 'Assign &amp; Kirim Ringkasan';
    openModal('assignModal');
}

function doAssign() {
    var userId = document.getElementById('assignSelect').value;
    var btn    = document.getElementById('assignBtn');
    if (! activeConvId || ! userId) {
        document.getElementById('assignResult').style.display = 'block';
        document.getElementById('assignResult').style.background = '#fef2f2';
        document.getElementById('assignResult').style.color = '#991b1b';
        document.getElementById('assignResult').textContent = 'Pilih agent terlebih dahulu.';
        return;
    }

    btn.disabled  = true;
    btn.innerHTML = '<svg style="width:14px;height:14px;margin-right:.375rem;animation:spin .6s linear infinite;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>Memproses...';

    fetch('/wa/inbox/' + activeConvId + '/assign', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ assigned_to: userId }),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        // Sembunyikan footer, tampilkan hasil
        document.getElementById('assignFooter').style.display = 'none';

        var resultEl = document.getElementById('assignResult');
        resultEl.style.display = 'block';

        if (d.agent_notified) {
            resultEl.style.background = '#f0fdf4';
            resultEl.style.color      = '#166534';
            resultEl.style.border     = '1px solid #86efac';
            resultEl.innerHTML =
                '<div style="font-weight:600;margin-bottom:.375rem;">✓ Percakapan berhasil di-assign ke <strong>' + escHtml(d.agent_name) + '</strong></div>'
                + '<div style="font-size:.8125rem;">📱 Ringkasan chat sudah dikirim ke WA agent.</div>';
        } else {
            resultEl.style.background = '#fffbeb';
            resultEl.style.color      = '#92400e';
            resultEl.style.border     = '1px solid #fcd34d';
            var reason = d.notify_reason || (d.agent_has_phone ? 'Gagal kirim WA.' : 'Agent belum punya nomor WA.');
            resultEl.innerHTML =
                '<div style="font-weight:600;margin-bottom:.375rem;">✓ Assign ke <strong>' + escHtml(d.agent_name) + '</strong> berhasil</div>'
                + '<div style="font-size:.8125rem;">⚠ ' + escHtml(reason) + '</div>';
        }

        // Update list item
        var item = document.querySelector('.wa-conv-item[data-id="' + activeConvId + '"]');
        if (item) item.dataset.status = 'assigned';

        showFlash('Percakapan di-assign ke ' + (d.agent_name || 'agent') + '.', 'success');

        setTimeout(function() {
            closeModal('assignModal');
        }, 3500);
    })
    .catch(function() {
        btn.disabled  = false;
        btn.textContent = 'Coba Lagi';
        var resultEl = document.getElementById('assignResult');
        resultEl.style.display    = 'block';
        resultEl.style.background = '#fef2f2';
        resultEl.style.color      = '#991b1b';
        resultEl.style.border     = '1px solid #fca5a5';
        resultEl.textContent      = 'Terjadi kesalahan koneksi. Silakan coba lagi.';
    });
}

// -------------------------------------------------------
// Resolve
// -------------------------------------------------------
function resolveConv(convId) {
    if (!confirm('Tandai percakapan ini sebagai selesai?')) return;

    fetch('/wa/inbox/' + convId + '/resolve', {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
    })
    .then(function(r) { return r.json(); })
    .then(function() {
        showFlash('Percakapan diselesaikan.', 'success');
        document.getElementById('chatInput').style.display   = 'none';
        document.getElementById('resolvedBar').style.display = 'block';
        document.getElementById('chatActions').innerHTML = '';
        // Update list item
        var item = document.querySelector('.wa-conv-item[data-id="' + convId + '"]');
        if (item) {
            item.dataset.status = 'resolved';
            var preview = item.querySelector('.wa-conv-preview');
            if (preview) preview.innerHTML = '<span style="color:var(--success);">✓ Selesai</span>';
        }
    });
}

// -------------------------------------------------------
// Filter tabs
// -------------------------------------------------------
function filterConv(btn, filter) {
    document.querySelectorAll('.wa-filter-tab').forEach(function(b) { b.classList.remove('active'); });
    btn.classList.add('active');

    document.querySelectorAll('.wa-conv-item').forEach(function(item) {
        var show = true;
        if      (filter === 'unread')   show = parseInt(item.dataset.unread) > 0;
        else if (filter === 'assigned') show = item.dataset.status === 'assigned';
        else if (filter === 'resolved') show = item.dataset.status === 'resolved';
        item.style.display = show ? 'flex' : 'none';
    });
}

// -------------------------------------------------------
// Search
// -------------------------------------------------------
document.getElementById('convSearch').addEventListener('input', function() {
    var q = this.value.toLowerCase();
    document.querySelectorAll('.wa-conv-item').forEach(function(item) {
        var name = (item.dataset.name || '').toLowerCase();
        var num  = (item.dataset.number || '').toLowerCase();
        item.style.display = (name.includes(q) || num.includes(q)) ? 'flex' : 'none';
    });
});

// -------------------------------------------------------
// Enter to send
// -------------------------------------------------------
document.getElementById('msgText').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});
document.getElementById('msgText').addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});

// -------------------------------------------------------
// Helpers
// -------------------------------------------------------
function showFlash(msg, type) {
    var el = document.getElementById('flashToast');
    if (! el) return;
    el.textContent      = msg;
    el.style.background = (type === 'error') ? 'var(--danger, #ef4444)' : 'var(--success, #22c55e)';
    el.style.color      = 'white';
    el.style.display    = 'block';
    clearTimeout(el._timer);
    el._timer = setTimeout(function() { el.style.display = 'none'; }, 5000);
}

function escHtml(str) {
    return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function escAttr(str) {
    return String(str || '').replace(/\\/g,'\\\\').replace(/'/g,"\\'").replace(/"/g,'&quot;');
}
function formatTime(dt) {
    if (!dt) return '';
    return new Date(dt).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
}
function formatDate(dt) {
    if (!dt) return '';
    return new Date(dt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });
}

// Auto-open jika ada hash
if (window.location.hash) {
    var target = document.querySelector('.wa-conv-item[data-id="' + window.location.hash.slice(1) + '"]');
    if (target) target.click();
}

// -------------------------------------------------------
// Sinkronisasi: cek device + buat conversation dari kontak CRM
// -------------------------------------------------------
function doSync() {
    var btn = document.getElementById('syncBtn');
    btn.disabled = true;
    btn.innerHTML = '<svg style="width:14px;height:14px;margin-right:.375rem;animation:spin .6s linear infinite;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Menyinkronkan...';

    document.getElementById('syncResultBody').innerHTML =
        '<div style="text-align:center;padding:1.5rem 0;">'
        + '<div style="width:32px;height:32px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto .75rem;"></div>'
        + '<div style="color:var(--gray-500);">Menyinkronkan data...</div>'
        + '</div>';
    document.getElementById('syncModalFooter').style.display = 'none';
    openModal('syncModal');

    fetch('/wa/inbox/sync', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({}),
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        btn.disabled = false;
        btn.innerHTML = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Sinkronisasi';

        if (! d.success) {
            document.getElementById('syncResultBody').innerHTML =
                '<div style="background:#fef2f2;border:1px solid var(--danger);border-radius:var(--radius);padding:.875rem;font-size:.875rem;">'
                + '<strong>Gagal:</strong> ' + escHtml(d.message || 'Terjadi kesalahan.')
                + '</div>';
            document.getElementById('syncModalFooter').style.display = 'flex';
            return;
        }

        var deviceColor = d.device_status === 'connected' ? 'var(--success)' : 'var(--danger)';
        var deviceLabel = d.device_status === 'connected' ? '✓ Terhubung' : '✗ Terputus';

        // Preview kontak yang dibuat
        var rowsHtml = '';
        if (d.rows && d.rows.length > 0) {
            rowsHtml = '<div style="margin-top:.875rem;">'
                + '<div style="font-size:.75rem;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.375rem;">Percakapan Baru</div>'
                + '<div style="border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;max-height:180px;overflow-y:auto;">';
            d.rows.forEach(function(r) {
                var initials = r.name.substring(0,2).toUpperCase();
                rowsHtml += '<div style="display:flex;align-items:center;gap:.5rem;padding:.4rem .625rem;border-bottom:1px solid var(--gray-100);font-size:.8125rem;">'
                    + '<span style="width:26px;height:26px;border-radius:50%;background:#25d366;color:white;display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;flex-shrink:0;">' + escHtml(initials) + '</span>'
                    + '<div style="flex:1;min-width:0;">'
                    +   '<div style="font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + escHtml(r.name) + '</div>'
                    +   '<div style="color:var(--gray-400);font-size:.75rem;">' + escHtml(r.phone) + '</div>'
                    + '</div>'
                    + '</div>';
            });
            if (d.conv_created > 20) {
                rowsHtml += '<div style="padding:.375rem .625rem;font-size:.75rem;color:var(--gray-400);text-align:center;">+ ' + (d.conv_created - 20) + ' lainnya</div>';
            }
            rowsHtml += '</div></div>';
        }

        // Info webhook Kirimi
        var noteHtml = '<div style="margin-top:.75rem;background:#eff6ff;border:1px solid #93c5fd;border-radius:var(--radius);padding:.625rem .875rem;font-size:.8125rem;color:#1e40af;">'
            + '<strong>ℹ️ Catatan:</strong> Sinkronisasi membuat percakapan baru dari kontak CRM. '
            + 'Pesan masuk akan otomatis masuk inbox via webhook Kirimi. '
            + 'Pastikan URL berikut sudah diset di dashboard Kirimi:<br>'
            + '<code style="background:#dbeafe;padding:2px 6px;border-radius:3px;font-size:.8rem;word-break:break-all;">' + escHtml(d.webhook_url) + '</code>'
            + '</div>';

        document.getElementById('syncResultBody').innerHTML =
            // Status device
            '<div style="display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem;background:var(--gray-50);border-radius:var(--radius);margin-bottom:.875rem;">'
            +   '<div style="width:9px;height:9px;border-radius:50%;background:' + deviceColor + ';flex-shrink:0;"></div>'
            +   '<div style="font-size:.8125rem;"><strong>Device:</strong> ' + escHtml(d.device_name || '—') + ' — <span style="color:' + deviceColor + ';">' + deviceLabel + '</span></div>'
            + '</div>'
            // Statistik
            + '<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.875rem;">'
            +   statCard(d.conv_created, 'Percakapan Dibuat', 'var(--success)')
            +   statCard(d.conv_skipped, 'Sudah Ada',         'var(--gray-400)')
            +   statCard(d.linked,       'Kontak Ter-link',   'var(--primary)')
            + '</div>'
            + rowsHtml
            + noteHtml;

        document.getElementById('syncModalFooter').style.display = 'flex';

        // Tambahkan percakapan baru ke list
        if (d.conv_created > 0 && d.rows && d.rows.length > 0) {
            var listEl  = document.getElementById('convList');
            var emptyEl = listEl.querySelector('[data-empty]');
            if (emptyEl) emptyEl.remove();

            d.rows.forEach(function(r) {
                if (document.querySelector('.wa-conv-item[data-id="' + r.id + '"]')) return;
                var item = document.createElement('div');
                item.className = 'wa-conv-item';
                item.dataset.id     = r.id;
                item.dataset.status = 'open';
                item.dataset.unread = '0';
                item.dataset.name   = r.name;
                item.dataset.number = r.phone;
                item.innerHTML =
                    '<div class="wa-conv-avatar">' + escHtml(r.name.substring(0,2).toUpperCase()) + '</div>'
                    + '<div class="wa-conv-body">'
                    +   '<div class="wa-conv-name">' + escHtml(r.name) + '</div>'
                    +   '<div style="font-size:.7rem;color:var(--gray-400);margin-top:1px;">' + escHtml(r.phone) + '</div>'
                    +   '<div class="wa-conv-preview" style="color:var(--gray-400);">Belum ada pesan</div>'
                    + '</div>'
                    + '<div class="wa-conv-meta"><span class="wa-conv-time">baru</span></div>';
                item.onclick = function() { openConversation(this); };
                listEl.appendChild(item);
            });
        }
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:16px;height:16px;margin-right:.375rem;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Sinkronisasi';
        document.getElementById('syncResultBody').innerHTML =
            '<div style="color:var(--danger);padding:1rem;text-align:center;">Gagal terhubung ke server. Silakan coba lagi.</div>';
        document.getElementById('syncModalFooter').style.display = 'flex';
    });
}

function statCard(val, label, color) {
    return '<div style="text-align:center;padding:.5rem .375rem;background:var(--gray-50);border-radius:var(--radius);">'
        + '<div style="font-size:1.375rem;font-weight:700;color:' + color + ';">' + (val || 0) + '</div>'
        + '<div style="font-size:.625rem;color:var(--gray-500);margin-top:1px;line-height:1.3;">' + label + '</div>'
        + '</div>';
}

// -------------------------------------------------------
// Mulai Percakapan Baru
// -------------------------------------------------------
var startConvSearchTimer = null;

document.getElementById('startConvSearch').addEventListener('input', function() {
    var q = this.value.trim();
    clearTimeout(startConvSearchTimer);
    if (q.length < 2) {
        document.getElementById('startConvResults').style.display = 'none';
        return;
    }
    startConvSearchTimer = setTimeout(function() {
        fetch('/contacts/api/search?q=' + encodeURIComponent(q), {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var box = document.getElementById('startConvResults');
            if (!data.length) {
                box.style.display = 'none';
                return;
            }
            box.innerHTML = '';
            data.forEach(function(c) {
                var item = document.createElement('div');
                item.style.cssText = 'padding:.5rem .75rem;cursor:pointer;font-size:.8125rem;border-bottom:1px solid var(--gray-100);';
                item.innerHTML = '<strong>' + escHtml(c.name) + '</strong> <span style="color:var(--gray-400);">' + escHtml(c.phone) + '</span>';
                item.onmouseenter = function() { this.style.background = 'var(--gray-50)'; };
                item.onmouseleave = function() { this.style.background = ''; };
                item.onclick = function() {
                    document.getElementById('startConvPhone').value = c.phone;
                    document.getElementById('startConvName').value  = c.name;
                    document.getElementById('startConvSearch').value = c.name;
                    box.style.display = 'none';
                };
                box.appendChild(item);
            });
            box.style.display = 'block';
        })
        .catch(function() {});
    }, 300);
});

document.addEventListener('click', function(e) {
    if (!e.target.closest('#startConvSearch') && !e.target.closest('#startConvResults')) {
        document.getElementById('startConvResults').style.display = 'none';
    }
});

function doStartConv() {
    var phone = document.getElementById('startConvPhone').value.trim();
    var msg   = document.getElementById('startConvMsg').value.trim();
    var name  = document.getElementById('startConvName').value.trim();
    var errEl = document.getElementById('startConvError');
    var btn   = document.getElementById('startConvBtn');

    errEl.style.display = 'none';

    if (!phone) { errEl.textContent = 'Nomor WhatsApp wajib diisi.'; errEl.style.display = 'block'; return; }
    if (!msg)   { errEl.textContent = 'Pesan awal wajib diisi.';      errEl.style.display = 'block'; return; }

    btn.disabled = true;
    btn.textContent = 'Mengirim...';

    fetch('/wa/inbox/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ phone: phone, message: msg, contact_name: name }),
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        btn.disabled = false;
        btn.textContent = 'Kirim & Buka Chat';

        if (!data.success && data.message_info) {
            errEl.textContent = 'Peringatan: ' + data.message_info + '. Percakapan tetap dibuat.';
            errEl.style.display = 'block';
        }

        if (data.conversation) {
            closeModal('startConvModal');
            document.getElementById('startConvPhone').value  = '';
            document.getElementById('startConvMsg').value    = '';
            document.getElementById('startConvName').value   = '';
            document.getElementById('startConvSearch').value = '';

            // Tambahkan percakapan baru ke list (atau reload halaman)
            var conv = data.conversation;
            var displayName = name || conv.wa_name || conv.wa_number;
            var existingItem = document.querySelector('.wa-conv-item[data-id="' + conv.id + '"]');
            if (existingItem) {
                existingItem.click();
            } else {
                // Tambah item baru ke atas list
                var listEl = document.getElementById('convList');
                var emptyEl = listEl.querySelector('div[style*="text-align:center"]');
                if (emptyEl) emptyEl.remove();

                var newItem = document.createElement('div');
                newItem.className = 'wa-conv-item';
                newItem.dataset.id     = conv.id;
                newItem.dataset.status = conv.status;
                newItem.dataset.unread = '0';
                newItem.dataset.name   = displayName;
                newItem.dataset.number = conv.wa_number;
                newItem.innerHTML =
                    '<div class="wa-conv-avatar">' + displayName.substring(0,2).toUpperCase() + '</div>'
                    + '<div class="wa-conv-body">'
                    +   '<div class="wa-conv-name">' + escHtml(displayName) + '</div>'
                    +   '<div style="font-size:.7rem;color:var(--gray-400);margin-top:1px;">' + escHtml(conv.wa_number) + '</div>'
                    +   '<div class="wa-conv-preview">' + escHtml(conv.last_message || '') + '</div>'
                    + '</div>'
                    + '<div class="wa-conv-meta"><span class="wa-conv-time">baru saja</span></div>';
                newItem.onclick = function() { openConversation(this); };
                listEl.insertBefore(newItem, listEl.firstChild);
                newItem.click();
            }
        }
    })
    .catch(function(err) {
        btn.disabled = false;
        btn.textContent = 'Kirim & Buka Chat';
        errEl.textContent = 'Terjadi kesalahan. Silakan coba lagi.';
        errEl.style.display = 'block';
    });
}
</script>
@endpush