{% extends "base.html" %}
{% block title %}Predicciones{% endblock %}
{% block topbar_title %}Predicciones ML / NLP{% endblock %}
{% block topbar_extra %}
<span class="topbar-sub">{{ current_name }} — {{ total }} registros</span>
{% endblock %}

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

{% block content %}

<!-- Dataset selector -->
<div class="tabs">
  {% for key, name in all_datasets.items() %}
  <a href="/panel/predicciones?tipo={{ key }}"
     class="tab-btn {% if current_tipo == key %}active{% endif %}">{{ name }}</a>
  {% endfor %}
</div>

<!-- ML Dashboard for this dataset (if exists) -->
{% if ml_dashboard_json %}
<div class="card" style="margin-bottom:20px">
  <div class="card-header">
    <div class="card-title">Dashboard del modelo — {{ current_name }}</div>
    <a href="/panel/predicciones?tipo={{ current_tipo }}" class="btn btn-secondary btn-sm">↺ Recargar</a>
  </div>
  <div id="chart-ml" class="chart-wrap"></div>
</div>
{% endif %}

<!-- Data table -->
<div class="card">
  <div class="card-header">
    <div>
      <div class="card-title">Tabla de predicciones</div>
      <div class="card-sub">{{ current_name }} · mostrando {{ rows|length }} de {{ total }}</div>
    </div>
    <div style="display:flex;gap:8px">
      {% for key, name in ml_dashboards.items() %}
      {% if loop.first %}
      <a href="/panel/predicciones/dashboard/{{ key }}" class="btn btn-secondary btn-sm">📊 Ver dashboards ML</a>
      {% endif %}
      {% endfor %}
    </div>
  </div>

  {% if rows %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          {% for col in columns %}
          <th>{{ col }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          {% for col in columns %}
          <td>
            {% set val = row[col] %}
            {% if col == 'risk_level' or col == 'risk_level' %}
              {% if val == 'High' %}
                <span class="badge badge-rose">{{ val }}</span>
              {% elif val == 'Medium' %}
                <span class="badge badge-amber">{{ val }}</span>
              {% elif val == 'Low' %}
                <span class="badge badge-ok">{{ val }}</span>
              {% else %}
                {{ val }}
              {% endif %}
            {% elif col == 'real_status' or col == 'real_support' or col == 'predicted' %}
              {% if val in ['Pass', 'Low'] %}
                <span class="badge badge-ok">{{ val }}</span>
              {% elif val in ['Fail', 'High'] %}
                <span class="badge badge-rose">{{ val }}</span>
              {% elif val == 'Medium' %}
                <span class="badge badge-amber">{{ val }}</span>
              {% else %}
                {{ val }}
              {% endif %}
            {% elif col == 'student_id' %}
              <a href="/panel/estudiantes/{{ val }}" style="color:var(--teal);font-weight:600">{{ val }}</a>
            {% else %}
              {{ val }}
            {% endif %}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  <div class="pagination">
    <span class="page-info">{{ total }} registros · página {{ page }} de {{ total_pages }}</span>
    {% if page > 1 %}
    <a href="/panel/predicciones?tipo={{ current_tipo }}&page={{ page - 1 }}" class="page-btn">‹</a>
    {% endif %}
    {% for p in range([1, page-2]|max, [total_pages+1, page+3]|min) %}
    <a href="/panel/predicciones?tipo={{ current_tipo }}&page={{ p }}"
       class="page-btn {% if p == page %}active{% endif %}">{{ p }}</a>
    {% endfor %}
    {% if page < total_pages %}
    <a href="/panel/predicciones?tipo={{ current_tipo }}&page={{ page + 1 }}" class="page-btn">›</a>
    {% endif %}
  </div>
  {% else %}
  <div class="alert alert-info">No hay datos disponibles para este dataset.</div>
  {% endif %}
</div>

{% endblock %}

{% block scripts %}
{% if ml_dashboard_json %}
<script>
  const fig = {{ ml_dashboard_json | safe }};
  Plotly.react('chart-ml', fig.data, {
    ...fig.layout,
    height: 520,
    paper_bgcolor:'rgba(0,0,0,0)',
    plot_bgcolor:'rgba(0,0,0,0)',
  }, {responsive:true, displayModeBar:false});
</script>
{% endif %}
{% endblock %}