@extends('admin.admin_dashboard')

@section('customcss')
<style>
    /* WhatsApp Theme Styles */
    :root {
        --wa-teal: #00a884;
        --wa-teal-dark: #008069;
        --wa-light-bg: #efeae2;
        --wa-chat-bg: #e5ddd5;
        --wa-bubble-out: #d9fdd3;
        --wa-bubble-in: #ffffff;
        --wa-sidebar-bg: #ffffff;
        --wa-header-bg: #f0f2f5;
        --wa-active-chat: #f0f2f5;
        --wa-hover-chat: #f5f6f6;
        --wa-blue-tick: #53bdeb;
        --wa-grey-tick: #8696a0;
    }

    /* Internal Messaging Page Layout & Viewport Sizing */
    .content-body.internal-chat-body {
        min-height: auto !important;
        padding-top: 5.5rem !important;
        padding-bottom: 0 !important;
    }

    @media only screen and (min-width: 87.5rem) {
        .content-body.internal-chat-body {
            padding-top: 5.5rem !important;
        }
    }

    @media only screen and (max-width: 74.9375rem) {
        .content-body.internal-chat-body {
            padding-top: 5rem !important;
        }
    }

    .internal-chat-body .container-fluid {
        padding: 8px 20px 0 !important;
    }

    .wa-page-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .wa-container {
        /* Fitted precisely so full chat UI + header + footer fit on screen without window scroll */
        height: calc(100vh - 200px);
        min-height: 480px;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
        display: flex;
        position: relative;
        z-index: 1;
        margin-bottom: 8px;
    }

    /* Footer styling for internal chat page */
    .footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        position: relative !important;
        z-index: 10 !important;
        background: #f8f9fa;
    }

    .footer .copyright {
        padding: 4px 15px !important;
    }

    .footer .copyright p {
        font-size: 12px;
        margin-bottom: 0;
    }

    /* Left Sidebar */
    .wa-sidebar {
        width: 360px;
        min-width: 300px;
        max-width: 380px;
        flex: 0 0 360px;
        border-right: 1px solid #e9edef;
        display: flex;
        flex-direction: column;
        background: var(--wa-sidebar-bg);
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .wa-sidebar-header {
        flex: 0 0 auto;
        height: 56px;
        padding: 8px 16px;
        background: var(--wa-header-bg);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9edef;
    }

    .wa-search-box {
        flex: 0 0 auto;
        height: 46px;
        padding: 6px 14px;
        background: #fff;
        border-bottom: 1px solid #e9edef;
    }

    .wa-search-input-group {
        background: #f0f2f5;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 6px 12px;
    }

    .wa-search-input-group input {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        font-size: 13.5px;
        margin-left: 8px;
        color: #3b4a54;
    }

    .wa-conversations-list {
        flex: 1 1 0%;
        min-height: 0;
        overflow-y: auto !important;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .wa-conversation-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid #f2f2f2;
        transition: background 0.15s ease;
        position: relative;
    }

    .wa-conversation-item:hover {
        background: var(--wa-hover-chat);
    }

    .wa-conversation-item.active {
        background: var(--wa-active-chat);
        border-left: 4px solid var(--wa-teal);
    }

    .wa-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .wa-avatar-wrapper {
        position: relative;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .wa-conversation-body {
        flex: 1;
        min-width: 0;
    }

    .wa-conv-top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 3px;
    }

    .wa-contact-name {
        font-size: 14.5px;
        font-weight: 600;
        color: #111b21;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .wa-conv-time {
        font-size: 11.5px;
        color: #667781;
        white-space: nowrap;
        margin-left: 8px;
    }

    .wa-conv-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wa-last-msg-preview {
        font-size: 13px;
        color: #667781;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        flex: 1;
    }

    .wa-unread-badge {
        background-color: #25d366;
        color: white;
        font-size: 11px;
        font-weight: 700;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        margin-left: 6px;
    }

    /* Right Main Chat Area */
    .wa-main-chat {
        flex: 1 1 0%;
        display: flex;
        flex-direction: column;
        background: #efeae2;
        position: relative;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .wa-chat-header {
        flex: 0 0 auto;
        height: 56px;
        padding: 8px 18px;
        background: var(--wa-header-bg);
        border-bottom: 1px solid #d1d7db;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .wa-chat-contact-info {
        display: flex;
        align-items: center;
    }

    .wa-chat-contact-name {
        font-size: 15.5px;
        font-weight: 600;
        color: #111b21;
        margin-bottom: 2px;
    }

    .wa-chat-contact-status {
        font-size: 12px;
        color: #667781;
    }

    .wa-chat-body {
        flex: 1 1 0%;
        min-height: 0;
        overflow-y: auto !important;
        padding: 14px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background-color: #efeae2;
        background-image: radial-gradient(#d3c7b6 0.75px, transparent 0.75px), radial-gradient(#d3c7b6 0.75px, #efeae2 0.75px);
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px;
    }

    .wa-date-chip {
        align-self: center;
        background: rgba(255, 255, 255, 0.88);
        color: #54656f;
        font-size: 11.5px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12);
        margin: 6px 0;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Message Bubbles */
    .wa-bubble {
        max-width: 65%;
        padding: 7px 11px 6px 11px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.42;
        position: relative;
        word-wrap: break-word;
        box-shadow: 0 1px 1.5px rgba(11, 20, 26, 0.13);
        display: inline-block;
    }

    .wa-bubble-sent {
        align-self: flex-end;
        background-color: var(--wa-bubble-out);
        color: #111b21;
        border-top-right-radius: 0px;
    }

    .wa-bubble-received {
        align-self: flex-start;
        background-color: var(--wa-bubble-in);
        color: #111b21;
        border-top-left-radius: 0px;
    }

    .wa-bubble-meta {
        float: right;
        margin-left: 10px;
        margin-top: 4px;
        font-size: 11px;
        color: #667781;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        user-select: none;
    }

    .wa-tick-read {
        color: var(--wa-blue-tick) !important;
    }

    .wa-tick-delivered {
        color: var(--wa-grey-tick) !important;
    }

    /* Chat Footer / Input */
    .wa-chat-footer {
        flex: 0 0 auto;
        min-height: 58px;
        padding: 8px 16px;
        background: var(--wa-header-bg);
        display: flex;
        align-items: center;
        gap: 10px;
        border-top: 1px solid #d1d7db;
    }

    .wa-input-wrapper {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 6px 14px;
        border: 1px solid transparent;
        transition: border-color 0.2s ease;
    }

    .wa-input-wrapper:focus-within {
        border-color: var(--wa-teal);
    }

    .wa-msg-input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 14px;
        color: #111b21;
        resize: none;
        max-height: 100px;
        background: transparent;
        font-family: inherit;
    }

    .wa-btn-icon {
        background: transparent;
        border: none;
        color: #54656f;
        font-size: 20px;
        cursor: pointer;
        padding: 6px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .wa-btn-icon:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #111b21;
    }

    .wa-btn-send {
        background: var(--wa-teal);
        border: none;
        color: white;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
        flex-shrink: 0;
    }

    .wa-btn-send:hover {
        background: var(--wa-teal-dark);
        transform: scale(1.05);
    }

    .wa-btn-send:active {
        transform: scale(0.95);
    }

    /* Welcome / Empty Screen */
    .wa-welcome-screen {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f0f2f5;
        border-bottom: 6px solid var(--wa-teal);
        text-align: center;
        padding: 30px;
    }

    .wa-welcome-icon {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: #e2f7cb;
        color: var(--wa-teal);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        margin-bottom: 18px;
        box-shadow: 0 4px 12px rgba(0, 168, 132, 0.15);
    }

    .wa-attachment-preview {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #e9edef;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* Emoji bar */
    .wa-quick-emojis {
        display: none;
        position: absolute;
        bottom: 68px;
        left: 20px;
        background: white;
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        z-index: 50;
        gap: 6px;
    }

    .wa-emoji-item {
        font-size: 20px;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 6px;
        transition: background 0.1s ease;
    }

    .wa-emoji-item:hover {
        background: #f0f2f5;
    }

    @media (max-width: 768px) {
        .wa-sidebar {
            width: 100%;
            max-width: 100%;
        }
        .wa-main-chat {
            display: none;
        }
        .wa-main-chat.mobile-active {
            display: flex;
            width: 100%;
        }
        .wa-sidebar.mobile-hidden {
            display: none;
        }
    }
</style>
@endsection

@section('admin')
<div class="content-body internal-chat-body">
    <div class="container-fluid">
        <!-- Page Header Title -->
        <div class="wa-page-topbar">
            <div class="d-flex align-items-center">
                <h4 class="mb-0 text-primary font-w600">
                    <i class="fab fa-whatsapp me-2 text-success"></i>Internal Communication
                </h4>
                <span class="badge bg-light text-muted ms-2 border" style="font-size: 11px;">Private 1-to-1</span>
            </div>
            <div>
                <button type="button" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#newChatModal">
                    <i class="fas fa-comment-dots me-1"></i> New Chat
                </button>
            </div>
        </div>

        <!-- WhatsApp Layout Window -->
        <div class="wa-container">
            <!-- Left Sidebar: Conversations List -->
            <div class="wa-sidebar" id="waSidebar">
                <!-- Sidebar Header -->
                <div class="wa-sidebar-header">
                    <div class="d-flex align-items-center">
                        <img src="{{ Auth::user()->photo ? (file_exists(public_path('storage/' . Auth::user()->photo)) ? asset('storage/' . Auth::user()->photo) : asset('core/storage/app/public/' . Auth::user()->photo)) : asset('storage/1.png') }}"
                             alt="{{ Auth::user()->name }}" class="wa-avatar" style="width: 40px; height: 40px;">
                        <div class="ms-2">
                            <h6 class="mb-0 font-w600" style="font-size: 14px;">{{ Auth::user()->name }}</h6>
                            <span class="badge badge-xs bg-success" style="font-size: 10px;">{{ $authRoleName ?: 'Admin' }}</span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="wa-btn-icon" title="Start New Chat" data-bs-toggle="modal" data-bs-target="#newChatModal">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </div>

                <!-- Search Input -->
                <div class="wa-search-box">
                    <div class="wa-search-input-group">
                        <i class="fas fa-search text-muted" style="font-size: 13px;"></i>
                        <input type="text" id="conversationSearchInput" placeholder="Search or start new chat">
                    </div>
                </div>

                <!-- Conversations List -->
                <ul class="wa-conversations-list" id="conversationsList">
                    @forelse($conversations as $conv)
                        @php
                            $contact = $conv['user'];
                            $last = $conv['last_message'];
                            $isActive = $activeUser && $activeUser->id == $contact->id;
                            $unread = $conv['unread_count'];
                        @endphp
                        <li class="wa-conversation-item {{ $isActive ? 'active' : '' }}"
                            data-user-id="{{ $contact->id }}"
                            data-user-name="{{ strtolower($contact->name) }}"
                            data-user-role="{{ strtolower($conv['role_name'] ?? 'User') }}"
                            onclick="selectConversation({{ $contact->id }})">
                            <div class="wa-avatar-wrapper">
                                <img src="{{ $conv['avatar_url'] }}" alt="{{ $contact->name }}" class="wa-avatar">
                            </div>
                            <div class="wa-conversation-body">
                                <div class="wa-conv-top">
                                    <h6 class="wa-contact-name">{{ $contact->name }}</h6>
                                    <span class="wa-conv-time" id="time-{{ $contact->id }}">
                                        @if($last)
                                            {{ $last->created_at->setTimezone('Asia/Dhaka')->isToday() ? $last->created_at->setTimezone('Asia/Dhaka')->format('h:i A') : ($last->created_at->setTimezone('Asia/Dhaka')->isYesterday() ? 'Yesterday' : $last->created_at->setTimezone('Asia/Dhaka')->format('d/m/Y')) }}
                                        @endif
                                    </span>
                                </div>
                                <div class="wa-conv-bottom">
                                    <p class="wa-last-msg-preview" id="lastmsg-{{ $contact->id }}">
                                        @if($last)
                                            @if($last->sender_id == Auth::id())
                                                @if($last->is_read)
                                                    <i class="fas fa-check-double wa-tick-read me-1"></i>
                                                @else
                                                    <i class="fas fa-check-double wa-tick-delivered me-1"></i>
                                                @endif
                                            @endif
                                            {{ Str::limit($last->message ?: ($last->attachment ? '📎 Attachment' : ''), 30) }}
                                        @else
                                            <span class="text-muted fst-italic">Start conversation</span>
                                        @endif
                                    </p>
                                    <span class="wa-unread-badge" id="unread-{{ $contact->id }}" style="{{ $unread > 0 ? '' : 'display: none;' }}">
                                        {{ $unread }}
                                    </span>
                                </div>
                            </div>
                        </li>
                    @empty
                        <li class="p-4 text-center text-muted" id="noConversationsPlaceholder">
                            <i class="far fa-comments fa-3x mb-2 text-secondary opacity-50"></i>
                            <p class="mb-1">No conversations yet</p>
                            <button type="button" class="btn btn-xs btn-outline-success mt-2 rounded-pill" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                Start a chat
                            </button>
                        </li>
                    @endforelse
                </ul>
            </div>

            <!-- Right Main Chat Window -->
            <div class="wa-main-chat" id="waMainChat">
                @if($activeUser)
                    <!-- Active Chat Header -->
                    <div class="wa-chat-header" id="chatHeader">
                        <div class="wa-chat-contact-info">
                            <button class="wa-btn-icon me-2 d-md-none" onclick="backToSidebar()" title="Back">
                                <i class="fas fa-arrow-left"></i>
                            </button>
                            <img src="{{ (new \App\Http\Controllers\admin\InternalMessageController())->getUserAvatarUrl($activeUser) }}"
                                 alt="{{ $activeUser->name }}" class="wa-avatar me-3" style="width: 42px; height: 42px;" id="activeUserAvatar">
                            <div>
                                <h6 class="wa-chat-contact-name" id="activeUserName">{{ $activeUser->name }}</h6>
                                <span class="wa-chat-contact-status" id="activeUserRole">
                                    <span class="badge badge-sm bg-info text-white me-1">{{ $activeUserRoleName ?: 'User' }}</span>
                                    <span class="text-muted" style="font-size: 11.5px;">• Private 1-to-1 Chat</span>
                                </span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <button class="wa-btn-icon" title="Search user info" data-bs-toggle="modal" data-bs-target="#contactInfoModal">
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Messages Scroll Body -->
                    <div class="wa-chat-body" id="chatMessagesBody">
                        <div class="text-center py-3 text-muted">
                            <i class="fas fa-spinner fa-spin me-1"></i> Loading messages...
                        </div>
                    </div>

                    <!-- Floating Quick Emoji Palette -->
                    <div class="wa-quick-emojis" id="quickEmojiPalette">
                        <span class="wa-emoji-item" onclick="insertEmoji('👍')">👍</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('😊')">😊</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('❤️')">❤️</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('👏')">👏</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('🎉')">🎉</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('🔥')">🔥</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('🙏')">🙏</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('📚')">📚</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('✍️')">✍️</span>
                        <span class="wa-emoji-item" onclick="insertEmoji('✅')">✅</span>
                    </div>

                    <!-- Chat Footer Input -->
                    <div class="wa-chat-footer" id="chatFooter">
                        <button type="button" class="wa-btn-icon" id="emojiToggleBtn" onclick="toggleEmojiPalette()" title="Emojis">
                            <i class="far fa-smile"></i>
                        </button>
                        <button type="button" class="wa-btn-icon" onclick="document.getElementById('msgAttachmentInput').click()" title="Attach file or photo">
                            <i class="fas fa-paperclip"></i>
                        </button>
                        <input type="file" id="msgAttachmentInput" style="display: none;" onchange="handleAttachmentSelected(this)">

                        <div class="wa-input-wrapper">
                            <div id="attachmentIndicator" style="display: none;" class="wa-attachment-preview me-2">
                                <i class="fas fa-file"></i>
                                <span id="attachmentFileName" class="text-truncate" style="max-width: 140px;"></span>
                                <i class="fas fa-times text-danger ms-1 cursor-pointer" onclick="removeSelectedAttachment()"></i>
                            </div>
                            <input type="text" class="wa-msg-input" id="messageTextInput"
                                   placeholder="Type a message..."
                                   autocomplete="off"
                                   onkeydown="handleMessageInputKeydown(event)">
                        </div>

                        <button type="button" class="wa-btn-send" id="sendMessageBtn" onclick="sendMessage()" title="Send">
                            <i class="fas fa-paper-plane" style="font-size: 15px;"></i>
                        </button>
                    </div>
                @else
                    <!-- Welcome / Empty Screen -->
                    <div class="wa-welcome-screen">
                        <div class="wa-welcome-icon">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <h4 class="font-w600 text-dark mb-2">SmartShikkha Internal Communication</h4>
                        <p class="text-muted" style="max-width: 460px; font-size: 14px;">
                            Send and receive private messages securely with teachers, school staff, and administrators.
                        </p>
                        <div class="mt-3">
                            <button type="button" class="btn btn-success rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                <i class="fas fa-plus-circle me-1"></i> Start a Conversation
                            </button>
                        </div>
                        <div class="mt-4 pt-3 text-muted" style="font-size: 12px; border-top: 1px solid #e2e8f0;">
                            <i class="fas fa-lock me-1 text-success"></i> End-to-end user privacy maintained. Messages are visible only to participants.
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal: New Chat (Search Any User) -->
<div class="modal fade" id="newChatModal" tabindex="-1" aria-labelledby="newChatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white py-3">
                <h5 class="modal-title text-white font-w600" id="newChatModalLabel">
                    <i class="fas fa-comment-medical me-2"></i>Start New Chat
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0" id="userSearchQuery" placeholder="Search by name, role, email or phone..." oninput="handleUserSearch(this.value)">
                    </div>
                </div>
                <div style="max-height: 340px; overflow-y: auto;" id="userSearchResults">
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-users fa-2x mb-2 text-secondary opacity-50"></i>
                        <p class="mb-0">Type name or role to find contacts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Contact Info -->
@if($activeUser)
<div class="modal fade" id="contactInfoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow">
            <div class="modal-body text-center p-4">
                <img src="{{ (new \App\Http\Controllers\admin\InternalMessageController())->getUserAvatarUrl($activeUser) }}"
                     alt="{{ $activeUser->name }}" class="rounded-circle shadow-sm mb-3" style="width: 80px; height: 80px; object-fit: cover;">
                <h5 class="font-w600 mb-1">{{ $activeUser->name }}</h5>
                <span class="badge bg-primary mb-3">{{ $activeUserRoleName ?: 'User' }}</span>
                <div class="text-start bg-light p-3 rounded text-muted" style="font-size: 13px;">
                    <div class="mb-2"><i class="fas fa-envelope me-2 text-primary"></i> {{ $activeUser->email ?? 'N/A' }}</div>
                    @if(!empty($activeUser->phone))
                        <div class="mb-2"><i class="fas fa-phone me-2 text-success"></i> {{ $activeUser->phone }}</div>
                    @endif
                    <div><i class="fas fa-shield-alt me-2 text-warning"></i> Status: <span class="badge bg-success text-white">Active</span></div>
                </div>
                <button type="button" class="btn btn-secondary btn-sm mt-3 rounded-pill px-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('customjs')
<script>
    let activeContactId = {{ $activeUser ? $activeUser->id : 'null' }};
    let currentAuthId = {{ Auth::id() }};
    let pollingInterval = null;
    let selectedAttachmentFile = null;
    let lastLoadedMessageCount = 0;

    // Base API URLs
    const API_MESSAGES_BASE = "{{ url('/admin/internal-messages/messages') }}";
    const API_SEND = "{{ route('admin.internal_messages.send') }}";
    const API_CONVERSATIONS = "{{ route('admin.internal_messages.conversations') }}";
    const API_SEARCH_USERS = "{{ route('admin.internal_messages.search_users') }}";
    const CSRF_TOKEN = "{{ csrf_token() }}";

    // Play subtle audio chime for incoming messages
    function playNotificationSound() {
        try {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.type = 'sine';
            osc.frequency.setValueAtTime(587.33, ctx.currentTime); // D5
            osc.frequency.setValueAtTime(880, ctx.currentTime + 0.08); // A5
            gain.gain.setValueAtTime(0.15, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
            osc.start(ctx.currentTime);
            osc.stop(ctx.currentTime + 0.3);
        } catch (e) {
            // AudioContext not permitted or supported
        }
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (activeContactId) {
            loadMessages(activeContactId, true);
            startMessagePolling();
        }

        // Filter conversation list by search query
        const searchInput = document.getElementById('conversationSearchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const query = this.value.toLowerCase().trim();
                const items = document.querySelectorAll('.wa-conversation-item');
                items.forEach(item => {
                    const name = item.getAttribute('data-user-name') || '';
                    const role = item.getAttribute('data-user-role') || '';
                    if (name.includes(query) || role.includes(query)) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
    });

    // Select a conversation from the sidebar list
    function selectConversation(userId) {
        if (activeContactId === userId && document.getElementById('chatMessagesBody')) {
            return;
        }

        activeContactId = userId;

        // Update active class in list
        document.querySelectorAll('.wa-conversation-item').forEach(el => el.classList.remove('active'));
        const currentItem = document.querySelector(`.wa-conversation-item[data-user-id="${userId}"]`);
        if (currentItem) {
            currentItem.classList.add('active');
            // Hide unread badge for this user locally
            const unreadBadge = document.getElementById(`unread-${userId}`);
            if (unreadBadge) unreadBadge.style.display = 'none';
        }

        // On mobile, show chat window and hide sidebar
        const sidebar = document.getElementById('waSidebar');
        const mainChat = document.getElementById('waMainChat');
        if (window.innerWidth <= 768) {
            if (sidebar) sidebar.classList.add('mobile-hidden');
            if (mainChat) mainChat.classList.add('mobile-active');
        }

        loadMessages(userId, true);
        startMessagePolling();
    }

    function backToSidebar() {
        const sidebar = document.getElementById('waSidebar');
        const mainChat = document.getElementById('waMainChat');
        if (sidebar) sidebar.classList.remove('mobile-hidden');
        if (mainChat) mainChat.classList.remove('mobile-active');
    }

    // Load messages via AJAX
    function loadMessages(userId, scrollToBottom = true) {
        if (!userId) return;

        fetch(`${API_MESSAGES_BASE}/${userId}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                renderChatHeader(data.contact);
                renderMessages(data.messages, scrollToBottom);

                // Update unread badge on navbar/inbox
                if (window.refreshNavbarUnreadBadges) {
                    window.refreshNavbarUnreadBadges();
                }
            }
        })
        .catch(err => {
            console.error('Error loading messages:', err);
        });
    }

    // Render active chat header
    function renderChatHeader(contact) {
        const nameEl = document.getElementById('activeUserName');
        const avatarEl = document.getElementById('activeUserAvatar');
        const roleEl = document.getElementById('activeUserRole');

        if (nameEl) nameEl.textContent = contact.name;
        if (avatarEl) avatarEl.src = contact.avatar_url;
        if (roleEl) {
            roleEl.innerHTML = `<span class="badge badge-sm bg-info text-white me-1">${contact.role}</span> <span class="text-muted" style="font-size: 11.5px;">• Private 1-to-1 Chat</span>`;
        }
    }

    // Render message bubbles in chat body
    function renderMessages(messages, scrollToBottom = false) {
        const container = document.getElementById('chatMessagesBody');
        if (!container) return;

        // Check if new incoming message arrived to play sound
        if (messages.length > lastLoadedMessageCount && lastLoadedMessageCount > 0) {
            const lastMsg = messages[messages.length - 1];
            if (!lastMsg.is_mine) {
                playNotificationSound();
            }
        }
        lastLoadedMessageCount = messages.length;

        if (messages.length === 0) {
            container.innerHTML = `
                <div class="text-center my-auto py-5">
                    <div class="d-inline-flex p-3 rounded-circle bg-light mb-2">
                        <i class="far fa-paper-plane fa-2x text-success"></i>
                    </div>
                    <p class="text-muted mb-0 font-w500">No messages yet. Say hello!</p>
                    <small class="text-secondary">Messages are private between both of you.</small>
                </div>
            `;
            return;
        }

        let html = '';
        let lastDateGroup = null;

        messages.forEach(msg => {
            if (msg.date_group !== lastDateGroup) {
                html += `<div class="wa-date-chip">${msg.date_group}</div>`;
                lastDateGroup = msg.date_group;
            }

            const bubbleClass = msg.is_mine ? 'wa-bubble-sent' : 'wa-bubble-received';
            let tickHtml = '';
            if (msg.is_mine) {
                if (msg.is_read) {
                    tickHtml = `<i class="fas fa-check-double wa-tick-read" title="Read at ${msg.read_at || 'Seen'}"></i>`;
                } else {
                    tickHtml = `<i class="fas fa-check-double wa-tick-delivered" title="Delivered"></i>`;
                }
            }

            let attachmentHtml = '';
            if (msg.attachment) {
                if (msg.attachment_type === 'image') {
                    attachmentHtml = `
                        <div class="mb-1">
                            <a href="${msg.attachment}" target="_blank">
                                <img src="${msg.attachment}" alt="photo" style="max-width: 240px; max-height: 200px; border-radius: 6px; object-fit: cover; display: block;">
                            </a>
                        </div>
                    `;
                } else {
                    attachmentHtml = `
                        <div class="p-2 mb-1 rounded bg-light border d-flex align-items-center gap-2">
                            <i class="fas fa-file-download fa-lg text-success"></i>
                            <a href="${msg.attachment}" target="_blank" class="text-truncate text-dark" style="max-width: 180px; font-weight: 500;">
                                ${msg.attachment_name || 'Download File'}
                            </a>
                        </div>
                    `;
                }
            }

            html += `
                <div class="wa-bubble ${bubbleClass}" id="msg-${msg.id}">
                    ${attachmentHtml}
                    ${msg.message ? `<span style="white-space: pre-wrap;">${escapeHtml(msg.message)}</span>` : ''}
                    <div class="wa-bubble-meta">
                        <span>${msg.time}</span>
                        ${tickHtml}
                    </div>
                </div>
            `;
        });

        container.innerHTML = html;

        if (scrollToBottom) {
            container.scrollTop = container.scrollHeight;
        }
    }

    // Escape HTML to prevent XSS
    function escapeHtml(text) {
        if (!text) return '';
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    // Handle Enter keypress in input
    function handleMessageInputKeydown(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    }

    // Send message function
    function sendMessage() {
        if (!activeContactId) return;

        const input = document.getElementById('messageTextInput');
        const text = input ? input.value.trim() : '';

        if (!text && !selectedAttachmentFile) {
            return;
        }

        const formData = new FormData();
        formData.append('_token', CSRF_TOKEN);
        formData.append('receiver_id', activeContactId);
        if (text) formData.append('message', text);
        if (selectedAttachmentFile) formData.append('attachment', selectedAttachmentFile);

        // Optimistic UI clear
        if (input) input.value = '';
        removeSelectedAttachment();

        fetch(API_SEND, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                // Refresh messages and sidebar
                loadMessages(activeContactId, true);
                refreshConversationsList();
            } else {
                toastr.error(data.message || 'Failed to send message');
            }
        })
        .catch(err => {
            console.error('Send error:', err);
            toastr.error('Failed to send message.');
        });
    }

    // Polling active chat every 3.5s
    function startMessagePolling() {
        if (pollingInterval) clearInterval(pollingInterval);

        pollingInterval = setInterval(() => {
            if (activeContactId && document.getElementById('chatMessagesBody')) {
                // Don't auto-scroll if user scrolled up
                const container = document.getElementById('chatMessagesBody');
                const isScrolledToBottom = container ? (container.scrollHeight - container.clientHeight <= container.scrollTop + 50) : true;
                loadMessages(activeContactId, isScrolledToBottom);
                refreshConversationsList();
            }
        }, 3500);
    }

    // Refresh conversation sidebar list via AJAX
    function refreshConversationsList() {
        fetch(API_CONVERSATIONS, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') {
                const list = document.getElementById('conversationsList');
                if (!list) return;

                let html = '';
                data.conversations.forEach(c => {
                    const isActive = (activeContactId === c.user_id);
                    let tickIcon = '';
                    if (c.last_message_is_mine) {
                        tickIcon = c.last_message_is_read
                            ? '<i class="fas fa-check-double wa-tick-read me-1"></i>'
                            : '<i class="fas fa-check-double wa-tick-delivered me-1"></i>';
                    }

                    html += `
                        <li class="wa-conversation-item ${isActive ? 'active' : ''}"
                            data-user-id="${c.user_id}"
                            data-user-name="${c.name.toLowerCase()}"
                            data-user-role="${c.role.toLowerCase()}"
                            onclick="selectConversation(${c.user_id})">
                            <div class="wa-avatar-wrapper">
                                <img src="${c.avatar_url}" alt="${c.name}" class="wa-avatar">
                            </div>
                            <div class="wa-conversation-body">
                                <div class="wa-conv-top">
                                    <h6 class="wa-contact-name">${c.name}</h6>
                                    <span class="wa-conv-time" id="time-${c.user_id}">${c.last_message_time}</span>
                                </div>
                                <div class="wa-conv-bottom">
                                    <p class="wa-last-msg-preview" id="lastmsg-${c.user_id}">
                                        ${tickIcon} ${c.last_message_text}
                                    </p>
                                    <span class="wa-unread-badge" id="unread-${c.user_id}" style="${c.unread_count > 0 ? '' : 'display: none;'}">
                                        ${c.unread_count}
                                    </span>
                                </div>
                            </div>
                        </li>
                    `;
                });

                if (data.conversations.length > 0) {
                    list.innerHTML = html;
                }
            }
        })
        .catch(err => console.error(err));
    }

    // Attachment Handlers
    function handleAttachmentSelected(input) {
        if (input.files && input.files[0]) {
            selectedAttachmentFile = input.files[0];
            const indicator = document.getElementById('attachmentIndicator');
            const fileName = document.getElementById('attachmentFileName');
            if (indicator && fileName) {
                fileName.textContent = selectedAttachmentFile.name;
                indicator.style.display = 'flex';
            }
        }
    }

    function removeSelectedAttachment() {
        selectedAttachmentFile = null;
        const fileInput = document.getElementById('msgAttachmentInput');
        if (fileInput) fileInput.value = '';
        const indicator = document.getElementById('attachmentIndicator');
        if (indicator) indicator.style.display = 'none';
    }

    // Emoji Bar
    function toggleEmojiPalette() {
        const palette = document.getElementById('quickEmojiPalette');
        if (palette) {
            palette.style.display = (palette.style.display === 'flex' ? 'none' : 'flex');
        }
    }

    function insertEmoji(emoji) {
        const input = document.getElementById('messageTextInput');
        if (input) {
            input.value += emoji;
            input.focus();
        }
        toggleEmojiPalette();
    }

    // User Search for New Chat Modal
    let searchDebounceTimer = null;
    function handleUserSearch(val) {
        clearTimeout(searchDebounceTimer);
        searchDebounceTimer = setTimeout(() => {
            const resultsContainer = document.getElementById('userSearchResults');
            if (!resultsContainer) return;

            resultsContainer.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin text-success"></i> Searching...</div>';

            fetch(`${API_SEARCH_USERS}?q=${encodeURIComponent(val)}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    if (data.users.length === 0) {
                        resultsContainer.innerHTML = '<div class="text-center py-4 text-muted">No users found matching your query.</div>';
                        return;
                    }

                    let html = '<ul class="list-group list-group-flush">';
                    data.users.forEach(u => {
                        html += `
                            <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between p-2 cursor-pointer"
                                onclick="startChatWithUser(${u.id})" style="border-radius: 8px;">
                                <div class="d-flex align-items-center">
                                    <img src="${u.avatar_url}" alt="${u.name}" class="rounded-circle me-3" style="width: 40px; height: 40px; object-fit: cover;">
                                    <div>
                                        <h6 class="mb-0 font-w600" style="font-size: 14px;">${u.name}</h6>
                                        <small class="text-muted">${u.email || u.phone || ''}</small>
                                    </div>
                                </div>
                                <span class="badge bg-light text-dark border">${u.role}</span>
                            </li>
                        `;
                    });
                    html += '</ul>';
                    resultsContainer.innerHTML = html;
                }
            })
            .catch(err => {
                resultsContainer.innerHTML = '<div class="text-center py-3 text-danger">Failed to search users.</div>';
            });
        }, 300);
    }

    function startChatWithUser(userId) {
        // Close modal
        const modalEl = document.getElementById('newChatModal');
        const modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) modal.hide();

        // Redirect or load conversation
        window.location.href = "{{ route('admin.internal_messages.index') }}?user_id=" + userId;
    }

    // Ensure content-body does not inherit custom.js aggressive min-height
    function enforceCompactChatLayout() {
        const cb = document.querySelector('.content-body.internal-chat-body');
        if (cb) {
            cb.style.setProperty('min-height', 'auto', 'important');
        }
    }
    window.addEventListener('resize', enforceCompactChatLayout);
    window.addEventListener('load', enforceCompactChatLayout);
    document.addEventListener('DOMContentLoaded', enforceCompactChatLayout);
    setTimeout(enforceCompactChatLayout, 50);
    setTimeout(enforceCompactChatLayout, 300);
    setTimeout(enforceCompactChatLayout, 800);
</script>
@endsection