@extends('layouts.app')

@section('content')
@php
    $authUser = auth()->user();

    $avatarInitial = fn($name) => strtoupper(substr(trim($name ?: 'U'), 0, 1));

    $ticketUserName = $ticket->user?->name ?? 'Unknown User';
    $ticketUserEmail = trim((string) ($ticket->user?->email ?? ''));
    $ticketUserPhone = trim((string) ($ticket->user?->phone_country_code ?? '') . ' ' . (string) ($ticket->user?->phone_no ?? ''));
    $chatLocked = !$canReplyToTicket || $ticket->status === 'closed';
    $chatPlaceholder = $ticket->status === 'closed'
        ? 'Closed ticket cannot be updated'
        : ($canReplyToTicket ? 'Type message' : 'Only assigned admin can reply');
    $latestSeenMessageId = optional($ticket->chats
        ->filter(fn ($chat) => (int) $chat->sender_id === (int) $authUser->id && $chat->is_seen && $chat->seen_at)
        ->last())->id;
@endphp

<style>
    .ticket-chat-page {
        min-height: calc(100vh - 60px);
        padding-bottom: 0;
    }

    .ticket-chat-page .page-content {
        padding: 1rem 1.5rem;
    }

    .ticket-chat-page ~ .page-footer {
        display: none;
    }

    .ticket-chat-page .chat-wrapper {
        height: calc(100vh - 132px);
        min-height: 560px;
        overflow: hidden;
    }

    .ticket-chat-page .chat-sidebar-content {
        height: calc(100% - 126px);
        overflow-y: auto;
    }

    .ticket-chat-page .chat-list {
        height: auto;
        min-height: 100%;
    }

    #chat-body {
        box-sizing: border-box;
        height: 100%;
        overflow-y: auto;
        padding: 86px 28px 92px;
        scroll-behavior: smooth;
    }

    #chat-body .chat-content-leftside,
    #chat-body .chat-content-rightside {
        clear: both;
        margin-bottom: 0.85rem;
    }

    #chat-body .chat-content-rightside .d-flex {
        justify-content: flex-end;
    }

    #chat-body .chat-content-leftside .flex-grow-1,
    #chat-body .chat-content-rightside .flex-grow-1 {
        flex-grow: 0 !important;
        max-width: min(72%, 640px);
    }

    #chat-body .chat-left-msg,
    #chat-body .chat-right-msg {
        white-space: pre-wrap;
        word-break: break-word;
        margin-bottom: 0;
        line-height: 1.45;
    }

    #chat-body .chat-right-msg {
        float: none;
    }

    #chat-body .chat-seen-time {
        font-size: 12px;
    }

    .ticket-chat-page .chat-footer {
        z-index: 2;
    }

    .ticket-chat-page .chat-footer form {
        min-width: 0;
    }

    .ticket-chat-page .chat-footer .form-control {
        min-width: 0;
        height: 46px;
    }

    .ticket-chat-page .chat-footer .btn {
        width: 56px;
        min-width: 56px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ticket-chat-page .ticket-meta {
        min-width: 56px;
    }

    .ticket-chat-page .ticket-unread-badge {
        display: inline-flex;
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    @media (max-width: 767.98px) {
        .ticket-chat-page .page-content {
            padding: 0.75rem;
        }

        .ticket-chat-page .chat-wrapper {
            height: calc(100vh - 96px);
            min-height: 520px;
        }

        #chat-body {
            padding: 84px 14px 92px;
        }

        #chat-body .chat-content-leftside .flex-grow-1,
        #chat-body .chat-content-rightside .flex-grow-1 {
            max-width: 86%;
        }
    }
</style>

