{% extends 'layouts/base.html' %}

{% block content %}

<div class="chat-page" data-chat-poll-url="{{ url_for('admin.chat_data') }}" data-chat-read-url="{{ url_for('admin.read_chat') }}">

<div class="page-head">
    <h1>Group Chats</h1>
    {% if is_super_admin %}
    <form method="post">
        <input type="hidden" name="action" value="toggle_chat">
        <button class="btn {{ 'danger' if chat_enabled else '' }}" type="submit">
            {{ 'Deactivate Chat for Users' if chat_enabled else 'Activate Chat for Users' }}
        </button>
    </form>
    {% endif %}
</div>

{% if not chat_enabled %}<div class="alert warning">Chat is disabled for all non-super-admin users.</div>{% endif %}

{% if can_initiate_chat %}
<div class="panel">
    <h3>Create Group</h3>
    <form method="post" class="form-grid two">
        <input type="hidden" name="action" value="create_group">
        <div class="form-group">
            <label>Group Name</label>
            <input name="group_name" required>
        </div>
        <div class="form-group full-width">
            <label>Members</label>
            {% if is_super_admin %}
            <label class="check chat-all-users"><input type="checkbox" name="all_users" data-chat-all-users> All active users</label>
            {% endif %}
            <div class="chips">
                {% for person in users %}
                <label>
                    <input type="checkbox" name="member_ids" value="{{ person.id }}" data-chat-member>
                    {{ person.name }} ({{ person.role }})
                </label>
                {% endfor %}
            </div>
        </div>
        <div class="form-actions full-width">
            <button class="btn" type="submit">Create Group</button>
        </div>
    </form>
</div>
{% endif %}

{% for item in group_messages %}
<div class="panel" data-chat-group="{{ item.group.id }}">
    <div class="page-head">
        <h2>{{ item.group.name }} <span class="chat-unread-badge" data-chat-group-unread="{{ item.group.id }}" {% if not item.group.unread_count %}hidden{% endif %}>{{ item.group.unread_count }}</span></h2>
        <div class="action-buttons">
            <span class="badge">{{ item.group.member_count or 0 }} members</span>
            {% if is_super_admin %}
            <form method="post" action="{{ url_for('admin.delete_chat', group_id=item.group.id) }}" onsubmit="return confirm('Delete this chat and all messages permanently?')">
                <button class="btn btn-sm danger" type="submit">&#128465; Delete Chat</button>
            </form>
            {% endif %}
        </div>
    </div>
    <div class="group-members">
        {% for member in item.members %}
        <span class="badge badge-success">{{ member.name }}</span>
        {% endfor %}
    </div>
    <div class="chat-thread" data-last-message-id="{{ item.messages[0].id if item.messages else 0 }}">
        {% for message in item.messages|reverse %}
        <div class="chat-message">
            <strong>{{ message.user_name }}</strong>
            <span>{{ message.created_at }}</span>
            <p>{{ message.message }}</p>
        </div>
        {% endfor %}
    </div>
    <form method="post" class="chat-form">
        <input type="hidden" name="group_id" value="{{ item.group.id }}">
        <input type="text" name="message" placeholder="Write a message..." required>
        <button class="chat-emoji-toggle" type="button" title="Add emoji" aria-label="Add emoji" aria-expanded="false">😊</button>
        <div class="chat-emoji-picker" hidden>
            {% for emoji in ['😀', '😂', '😊', '😍', '🥳', '😎', '🤔', '😢', '😮', '🙏', '👍', '👎', '👏', '🙌', '🤝', '💪', '🎉', '🔥', '✅', '⭐', '💯', '❤️', '💚', '🚀'] %}
            <button type="button" data-chat-emoji="{{ emoji }}" aria-label="Add {{ emoji }}">{{ emoji }}</button>
            {% endfor %}
        </div>
        <button class="btn" type="submit">Send</button>
    </form>
</div>
{% endfor %}

</div>

{% endblock %}