{% extends 'base.html' %}
{% load static %}

{% block title %}Чаты{% endblock %}

{% block content %}
<div>
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Чаты</h1>
        <p class="text-gray-500 mt-1">Ваши диалоги и групповые чаты</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Список чатов -->
        <div class="lg:col-span-3 bg-white rounded-xl shadow-sm">
            <div class="divide-y">
                {% for chat in chats %}
                <a href="{% url 'chat_detail' chat.id %}" class="block hover:bg-gray-50 transition">
                    <div class="px-6 py-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 flex items-center justify-center text-white">
                                {% if chat.is_group %}
                                <i class="fas fa-users text-xl"></i>
                                {% else %}
                                <i class="fas fa-user text-xl"></i>
                                {% endif %}
                            </div>
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-800">
                                    {% if chat.is_group and chat.name %}
                                        {{ chat.name }}
                                    {% else %}
                                        {% for p in chat.other_participants %}
                                            {{ p.full_name|default:p.email }}
                                        {% endfor %}
                                    {% endif %}
                                </h3>
                                <p class="text-sm text-gray-500">
                                    {% if chat.last_message %}
                                        {% if chat.last_message.sender == request.user %}Вы: {% endif %}
                                        {{ chat.last_message.text|truncatechars:40 }}
                                    {% else %}
                                        Нет сообщений
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="text-right">
                            {% if chat.unread_count > 0 %}
                            <span class="bg-red-500 text-white text-xs font-bold rounded-full px-2 py-1">{{ chat.unread_count }}</span>
                            {% endif %}
                            <p class="text-xs text-gray-400 mt-1">
                                {{ chat.updated_at|date:"d.m.y H:i" }}
                            </p>
                        </div>
                    </div>
                </a>
                {% empty %}
                <div class="px-6 py-8 text-center text-gray-500">
                    <i class="fas fa-comments text-4xl mb-3 block"></i>
                    <p>У вас нет чатов</p>
                    <button onclick="openCreateModal()" class="mt-3 bg-[#4395AB] text-white px-4 py-2 rounded-lg hover:bg-[#2d6b7c] transition">
                        Создать чат
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Боковая панель: создание чата -->
        <div class="space-y-6">
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h2 class="font-semibold text-gray-800 mb-4"><i class="fas fa-plus-circle mr-2 text-[#4395AB]"></i>Создать чат</h2>
                <button onclick="openCreateModal()" class="w-full bg-[#4395AB] text-white py-2 rounded-lg hover:bg-[#2d6b7c] transition">
                    + Новый чат
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно создания чата -->
<div id="createModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-md max-h-[80vh] overflow-y-auto">
        <h2 class="text-xl font-bold mb-4">Создать чат</h2>
        <form method="post" action="{% url 'create_chat' %}">
            {% csrf_token %}
            <div class="mb-4">
                <label class="block mb-2 font-medium">Тип чата</label>
                <select name="chat_type" id="chatType" class="w-full p-2 border rounded-lg">
                    <option value="private">Личный чат</option>
                    <option value="group">Групповой чат</option>
                </select>
            </div>
            <div class="mb-4" id="groupNameField" style="display: none;">
                <label class="block mb-2 font-medium">Название группы</label>
                <input type="text" name="name" class="w-full p-2 border rounded-lg" placeholder="Название чата">
            </div>
            <div class="mb-4">
                <label class="block mb-2 font-medium">Выберите участников</label>
                <div class="border rounded-lg max-h-60 overflow-y-auto divide-y">
                    {% for user in users_for_chat %}
                    <label class="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 cursor-pointer">
                        <input type="checkbox" name="users" value="{{ user.id }}" class="w-4 h-4">
                        <div>
                            <div class="font-medium">
                                {% if user.role == 'teacher' %}
                                    {% with teacher=user.teacher %}
                                        {{ teacher.last_name }} {{ teacher.first_name }} {{ teacher.middle_name|default:'' }}
                                    {% endwith %}
                                {% elif user.role == 'student' %}
                                    {% with student=user.student %}
                                        {{ student.last_name }} {{ student.first_name }} {{ student.middle_name|default:'' }}
                                    {% endwith %}
                                {% else %}
                                    {{ user.email }}
                                {% endif %}
                            </div>
                            <div class="text-xs text-gray-500">
                                {% if user.role == 'teacher' %}Преподаватель
                                {% elif user.role == 'student' %}Студент
                                {% elif user.role == 'academic_staff' %}Учебная часть
                                {% elif user.role == 'admin' %}Администратор
                                {% endif %}
                            </div>
                        </div>
                    </label>
                    {% empty %}
                    <div class="px-3 py-4 text-center text-gray-500">
                        Нет доступных пользователей
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="flex justify-end gap-3 mt-4">
                <button type="button" onclick="closeModal()" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Отмена</button>
                <button type="submit" class="px-4 py-2 bg-[#4395AB] text-white rounded-lg hover:bg-[#2d6b7c] transition">Создать</button>
            </div>
        </form>
    </div>
</div>

<script>
    const modal = document.getElementById('createModal');
    const chatType = document.getElementById('chatType');
    const groupNameField = document.getElementById('groupNameField');

    function openCreateModal() {
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeModal() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.querySelectorAll('input[name="users"]').forEach(cb => cb.checked = false);
    }

    if (chatType) {
        chatType.addEventListener('change', function() {
            groupNameField.style.display = this.value === 'group' ? 'block' : 'none';
        });
    }

    modal.addEventListener('click', function(e) {
        if (e.target === modal) closeModal();
    });
</script>
{% endblock %}