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

{% block title %}Zone Definition{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'dashboard/vendor/apexcharts/apexcharts.css' %}">
{% endblock %}

{% 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 (24h)</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 (24h)</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 de respuesta promedio</p>
      </div>
    </div>
  </div>
</div>

<!-- Bots Configurados -->
<div class="card mb-4">
  <div class="card-header">
    <h5 class="mb-0">Bots Configurados</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>Phone Number ID</th>
            <th>Estado</th>
            <th>Asistente AI</th>
          </tr>
        </thead>
        <tbody>
          {% for bot in bots_info %}
            <tr>
              <td>{{ bot.name }}</td>
              <td>{{ bot.phone_number_id }}</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>

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



{% endblock %}

{% block extra_js %}
  <!-- Carga ApexCharts -->
  <script src="{% static 'dashboard/vendor/apexcharts/apexcharts.min.js' %}"></script>

  <script>
    // Datos semanales pasados desde la vista
    const weeklyData = {{ weekly_data_json|safe }};

    // Preparamos series para ApexCharts
    const series = Object.entries(weeklyData).map(([name, data]) => ({
      name,
      data
    }));

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