@extends('layouts.app')

@section('page-title')
    Wiadomości
@endsection

@section('page-actions')
    <a href="{{ route('home') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i> Dashboard
    </a>
@endsection

@section('content')
    <div class="container-fluid px-0">
        {{-- TU: dodatkowa klasa module-shell-messages --}}
        <div class="module-shell module-shell-messages">

            <div class="mb-4">
                <p class="text-muted mb-0 small">
                    Moduł wiadomości umożliwia prowadzenie rozmów 1:1 oraz w grupach,
                    wyszukiwanie użytkowników i szybki dostęp do ostatnich czatów.
                </p>
            </div>

            {{-- TU: dodatkowa klasa erp-messages-row --}}
            <div class="row g-3 erp-messages-row">
                <div class="col-12 col-lg-4">
                    @include('modules.wiadomosci._sidebar')
                </div>

                <div class="col-12 col-lg-8">
                    @include('modules.wiadomosci._chat_window')
                </div>
            </div>

            @include('modules.wiadomosci._modals')
        </div>
    </div>
@endsection


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        const btnNewDirect   = document.getElementById('btn-new-direct');
        const btnNewGroup    = document.getElementById('btn-new-group');

        const modalEl        = document.getElementById('conversationUserPickerModal');
        const groupNameWrap  = document.getElementById('group-name-wrapper');
        const groupNameInput = document.getElementById('group-name-input');
        const convModeInput  = document.getElementById('conv-mode');
        const helperText     = document.getElementById('picker-helper-text');

        const userSearchInput   = document.getElementById('user-search-input');
        const userSearchResults = document.getElementById('user-search-results');
        const selectedBadges    = document.getElementById('selected-users-badges');
        const btnCreateConv     = document.getElementById('btn-create-conversation');

        const modalInstance  = modalEl ? new bootstrap.Modal(modalEl) : null;

        // Stan lokalny: wybrani userzy (id -> {id, name, email})
        let selectedUsers = {};
        let searchTimeout = null;

        function resetPicker() {
            selectedUsers = {};
            groupNameInput.value = '';
            userSearchInput.value = '';
            userSearchResults.innerHTML = '';
            selectedBadges.innerHTML = '';
        }

        function renderSelectedBadges() {
            selectedBadges.innerHTML = '';

            const entries = Object.values(selectedUsers);

            if (entries.length === 0) {
                selectedBadges.innerHTML = '<span class="text-muted">Brak wybranych użytkowników.</span>';
                return;
            }

            entries.forEach(user => {
                const span = document.createElement('span');
                span.className = 'badge bg-primary-subtle text-primary border';
                span.innerHTML = `
                    <i class="bi bi-person me-1"></i>${user.name}
                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 text-decoration-none text-primary remove-user-badge" data-user-id="${user.id}">
                        &times;
                    </button>
                `;
                selectedBadges.appendChild(span);
            });

            // obsługa usuwania z badge
            selectedBadges.querySelectorAll('.remove-user-badge').forEach(btn => {
                btn.addEventListener('click', function () {
                    const id = this.getAttribute('data-user-id');
                    delete selectedUsers[id];
                    renderSelectedBadges();
                    syncResultCheckboxes();
                });
            });
        }

        function syncResultCheckboxes() {
            userSearchResults.querySelectorAll('input[data-user-id]').forEach(input => {
                const uid = input.getAttribute('data-user-id');
                input.checked = !!selectedUsers[uid];
            });
        }

        function renderResults(users) {
            userSearchResults.innerHTML = '';

            if (!users || users.length === 0) {
                userSearchResults.innerHTML = `
                    <tr><td class="text-muted small px-3 py-2">Brak wyników.</td></tr>
                `;
                return;
            }

            const mode = convModeInput.value;

            users.forEach(user => {
                const tr = document.createElement('tr');

                tr.innerHTML = `
                    <td class="px-3 py-2">
                        <div class="d-flex align-items-center">
                            <div class="form-check mb-0">
                                <input class="form-check-input"
                                       type="${mode === 'direct' ? 'radio' : 'checkbox'}"
                                       name="user-select"
                                       data-user-id="${user.id}">
                            </div>
                            <div class="ms-2">
                                <div class="fw-semibold small">${user.name}</div>
                                <div class="text-muted small">${user.email}</div>
                            </div>
                        </div>
                    </td>
                `;

                userSearchResults.appendChild(tr);
            });

            // podpięcie eventów
            userSearchResults.querySelectorAll('input[data-user-id]').forEach(input => {
                input.addEventListener('change', function () {
                    const uid = this.getAttribute('data-user-id');
                    const row = this.closest('tr');
                    const name = row.querySelector('.fw-semibold').textContent.trim();
                    const email = row.querySelector('.text-muted').textContent.trim();

                    const mode = convModeInput.value;

                    if (mode === 'direct') {
                        // direct: tylko jeden user
                        selectedUsers = {};
                        if (this.checked) {
                            selectedUsers[uid] = { id: uid, name, email };
                        }
                    } else {
                        // group: wiele
                        if (this.checked) {
                            selectedUsers[uid] = { id: uid, name, email };
                        } else {
                            delete selectedUsers[uid];
                        }
                    }

                    renderSelectedBadges();
                    syncResultCheckboxes();
                });
            });

            syncResultCheckboxes();
        }

        async function searchUsers(query) {
            try {
                const params = new URLSearchParams();
                if (query) {
                    params.append('q', query);
                }

                const url = "{{ route('wiadomosci.users.search') }}" + '?' + params.toString();

                const response = await fetch(url, {
                    headers: {
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (!response.ok || !data.success) {
                    console.error('Błąd wyszukiwania użytkowników', data);
                    renderResults([]);
                    return;
                }

                renderResults(data.data || []);
            } catch (e) {
                console.error(e);
                renderResults([]);
            }
        }

        function openPicker(mode) {
            if (!modalInstance) return;

            resetPicker();
            convModeInput.value = mode;

            if (mode === 'direct') {
                groupNameWrap.style.display = 'none';
                helperText.textContent = 'Wybierz jednego użytkownika, aby rozpocząć rozmowę 1:1.';
            } else {
                groupNameWrap.style.display = '';
                helperText.textContent = 'Wybierz kilku użytkowników i nadaj nazwę grupie.';
            }

            // startowe wyszukanie (puste)
            searchUsers('');
            renderSelectedBadges();

            modalInstance.show();
            setTimeout(() => userSearchInput?.focus(), 200);
        }

        // Przyciski otwierające modal
        if (btnNewDirect) {
            btnNewDirect.addEventListener('click', function () {
                openPicker('direct');
            });
        }

        if (btnNewGroup) {
            btnNewGroup.addEventListener('click', function () {
                openPicker('group');
            });
        }

        // Live search (debounce)
        if (userSearchInput) {
            userSearchInput.addEventListener('input', function () {
                const q = this.value || '';

                if (searchTimeout) {
                    clearTimeout(searchTimeout);
                }

                searchTimeout = setTimeout(() => {
                    searchUsers(q);
                }, 250);
            });
        }

        // POST do utworzenia rozmowy
        async function createConversation(payload) {
            try {
                const response = await fetch("{{ route('wiadomosci.conversations.store') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(payload),
                });

                const data = await response.json();

                if (!response.ok || !data.success) {
                    alert(data.message || 'Nie udało się utworzyć rozmowy.');
                    return;
                }

                if (data.redirect) {
                    window.location.href = data.redirect;
                } else if (data.conversation_id) {
                    window.location.href = '{{ route('wiadomosci.index') }}?conversation_id=' + data.conversation_id;
                }
            } catch (e) {
                console.error(e);
                alert('Wystąpił błąd podczas tworzenia rozmowy.');
            }
        }

        if (btnCreateConv) {
            btnCreateConv.addEventListener('click', function () {
                const mode     = convModeInput.value;
                const usersArr = Object.values(selectedUsers).map(u => parseInt(u.id, 10)).filter(id => !isNaN(id));

                if (usersArr.length === 0) {
                    alert('Wybierz przynajmniej jednego użytkownika.');
                    return;
                }

                if (mode === 'direct' && usersArr.length !== 1) {
                    alert('Dla rozmowy 1:1 wybierz dokładnie jednego użytkownika.');
                    return;
                }

                const payload = {
                    type: mode,
                    user_ids: usersArr,
                };

                if (mode === 'group') {
                    const name = groupNameInput.value.trim();
                    if (!name) {
                        alert('Podaj nazwę grupy.');
                        return;
                    }
                    payload.name = name;
                }

                createConversation(payload);
            });
        }

        // Klik kafelków rozmów
        document.querySelectorAll('[data-conversation-id]').forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                const id = this.getAttribute('data-conversation-id');
                if (!id) return;

                const url = '{{ route('wiadomosci.index') }}' + '?conversation_id=' + encodeURIComponent(id);
                window.location.href = url;
            });
        });
    });
