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

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

  <!-- KPIs -->
  <div class="row mb-4">
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.total_pages|default:"–" }}</h3>
          <p>Páginas registradas</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.total_events|default:"–" }}</h3>
          <p>Eventos totales</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.comments|default:"–" }}</h3>
          <p>Comentarios</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card text-center">
        <div class="card-body">
          <h3>{{ stats.shares|default:"–" }}</h3>
          <p>Compartidos</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabla de bots de Facebook Pages -->
  <div class="card mb-4">
    <div class="card-header"><h5>Bots de Facebook Pages</h5></div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>Página</th>
              <th>ID de Página</th>
              <th>Asistente AI</th>
              <th>Suscrito</th>
              <th>Creado</th>
            </tr>
          </thead>
          <tbody>
            {% for bot in bots_info %}
              <tr>
                <td>{{ bot.page_name }}</td>
                <td>  <a href="https://www.facebook.com/messages/t/{{ bot.page_id }}/"
     target="_blank" rel="noopener"
     class="fw-semibold text-decoration-none">
    {{ bot.page_id }}
  </a></td>
                <td>{{ bot.assistant }}</td>
                <td>
                  {% if bot.is_subscribed %}
                    <span class="badge bg-success">Sí</span>
                  {% else %}
                    <span class="badge bg-secondary">No</span>
                  {% endif %}
                </td>
                <td>{{ bot.created_at }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="text-center text-muted">
                  No hay bots configurados
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Scatter semanal de eventos por página -->
  <div class="card mb-4">
    <div class="card-header"><h5>Eventos Semanales por Página</h5></div>
    <div class="card-body">
      <div id="chart-facebook-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 weeklyFB = {{ weekly_data_json|safe }};
    const seriesFB = Object.entries(weeklyFB).map(([name, data]) => ({ name, data }));

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