{% extends "base.html" %}
{% block title %}Чат — {{ bot_user.first_name or bot_user.username or max_user_id if bot_user else max_user_id }}{% endblock %}
{% block content %}

<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
  <a href="/admin/chat-log" class="btn btn-secondary">← К списку</a>
  <div>
    <strong>
      {{ bot_user.first_name or bot_user.username or ('MAX ID: ' ~ max_user_id) if bot_user else ('MAX ID: ' ~ max_user_id) }}
    </strong>
    {% if bot_user %}
      <span style="color:#666;font-size:.85rem;margin-left:8px">
        MAX ID: {{ max_user_id }}
        {% if bot_user.phone %} · {{ bot_user.phone }}{% endif %}
        {% if bot_user.org_name %} · {{ bot_user.org_name }}{% endif %}
      </span>
      <span style="margin-left:8px">
        {% if bot_user.is_blocked %}
          <span class="badge badge-blocked">Заблокирован</span>
        {% elif bot_user.is_authorized %}
          <span class="badge badge-auth">Авторизован</span>
        {% else %}
          <span class="badge badge-pending">Ожидает</span>
        {% endif %}
      </span>
    {% endif %}
  </div>
</div>

{# Лента сообщений #}
<div class="card" style="padding:16px;margin-bottom:12px">
  <div style="display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding-right:4px" id="chat-feed">
    {% for msg in messages|reverse %}
      <div style="display:flex;{% if msg.direction == 'out' %}justify-content:flex-end{% endif %}">
        <div style="
          max-width:72%;
          padding:10px 14px;
          border-radius:12px;
          font-size:.9rem;
          line-height:1.5;
          word-break:break-word;
          {% if msg.direction == 'out' %}
            background:#1a73e8;color:white;border-bottom-right-radius:2px;
          {% else %}
            background:#f1f3f4;color:#333;border-bottom-left-radius:2px;
          {% endif %}
        ">
          {% if msg.direction == 'out' %}
            <div style="font-size:.7rem;opacity:.7;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em">Поддержка</div>
          {% endif %}
          {% if msg.text %}<div style="white-space:pre-wrap">{{ msg.text }}</div>{% endif %}
          {% if msg.attachment_json and msg.attachment_json != 'null' %}
            <div style="font-size:.8rem;opacity:.8;margin-top:4px">📎 Вложение</div>
          {% endif %}
          <div style="font-size:.72rem;opacity:.65;margin-top:6px;text-align:right">
            {{ msg.created_at[:16] }}
          </div>
        </div>
      </div>
    {% else %}
      <p style="color:#999;text-align:center;margin:32px 0">История пуста</p>
    {% endfor %}
  </div>
</div>

{# Форма отправки #}
{% if bot_user and bot_user.max_chat_id %}
  <div class="card" style="padding:16px">
    <form action="/admin/chat-log/{{ max_user_id }}/send" method="post"
          style="display:flex;gap:8px;align-items:flex-end">
      <textarea name="text" rows="3" required placeholder="Напишите сообщение от лица бота..."
                style="flex:1;resize:vertical;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;font-family:inherit"
                onkeydown="if(event.ctrlKey&&event.key==='Enter'){this.form.submit()}"></textarea>
      <button class="btn btn-primary" type="submit" style="height:fit-content;padding:10px 20px">
        Отправить
      </button>
    </form>
    <div style="font-size:.75rem;color:#999;margin-top:6px">Ctrl+Enter для отправки</div>
  </div>
{% else %}
  <div class="card" style="padding:16px;color:#999;font-size:.9rem">
    ℹ️ Отправка недоступна: нет chat_id (пользователь ещё не начал диалог с ботом).
  </div>
{% endif %}

<script>
  // Прокрутить ленту вниз при загрузке
  const feed = document.getElementById('chat-feed');
  if (feed) feed.scrollTop = feed.scrollHeight;
</script>

{% endblock %}