{% extends "base.html" %}
{% block content %}
<section class="card">
  <div class="row">
    <h1>Чаты с ботом</h1>
    <button id="sync-btn">Синхронизировать с MAX API</button>
  </div>
  <p class="muted">Гибридный режим: локальный кеш + ручной sync через API.</p>
  <div id="sync-result" class="muted"></div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>chat_id</th>
          <th>Тип</th>
          <th>Название</th>
          <th>Username</th>
          <th>last_seen_at</th>
          <th>active</th>
        </tr>
      </thead>
      <tbody>
        {% for chat in chats %}
        <tr>
          <td>{{ chat.chat_id }}</td>
          <td>{{ chat.chat_type }}</td>
          <td>{{ chat.title or "—" }}</td>
          <td>{{ chat.username or "—" }}</td>
          <td>{{ chat.last_seen_at }}</td>
          <td>{{ "yes" if chat.is_active else "no" }}</td>
        </tr>
        {% else %}
        <tr>
          <td colspan="6">Чатов пока нет.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
<script>
const btn = document.getElementById("sync-btn");
const result = document.getElementById("sync-result");
btn?.addEventListener("click", async () => {
  btn.disabled = true;
  result.textContent = "Синхронизация...";
  try {
    const response = await fetch("/chats/sync", { method: "POST" });
    const data = await response.json();
    result.textContent = `Готово. fetched=${data.fetched}, stored=${data.stored}. Обновите страницу.`;
  } catch (err) {
    result.textContent = "Ошибка синхронизации.";
  } finally {
    btn.disabled = false;
  }
});
</script>
{% endblock %}