@push('styles')
@include('messenger.partials.avatar-styles')
@include('messenger.partials.attachment-styles')
@include('messenger.partials.emoji-styles')
<style>
    .support-ticket-chat-card .msgr-shell {
        min-height: 520px;
        height: 62vh;
        max-height: 760px;
        border: 1px solid #dee2e6;
        border-radius: 0.75rem;
        overflow: hidden;
    }
    .support-ticket-chat-card.support-ticket-chat-card--admin {
        border: none;
        box-shadow: none;
        background: transparent;
    }
    .support-ticket-chat-card.support-ticket-chat-card--admin > .card-header,
    .support-ticket-chat-card.support-ticket-chat-card--admin > .card-body {
        padding: 0;
        border: none;
        background: transparent;
    }
    .support-ticket-chat-card.support-ticket-chat-card--admin .msgr-shell {
        background: #fff;
        border-color: #e5e7eb;
    }
    .support-ticket-chat-card--admin .support-ticket-chat-admin-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1.15rem;
        border-bottom: 1px solid #eef2f7;
        background: #fff;
    }
    .support-ticket-chat-card--admin .support-ticket-chat-admin-head__title {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
        margin: 0;
    }
    .support-ticket-chat-card--admin .support-ticket-chat-admin-head__id {
        font-size: 0.8125rem;
        color: #64748b;
        font-weight: 600;
    }
    .support-ticket-chat-card--admin .msgr-messages {
        background: #fff;
    }
    .support-ticket-chat-card--admin .msgr-bubble-row.is-mine .msgr-bubble {
        background: #166534;
        color: #fff;
    }
    .support-ticket-chat-card--admin .msgr-bubble-row.is-mine .msgr-bubble-meta {
        color: #64748b;
    }
    .support-ticket-closed-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        background: #fffbeb;
        border-top: 1px solid #fde68a;
        color: #92400e;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    .support-ticket-closed-banner__reopen {
        background: #f97316;
        border: none;
        color: #fff;
        border-radius: 0.4rem;
        padding: 0.45rem 0.95rem;
        font-weight: 600;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    .support-ticket-closed-banner__reopen:hover {
        background: #ea580c;
        color: #fff;
    }
    .support-ticket-chat-card .msgr-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }
    .support-ticket-chat-card .msgr-chat-head {
        background: {{ $isAdminView ? '#f4f6f9' : '#17a2b8' }};
        color: {{ $isAdminView ? 'inherit' : '#fff' }};
        border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .support-ticket-chat-card.support-ticket-chat-card--user .msgr-chat-head__subtitle,
    .support-ticket-chat-card.support-ticket-chat-card--user .msgr-chat-head__name {
        color: #fff;
    }
    .support-ticket-ref {
        font-size: 0.78rem;
        opacity: 0.92;
    }
    .support-ticket-chat-card .msgr-messages {
        flex: 1 1 auto;
        min-height: 0;
    }
    .support-ticket-closed-banner {
        background: #fff3cd;
        border-top: 1px solid #ffeeba;
        color: #856404;
        padding: 0.65rem 1rem;
        font-size: 0.875rem;
    }
    .support-ticket-chat-card--admin .support-ticket-closed-banner {
        background: #fffbeb;
        border-top-color: #fde68a;
        color: #92400e;
    }
</style>
@endpush

<div class="card card-info support-ticket-chat-card {{ $isAdminView ? 'support-ticket-chat-card--admin' : 'support-ticket-chat-card--user' }}" id="supportTicketChatCard">
    @if ($isAdminView)
        <div class="card-body p-0">
            <div class="msgr-shell d-flex flex-column" id="supportMsgrShell">
                <div class="support-ticket-chat-admin-head">
                    <h3 class="support-ticket-chat-admin-head__title">Ticket conversation</h3>
                    <span class="support-ticket-chat-admin-head__id">ID: {{ $ticket->displayLabel() }}</span>
                </div>
                <div class="msgr-main d-flex flex-column flex-grow-1" style="min-height:0">
                    <header class="msgr-chat-head d-none" id="supportMsgrChatHead" aria-hidden="true">
                        <span id="supportMsgrHeadAvatarWrap"></span>
                        <span id="supportMsgrHeadName"></span>
                        <span id="supportMsgrTicketRef"></span>
                        <span id="supportMsgrHeadSubtitle"></span>
                    </header>
    @else
    <div class="card-header py-2">
        <h3 class="card-title mb-0">
            <i class="far fa-comments mr-2"></i>Ticket conversation
        </h3>
        <div class="card-tools">
            <span class="badge badge-light">{{ $ticket->displayLabel() }}</span>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="msgr-shell d-flex flex-column" id="supportMsgrShell">
            <div class="msgr-main d-flex flex-column flex-grow-1" style="min-height:0">
                <header class="msgr-chat-head d-flex align-items-center px-3 py-2" id="supportMsgrChatHead">
                    <div class="d-flex align-items-center flex-grow-1 min-w-0" style="gap:0.625rem">
                        <span id="supportMsgrHeadAvatarWrap" class="flex-shrink-0"></span>
                        <div class="min-w-0 flex-grow-1">
                            <div class="msgr-chat-head__name text-truncate font-weight-bold" id="supportMsgrHeadName">—</div>
                            <div class="support-ticket-ref text-truncate" id="supportMsgrTicketRef"></div>
                            <span class="msgr-chat-head__subtitle text-truncate d-block small" id="supportMsgrHeadSubtitle"></span>
                        </div>
                    </div>
                </header>
    @endif
                <div class="msgr-messages px-3 py-2" id="supportMsgrMessages" role="log" aria-live="polite">
                    <div class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin"></i></div>
                </div>
                <div class="text-center py-1 d-none" id="supportMsgrLoadMoreWrap">
                    <button type="button" class="btn btn-sm btn-link" id="supportMsgrLoadMore">Load older messages</button>
                </div>
                @if ($canSend)
                <div class="msgr-composer-wrap border-top">
                    <div class="msgr-attach-pending d-none" id="supportMsgrAttachPending" aria-live="polite"></div>
                    <div class="msgr-attach-errors" id="supportMsgrAttachErrors" role="alert"></div>
                    <form class="msgr-composer" id="supportMsgrComposerForm">
                        <input type="file" id="supportMsgrAttachInput" class="d-none" multiple
                            accept=".jpg,.jpeg,.png,.webp,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar,.7z">
                        <button type="button" class="msgr-composer__attach-btn" id="supportMsgrAttachBtn" title="Attach files" aria-label="Attach files">
                            <i class="fas fa-paperclip"></i>
                        </button>
                        <button type="button" class="msgr-composer__emoji-btn" id="supportMsgrEmojiBtn" title="Insert emoji" aria-label="Insert emoji">
                            <i class="far fa-smile"></i>
                        </button>
                        <label for="supportMsgrComposerInput" class="sr-only">Message</label>
                        <textarea class="form-control flex-grow-1" id="supportMsgrComposerInput" rows="1" placeholder="Type a message about this ticket…" maxlength="5000"></textarea>
                        <button type="submit" class="btn btn-primary msgr-composer__send-btn" aria-label="Send message">
                            <i class="fas fa-paper-plane" aria-hidden="true"></i>
                        </button>
                    </form>
                </div>
                @elseif (!$ticket->isOpen())
                <div class="support-ticket-closed-banner">
                    <span>This ticket is closed. Messages cannot be sent until the ticket is reopened.</span>
                    @if ($isAdminView && ($canAdminReopen ?? false))
                        <button type="button" class="btn btn-sm support-ticket-closed-banner__reopen" id="support-admin-chat-reopen-btn">
                            <i class="fas fa-redo mr-1"></i>Reopen ticket
                        </button>
                    @elseif (!$isAdminView && ($chatContext['can_reopen'] ?? false))
                        <button type="button" class="btn btn-link btn-sm p-0 support-ticket-closed-banner__reopen" id="supportTicketReopenBtn">Reopen ticket</button>
                    @endif
                </div>
                @else
                <div class="support-ticket-closed-banner text-center">You do not have permission to send messages on this ticket.</div>
                @endif
                </div>
            </div>
        </div>
</div>

<div class="msgr-lightbox" id="msgrLightbox" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="msgrLightboxTitle">
    <div class="msgr-lightbox__backdrop" data-msgr-lightbox-close></div>
    <div class="msgr-lightbox__panel">
        <div class="msgr-lightbox__head">
            <span id="msgrLightboxTitle">Image</span>
            <button type="button" class="close" data-msgr-lightbox-close aria-label="Close">&times;</button>
        </div>
        <div class="msgr-lightbox__body">
            <img src="" alt="" id="msgrLightboxImg">
        </div>
    </div>
</div>

@push('scripts')
@include('messenger.partials.avatar-script')
@include('messenger.partials.attachment-script')
@include('messenger.partials.emoji-script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var ticketId = @json($ticket->id);
    var routes = {
        messages: @json(route('support.tickets.chat.messages', $ticket)),
        sendMessage: @json(route('support.tickets.chat.messages.store', $ticket)),
        markRead: @json(route('support.tickets.chat.read', $ticket)),
        toggleReaction: function (messageId) {
            return @json(url('support/tickets/'.$ticket->id.'/chat/messages')) + '/' + messageId + '/reactions';
        },
        reopen: @json(route('support.tickets.reopen', $ticket))
    };
    var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    var canSend = @json($canSend);
    var canReact = true;
    var isAdminView = @json($isAdminView);
    var initialContext = @json($chatContext);
    var pollMs = 5000;
    var state = { messages: [], pagination: null, loading: false, pollTimer: null, pendingFiles: [] };

    function fetchJson(url, options) {
        options = options || {};
        options.headers = Object.assign({
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrf
        }, options.headers || {});
        return fetch(url, options).then(function (r) {
            return r.json().then(function (data) {
                if (!r.ok) {
                    var err = new Error((data && data.message) || 'Request failed');
                    err.payload = data;
                    throw err;
                }
                return data;
            });
        });
    }

    var escapeHtml = window.pmsEscapeHtml;

    function normalizeAvatarUser(u) {
        u = u || {};
        return {
            name: u.name || 'User',
            image_url: u.image_url || '',
            has_image: !!u.has_image,
            initials: u.initials || '',
            is_online: !!u.is_online,
            designation: u.designation || ''
        };
    }

    function applyHeader(context) {
        var peer = normalizeAvatarUser(context.peer || {});
        document.getElementById('supportMsgrHeadName').textContent = peer.name || '—';
        document.getElementById('supportMsgrHeadAvatarWrap').innerHTML = window.msgrRenderAvatar(peer, { size: 'lg', showStatus: !isAdminView ? false : true });
        var ticket = context.ticket || {};
        document.getElementById('supportMsgrTicketRef').textContent = 'Reference: ' + (ticket.ticket_number || '') + (ticket.message_preview ? ' · ' + ticket.message_preview : '');
        var subtitle = document.getElementById('supportMsgrHeadSubtitle');
        if (subtitle) {
            if (isAdminView) {
                subtitle.textContent = (peer.designation ? peer.designation + ' · ' : '') + (ticket.submitted_at_formatted ? 'Submitted ' + ticket.submitted_at_formatted : '');
            } else {
                subtitle.textContent = 'Our team will respond as soon as possible';
            }
        }
    }

    function renderMessages() {
        var el = document.getElementById('supportMsgrMessages');
        if (!state.messages.length) {
            el.innerHTML = '<div class="text-center text-muted py-4"><i class="far fa-comment-dots fa-2x mb-2 d-block"></i>No messages yet. Start the conversation below.</div>';
            return;
        }
        el.innerHTML = state.messages.map(function (m) {
            var mine = m.is_mine ? ' is-mine' : '';
            var deleted = m.is_deleted ? ' is-deleted' : '';
            var readTick = m.is_mine ? (m.read_by_other ? '<i class="fas fa-check-double" title="Read"></i>' : '<i class="far fa-check" title="Sent"></i>') : '';
            var avatarHtml = '';
            if (!m.is_mine && m.sender) {
                avatarHtml = '<div class="msgr-bubble-row__avatar flex-shrink-0">' +
                    window.msgrRenderAvatar(normalizeAvatarUser(m.sender), { size: 'xs' }) + '</div>';
            }
            var labelHtml = '';
            if (isAdminView && !m.is_mine && m.sender_label) {
                labelHtml = '<div class="small text-muted mb-1">' + escapeHtml(m.sender_label) + '</div>';
            }
            var bodyHtml = (!m.is_deleted && m.body) ? window.msgrFormatMessageBodyHtml(m.body, false) : '';
            var attachHtml = (!m.is_deleted && m.attachments) ? window.msgrRenderMessageAttachments(m.attachments, m.is_mine) : '';
            var bubbleInner = labelHtml + bodyHtml + attachHtml;
            var reactionsHtml = window.msgrRenderReactionsHtml ? window.msgrRenderReactionsHtml(m.reactions) : '';
            var actionsHtml = window.msgrRenderBubbleActionsHtml ? window.msgrRenderBubbleActionsHtml(m.id, canReact, m.is_deleted) : '';
            return '<div class="msgr-bubble-row' + mine + '" data-id="' + m.id + '">' + avatarHtml +
                '<div class="msgr-bubble-stack">' + actionsHtml +
                '<div class="msgr-bubble' + deleted + '">' + (bubbleInner || '<div class="text-muted"><em>Empty message</em></div>') + '</div>' +
                reactionsHtml +
                '<div class="msgr-bubble-meta"><span>' + escapeHtml(m.created_at_formatted || '') + '</span> ' + readTick + '</div></div></div>';
        }).join('');
        window.msgrBindAttachmentLightbox(el);
        if (window.msgrBindReactionUi) window.msgrBindReactionUi(el);
    }

    function scrollBottom() {
        var el = document.getElementById('supportMsgrMessages');
        el.scrollTop = el.scrollHeight;
    }

    function loadMessages(page, scrollBottomAfter) {
        if (state.loading) return;
        state.loading = true;
        fetchJson(routes.messages + '?page=' + (page || 1)).then(function (data) {
            if ((page || 1) === 1) {
                state.messages = data.messages || [];
            } else {
                state.messages = (data.messages || []).concat(state.messages);
            }
            state.pagination = data.pagination;
            if (data.context) applyHeader(data.context);
            renderMessages();
            document.getElementById('supportMsgrLoadMoreWrap').classList.toggle('d-none', !(state.pagination && state.pagination.has_more));
            if (scrollBottomAfter) scrollBottom();
            fetchJson(routes.markRead, { method: 'POST', body: new URLSearchParams({ _token: csrf }) }).catch(function () {});
        }).catch(function () {
            document.getElementById('supportMsgrMessages').innerHTML = '<p class="text-danger text-center py-3">Could not load messages.</p>';
        }).finally(function () {
            state.loading = false;
        });
    }

    function startPolling() {
        if (state.pollTimer) clearInterval(state.pollTimer);
        state.pollTimer = setInterval(function () {
            fetchJson(routes.messages + '?page=1').then(function (data) {
                var incoming = data.messages || [];
                if (incoming.length !== state.messages.length || (incoming.length && incoming[incoming.length - 1].id !== state.messages[state.messages.length - 1]?.id)) {
                    state.messages = incoming;
                    if (data.context) applyHeader(data.context);
                    renderMessages();
                    fetchJson(routes.markRead, { method: 'POST', body: new URLSearchParams({ _token: csrf }) }).catch(function () {});
                }
            }).catch(function () {});
        }, pollMs);
    }

    if (canSend) {
        var attachInput = document.getElementById('supportMsgrAttachInput');
        document.getElementById('supportMsgrAttachBtn')?.addEventListener('click', function () { attachInput?.click(); });
        attachInput?.addEventListener('change', function () {
            state.pendingFiles = Array.prototype.slice.call(attachInput.files || []);
            attachInput.value = '';
        });
        document.getElementById('supportMsgrComposerForm')?.addEventListener('submit', function (e) {
            e.preventDefault();
            var body = (document.getElementById('supportMsgrComposerInput')?.value || '').trim();
            if (!body && !state.pendingFiles.length) return;
            var fd = new FormData();
            fd.append('_token', csrf);
            fd.append('body', body);
            state.pendingFiles.forEach(function (f) { fd.append('attachments[]', f); });
            fetch(routes.sendMessage, {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                body: fd
            }).then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
              .then(function (res) {
                  if (!res.ok) throw new Error((res.d && res.d.message) || 'Send failed');
                  document.getElementById('supportMsgrComposerInput').value = '';
                  state.pendingFiles = [];
                  loadMessages(1, true);
              }).catch(function (err) {
                  if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Could not send', text: err.message || 'Try again.' });
              });
        });
    }

    document.getElementById('supportMsgrLoadMore')?.addEventListener('click', function () {
        if (state.pagination && state.pagination.has_more) {
            loadMessages((state.pagination.current_page || 1) + 1, false);
        }
    });

    document.getElementById('supportTicketReopenBtn')?.addEventListener('click', function () {
        fetchJson(routes.reopen, { method: 'POST', body: new URLSearchParams({ _token: csrf }) })
            .then(function () { window.location.reload(); })
            .catch(function (err) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Could not reopen', text: err.message });
            });
    });

    window.msgrOnReactionToggle = function (messageId, emoji) {
        fetchJson(routes.toggleReaction(messageId), {
            method: 'POST',
            body: new URLSearchParams({ emoji: emoji, _token: csrf })
        }).then(function () { loadMessages(1, false); }).catch(function () {});
    };

    applyHeader(initialContext);
    loadMessages(1, true);
    startPolling();
});
</script>
@endpush