{% extends "pxy_dashboard/partials/base.html" %}
{% load static %}

{% block content %}
  {% include "pxy_dashboard/partials/dashboard/kpi_row.html" %}

  <div class="row mb-4">
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.total_conversations|default:"–" }}</h3>
          <p>Conversaciones totales</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.messages_in|default:"–" }}</h3>
          <p>Mensajes recibidos</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.messages_out|default:"–" }}</h3>
          <p>Mensajes enviados</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.avg_response_time|default:"–" }} ms</h3>
          <p>Tiempo respuesta promedio</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabla de Bots -->
  <div class="card mb-4">
    <div class="card-header"><h5>Bots de Telegram</h5></div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>Nombre</th>
              <th>Username</th>
              <th>Estado</th>
              <th>Asistente AI</th>
            </tr>
          </thead>
          <tbody>
            {% for bot in bots_info %}
              <tr>
                <td>{{ bot.name }}</td>
                <td>{{ bot.username }}</td>
                <td>
                  {% if bot.is_active %}
                    <span class="badge bg-success">Activo</span>
                  {% else %}
                    <span class="badge bg-secondary">Inactivo</span>
                  {% endif %}
                </td>
                <td>{{ bot.assistant }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="4" class="text-center text-muted">
                  No hay bots configurados
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Scatter semanal -->
  <div class="card mb-4">
    <div class="card-header"><h5>Actividad Semanal de Mensajes por Bot</h5></div>
    <div class="card-body">
      <div id="chart-telegram-weekly" class="apex-charts"
           data-colors="#727cf5,#0acf97,#fa5c7c"></div>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'dashboard/vendor/apexcharts/apexcharts.min.js' %}"></script>
  <script>
    const weeklyData = {{ weekly_data_json|safe }};
    const series = Object.entries(weeklyData).map(([name, data]) => ({ name, data }));

    new ApexCharts(document.querySelector("#chart-telegram-weekly"), {
      chart: { type: 'scatter', height: 350, zoom: { enabled: true } },
      series: series,
      xaxis: { type: 'category', title: { text: 'Fecha' } },
      yaxis: { title: { text: 'Número de mensajes' } },
      tooltip: {
        x: { formatter: val => val }
      },
      title: { text: 'Mensajes por Bot (últimos 7 días)' }
    }).render();
  </script>
{% endblock %}