<div class="page-wrapper ticket-chat-page">
    <div class="page-content">

        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('ticketChats.index') }}">Ticket Chat</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{ $ticket->ticket_no }}
                    </li>
                </ol>
            </div>
        </div>

        <div class="chat-wrapper">

            <!-- SIDEBAR -->
            <div class="chat-sidebar">
                <div class="chat-sidebar-header">

                    <div class="d-flex align-items-center">
                        <div class="chat-user-online">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold"
                                 style="width:45px;height:45px;">
                                {{ $avatarInitial($authUser->name) }}
                            </div>
                        </div>

                        <div class="flex-grow-1 ms-2">
                            <p class="mb-0">{{ $authUser->name }}</p>
                            <small class="text-secondary">Admin</small>
                        </div>
                    </div>

                    <div class="input-group input-group-sm mt-3">
                        <span class="input-group-text"><i class="bx bx-search"></i></span>
                        <input type="text" class="form-control" id="ticket-sidebar-search" placeholder="Search name, email, phone">
                    </div>
                </div>

                <!-- Ticket List -->
                <div class="chat-sidebar-content">
                    <div class="chat-list list-group list-group-flush">

                        @foreach ($sidebarTickets as $item)
                            @php
                                $unreadCount = $item->id == $ticket->id ? 0 : (int) ($item->unread_messages_count ?? 0);
                                $latestMessage = trim((string) ($item->latestChat?->message ?? ''));
                                $userName = trim((string) ($item->user?->name ?? 'User'));
                                $userEmail = trim((string) ($item->user?->email ?? ''));
                                $userPhone = trim((string) ($item->user?->phone_country_code ?? '') . ' ' . (string) ($item->user?->phone_no ?? ''));
                                $searchText = strtolower(trim($userName . ' ' . $userEmail . ' ' . $userPhone . ' ' . preg_replace('/\D+/', '', $userPhone)));
                            @endphp
                            <a href="{{ route('ticketChats.chat', $item) }}"
                               class="list-group-item {{ $item->id == $ticket->id ? 'active' : '' }}"
                               data-ticket-id="{{ $item->id }}"
                               data-search-text="{{ $searchText }}">

                                <div class="d-flex">
                                    <div class="chat-user-online">
                                        <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
                                             style="width:40px;height:40px;">
                                            {{ $avatarInitial($item->user->name ?? '') }}
                                        </div>
                                    </div>

                                    <div class="flex-grow-1 ms-2">
                                        <h6 class="mb-0">{{ $userName }}</h6>
                                        @if ($userEmail !== '')
                                            <div class="text-muted small text-truncate">{{ $userEmail }}</div>
                                        @endif
                                        @if ($userPhone !== '')
                                            <div class="text-muted small text-truncate">{{ $userPhone }}</div>
                                        @endif
                                        <small class="text-muted ticket-latest-message d-block">
                                            {{ $latestMessage !== '' ? \Illuminate\Support\Str::limit($latestMessage, 34) : $item->ticket_no }}
                                        </small>
                                    </div>

                                    <div class="ticket-meta text-end ms-2">
                                        <div class="chat-time ticket-latest-time">
                                            {{ optional($item->updated_at)->format('h:i A') }}
                                        </div>
                                        <span class="badge rounded-pill bg-success ticket-unread-badge mt-1 {{ $unreadCount > 0 ? '' : 'd-none' }}">
                                            {{ $unreadCount }}
                                        </span>
                                    </div>
                                </div>

                            </a>
                        @endforeach

                        <div class="list-group-item text-muted d-none" id="ticket-sidebar-empty">
                            No matching users found.
                        </div>

                    </div>
                </div>
            </div>

            <!-- HEADER -->
            <div class="chat-header d-flex align-items-center">
                <div class="chat-toggle-btn">
                    <i class="bx bx-menu-alt-left"></i>
                </div>

                <div class="ms-3">
                    <h5 class="mb-0">{{ $ticketUserName }}</h5>
                    <div class="text-muted small">
                        {{ $ticketUserEmail !== '' ? $ticketUserEmail : 'No email' }}
                        @if ($ticketUserPhone !== '')
                            <span class="mx-1">|</span>{{ $ticketUserPhone }}
                        @endif
                    </div>
                </div>
            </div>

            <!-- CHAT BODY -->
            <div class="chat-content" id="chat-body">

                @foreach ($ticket->chats as $chat)
                    @php
                        $isMe = $chat->sender_id == $authUser->id;
                        $showSeenTime = $isMe && (int) $chat->id === (int) $latestSeenMessageId && $chat->seen_at;
                    @endphp

                    <div class="chat-content-{{ $isMe ? 'rightside' : 'leftside' }}" data-chat-id="{{ $chat->id }}" data-is-me="{{ $isMe ? '1' : '0' }}">
                        <div class="d-flex {{ $isMe ? 'ms-auto' : '' }}">

                            @if(!$isMe)
                                <div class="chat-user-online">
                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                                         style="width:40px;height:40px;">
                                        {{ $avatarInitial($chat->sender->name ?? '') }}
                                    </div>
                                </div>
                            @endif

                            <div class="flex-grow-1 {{ $isMe ? 'me-2' : 'ms-2' }}">
                                <p class="chat-time mb-1 {{ $isMe ? 'text-end' : '' }}">
                                    {{ $chat->sender->name ?? 'User' }}{{ $chat->created_at ? ', ' . $chat->created_at->format('d M, h:i A') : '' }}
                                </p>

                                <p class="{{ $isMe ? 'chat-right-msg' : 'chat-left-msg' }}">
                                    {{ $chat->message ?: ($chat->attachment ? 'Attachment' : '') }}
                                </p>

                                @if($isMe)
                                    <div class="chat-seen-time small text-muted mt-1 text-end {{ $showSeenTime ? '' : 'd-none' }}" data-seen-for="{{ $chat->id }}">
                                        {{ $showSeenTime ? 'Seen: ' . $chat->seen_at->format('d M, h:i A') : '' }}
                                    </div>
                                @endif
                            </div>

                        </div>
                    </div>
                @endforeach

            </div>

            <!-- FOOTER -->
            <div class="chat-footer d-flex align-items-center">

                <form
                    action="{{ route('ticketChats.message', $ticket) }}"
                    method="POST"
                    class="w-100 d-flex"
                    id="ticket-chat-form"
                    autocomplete="off"
                >
                    @csrf

                    <input
                        type="text"
                        name="message"
                        id="ticket-message-input"
                        class="form-control"
                        placeholder="{{ $chatPlaceholder }}"
                        {{ $chatLocked ? 'disabled' : '' }}
                    >

                    <button class="btn btn-primary ms-2" id="ticket-message-send-btn" type="submit" {{ $chatLocked ? 'disabled' : '' }}>
                        <i class="bx bx-send"></i>
                    </button>
                </form>

            </div>

        </div>
    </div>
