{% 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' %}">
<style>
    /* ── Break out of Unfold constraints & Center card with symmetric padding ── */
    #content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-bottom: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    div:has(> #content) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    .chat-main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-main-wrapper flex w-full mt-0 relative">

    <div class="rooms-sidebar flex-shrink-0 flex flex-col relative z-20">

        <div class="telegram-header 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 justify-start 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 -ml-2">
                    <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="flex items-center telegram-input-container !p-1.5 gap-2">
                    <span class="material-symbols-outlined text-gray-400 text-[20px] ml-2">search</span>
                    <input type="text" id="user-search-input" class="telegram-message-input flex-1 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">

        <div id="active-chat-header" class="telegram-header">

            <div id="chat-header-info" class="flex items-center gap-3 hidden">
                <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="no-chat-selected" class="flex-1 flex flex-col items-center justify-center w-full p-8 z-30"
            style="transform: translateY(64px);">
            <div
                class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-[#0A522E]/10 to-[#0A522E]/20 dark:from-[#FAF6E9]/10 dark:to-[#FAF6E9]/20 rounded-full flex items-center justify-center shadow-inner">
                <span
                    class="material-symbols-outlined text-5xl text-[#0A522E] dark:text-[#FAF6E9] opacity-90">chat</span>
            </div>
            <h3 class="text-lg font-semibold text-[#052B18] dark:text-[#FAF6E9] mb-2 text-center">{% trans "No Chat Selected" %}</h3>
            <p class="text-sm font-medium opacity-80 text-[#0A522E] dark:text-[#FAF6E9] text-center">{% trans "Select a chat from the sidebar to start messaging" %}</p>
        </div>

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

        <div id="chat-input-area"
            class="message-input-area w-full !w-full !max-w-none flex-shrink-0 px-6 py-4 mt-auto hidden z-20">
            <form id="chat-form" class="flex items-end gap-3 w-full !w-full !max-w-none m-0">
                <div class="telegram-input-container flex-1 w-full flex items-end">
                    <textarea id="chat-input"
                        class="telegram-message-input w-full resize-none overflow-y-auto chat-scrollbar" rows="1"
                        placeholder="{% trans 'Type your message...' %}"
                        style="min-height: 24px; max-height: 150px; line-height: 1.5;"></textarea>
                </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" %}', // روت جدید برای ساخت روم
        trans: {
            failedToLoadUsers: "{% trans 'Failed to load users.' %}",
            noUsersFound: "{% trans 'No users found.' %}",
            noActiveChatsFound: "{% trans 'No active chats found.' %}",
            groupChat: "{% trans 'Group Chat' %}",
            privateChat: "{% trans 'Private Chat' %}",
            noMessagesYet: "{% trans 'No messages yet. Start the conversation!' %}"
        }
    };
</script>
<script src="{% static 'js/live_chat.js' %}"></script>
{% endblock %}