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

<style>
.wa-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    min-height: 500px;
    background: var(--card-bg, #fff);
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

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

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

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

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

/* Bubbles */
.wa-bbl {
    max-width: 68%;
    padding: .5rem .8rem .32rem;
    border-radius: 7.5px;
    font-size: .875rem;
    line-height: 1.45;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,.13);
    word-break: break-word;
    white-space: pre-wrap;
}
.wa-bbl.in  { background: #fff; border-top-left-radius: 0; color: #111b21; }
.wa-bbl.out { background: #d9fdd3; border-top-right-radius: 0; color: #111b21; }
[data-theme=dark] .wa-bbl.in  { background: #202c33; color: #e9edef; }
[data-theme=dark] .wa-bbl.out { background: #005c4b; color: #e9edef; }

/* Bubble tails */
.wa-bbl.in::before {
    content: '';
    position: absolute;
    top: 0; left: -8px;
    width: 0; height: 0;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
}
.wa-bbl.out::after {
    content: '';
    position: absolute;
    top: 0; right: -8px;
    width: 0; height: 0;
    border-top: 8px solid #d9fdd3;
    border-right: 8px solid transparent;
}
[data-theme=dark] .wa-bbl.in::before  { border-top-color: #202c33; }
[data-theme=dark] .wa-bbl.out::after  { border-top-color: #005c4b; }

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

/* ── Ticks — bigger & bolder ── */
.wa-tick {
    font-size: 1rem;
    font-weight: 900;
    color: #53bdeb;
    line-height: 1;
    letter-spacing: -2px;
}
.wa-tick.sent { color: #8696a0; }

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

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

/* Scrollbar */
.wa-body::-webkit-scrollbar { width: 5px; }
.wa-body::-webkit-scrollbar-track { background: transparent; }
.wa-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }

@media (max-width: 575px) {
    .wa-bbl { max-width: 85%; }
    .wa-header-actions { display: none; }
}
</style>

<div class="wa-wrap">

    {{-- Header --}}
    <div class="wa-header">
        <a href="{{ route('admin.whatsappcenter.conversations.index') }}" class="wa-header-back" title="Back to conversations">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="wa-header-av" id="contactAvatar">
            {{ strtoupper(substr($session->contact_name ?: '?', 0, 1)) }}
        </div>
        <div class="wa-header-info">
            <div class="wa-header-name">{{ $session->contact_name ?: 'Unknown' }}</div>
            <div class="wa-header-sub">+{{ $session->phone }}</div>
        </div>
        <span class="wa-header-state {{ $session->state === 'HANDOVER' ? 'wa-state-handover' : ($session->state === 'IDLE' ? 'wa-state-idle' : 'wa-state-bot') }}">
            {{ $session->state === 'HANDOVER' ? '🙋 Agent' : ($session->state === 'IDLE' ? '⏸ Idle' : '🤖 Bot') }}
        </span>
        <div class="wa-header-actions">
            <a href="https://wa.me/{{ $session->phone }}" target="_blank" class="wa-header-btn" title="Open in WhatsApp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <button class="wa-header-btn" title="Refresh" onclick="location.reload()">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
    </div>

    {{-- Chat Body --}}
    <div class="wa-body" id="chatBox">

        @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:.5">
                <div style="font-size:3rem">💬</div>
                <div style="font-size:.85rem;color:#667781;margin-top:.5rem">No messages yet</div>
            </div>
        @endforelse

    </div>

    {{-- Agent bar --}}
    <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 Footer --}}
    <div class="wa-footer">
        <button class="wa-emoji-btn" title="Emoji">😊</button>
        <div class="wa-input-wrap">
            <textarea id="replyText" 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="sendMsg()" title="Send (Ctrl+Enter)">
            <i class="fas fa-paper-plane" style="margin-left:2px"></i>
        </button>
    </div>

</div>

<script>
const cb = document.getElementById('chatBox');
cb.scrollTop = cb.scrollHeight;

// ── Try to load WhatsApp profile picture ───────────────────────────────
(function loadAvatar() {
    const phone = '{{ $session->phone }}';
    // WhatsApp doesn't expose profile pics via Cloud API directly.
    // We try UI Avatars as a fallback with the contact's initials styled nicely.
    const name  = encodeURIComponent('{{ $session->contact_name ?: $session->phone }}');
    const avEl  = document.getElementById('contactAvatar');
    const img   = new Image();
    img.onload  = () => { avEl.innerHTML = ''; avEl.appendChild(img); };
    img.onerror = () => {}; // keep initial letter
    img.src     = 'https://ui-avatars.com/api/?name=' + name + '&background=25D366&color=fff&size=84&bold=true&rounded=true';
    img.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:50%';
    img.alt = '{{ $session->contact_name ?: "Contact" }}';
})();

// ── Send message ───────────────────────────────────────────────────────
function sendMsg() {
    const ta  = document.getElementById('replyText');
    const txt = ta.value.trim();
    if (!txt) return;

    const now     = new Date();
    const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
    const row     = document.createElement('div');
    row.className = 'wa-row out';
    row.innerHTML =
        '<div class="wa-bbl out">' + escHtml(txt) +
        '<div class="wa-bbl-foot">' +
            '<span class="wa-bbl-time">' + timeStr + '</span>' +
            '<span class="wa-src wa-src-human">Agent</span>' +
            '<span class="wa-tick sent">✓</span>' +
        '</div></div>';
    cb.appendChild(row);
    cb.scrollTop = cb.scrollHeight;

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

    fetch('{{ route("admin.whatsappcenter.conversations.send", $session->phone) }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ message: txt })
    })
    .then(r => r.json())
    .then(d => {
        const tick = row.querySelector('.wa-tick');
        if (d.success && tick) { tick.textContent = '✓✓'; tick.classList.remove('sent'); }
    })
    .catch(() => {
        const tick = row.querySelector('.wa-tick');
        if (tick) { tick.textContent = '⚠'; tick.style.color = '#ef4444'; }
    });
}

function escHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
             .replace(/"/g,'&quot;').replace(/\n/g,'<br>');
}

document.getElementById('replyText').addEventListener('keydown', e => {
    if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); sendMsg(); }
});

// Auto-refresh every 15s for new incoming messages
setInterval(() => {
    fetch(location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(r => r.text())
    .then(html => {
        const doc     = new DOMParser().parseFromString(html, 'text/html');
        const newBody = doc.getElementById('chatBox');
        if (newBody) {
            const atBottom = cb.scrollTop + cb.clientHeight >= cb.scrollHeight - 50;
            cb.innerHTML   = newBody.innerHTML;
            if (atBottom) cb.scrollTop = cb.scrollHeight;
        }
    }).catch(() => {});
}, 15000);
</script>