{{--
    Ziyaretçi canlı destek widget'ı (Faz 4).
    chat_config.enabled true olan yayınlanmış sitelerde render edilir.
    Personel çevrimiçiyse canlı sohbet; değilse çevrimdışı mesaj formu
    (site_form_submissions → chat_offline) gösterilir.
--}}
@php
    $chatConfig = $snapshot->chat();
    $chatBase = route('customer.agency.chat.status', $agency->slug);
    $chatBase = substr($chatBase, 0, -strlen('/status'));
    $offlineAction = route('customer.agency.forms.submit', ['agency' => $agency->slug, 'formKey' => 'chat_offline']);
@endphp
@if(($chatConfig['enabled'] ?? false) && ! $preview)
<div class="v-chat" id="vChat"
     data-base="{{ $chatBase }}"
     data-offline-action="{{ $offlineAction }}"
     data-csrf="{{ csrf_token() }}">
    <button type="button" class="v-chat__bubble" id="vChatBubble" aria-label="Canlı destek">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
        <span class="v-chat__badge" id="vChatBadge" hidden></span>
    </button>

    <div class="v-chat__panel" id="vChatPanel" hidden>
        <div class="v-chat__head">
            <div>
                <strong>{{ $agency->name }}</strong>
                <span class="v-chat__presence" id="vChatPresence"><i></i> Bağlanıyor…</span>
            </div>
            <button type="button" class="v-chat__close" id="vChatClose" aria-label="Kapat">✕</button>
        </div>

        {{-- Başlangıç formu (henüz konuşma yoksa, çevrimiçi) --}}
        <form class="v-chat__view" id="vChatStart" hidden>
            <p class="v-chat__welcome">{{ $chatConfig['welcome_message'] ?? 'Merhaba! Size nasıl yardımcı olabiliriz?' }}</p>
            <input type="text" name="name" placeholder="Adınız *" required maxlength="120">
            <input type="tel" name="phone" placeholder="Telefon" maxlength="30">
            <input type="email" name="email" placeholder="E-posta" maxlength="190">
            <small class="v-chat__hint">Telefon veya e-postanızdan en az birini girin — sizi kayıtlarımızda bulup daha hızlı yardımcı olalım.</small>
            <textarea name="message" placeholder="Mesajınız *" rows="3" required maxlength="2000"></textarea>
            <button type="submit" class="v-chat__send-btn">Sohbeti Başlat</button>
        </form>

        {{-- Çevrimdışı formu --}}
        <form class="v-chat__view" id="vChatOffline" hidden>
            <p class="v-chat__welcome">{{ $chatConfig['offline_message'] ?? 'Şu an çevrimdışıyız; mesajınızı bırakın, en kısa sürede dönelim.' }}</p>
            <input type="text" name="name" placeholder="Adınız *" required maxlength="120">
            <input type="tel" name="phone" placeholder="Telefon *" required maxlength="30">
            <textarea name="message" placeholder="Mesajınız *" rows="3" required maxlength="2000"></textarea>
            <button type="submit" class="v-chat__send-btn">Mesaj Bırak</button>
        </form>

        {{-- Mesaj akışı --}}
        <div class="v-chat__view" id="vChatThread" hidden>
            <div class="v-chat__messages" id="vChatMessages"></div>
            <form class="v-chat__composer" id="vChatComposer">
                <input type="text" name="message" placeholder="Mesajınız…" autocomplete="off" required maxlength="2000">
                <button type="submit" aria-label="Gönder">➤</button>
            </form>
        </div>

        <div class="v-chat__view v-chat__done" id="vChatDone" hidden>
            <p>✅ Mesajınız alındı. En kısa sürede size dönüş yapacağız.</p>
        </div>
    </div>
</div>

