{% extends "base.html" %}
{% block title %}Panel{% endblock %}
{% block topbar_title %}Panel de Control{% endblock %}

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

{% block content %}

<!-- KPIs -->
<div class="kpi-grid">
  <div class="kpi-card teal">
    <div class="kpi-label">Total Estudiantes</div>
    <div class="kpi-value">{{ kpis.total_students }}</div>
    <div class="kpi-note">Dataset completo</div>
  </div>
  <div class="kpi-card blue">
    <div class="kpi-label">Promedio Final</div>
    <div class="kpi-value">{{ kpis.avg_final }}</div>
    <div class="kpi-note">Sobre 100 puntos</div>
  </div>
  <div class="kpi-card ok">
    <div class="kpi-label">Tasa de Aprobación</div>
    <div class="kpi-value">{{ kpis.pass_rate }}%</div>
    <div class="kpi-note">Promedio global</div>
  </div>
  <div class="kpi-card rose">
    <div class="kpi-label">Riesgo Alto (NLP)</div>
    <div class="kpi-value">{{ kpis.high_risk }}</div>
    <div class="kpi-note">Requieren atención</div>
  </div>
  <div class="kpi-card amber">
    <div class="kpi-label">Apoyo Bajo</div>
    <div class="kpi-value">{{ kpis.low_support }}</div>
    <div class="kpi-note">Nivel soporte bajo</div>
  </div>
</div>

<!-- Chart + Quick links -->
<div class="grid-2" style="gap:20px">
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">Demografía del Dataset</div>
        <div class="card-sub">Distribución por género, país, edad y curso</div>
      </div>
      <a href="/panel/estadisticas?dashboard=demographics" class="btn btn-secondary btn-sm">Ver más →</a>
    </div>
    <div id="chart-demo" class="chart-wrap"></div>
  </div>

  <div>
    <div class="card" style="margin-bottom:18px">
      <div class="card-header">
        <div>
          <div class="card-title">Acceso rápido</div>
          <div class="card-sub">Secciones del panel</div>
        </div>
      </div>
      <div class="quick-links">
        <a href="/panel/estadisticas" class="quick-link">
          <span class="ql-icon">📈</span>
          <div>
            <div class="ql-title">Estadísticas</div>
            <div class="ql-sub">{{ stat_dashboards|length }} dashboards</div>
          </div>
        </a>
        <a href="/panel/predicciones?tipo=risk_alert" class="quick-link">
          <span class="ql-icon">⚠️</span>
          <div>
            <div class="ql-title">Alertas de Riesgo</div>
            <div class="ql-sub">NLP risk_alert</div>
          </div>
        </a>
        <a href="/panel/predicciones?tipo=career_recommendation" class="quick-link">
          <span class="ql-icon">🎯</span>
          <div>
            <div class="ql-title">Recomendación</div>
            <div class="ql-sub">NLP career</div>
          </div>
        </a>
        <a href="/panel/predicciones?tipo=math_risk" class="quick-link">
          <span class="ql-icon">📐</span>
          <div>
            <div class="ql-title">Riesgo Matemáticas</div>
            <div class="ql-sub">ML math_risk</div>
          </div>
        </a>
        <a href="/panel/modelos" class="quick-link">
          <span class="ql-icon">🔬</span>
          <div>
            <div class="ql-title">Inferencia</div>
            <div class="ql-sub">5 modelos ML</div>
          </div>
        </a>
        <a href="/panel/plataforma" class="quick-link">
          <span class="ql-icon">🏫</span>
          <div>
            <div class="ql-title">Plataforma</div>
            <div class="ql-sub">Usuarios y cursos</div>
          </div>
        </a>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <div class="card-title">Dashboards ML disponibles</div>
      </div>
      <div style="display:flex;flex-direction:column;gap:6px">
        {% for key, name in ml_dashboards.items() %}
        <a href="/panel/predicciones/dashboard/{{ key }}" class="btn btn-secondary btn-sm" style="justify-content:flex-start">
          {{ name }}
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const fig = {{ chart_json | safe }};
  Plotly.react('chart-demo', fig.data, {
    ...fig.layout,
    height: 420,
    margin: {t:30,r:10,b:40,l:40},
    paper_bgcolor:'rgba(0,0,0,0)',
    plot_bgcolor:'rgba(0,0,0,0)',
  }, {responsive:true, displayModeBar:false});
</script>
{% endblock %}