{{--
    chat_panel.blade.php
    Rendered as a JSON fragment via ConversationController::chatPanel()
    Injected into #wacRightPanel — NO styles here (parent index.blade.php has them)
    NO auto-refresh here — parent index.blade.php calls wacRefreshBody()
--}}

<div class="wa-panel-wrap">

    {{-- Header --}}
    <div class="wa-phdr">
        <div class="wa-phdr-av" id="wacPanelAvatar">
            {{ strtoupper(substr($session->contact_name ?: '?', 0, 1)) }}
        </div>
        <div class="wa-phdr-info">
            <div class="wa-phdr-name">{{ $session->contact_name ?: 'Unknown' }}</div>
            <div class="wa-phdr-phone">+{{ $session->phone }}</div>
        </div>
        <span class="wa-phdr-state {{ $session->state === 'HANDOVER' ? 'handover' : ($session->state === 'IDLE' ? 'idle' : 'bot') }}">
            {{ $session->state === 'HANDOVER' ? '🙋 Agent' : ($session->state === 'IDLE' ? '⏸ Idle' : '🤖 Bot') }}
        </span>
        <div class="wa-phdr-actions">
            <a href="https://wa.me/{{ $session->phone }}" target="_blank" class="wa-phdr-btn" title="Open in WhatsApp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <button class="wa-phdr-btn" title="Refresh messages"
                    onclick="wacRefreshBody('{{ $session->phone }}')">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
    </div>

    {{-- Messages --}}
    <div class="wa-pbody" id="wacChatBox">

        @php $prevDate = null; @endphp

        @forelse($messages as $msg)
            @php
                $msgDate   = $msg->created_at->format('Y-m-d');
                $isOut     = $msg->direction === 'outgoing';
                $today     = now()->format('Y-m-d');
                $yesterday = now()->subDay()->format('Y-m-d');
                $dateLabel = $msgDate === $today     ? 'Today'
                           : ($msgDate === $yesterday ? 'Yesterday'
                           : $msg->created_at->format('d M Y'));
            @endphp

            @if($msgDate !== $prevDate)
                <div class="wa-date-sep"><span>{{ $dateLabel }}</span></div>
                @php $prevDate = $msgDate; @endphp
            @endif

            <div class="wa-row {{ $isOut ? 'out' : 'in' }}">
                <div class="wa-bbl {{ $isOut ? 'out' : 'in' }}">
                    {{ $msg->message }}
                    <div class="wa-bbl-foot">
                        <span class="wa-bbl-time">{{ $msg->created_at->format('h:i A') }}</span>
                        @if($isOut)
                            @if($msg->source === 'ai')
                                <span class="wa-src wa-src-ai">AI</span>
                            @elseif($msg->source === 'human')
                                <span class="wa-src wa-src-human">Agent</span>
                            @else
                                <span class="wa-src wa-src-bot">Bot</span>
                            @endif
                            <span class="wa-tick">✓✓</span>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;opacity:.45;gap:.5rem">
                <div style="font-size:3rem">💬</div>
                <div style="font-size:.82rem;color:#667781">No messages yet</div>
            </div>
        @endforelse

    </div>

    {{-- Agent indicator --}}
    <div class="wa-agent-bar">
        <div class="wa-agent-badge">
            <div class="wa-agent-dot"></div>
            Sending as human agent
        </div>
        <span style="opacity:.7">Ctrl+Enter to send</span>
    </div>

    {{-- Input --}}
    <div class="wa-pfooter">
        <button class="wa-emoji-btn" title="Emoji">😊</button>
        <div class="wa-input-pill">
            <textarea id="wacReplyText" rows="1"
                      placeholder="Type a message…"
                      oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px'"></textarea>
        </div>
        <button class="wa-send-btn" onclick="wacSend()" title="Send (Ctrl+Enter)">
            <i class="fas fa-paper-plane" style="margin-left:2px"></i>
        </button>
    </div>

</div>

<script>
/* Avatar for chat header */
(function(){
    var name = '{{ addslashes($session->contact_name ?: $session->phone) }}';
    var el   = document.getElementById('wacPanelAvatar');
    if (!el) return;
    var img  = new Image();
    img.onload  = function(){ el.innerHTML=''; el.appendChild(img); };
    img.onerror = function(){};
    img.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name)
            + '&background=25D366&color=fff&size=84&bold=true&rounded=true';
    img.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:50%';
})();

/* Keyboard shortcut Ctrl+Enter */
(function(){
    var ta = document.getElementById('wacReplyText');
    if (ta) {
        ta.addEventListener('keydown', function(e){
            if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); wacSend(); }
        });
        ta.focus();
    }
})();
</script>