{% extends "base.html" %}
{% block title %}Inferencia{% endblock %}
{% block topbar_title %}Inferencia de Modelos{% endblock %}
{% block topbar_extra %}
<span class="topbar-sub">5 modelos ML disponibles</span>
{% endblock %}

{% block content %}

<!-- Model selector -->
<div class="tabs">
  {% for key, cfg in model_configs.items() %}
  <a href="/panel/modelos?model={{ key }}"
     class="tab-btn {% if current_model == key %}active{% endif %}">{{ cfg.name.split('—')[0].strip() }}</a>
  {% endfor %}
</div>

{% set cfg = model_configs[current_model] %}

<div class="grid-2" style="gap:18px">

  <!-- Form -->
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">{{ cfg.name }}</div>
        <div class="card-sub">Introduce los valores y obtén la predicción</div>
      </div>
    </div>

    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}

    <form method="post" action="/panel/modelos">
      <input type="hidden" name="model_key" value="{{ current_model }}">

      {% for field in cfg.fields %}
      <div class="form-group">
        <label class="form-label">{{ field.label }}</label>
        {% if field.type == 'select' %}
        <select name="{{ field.name }}" class="form-control">
          {% for val, label in field.options.items() %}
          <option value="{{ val }}"
            {% if form_data and form_data.get(field.name) == val %}selected{% endif %}>
            {{ label }}
          </option>
          {% endfor %}
        </select>
        {% else %}
        <input
          type="number" name="{{ field.name }}" class="form-control"
          min="{{ field.min }}" max="{{ field.max }}" step="0.01"
          value="{{ form_data[field.name] if form_data and field.name in form_data else field.default }}"
          required>
        {% endif %}
      </div>
      {% endfor %}

      <button type="submit" class="btn btn-primary btn-block" style="margin-top:8px">
        🔬 Ejecutar predicción
      </button>
    </form>
  </div>

  <!-- Result + Info -->
  <div>
    {% if result %}
    <div class="result-card" style="margin-bottom:18px">
      <h3>✅ Resultado de la predicción</h3>
      {% for k, v in result.items() %}
      <div class="result-row">
        <span class="result-label">{{ k }}</span>
        <span class="result-value">{{ v }}</span>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="card">
      <div class="card-header">
        <div class="card-title">Modelos disponibles</div>
      </div>
      {% for key, cfg_item in model_configs.items() %}
      <div style="padding:12px 0;border-bottom:1px solid var(--line);{% if loop.last %}border-bottom:none{% endif %}">
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div>
            <div style="font-size:0.83rem;font-weight:700;color:{% if key == current_model %}var(--teal){% else %}var(--ink){% endif %}">{{ cfg_item.name }}</div>
            <div style="font-size:0.73rem;color:var(--muted);margin-top:2px">{{ cfg_item.fields|length }} variables de entrada</div>
          </div>
          <a href="/panel/modelos?model={{ key }}" class="btn btn-secondary btn-sm">Usar</a>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="card gap-top">
      <div class="card-header">
        <div class="card-title">Codificaciones</div>
      </div>
      <div style="font-size:0.8rem;color:var(--muted);line-height:1.8">
        <div><strong>gender_encoded:</strong> 0 = Femenino · 1 = Masculino</div>
        <div><strong>course_encoded:</strong> 0=Primary6 · 1=Sec1 · 2=Sec2 · 3=Sec3 · 4=Sec4 · 5=Sec5 · 6=Sec6</div>
        <div><strong>support_level_num:</strong> 0=Low · 1=Medium · 2=High</div>
        <div><strong>grade_tendency_encoded:</strong> 0=Downtrend/Stable · 1=Uptrend</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}