{# backend/templates/communications/chat_list.html #}
{% extends "base.html" %}
{% load static django_bootstrap5 %}

{% block title %}Мои чаты{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
<link rel="stylesheet" href="{% static 'css/components/feed-cards.css' %}">
{% endblock %}

{% block content %}
<div class="container">
  <div class="row gx-0">
    <div class="col-12">

      {# Заголовок + ПОИСК (iOS-стиль) #}
      <div class="feed-header d-flex align-items-center">
        <i class="bi-chat-dots fs-2 text-primary"></i>
        <h2 class="title mb-0">Мои чаты</h2>

        <div class="ms-auto ios-search">
          <div class="ios-search">
            <i class="bi-search"></i>
            <input
              type="search"
              id="chatSearch"
              class="ios-search-input"
              placeholder="Поиск по названию или участникам"
              autocomplete="off">
            <button type="button" class="ios-search-clear" aria-label="Очистить">
              <i class="bi-x-lg"></i>
            </button>
          </div>
        </div>
      </div>

      {# Сегментированный фильтр + КНОПКА справа #}
      <div class="feed-new mb-3">
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <div class="btn-group" role="group" aria-label="Фильтр чатов">
            <input type="radio" class="btn-check" name="chatFilter" id="fltAll" autocomplete="off" checked>
            <label class="btn btn-ghost" for="fltAll" data-filter="all">Все</label>

            <input type="radio" class="btn-check" name="chatFilter" id="fltGlobal" autocomplete="off">
            <label class="btn btn-ghost" for="fltGlobal" data-filter="global">Глобальный</label>

            <input type="radio" class="btn-check" name="chatFilter" id="fltDepartment" autocomplete="off">
            <label class="btn btn-ghost" for="fltDepartment" data-filter="department">Отделы</label>

            <input type="radio" class="btn-check" name="chatFilter" id="fltPrivate" autocomplete="off">
            <label class="btn btn-ghost" for="fltPrivate" data-filter="private">Личные</label>
          </div>

          <a href="{% url 'employees:employees_list' %}" class="btn btn-ghost ms-auto">
            <i class="bi-person-plus"></i> Новый чат
          </a>
        </div>
      </div>

      {# ===== 1) ГЛОБАЛЬНЫЙ ===== #}
      <div class="feed-card chat-section mb-3" data-sec="global">
        <div class="feed-hd">
          <div class="feed-ava" style="width:44px;height:44px;"><i class="bi-globe"></i></div>
          <div class="feed-meta flex-grow-1">
            <h6 class="mb-0 text-secondary">Глобальный</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет глобального чата</span>
          </div>
        </div>

        <div id="sec-global" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'global' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2 {% if not forloop.first %}border-top{% endif %}"
                  data-chat-id="{{ chat.pk }}"
                  data-type="global"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="глобальный чат">
                <div class="feed-ava" style="width:44px;height:44px;"><i class="bi-globe"></i></div>
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 flex-wrap position-relative">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="feed-author text-decoration-none stretched-link">
                      Глобальный чат
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="feed-sub mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>
                <i class="bi-chevron-right text-secondary ms-2 mt-1"></i>
              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 2) ОТДЕЛЫ ===== #}
      <div class="feed-card chat-section mb-3" data-sec="department">
        <div class="feed-hd">
          <div class="feed-ava" style="width:44px;height:44px;"><i class="bi-diagram-3"></i></div>
          <div class="feed-meta flex-grow-1">
            <h6 class="mb-0 text-secondary">Отделы</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет чатов отделов</span>
          </div>
        </div>

        <div id="sec-department" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'department' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2 {% if not forloop.first %}border-top{% endif %}"
                  data-chat-id="{{ chat.pk }}"
                  data-type="department"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{{ chat.department.name }}">
                <div class="feed-ava" style="width:44px;height:44px;"><i class="bi-diagram-3"></i></div>
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 flex-wrap position-relative">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="feed-author text-decoration-none stretched-link">
                      Чат отдела: {{ chat.department.name }}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="feed-sub mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>
                <i class="bi-chevron-right text-secondary ms-2 mt-1"></i>
              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {# ===== 3) ЛИЧНЫЕ ===== #}
      <div class="feed-card chat-section mb-3" data-sec="private">
        <div class="feed-hd">
          <div class="feed-ava" style="width:44px;height:44px;"><i class="bi-people"></i></div>
          <div class="flex-grow-1 feed-meta">
            <h6 class="mb-0 text-secondary">Личные</h6>
            <span class="small text-secondary" data-empty-note style="display:none;">Нет личных чатов</span>
          </div>
        </div>

        <div id="sec-private" class="list-chats">
          {% for chat in chats %}
            {% if chat.type == 'private' %}
              {% with last=chat.last_message.0 %}
              <div class="chat-row d-flex align-items-start gap-2 py-2 px-2 {% if not forloop.first %}border-top{% endif %}"
                  data-chat-id="{{ chat.pk }}"
                  data-type="private"
                  data-last-ts="{% if last %}{{ last.created_at|date:'U' }}000{% else %}{{ chat.created_at|date:'U' }}000{% endif %}"
                  data-haystack="{% for u in chat.participants.all %}{% if u != user %} {{ u.get_full_name|default:u.username }}{% endif %}{% endfor %}">
                <div class="feed-ava" style="width:44px;height:44px;">
                  {% with p0=chat.participants.all.0 p1=chat.participants.all.1 %}
                    {% if p0 and p0 != user and p0.avatar %}
                      <img src="{{ p0.avatar.url }}" alt="{{ p0.get_full_name|default:p0.username }}" loading="lazy">
                    {% elif p1 and p1 != user and p1.avatar %}
                      <img src="{{ p1.avatar.url }}" alt="{{ p1.get_full_name|default:p1.username }}" loading="lazy">
                    {% else %}
                      <i class="bi-person"></i>
                    {% endif %}
                  {% endwith %}
                </div>

                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 flex-wrap position-relative">
                    <a href="{% url 'communications:chat_detail' chat.pk %}" class="feed-author text-decoration-none stretched-link">
                      {% for u in chat.participants.all %}
                        {% if u != user %}
                          {% if not forloop.first %}, {% endif %}
                          {{ u.get_full_name|default:u.username }}
                        {% endif %}
                      {% endfor %}
                    </a>
                    <span class="badge bg-light text-dark border">
                      <i class="bi-chat-left-text"></i> {{ chat.messages.count }}
                    </span>
                    <span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle {% if not chat.unread_count %}d-none{% endif %}"
                          data-unread>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
                  </div>
                  <div class="feed-sub mt-1">
                    {% if last %}
                      <span class="text-secondary">
                        <span data-last-time>{{ last.created_at|date:"d.m.Y H:i" }}</span> ·
                        <strong data-last-author>{{ last.author.get_full_name|default:last.author.username }}</strong>:
                        <span data-last-preview>{{ last.content|default:"(вложение)"|truncatechars:120 }}</span>
                      </span>
                    {% else %}
                      <span class="text-secondary">Сообщений пока нет.</span>
                    {% endif %}
                  </div>
                </div>

                <i class="bi-chevron-right text-secondary ms-2 mt-1"></i>
              </div>
              {% endwith %}
            {% endif %}
          {% endfor %}
        </div>
      </div>

      {% if not chats %}
        <div class="alert alert-info shadow-sm mt-3">
          Чатов пока нет. Начните с <a href="{% url 'employees:employees_list' %}" class="text-decoration-none">поиска сотрудника</a>.
        </div>
      {% endif %}

    </div>
  </div>
</div>

<script>
  // Очистка поиска
  (function(){
    const input = document.getElementById('chatSearch');
    const clearBtn = document.querySelector('.ios-search-clear');
    if (clearBtn && input){
      clearBtn.addEventListener('click', () => {
        input.value = '';
        input.focus();
        input.dispatchEvent(new Event('input'));
      });
    }
  })();
</script>
{% endblock %}