{% extends "base.html" %}
{% block title %}Estadísticas{% endblock %}
{% block topbar_title %}Estadísticas{% endblock %}
{% block topbar_extra %}
<span class="topbar-sub">{{ current_name }}</span>
{% endblock %}

{% block head %}
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
{% endblock %}

{% block content %}

<!-- Dashboard selector tabs -->
<div class="tabs animate-slide-up">
  {% for key, name in stat_dashboards.items() %}
  <a href="/panel/estadisticas?dashboard={{ key }}"
     class="tab-btn {% if current_dashboard == key %}active{% endif %}">{{ name }}</a>
  {% endfor %}
</div>

<!-- Chart -->
<div class="card animate-slide-up delay-100" style="margin-bottom:28px">
  <div class="card-header">
    <div>
      <div class="card-title">{{ current_name }}</div>
      <div class="card-sub">Dashboard estadístico interactivo con visualizaciones Plotly de alta resolución</div>
    </div>
  </div>
  {% if chart_json %}
  <div id="chart-main" class="chart-wrap animate-fade-in delay-200"></div>
  {% else %}
  <div class="alert alert-info animate-fade-in delay-200">
    <span style="font-size:1.2rem">ℹ️</span> Selecciona un dashboard en las pestañas superiores para visualizar los datos.
  </div>
  {% endif %}
</div>

<!-- Iframe figures -->
{% if figures %}
<div class="section-header animate-slide-up delay-200">
  <div>
    <div class="section-title">Figuras interactivas adicionales</div>
    <div class="section-sub">Explora los modelos dinámicos detallados generados a partir de los últimos datos de la plataforma ({{ figures|length }} gráficos)</div>
  </div>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px" class="animate-slide-up delay-300">
  {% for fig in figures %}
  <div class="card" style="padding:0; overflow:hidden;">
    <div class="card-header" style="margin-bottom:0; padding:16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-soft);">
      <div class="card-title" style="font-size:0.88rem; font-family: 'Manrope', sans-serif;">{{ fig|replace('_', ' ')|title }}</div>
      <a href="/panel/figuras/{{ fig }}" target="_blank" class="btn btn-secondary btn-sm" style="background:white;">
        ↗ Ampliar
      </a>
    </div>
    <iframe src="/panel/figuras/{{ fig }}" class="fig-frame" style="height:360px; border-radius:0;"></iframe>
  </div>
  {% endfor %}
</div>
{% endif %}

{% endblock %}

{% block scripts %}
{% if chart_json %}
<script>
  const fig = {{ chart_json | safe }};
  Plotly.react('chart-main', fig.data, {
    ...fig.layout,
    height: 500,
    margin: {t:40,r:20,b:40,l:50},
    paper_bgcolor:'rgba(0,0,0,0)',
    plot_bgcolor:'rgba(0,0,0,0)',
    font: { family: 'Manrope, sans-serif', color: '#5e7188' },
  }, {responsive:true, displayModeBar:true, modeBarButtonsToRemove:['toImage', 'sendDataToCloud']});
</script>
{% endif %}
{% endblock %}