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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/chat-detail.css' %}">
{% endblock %}

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

      <!-- Заголовок -->
      <div class="feed-header">
        {% if chat.type == 'global' %}
          <i class="bi-globe fs-2 text-primary"></i>
          <h2 class="title mb-0">Глобальный чат</h2>
        {% elif chat.type == 'department' %}
          <i class="bi-diagram-3 fs-2 text-primary"></i>
          <h2 class="title mb-0">Чат отдела: {{ chat.department.name }}</h2>
        {% else %}
          <i class="bi-person fs-2 text-primary"></i>
          <h2 class="title mb-0">
            {% for u in chat.participants.all %}
              {% if u != user %}
                {% if not forloop.first %}, {% endif %}
                <a href="{% url 'employees:employee_detail' u.pk %}" class="text-decoration-none">
                  {{ u.get_full_name|default:u.username }}
                </a>
              {% endif %}
            {% endfor %}
          </h2>
        {% endif %}
        <div class="ms-auto">
          <a href="{% url 'communications:chat_list' %}" class="btn btn-ghost">
            <i class="bi-arrow-left"></i> К чатам
          </a>
        </div>
      </div>

      <!-- Корпус чата -->
      <article class="feed-card chat-box">

        <!-- Кнопка «вниз» -->
        <button id="scrollBtn" class="btn btn-light shadow scroll-to-bottom" type="button" aria-label="Прокрутить вниз">
          <i class="bi-arrow-down-circle"></i>
        </button>

        <!-- Лента сообщений -->
        <div id="chatScroll"
             class="chat-scroll"
             data-me-id="{{ user.id }}"
             data-chat-id="{{ chat.id }}"
             data-last-read-ts="{% if last_read_at %}{{ last_read_at|date:'U' }}000{% endif %}">
          {% if messages %}
            {% for message in messages %}
              {% ifchanged message.created_at|date:"d.m.Y" %}
                <div class="day-divider"><span>{{ message.created_at|date:"d.m.Y" }}</span></div>
              {% endifchanged %}

              <!-- сообщение -->
              <div class="d-flex mb-3 msg {% if message.author_id == user.id %}justify-content-end{% else %}justify-content-start{% endif %}"
                   data-id="{{ message.id }}"
                   data-ts="{{ message.created_at|date:'U' }}000"
                   data-author-id="{{ message.author_id }}">
                {% if message.author_id != user.id %}
                  <a class="me-2 text-decoration-none" href="{% url 'employees:employee_detail' message.author.pk %}">
                    <span class="mini-ava border">
                      {% if message.author.avatar %}<img src="{{ message.author.avatar.url }}" alt="" loading="lazy">
                      {% else %}<i class="bi-person"></i>{% endif %}
                    </span>
                  </a>
                {% endif %}

                <div class="d-flex flex-column" style="max-width:80%;">
                  <div class="small text-secondary {% if message.author_id == user.id %}text-end{% endif %}">
                    {% if message.author_id == user.id %}
                      <a href="{% url 'employees:profile' %}" class="text-decoration-none">Вы</a>
                    {% else %}
                      <a href="{% url 'employees:employee_detail' message.author.pk %}" class="text-decoration-none fw-semibold">
                        {{ message.author.get_full_name|default:message.author.username }}
                      </a>
                    {% endif %}
                    · <time datetime="{{ message.created_at|date:'c' }}">{{ message.created_at|date:"H:i" }}</time>
                  </div>
                  <div class="mt-1 bubble {% if message.author_id == user.id %}bubble-me{% else %}bubble-other{% endif %}">
                    {{ message.content|linebreaksbr }}
                  </div>
                </div>

                {% if message.author_id == user.id %}
                  <a class="ms-2 text-decoration-none" href="{% url 'employees:profile' %}">
                    <span class="mini-ava border">
                      {% if user.avatar %}<img src="{{ user.avatar.url }}" alt="" loading="lazy">
                      {% else %}<i class="bi-person"></i>{% endif %}
                    </span>
                  </a>
                {% endif %}
              </div>
            {% endfor %}
          {% else %}
            <div class="text-center text-secondary py-5">Пока нет сообщений.</div>
          {% endif %}
        </div>

        <!-- Композер -->
        <div class="chat-composer">
          <div id="typing" class="small text-secondary ps-1 pt-1 d-none">Собеседник печатает…</div>
          <form method="post" id="chatForm" class="composer-wrap">
            {% csrf_token %}
            <div class="composer-tools">
              <button type="button" class="btn btn-ghost" title="Вложить файл"><i class="bi-paperclip"></i></button>
              <button type="button" class="btn btn-ghost" title="Камера"><i class="bi-camera"></i></button>
            </div>
            <textarea name="content" id="id_content" class="form-control flex-grow-1" rows="1" placeholder="Напишите сообщение…" required></textarea>
            <button type="submit" class="btn btn-primary"><i class="bi-send"></i></button>
          </form>
        </div>
      </article>

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


{% endblock %}