$(document).ready(function() {
    $('.select2').select2({
        theme: 'bootstrap-5',
        width: '100%',
        placeholder: 'Search for a user...',
        allowClear: true
    });

    // Keep track of added members
    var addedMembers = new Set();
    var creatorId = document.querySelector('.member-row').dataset.userId;
    addedMembers.add(creatorId);

    // Function to show alert modal
    function showAlert(message) {
        $('#alertModalMessage').text(message);
        var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
        alertModal.show();
    }

    // Handle Add Member button click
    $('#addMemberBtn').click(function() {
        var selectedUserId = $('#user_id').val();
        var selectedUserName = $('#user_id option:selected').text();
        var selectedUserEmail = $('#user_id option:selected').data('email') || '';
        var selectedUserAvatar = $('#user_id option:selected').data('avatar') || "/static/default-avatar.png";
        
        if (!selectedUserId) {
            showAlert('Please select a user to add.');
            return;
        }

        if (addedMembers.has(selectedUserId)) {
            showAlert('This user has already been added.');
            return;
        }

        // Add to the set of added members
        addedMembers.add(selectedUserId);

        // Disable the option in the dropdown
        $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', true);
        $('#user_id').val(null).trigger('change');

        // Create the member list item
        var memberItem = $('<div class="list-group-item d-flex align-items-center member-row" data-user-id="' + selectedUserId + '">')
            .append($('<img class="member-avatar">').attr('src', selectedUserAvatar))
            .append($('<div class="flex-grow-1">')
                .append($('<div class="fw-bold">').text(selectedUserName))
                .append($('<div class="text-muted small">').text(selectedUserEmail))
            )
            .append($('<button type="button" class="btn btn-remove-member ms-2">')
                .append($('<i class="fas fa-user-minus me-1"></i>'))
                .append('Remove')
                .click(function() {
                    $(this).closest('.list-group-item').remove();
                    addedMembers.delete(selectedUserId);
                    // Re-enable the option in the dropdown
                    $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', false);
                    $('#user_id').trigger('change');
                    updateHiddenInputs();
                })
            );

        // Add to the list
        $('#selectedMembersList').append(memberItem);

        // Update hidden inputs
        updateHiddenInputs();
    });

    function updateHiddenInputs() {
        // Remove any existing members inputs
        $('#conversationForm input[name="members"]').remove();
        
        // Add new hidden inputs for each member
        addedMembers.forEach(function(memberId) {
            var input = $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'members')
                .val(memberId);
            $('#conversationForm').append(input);
        });
    }

    // Initialize hidden inputs
    updateHiddenInputs();
});