@extends('portal.layouts.master')
@section('title', 'Chat Support')
@section('page-title', 'Chat Support')

@push('styles')
<style>
.support-chat-page { height:calc(100vh - 108px); min-height:560px; padding:1rem; }
.support-chat-card { height:100%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border, #26354a); background:var(--surface, #111827); }
.support-chat-head { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; border-bottom:1px solid var(--border, #26354a); }
.support-chat-avatar { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border:2px solid #238cff; border-radius:50%; background:#102541; color:#238cff; font-size:1.15rem; }
.support-chat-head h1 { margin:0; color:var(--text-primary, #f4f7fb); font-size:1.05rem; font-weight:700; }
.support-chat-presence { display:flex; align-items:center; gap:.4rem; margin-top:.2rem; color:var(--text-secondary, #94a3b8); font-size:.74rem; }
.support-chat-presence::before { content:''; width:7px; height:7px; border-radius:50%; background:#18d39e; }
.support-chat-state { margin-left:auto; color:var(--text-secondary, #94a3b8); font-size:.72rem; }
.support-chat-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:.75rem; padding:1.2rem; }
.support-chat-empty { margin:auto; max-width:420px; color:var(--text-secondary, #94a3b8); text-align:center; line-height:1.6; }
.support-chat-message { max-width:min(72%, 680px); display:flex; flex-direction:column; align-items:flex-start; }
.support-chat-message.is-client { align-self:flex-end; align-items:flex-end; }
.support-chat-sender { margin:0 .4rem .25rem; color:var(--text-secondary, #94a3b8); font-size:.68rem; font-weight:700; }
.support-chat-bubble { position:relative; padding:.75rem 1rem; border:1px solid var(--border, #26354a); border-radius:16px 16px 16px 4px; background:#162033; color:var(--text-primary, #f4f7fb); font-size:.875rem; font-weight:500; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.support-chat-bubble::after { content:''; position:absolute; left:-1px; bottom:-7px; width:14px; height:14px; background:#162033; border-left:1px solid var(--border, #26354a); transform:skewY(-38deg); clip-path:polygon(0 0,100% 0,0 100%); }
.support-chat-message.is-client .support-chat-bubble { border-color:#2577d8; border-radius:16px 16px 4px 16px; background:linear-gradient(135deg,#1759a9,#287fdc); color:#fff; }
.support-chat-message.is-client .support-chat-bubble::after { left:auto; right:-1px; background:#287fdc; border-left:0; border-right:1px solid #2577d8; transform:skewY(38deg); clip-path:polygon(0 0,100% 0,100% 100%); }
.support-chat-time { margin:.25rem .4rem 0; color:var(--text-secondary, #94a3b8); font-size:.65rem; }
.support-chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem; padding:1rem 1.2rem; border-top:1px solid var(--border, #26354a); }
.support-chat-input { width:100%; min-height:48px; max-height:120px; resize:vertical; padding:.75rem .9rem; border:1px solid var(--border, #26354a); border-radius:0; outline:0; background:#0b1018; color:var(--text-primary, #f4f7fb); font-family:inherit; font-size:.875rem; font-weight:500; line-height:1.5; }
.support-chat-input:focus { border-color:#238cff; }
.support-chat-send { min-width:130px; border:0; border-radius:0; background:linear-gradient(135deg,#1664c5,#369af2); color:#fff; font-family:inherit; font-size:.875rem; font-weight:700; }
.support-chat-send:disabled { opacity:.55; cursor:not-allowed; }
@media(max-width:700px) {
    .support-chat-page { height:calc(100vh - 82px); min-height:500px; padding:.5rem; }
    .support-chat-state { display:none; }
    .support-chat-message { max-width:88%; }
    .support-chat-form { grid-template-columns:1fr; padding:.8rem; }
    .support-chat-send { min-height:44px; }
}
</style>
@endpush

@section('content')
<main class="support-chat-page">
    <section class="support-chat-card" aria-labelledby="support-chat-title"
             data-conversation-id="{{ $conversation?->id }}"
             data-messages-url="{{ $conversation ? route('portal.chat.messages', $conversation->id) : '' }}"
             data-send-url="{{ $conversation ? route('portal.chat.send', $conversation->id) : '' }}"
             data-read-url="{{ $conversation ? route('portal.chat.read', $conversation->id) : '' }}">
        <header class="support-chat-head">
            <div class="support-chat-avatar"><i class="fas fa-headset"></i></div>
            <div>
                <h1 id="support-chat-title">{{ $supportName }}</h1>
                <div class="support-chat-presence">Client support</div>
            </div>
            <span class="support-chat-state" id="supportChatState">Loading…</span>
        </header>

        <div class="support-chat-body" id="supportChatBody" aria-live="polite">
            <div class="support-chat-empty">Loading your conversation…</div>
        </div>

        <form class="support-chat-form" id="supportChatForm" autocomplete="off">
            <textarea class="support-chat-input" id="supportChatInput" rows="1" maxlength="2000" required
                      placeholder="Type your message…" aria-label="Message to client support" {{ $conversation ? '' : 'disabled' }}></textarea>
            <button class="support-chat-send" id="supportChatSend" type="submit" {{ $conversation ? '' : 'disabled' }}>
                <i class="fas fa-paper-plane me-2"></i>Send
            </button>
        </form>
    </section>
</main>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';
    var card = document.querySelector('.support-chat-card');
    var bodyEl = document.getElementById('supportChatBody');
    var form = document.getElementById('supportChatForm');
    var input = document.getElementById('supportChatInput');
    var send = document.getElementById('supportChatSend');
    var state = document.getElementById('supportChatState');
    if (!card || !bodyEl || !form) return;

    var lastId = 0;
    var loaded = false;
    var loading = false;
    var sending = false;
    var csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    function headers(json) {
        var values = { 'Accept':'application/json', 'X-Requested-With':'XMLHttpRequest' };
        if (json) { values['Content-Type'] = 'application/json'; values['X-CSRF-TOKEN'] = csrf; }
        return values;
    }
    function dateTime(value) {
        var date = new Date(value);
        return Number.isNaN(date.getTime()) ? '' : date.toLocaleString([], {
            year:'numeric', month:'short', day:'2-digit', hour:'2-digit', minute:'2-digit'
        });
    }
    function empty(text, retry) {
        bodyEl.replaceChildren();
        var box = document.createElement('div'); box.className = 'support-chat-empty'; box.textContent = text;
        if (retry) {
            var button = document.createElement('button'); button.type = 'button'; button.className = 'btn btn-outline-primary btn-sm d-block mx-auto mt-3'; button.textContent = 'Retry';
            button.addEventListener('click', function () { load(true); }); box.appendChild(button);
        }
        bodyEl.appendChild(box);
    }
    function append(message) {
        if (bodyEl.querySelector('[data-message-id="' + message.id + '"]')) return;
        bodyEl.querySelector('.support-chat-empty')?.remove();
        var item = document.createElement('article');
        item.className = 'support-chat-message ' + (message.sender_type === 'lead' ? 'is-client' : 'is-support');
        item.dataset.messageId = message.id;
        var sender = document.createElement('div'); sender.className = 'support-chat-sender'; sender.textContent = message.from || (message.sender_type === 'lead' ? 'You' : 'Support');
        var bubble = document.createElement('div'); bubble.className = 'support-chat-bubble'; bubble.textContent = message.body || '';
        var time = document.createElement('time'); time.className = 'support-chat-time'; time.dateTime = message.created_at || ''; time.textContent = dateTime(message.created_at);
        item.append(sender, bubble, time); bodyEl.appendChild(item);
        lastId = Math.max(lastId, parseInt(message.id, 10) || 0); bodyEl.scrollTop = bodyEl.scrollHeight;
    }
    async function markRead() {
        if (!card.dataset.readUrl) return;
        await fetch(card.dataset.readUrl, { method:'POST', credentials:'same-origin', headers:headers(true), body:'{}' });
    }
    async function load(force) {
        if (loading || document.hidden || !card.dataset.messagesUrl) return;
        loading = true;
        var initial = force || !loaded;
        if (initial) { state.textContent = 'Loading…'; empty('Loading your conversation…', false); }
        try {
            var url = card.dataset.messagesUrl + (lastId ? '?after_id=' + lastId : '');
            var response = await fetch(url, { credentials:'same-origin', cache:'no-store', headers:headers(false) });
            var payload = await response.json().catch(function () { return {}; });
            if (!response.ok) throw new Error(payload.message || 'Conversation unavailable.');
            if (initial) bodyEl.replaceChildren();
            (payload.messages || []).forEach(append);
            if (!bodyEl.children.length) empty('No messages yet. Send a message and our team will reply here.', false);
            loaded = true; state.textContent = 'Up to date'; await markRead();
        } catch (error) {
            state.textContent = 'Connection problem'; if (!loaded) empty(error.message || 'Conversation unavailable.', true);
        } finally { loading = false; }
    }

    form.addEventListener('submit', async function (event) {
        event.preventDefault();
        var text = input.value.trim(); if (!text || sending || !card.dataset.sendUrl) return;
        sending = true; send.disabled = true; state.textContent = 'Sending…';
        try {
            var response = await fetch(card.dataset.sendUrl, { method:'POST', credentials:'same-origin', headers:headers(true), body:JSON.stringify({body:text}) });
            var payload = await response.json().catch(function () { return {}; });
            if (!response.ok || !payload.message) throw new Error(payload.message || 'Message not sent.');
            append(payload.message); input.value = ''; loaded = true; state.textContent = 'Sent'; input.focus();
        } catch (error) { state.textContent = error.message || 'Message not sent'; }
        finally { sending = false; send.disabled = false; }
    });

    if (!card.dataset.conversationId) {
        state.textContent = 'Unavailable'; empty('Chat Support is not available for this account yet.', false); return;
    }
    load(true);
    window.setInterval(function () { if (!document.hidden) load(false); }, 4000);
    document.addEventListener('visibilitychange', function () { if (!document.hidden) load(false); });
})();
</script>
@endpush