</div>

<script>
    $(function () {
        const chatBody = $('#chat-body');
        const form = $('#ticket-chat-form');
        const input = $('#ticket-message-input');
        const sendButton = $('#ticket-message-send-btn');
        const messagesUrl = @json(route('ticketChats.messages', $ticket));
        const sendUrl = @json(route('ticketChats.message', $ticket));
        const unreadCountsUrl = @json(route('ticketChats.unread-counts'));
        const seenStatusesUrl = @json(route('ticketChats.seen-statuses', $ticket));
        const csrfToken = @json(csrf_token());
        const currentTicketId = Number(@json((int) $ticket->id));
        const sidebarSearch = $('#ticket-sidebar-search');
        const sidebarEmpty = $('#ticket-sidebar-empty');
        let lastMessageId = Number(@json((int) ($ticket->chats->max('id') ?? 0)));
        let isFetchingMessages = false;
        let isSendingMessage = false;
        let isFetchingUnreadCounts = false;
        let isFetchingSeenStatuses = false;

        function scrollToBottom() {
            const body = chatBody.get(0);

            if (body) {
                body.scrollTop = body.scrollHeight;
            }
        }

        function showChatError(message) {
            const fallbackMessage = message || 'Message request failed.';

            if (window.toastr) {
                toastr.error(fallbackMessage);
                return;
            }

            alert(fallbackMessage);
        }

        function responseErrorMessage(xhr) {
            const response = xhr.responseJSON || {};

            if (response.message) {
                return response.message;
            }

            if (response.errors) {
                const firstError = Object.values(response.errors).flat()[0];

                if (firstError) {
                    return firstError;
                }
            }

            return 'Message request failed.';
        }

        function filterSidebarTickets() {
            const search = sidebarSearch.val().trim().toLowerCase();
            let visibleCount = 0;

            $('[data-ticket-id]').each(function () {
                const row = $(this);
                const searchText = String(row.data('search-text') || '').toLowerCase();
                const isVisible = search === '' || searchText.includes(search);

                row.toggleClass('d-none', !isVisible);

                if (isVisible) {
                    visibleCount++;
                }
            });

            sidebarEmpty.toggleClass('d-none', visibleCount > 0);
        }

        function updateSidebarTicket(item) {
            const row = $('[data-ticket-id="' + item.ticket_id + '"]');

            if (!row.length) {
                return;
            }

            const unreadCount = item.ticket_id === currentTicketId ? 0 : Number(item.unread_messages_count || 0);
            const badge = row.find('.ticket-unread-badge');

            if (item.latest_message) {
                row.find('.ticket-latest-message').text(item.latest_message);
            }

            if (item.latest_time_label) {
                row.find('.ticket-latest-time').text(item.latest_time_label);
            }

            badge.text(unreadCount);
            badge.toggleClass('d-none', unreadCount <= 0);
        }

        function fetchUnreadCounts() {
            if (isFetchingUnreadCounts) {
                return;
            }

            isFetchingUnreadCounts = true;

            $.ajax({
                url: unreadCountsUrl,
                method: 'GET',
                dataType: 'json'
            }).done(function (response) {
                if (response.status && Array.isArray(response.data)) {
                    response.data.forEach(updateSidebarTicket);
                }
            }).always(function () {
                isFetchingUnreadCounts = false;
            });
        }

        function showLatestSeenStatus(messages) {
            const seenMessages = messages
                .filter(function (message) {
                    return Number(message.id || 0) > 0 && message.seen_at_label;
                });

            chatBody.find('.chat-seen-time').addClass('d-none').text('');

            if (!seenMessages.length) {
                return;
            }

            const latestSeenMessage = seenMessages.reduce(function (latest, message) {
                return Number(message.id) > Number(latest.id || 0) ? message : latest;
            }, {});
            const messageId = Number(latestSeenMessage.id || 0);
            const row = chatBody.find('[data-chat-id="' + messageId + '"]');

            if (!row.length) {
                return;
            }

            let seen = row.find('[data-seen-for="' + messageId + '"]');

            if (!seen.length) {
                seen = $('<div>', {
                    class: 'chat-seen-time small text-muted mt-1 text-end',
                    'data-seen-for': messageId
                });

                row.find('.flex-grow-1').first().append(seen);
            }

            seen.text('Seen: ' + latestSeenMessage.seen_at_label).removeClass('d-none');
        }

        function fetchSeenStatuses() {
            if (isFetchingSeenStatuses) {
                return;
            }

            isFetchingSeenStatuses = true;

            $.ajax({
                url: seenStatusesUrl,
                method: 'GET',
                dataType: 'json'
            }).done(function (response) {
                if (response.status && Array.isArray(response.data)) {
                    showLatestSeenStatus(response.data);
                }
            }).always(function () {
                isFetchingSeenStatuses = false;
            });
        }

        function appendMessage(message) {
            const messageId = Number(message.id || 0);

            if (!messageId || chatBody.find('[data-chat-id="' + messageId + '"]').length) {
                return false;
            }

            const isMe = Boolean(message.is_me);
            const side = $('<div>', {
                class: 'chat-content-' + (isMe ? 'rightside' : 'leftside'),
                'data-chat-id': messageId,
                'data-is-me': isMe ? '1' : '0'
            });
            const row = $('<div>', {
                class: 'd-flex' + (isMe ? ' ms-auto' : '')
            });

            if (!isMe) {
                const avatar = $('<div>', { class: 'chat-user-online' }).append(
                    $('<div>', {
                        class: 'rounded-circle bg-primary text-white d-flex align-items-center justify-content-center',
                        css: { width: '40px', height: '40px' },
                        text: message.sender_initial || 'U'
                    })
                );

                row.append(avatar);
            }

            const content = $('<div>', {
                class: 'flex-grow-1 ' + (isMe ? 'me-2' : 'ms-2')
            });
            const sender = $('<p>', {
                class: 'chat-time mb-1' + (isMe ? ' text-end' : ''),
                text: (message.sender_name || 'User') + (message.created_at_label ? ', ' + message.created_at_label : '')
            });
            const bodyText = message.message || (message.attachment ? 'Attachment' : '');
            const bubble = $('<p>', {
                class: isMe ? 'chat-right-msg' : 'chat-left-msg',
                text: bodyText
            });

            if (message.attachment_url) {
                bubble.append(
                    $('<br>'),
                    $('<a>', {
                        href: message.attachment_url,
                        target: '_blank',
                        rel: 'noopener',
                        class: 'small',
                        text: 'View attachment'
                    })
                );
            }

            content.append(sender, bubble);

            if (isMe) {
                content.append($('<div>', {
                    class: 'chat-seen-time small text-muted mt-1 text-end' + (message.seen_at_label ? '' : ' d-none'),
                    'data-seen-for': messageId,
                    text: message.seen_at_label ? 'Seen: ' + message.seen_at_label : ''
                }));
            }

            row.append(content);
            side.append(row);
            chatBody.append(side);
            lastMessageId = Math.max(lastMessageId, messageId);

            return true;
        }

        function fetchNewMessages() {
            if (isFetchingMessages) {
                return;
            }

            isFetchingMessages = true;

            $.ajax({
                url: messagesUrl,
                method: 'GET',
                data: { after_id: lastMessageId },
                dataType: 'json'
            }).done(function (response) {
                let hasNewMessage = false;

                if (response.status && Array.isArray(response.data)) {
                    response.data.forEach(function (message) {
                        hasNewMessage = appendMessage(message) || hasNewMessage;
                    });
                }

                if (hasNewMessage) {
                    scrollToBottom();
                    fetchUnreadCounts();
                    fetchSeenStatuses();
                }
            }).always(function () {
                isFetchingMessages = false;
            });
        }

        form.on('submit', function (event) {
            event.preventDefault();

            const message = input.val().trim();

            if (!message || isSendingMessage || input.prop('disabled')) {
                return;
            }

            isSendingMessage = true;
            sendButton.prop('disabled', true);

            $.ajax({
                url: sendUrl,
                method: 'POST',
                data: {
                    _token: csrfToken,
                    message: message
                },
                headers: {
                    Accept: 'application/json'
                },
                dataType: 'json'
            }).done(function (response) {
                if (response.status && response.data) {
                    appendMessage(response.data);
                    input.val('').focus();
                    scrollToBottom();
                    fetchUnreadCounts();
                    fetchSeenStatuses();
                    return;
                }

                showChatError(response.message);
            }).fail(function (xhr) {
                showChatError(responseErrorMessage(xhr));
            }).always(function () {
                isSendingMessage = false;
                sendButton.prop('disabled', input.prop('disabled'));
            });
        });

        sidebarSearch.on('input', filterSidebarTickets);

        scrollToBottom();
        filterSidebarTickets();
        fetchNewMessages();
        fetchUnreadCounts();
        fetchSeenStatuses();
        setInterval(fetchNewMessages, 2500);
        setInterval(fetchSeenStatuses, 5000);
        setInterval(fetchUnreadCounts, 10000);

        document.addEventListener('visibilitychange', function () {
            if (!document.hidden) {
                fetchNewMessages();
                fetchUnreadCounts();
                fetchSeenStatuses();
            }
        });
    });
</script>
@endsection