<style>
    .v-chat { position: fixed; right: 22px; bottom: 22px; z-index: 350; font-family: var(--v-font-body); }
    /* hidden attribute'u display:flex kurallarına yenilmesin */
    .v-chat [hidden], .v-chat__panel[hidden] { display: none !important; }
    .v-chat__bubble {
        width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
        background: var(--v-primary); color: #fff; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 10px 30px -8px rgba(15, 40, 70, .5); transition: transform .15s ease; position: relative;
    }
    .v-chat__bubble:hover { transform: scale(1.06); }
    .v-chat__bubble svg { width: 26px; height: 26px; }
    .v-chat__badge {
        position: absolute; top: -2px; right: -2px; background: #E23744; color: #fff;
        min-width: 20px; height: 20px; border-radius: 999px; font: 700 11px/20px var(--v-font-body); padding: 0 5px;
    }
    .v-chat__panel {
        position: absolute; right: 0; bottom: 74px; width: 400px; height: min(620px, calc(100vh - 130px));
        background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(10, 22, 36, .4);
        display: flex; flex-direction: column; overflow: hidden;
        animation: vChatIn .25s cubic-bezier(.2, .9, .3, 1.1);
    }
    /* Sohbet görünümü paneli tamamen doldursun (mesaj alanı uzasın) */
    .v-chat__panel > #vChatThread { flex: 1; min-height: 0; }
    @keyframes vChatIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
    .v-chat__head {
        background: var(--v-primary-dark); color: #fff; padding: 14px 16px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .v-chat__head strong { display: block; font-size: 14.5px; }
    .v-chat__presence { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .85; }
    .v-chat__presence i { width: 8px; height: 8px; border-radius: 50%; background: #9AA7B5; }
    .v-chat__presence.online i { background: #34D399; }
    .v-chat__close { background: none; border: 0; color: rgba(255,255,255,.8); cursor: pointer; font-size: 15px; }
    .v-chat__view { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
    .v-chat__welcome { font-size: 13.5px; color: var(--v-muted); margin: 0; }
    .v-chat__hint { font-size: 11.5px; color: var(--v-muted); line-height: 1.4; margin-top: -4px; }
    .v-chat__error { font-size: 12.5px; color: #B02A2F; background: #FBE7E8; border-radius: 8px; padding: 8px 10px; }
    .v-chat__view input, .v-chat__view textarea {
        border: 1.5px solid #E4E9F0; border-radius: 10px; padding: 10px 12px;
        font: 500 13.5px/1.4 var(--v-font-body); outline: none; width: 100%;
    }
    .v-chat__view input:focus, .v-chat__view textarea:focus { border-color: var(--v-primary); }
    .v-chat__send-btn {
        background: var(--v-cta); color: #fff; border: 0; border-radius: 999px;
        padding: 11px; font: 700 14px/1 var(--v-font-body); cursor: pointer;
    }
    .v-chat__send-btn:hover { filter: brightness(.95); }
    .v-chat__messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
    .v-chat__msg { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
    .v-chat__msg--me { align-self: flex-end; background: var(--v-primary); color: #fff; border-bottom-right-radius: 4px; }
    .v-chat__msg--them { align-self: flex-start; background: #F0F3F7; color: var(--v-ink); border-bottom-left-radius: 4px; }
    .v-chat__msg small { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
    .v-chat__composer { display: flex; gap: 8px; padding-top: 4px; }
    .v-chat__composer button {
        width: 42px; border: 0; border-radius: 12px; background: var(--v-cta); color: #fff; cursor: pointer; flex: none;
    }
    .v-chat__done p { margin: 0; font-size: 14px; text-align: center; padding: 14px 0; }
    @media (max-width: 480px) {
        .v-chat__panel { width: calc(100vw - 32px); height: calc(100vh - 120px); }
        .v-chat { right: 16px; bottom: 16px; }
    }
</style>

<script>
(function () {
    'use strict';
    const root = document.getElementById('vChat');
    if (!root) return;

    const BASE = root.dataset.base;
    const CSRF = root.dataset.csrf;
    const bubble = document.getElementById('vChatBubble');
    const panel = document.getElementById('vChatPanel');
    const views = {
        start: document.getElementById('vChatStart'),
        offline: document.getElementById('vChatOffline'),
        thread: document.getElementById('vChatThread'),
        done: document.getElementById('vChatDone'),
    };
    const presence = document.getElementById('vChatPresence');
    const messagesBox = document.getElementById('vChatMessages');
    const badge = document.getElementById('vChatBadge');

    let state = { open: false, hasConversation: false, lastId: 0, pollTimer: null, unread: 0 };

    function show(view) {
        Object.values(views).forEach((el) => el.hidden = true);
        if (views[view]) views[view].hidden = false;
    }
    function setPresence(online) {
        presence.classList.toggle('online', online);
        presence.innerHTML = '<i></i> ' + (online ? 'Çevrimiçi' : 'Çevrimdışı');
    }

    async function api(method, path, body) {
        const response = await fetch(BASE + path, {
            method,
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json', 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: body ? JSON.stringify(body) : undefined,
        });
        const data = await response.json().catch(() => ({}));
        if (!response.ok) {
            // 422 doğrulama hatası: ilk mesajı yüzeye çıkar
            const firstError = data.errors ? Object.values(data.errors)[0][0] : (data.message || 'İşlem başarısız');
            throw new Error(firstError);
        }
        return data;
    }

    function showError(form, message) {
        let box = form.querySelector('.v-chat__error');
        if (!box) {
            box = document.createElement('div');
            box.className = 'v-chat__error';
            form.insertBefore(box, form.querySelector('button'));
        }
        box.textContent = message;
    }

    function renderMessages(list, append) {
        if (!append) messagesBox.innerHTML = '';
        list.forEach((message) => {
            state.lastId = Math.max(state.lastId, message.id);
            const el = document.createElement('div');
            el.className = 'v-chat__msg ' + (message.mine ? 'v-chat__msg--me' : 'v-chat__msg--them');
            el.textContent = message.body;
            const meta = document.createElement('small');
            meta.textContent = (message.mine ? '' : ((message.sender_name || 'Temsilci') + ' · ')) + (message.time || '');
            el.appendChild(meta);
            messagesBox.appendChild(el);
            if (!message.mine && !state.open) state.unread++;
        });
        if (list.length) messagesBox.scrollTop = messagesBox.scrollHeight;
        badge.hidden = state.unread === 0;
        badge.textContent = state.unread;
    }

    function startPolling() {
        stopPolling();
        state.pollTimer = setInterval(async () => {
            try {
                const data = await api('GET', '/messages?after_id=' + state.lastId);
                setPresence(data.online);
                if (data.messages.length) renderMessages(data.messages, true);
            } catch (e) { /* sessiz */ }
        }, state.open ? 4000 : 12000);
    }
    function stopPolling() { if (state.pollTimer) clearInterval(state.pollTimer); }

    async function boot() {
        try {
            const status = await api('GET', '/status');
            setPresence(status.online);
            if (status.conversation_id) {
                state.hasConversation = true;
                show('thread');
                const data = await api('GET', '/messages?after_id=0');
                renderMessages(data.messages, false);
                startPolling();
            } else {
                show(status.online ? 'start' : 'offline');
            }
        } catch (e) {
            show('offline');
        }
    }

    bubble.addEventListener('click', () => {
        state.open = !state.open;
        panel.hidden = !state.open;
        if (state.open) {
            state.unread = 0; badge.hidden = true;
            if (state.hasConversation) { messagesBox.scrollTop = messagesBox.scrollHeight; startPolling(); }
        } else if (state.hasConversation) {
            startPolling(); // kapalıyken seyrek poll
        }
    });
    document.getElementById('vChatClose').addEventListener('click', () => {
        state.open = false; panel.hidden = true;
    });

    views.start.addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        if (!form.phone.value.trim() && !form.email.value.trim()) {
            showError(form, 'Telefon veya e-posta girmelisiniz.');
            return;
        }
        try {
            const data = await api('POST', '/start', {
                name: form.name.value,
                phone: form.phone.value,
                email: form.email.value,
                message: form.message.value,
            });
            state.hasConversation = true;
            show('thread');
            renderMessages(data.messages, false);
            startPolling();
        } catch (err) { showError(form, err.message); }
    });

    views.offline.addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        try {
            await fetch(root.dataset.offlineAction, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json', 'Content-Type': 'application/json' },
                body: JSON.stringify({ name: form.name.value, phone: form.phone.value, message: form.message.value }),
            });
            show('done');
        } catch (err) { alert('Mesaj gönderilemedi, lütfen tekrar deneyin.'); }
    });

    document.getElementById('vChatComposer').addEventListener('submit', async (e) => {
        e.preventDefault();
        const input = e.target.message;
        const text = input.value.trim();
        if (!text) return;
        input.value = '';
        renderMessages([{ id: state.lastId, body: text, mine: true, time: new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }) }], true);
        try {
            await api('POST', '/send', { message: text });
        } catch (err) { /* poll toparlar */ }
    });

    boot();
})();
</script>
@endif