@extends('agency.layouts.app')

@section('title', 'Canlı Destek')
@section('page_title', 'Ziyaretçi Canlı Desteği')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/agency/css/site-studio.css') }}?v={{ filemtime(public_path('assets/agency/css/site-studio.css')) }}">
<style>
    /* Sohbet kutusu ekranı doldurur; sayfa değil, listeler kayar. */
    #sxChatCard { height: calc(100vh - 268px); min-height: 460px; overflow: hidden; display: flex; flex-direction: column; }
    #sxChatCard .sx-chat { flex: 1; min-height: 0; }
</style>
@endpush

@section('content')
<x-site-studio active="chats">
    <div class="sx-card" id="sxChatCard">
        <div class="sx-chat">
            {{-- ── Sohbet listesi ── --}}
            <div class="sx-chat__side">
                <div class="sx-card__top" style="border-radius:0">
                    <span class="sx-card__t"><i class="fas fa-headset"></i> Sohbetler</span>
                    <span class="sx-card__hint" id="sxWaiting" hidden></span>
                </div>
                <div class="sx-card__body" style="padding:.5rem .55rem">
                    <div class="sx-seg" style="width:100%">
                        <button type="button" class="on" data-filter="all">Tümü</button>
                        <button type="button" data-filter="waiting">Bekleyen</button>
                        <button type="button" data-filter="closed">Kapalı</button>
                    </div>
                </div>
                <div class="sx-chat__list" id="sxConvList">
                    <div class="sxe-empty"><i class="fas fa-circle-notch fa-spin"></i><small>Yükleniyor…</small></div>
                </div>
            </div>

            {{-- ── Konuşma ── --}}
            <div class="sx-chat__main" id="sxThreadPane">
                <div class="sx-empty" id="sxThreadEmpty" style="margin:auto">
                    <span class="sx-empty__ic"><i class="fas fa-comments"></i></span>
                    <span class="sx-empty__t">Bir sohbet seçin</span>
                    <span class="sx-empty__s">
                        Sitenizdeki canlı destek balonundan gelen mesajlar burada toplanır.
                        İlk yanıtı veren personel sohbeti üstlenir.
                    </span>
                </div>

                <div id="sxThreadWrap" hidden style="display:flex;flex-direction:column;min-height:0;flex:1">
                    <div class="sx-card__top" style="border-radius:0">
                        <span class="sx-conv__av" id="sxVisitorAv">Z</span>
                        <span class="sx-card__t" style="display:flex;flex-direction:column;gap:1px">
                            <span id="sxVisitorName" style="font-size:.8rem">—</span>
                            <span id="sxVisitorMeta" style="font-size:.66rem;font-weight:650;color:var(--sx-mut)"></span>
                        </span>
                        <button type="button" class="sx-chip" id="sxCustomerBtn"><i class="fas fa-user-plus"></i> Müşteri kaydı</button>
                        <button type="button" class="sx-chip" id="sxCloseBtn"><i class="fas fa-box-archive"></i> Kapat</button>
                    </div>

                    <div class="sx-thread" id="sxThread"></div>

                    <form class="sx-composer" id="sxComposer">
                        <input type="text" name="message" class="sx-input" placeholder="Yanıtınızı yazın…" autocomplete="off" required maxlength="2000">
                        <button type="submit" class="sx-btn sx-btn--primary"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-site-studio>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';

    const BASE = '{{ url('agency/site/visitor-chats') }}';
    const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

    let conversations = [];
    let filter = 'all';
    let currentId = null;
    let currentCustomerId = null;
    let lastMessageId = 0;
    let lastDay = null;

    /* ── Liste ── */
    async function refreshList() {
        try {
            const data = await sxApi('GET', BASE + '/poll');
            conversations = data.conversations || [];

            const badge = document.getElementById('sxWaiting');
            badge.hidden = !data.waiting;
            badge.textContent = data.waiting + ' yanıt bekliyor';

            paintList();
        } catch (error) { /* sessiz: kısa kesinti listeyi boşaltmasın */ }
    }

    function visible() {
        if (filter === 'waiting') return conversations.filter((c) => c.status !== 'closed' && c.last_from_visitor);
        if (filter === 'closed') return conversations.filter((c) => c.status === 'closed');
        return conversations;
    }

    function paintList() {
        const holder = document.getElementById('sxConvList');
        const rows = visible();

        if (!rows.length) {
            holder.innerHTML = '<div class="sxe-empty"><i class="fas fa-comment-dots"></i>' +
                '<b>Sohbet yok</b><small>Ziyaretçi mesajları site üzerindeki canlı destek balonundan düşer.</small></div>';
            return;
        }

        holder.innerHTML = '';
        rows.forEach((conversation) => {
            const waiting = conversation.status !== 'closed' && conversation.last_from_visitor;
            const row = document.createElement('div');
            row.className = 'sx-conv' + (conversation.id === currentId ? ' on' : '') + (waiting ? ' wait' : '');
            row.innerHTML =
                '<span class="sx-conv__av">' + esc((conversation.visitor_name || 'Z').charAt(0).toUpperCase()) + '</span>' +
                '<span class="sx-conv__b">' +
                    '<span class="sx-conv__t"><span>' + esc(conversation.visitor_name) + '</span>' +
                        (conversation.customer_id ? '<i class="fas fa-address-card" style="font-size:.6rem;color:var(--sx-ok)" title="Müşteri kaydı var"></i>' : '') +
                        (conversation.status === 'closed' ? '<span class="sx-tag">Kapalı</span>' : (waiting ? '<span class="sx-tag sx-tag--hot">Bekliyor</span>' : '')) +
                    '</span>' +
                    '<span class="sx-conv__p">' + esc(conversation.last_message || 'Yeni sohbet') + '</span>' +
                '</span>' +
                '<span class="sx-conv__time">' + esc(conversation.last_message_at || '') + '</span>';
            row.addEventListener('click', () => openThread(conversation));
            holder.appendChild(row);
        });
    }

    document.querySelectorAll('[data-filter]').forEach((button) => {
        button.addEventListener('click', () => {
            document.querySelectorAll('[data-filter]').forEach((other) => other.classList.remove('on'));
            button.classList.add('on');
            filter = button.dataset.filter;
            paintList();
        });
    });

    /* ── Konuşma ── */
    function paintCustomerButton(customerId, customerName) {
        currentCustomerId = customerId || null;
        const button = document.getElementById('sxCustomerBtn');
        button.innerHTML = currentCustomerId
            ? '<i class="fas fa-address-card"></i> ' + esc(customerName || 'Müşteri kartı')
            : '<i class="fas fa-user-plus"></i> Müşteri kaydı';
        button.classList.toggle('on', !!currentCustomerId);
    }

    async function openThread(conversation) {
        currentId = conversation.id;
        lastMessageId = 0;
        lastDay = null;

        document.getElementById('sxThreadEmpty').hidden = true;
        document.getElementById('sxThreadWrap').hidden = false;
        document.getElementById('sxThread').innerHTML = '';
        document.getElementById('sxVisitorAv').textContent = (conversation.visitor_name || 'Z').charAt(0).toUpperCase();
        document.getElementById('sxVisitorName').textContent = conversation.visitor_name;
        document.getElementById('sxVisitorMeta').textContent =
            [conversation.visitor_phone, conversation.visitor_email].filter(Boolean).join(' · ') || 'İletişim bilgisi yok';
        paintCustomerButton(conversation.customer_id, conversation.customer_name);
        paintList();

        await loadMessages();
        document.getElementById('sxComposer').message.focus();
    }

    async function loadMessages() {
        if (!currentId) return;
        try {
            const data = await sxApi('GET', BASE + '/' + currentId + '/messages?after_id=' + lastMessageId);
            const thread = document.getElementById('sxThread');

            data.messages.forEach((message) => {
                lastMessageId = Math.max(lastMessageId, message.id);

                const day = (message.time || '').split(' ')[0];
                if (day && day !== lastDay) {
                    lastDay = day;
                    const separator = document.createElement('span');
                    separator.className = 'sx-day';
                    separator.textContent = day;
                    thread.appendChild(separator);
                }

                const bubble = document.createElement('div');
                bubble.className = 'sx-msg ' + (message.from_visitor ? 'sx-msg--in' : 'sx-msg--out');
                bubble.innerHTML = '<span class="sx-msg__b"></span><span class="sx-msg__m"></span>';
                bubble.querySelector('.sx-msg__b').textContent = message.body;
                bubble.querySelector('.sx-msg__m').textContent = message.sender_name + ' · ' + (message.time || '').split(' ').pop();
                thread.appendChild(bubble);
            });

            if (data.messages.length) thread.scrollTop = thread.scrollHeight;
        } catch (error) { /* sessiz */ }
    }

    document.getElementById('sxComposer').addEventListener('submit', async (event) => {
        event.preventDefault();
        const input = event.target.message;
        const text = input.value.trim();
        if (!text || !currentId) return;
        input.value = '';
        try {
            await sxApi('POST', BASE + '/' + currentId + '/send', { message: text });
            await loadMessages();
            refreshList();
        } catch (error) {
            input.value = text;
            appToast({ icon: 'error', title: error.message });
        }
    });

    document.getElementById('sxCustomerBtn').addEventListener('click', async () => {
        if (!currentId) return;

        if (currentCustomerId) {
            if (window.openCustomerDrawer) window.openCustomerDrawer(currentCustomerId);
            else window.open('{{ url('agency/customers') }}/' + currentCustomerId, '_blank');
            return;
        }

        const ok = await appConfirm({
            title: 'Müşteri kaydı',
            text: 'Telefon/e-posta ile eşleşen kayıt aranır; bulunamazsa sohbetteki bilgilerle yeni müşteri oluşturulur.',
            confirmButtonText: 'Devam',
        });
        if (!ok) return;

        try {
            const data = await sxApi('POST', '{{ url('agency/chat/conversations') }}/' + currentId + '/link-customer');
            appToast({ icon: 'success', title: data.message });
            paintCustomerButton(data.customer.id, data.customer.name);
            refreshList();
        } catch (error) { appToast({ icon: 'error', title: error.message }); }
    });

    document.getElementById('sxCloseBtn').addEventListener('click', async () => {
        if (!currentId) return;
        const ok = await appConfirm({
            title: 'Sohbet kapatılsın mı?',
            text: 'Ziyaretçi yeni mesaj yazarsa sohbet kendiliğinden yeniden açılır.',
            confirmButtonText: 'Kapat',
        });
        if (!ok) return;
        try {
            const data = await sxApi('POST', BASE + '/' + currentId + '/close');
            appToast({ icon: 'success', title: data.message });
            refreshList();
        } catch (error) { appToast({ icon: 'error', title: error.message }); }
    });

    /* ── Yoklama ── */
    refreshList();
    setInterval(refreshList, 6000);
    setInterval(loadMessages, 4000);
})();
</script>
@endpush