{% 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" />
<link href="{{ url_for('static', filename='css/member-management.css') }}?v={{ 'css/member-management.css'|asset_version }}" 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>
                        {% if edit_mode %}
                        <!-- Render existing members -->
                        {% for member in conversation.members %}
                        {% if member.id != current_user.id %}
                        <div class="list-group-item d-flex align-items-center member-row" data-user-id="{{ member.id }}">
                            <img class="member-avatar" src="{{ url_for('profile_pic', filename=member.profile_picture) if member.profile_picture else url_for('static', filename='default-avatar.png') }}">
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ member.username }} {{ member.last_name }}</div>
                                <div class="text-muted small">{{ member.email }}</div>
                            </div>
                            <button type="button" class="btn btn-remove-member ms-2">
                                <i class="fas fa-user-minus me-1"></i>Remove
                            </button>
                        </div>
                        {% endif %}
                        {% endfor %}
                        {% endif %}
                    </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 src="{{ url_for('static', filename='js/create-conversation.js') }}?v={{ 'js/create-conversation.js'|asset_version }}"></script>
{% endblock %}