{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Create Conversation - {% if site_settings.company_name %}DocuPulse for {{ site_settings.company_name }}{% else %}DocuPulse{% endif %}{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .member-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
    }
    .badge-creator {
        background-color: #d1f2eb;
        color: #117a65;
        font-weight: 500;
    }
    .btn-remove-member {
        background: #f8d7da;
        color: #c82333;
        border: none;
        font-weight: 500;
    }
    .btn-remove-member:hover {
        background: #f5c6cb;
        color: #a71d2a;
    }
</style>
{% endblock %}

{% block content %}
{{ header(
    title=("Edit Conversation" if edit_mode else "Create New Conversation"),
    description=("Update conversation details" if edit_mode else "Start a new conversation with your team"),
    button_text="Cancel",
    button_url=url_for('conversations.conversations'),
    icon="fa-edit" if edit_mode else "fa-comments",
    button_class="btn-secondary",
    button_icon="fa-times"
) }}

<!-- Alert Modal -->
<div id="alertModal" class="modal fade" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="alertModalLabel">Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center gap-3">
                    <i class="fas fa-exclamation-circle text-warning" style="font-size: 2rem;"></i>
                    <div id="alertModalMessage"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="POST" id="conversationForm">
                        {{ form.csrf_token }}
                        <div class="mb-3">
                            {{ form.name.label(class="form-label") }}
                            {{ form.name(class="form-control", placeholder="Enter conversation name") }}
                            {% if form.name.errors %}
                            <div class="text-danger">
                                {% for error in form.name.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.description.id }}" class="form-label">Description (Optional)</label>
                            {{ form.description(class="form-control", rows="3", placeholder="Enter a description (optional)") }}
                            {% if form.description.errors %}
                            <div class="text-danger">
                                {% for error in form.description.errors %}
                                <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                {{ "Edit Conversation" if edit_mode else "Create Conversation" }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">Add Members</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="user_id" class="form-label">Select User</label>
                        <select class="form-select select2" id="user_id" name="user_id">
                            <option value="">Search for a user...</option>
                            {% for user in form.members.choices %}
                            {% if user[0] != current_user.id %}
                            <option value="{{ user[0] }}" data-email="{{ user[2] if user|length > 2 else '' }}" data-avatar="{{ url_for('profile_pic', filename=user[3]) if user|length > 3 and user[3] else url_for('static', filename='default-avatar.png') }}">{{ user[1] }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary w-100 mb-3" id="addMemberBtn">
                        <i class="fas fa-user-plus me-2"></i>Add Member
                    </button>

                    <div class="list-group" id="selectedMembersList">
                        <!-- Render creator row server-side -->
                        <div class="list-group-item d-flex align-items-center member-row" data-user-id="{{ current_user.id }}">
                            <img class="member-avatar" src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}">
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ current_user.username }} {{ current_user.last_name }}</div>
                                <div class="text-muted small">{{ current_user.email }}</div>
                            </div>
                            <span class="badge badge-creator ms-2"><i class="fas fa-user"></i> Creator</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(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 = '{{ current_user.id }}';
    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') || "{{ url_for('static', filename='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();
});
</script>
{% endblock %}