</script>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const chatBox = document.getElementById('chat-messages');

    // jeśli nie ma okna czatu — nie uruchamiamy logiki
    if (!chatBox) return;

    // --- HELPERS ---

    function getConvId() {
        return chatBox.getAttribute('data-conversation-id');
    }

    function getLastMessageId() {
        return parseInt(chatBox.getAttribute('data-last-message-id') || '0', 10);
    }

    function setLastMessageId(id) {
        chatBox.setAttribute('data-last-message-id', id);
    }

    function scrollChatToBottom() {
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    // --- przewijamy DO SAMEGO DOŁU już przy wejściu do rozmowy ---
    if (getConvId()) {
        setTimeout(scrollChatToBottom, 100);
    }

    // --- POLLING ---

    async function pollMessages() {
        const convId = getConvId();
        if (!convId) return;

        const lastId = getLastMessageId();

        try {
            const params = new URLSearchParams({
                conversation_id: convId,
                last_message_id: lastId,
            });

            const response = await fetch(
                "{{ route('wiadomosci.messages.poll') }}?" + params.toString(),
                {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }
            );

            const data = await response.json();

            if (!response.ok || !data.success) {
                console.warn('Polling error', data);
                return;
            }

            // --- dodajemy NOWE wiadomości ---
            if (data.messages_html && data.messages_html.length > 0) {
                chatBox.insertAdjacentHTML('beforeend', data.messages_html);
                scrollChatToBottom(); // przewijamy do najnowszej
            }

            // --- aktualizujemy last_message_id ---
            if (data.last_message_id && data.last_message_id !== lastId) {
                setLastMessageId(data.last_message_id);
            }

        } catch (e) {
            console.error('Polling exception', e);
        }
    }

    // --- odświeżanie co 2 sekundy ---
    setInterval(pollMessages, 1000);

});
</script>

@endpush