{% extends "admin/base_site.html" %}
{% load i18n static unfold %}

{% block breadcrumbs %}{% endblock %}

{% block title %}
{{ title }} | {{ site_title|default:_('Django site admin') }}
{% endblock %}

{% block extrahead %}
{{ block.super }}
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
    type="text/css" />
<link rel="stylesheet" href="{% static 'css/live_chat.css' %}">
{% endblock %}

{% block content %}
<div
    class="chat-main-wrapper flex w-full shadow-md border-y border-gray-200 dark:border-gray-700 overflow-hidden mt-0 relative">

    <div
        class="rooms-sidebar flex-shrink-0 flex flex-col border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 relative z-20">

        <div class="telegram-header px-5 py-3 flex-shrink-0 flex items-center justify-between shadow-sm">
            <div class="flex items-center gap-3">
                <div class="user-avatar bg-white/20 border border-white/30 text-white shadow-sm">
                    <span class="material-symbols-outlined text-[20px]">forum</span>
                </div>
                <h2 class="text-[16px] font-semibold text-white m-0 tracking-wide">
                    {% trans "Chat Rooms" %}
                </h2>
            </div>

            <button type="button" id="new-chat-btn"
                class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 border border-white/30 text-white flex items-center justify-center transition-colors shadow-sm"
                title="{% trans 'New Chat' %}">
                <span class="material-symbols-outlined text-[20px]">edit_square</span>
            </button>
        </div>

        <div id="room-list" class="flex-1 overflow-y-auto overscroll-contain chat-scrollbar pt-2 relative">
            <div class="flex items-center justify-center h-full">
                <span class="material-symbols-outlined animate-spin text-gray-400">autorenew</span>
            </div>
        </div>

        <div id="users-modal"
            class="absolute inset-0 z-50 bg-gray-50 dark:bg-gray-900 flex flex-col transform transition-transform duration-300 translate-y-full shadow-2xl">

            <div class="telegram-header px-5 py-3 flex items-center gap-3 shadow-sm">
                <button type="button" id="close-users-modal"
                    class="text-white hover:bg-white/20 p-1.5 rounded-full transition-colors flex items-center justify-center">
                    <span class="material-symbols-outlined text-[22px]">arrow_back</span>
                </button>
                <h3 class="text-[16px] font-semibold text-white m-0 tracking-wide">{% trans "Select Contact" %}</h3>
            </div>

            <div class="p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 shadow-sm">
                <div class="relative telegram-input-container !p-1.5">
                    <span
                        class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-[20px]">search</span>
                    <input type="text" id="user-search-input"
                        class="telegram-message-input w-full pl-11 pr-4 py-1 !min-h-[35px]"
                        placeholder="{% trans 'Search users...' %}">
                </div>
            </div>

            <div id="users-list" class="flex-1 overflow-y-auto overscroll-contain chat-scrollbar pt-2 pb-4">
                <div class="flex items-center justify-center h-20">
                    <span class="material-symbols-outlined animate-spin text-gray-400">autorenew</span>
                </div>
            </div>
        </div>
    </div>

    <div class="chat-area flex-1 flex flex-col relative z-10">
        <div id="no-chat-selected"
            class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 z-30 bg-[#f8fafc] dark:bg-[#111827]">
            <div
                class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-700 dark:to-gray-600 rounded-full flex items-center justify-center shadow-inner">
                <span class="material-symbols-outlined text-5xl text-blue-500 dark:text-blue-400 opacity-80">chat</span>
            </div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">{% trans "No Chat Selected" %}</h3>
            <p class="text-sm font-medium">{% trans "Select a chat from the sidebar to start messaging" %}</p>
        </div>

        <div id="active-chat-header"
            class="telegram-header px-6 py-3 flex items-center justify-between flex-shrink-0 invisible">
            <div class="flex items-center gap-3">
                <div class="user-avatar bg-white/20 border border-white/30 text-white shadow-sm">
                    <span class="material-symbols-outlined text-[20px]">group</span>
                </div>
                <h3 id="active-chat-title" class="text-[16px] font-semibold text-white m-0 tracking-wide"></h3>
            </div>
            <span id="polling-indicator" class="flex h-2.5 w-2.5 relative hidden">
                <span
                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75"></span>
                <span
                    class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-400 shadow-[0_0_8px_rgba(74,222,128,0.8)]"></span>
            </span>
        </div>

        <div id="chat-messages" class="chat-messages flex-1 invisible"></div>

        <div id="chat-input-area" class="message-input-area flex-shrink-0 px-6 py-4 invisible z-20">
            <form id="chat-form" class="flex items-center gap-3 w-full m-0 max-w-5xl mx-auto">
                <div class="telegram-input-container flex-1">
                    <input type="text" id="chat-input" class="telegram-message-input w-full"
                        placeholder="{% trans 'Type your message...' %}" autocomplete="off">
                </div>
                <button type="submit" id="send-btn" class="telegram-action-btn send-btn-telegram shadow-md">
                    <span class="material-symbols-outlined text-[20px] ml-1">send</span>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    // 🟢 اضافه شدن آدرس‌های API جدید به کانفیگ
    window.CHAT_CONFIG = {
        csrfToken: '{{ csrf_token }}',
        apiUrlRooms: '{% url "admin:live_chat_api_rooms" %}',
        apiUrlMessagesBase: '{% url "admin:live_chat_api_messages" room_id=0 %}'.replace('0/', ''),
        apiUrlSendBase: '{% url "admin:live_chat_api_send" room_id=0 %}'.replace('0/', ''),
        apiUrlUsers: '{% url "admin:live_chat_api_users" %}', // روت جدید برای گرفتن کاربران
        apiUrlCreateRoom: '{% url "admin:live_chat_api_create_room" %}' // روت جدید برای ساخت روم
    };
</script>
<script src="{% static 'js/live_chat.js' %}"></script>
{% endblock %}