{% extends "base.html" %}

{% block title %}Mi Expediente y Boletas AVANZO | MINEDUCYT El Salvador{% endblock %}

{% block content %}
<div class="container py-5">

  {% if not student %}
  <!-- ============================================================ -->
  <!-- VISTA 1: BARRERA DE PRIVACIDAD / CONSULTA SEGURA POR NIE     -->
  <!-- ============================================================ -->
  <div class="row justify-content-center">
    <div class="col-lg-7 col-md-9">

      <!-- ENCABEZADO INSTITUCIONAL -->
      <div class="text-center mb-4">
        <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 border border-primary border-opacity-25 text-primary mb-3">
          <i class="bi bi-shield-lock-fill text-primary"></i>
          <span class="small fw-bold tracking-wide">ÁREA PROTEGIDA &bull; CONSULTA ESTUDIANTIL</span>
        </div>
        <h2 class="fw-bold text-dark mb-2">Expediente y Boletas del Estudiante</h2>
        <p class="text-muted" style="max-width: 550px; margin: 0 auto;">
          Ingresa tu <strong>Número de Identificación Estudiantil (NIE)</strong> para acceder de forma segura a tus calificaciones, descargar tus boletas oficiales y verificar el estado de tu licencia.
        </p>
      </div>

      <!-- TARJETA DE CONSULTA POR NIE -->
      <div class="card border-0 shadow-lg rounded-4 overflow-hidden mb-4" style="border-top: 5px solid #1e3a8a !important;">
        <div class="card-header bg-dark text-white p-4 text-center">
          <div class="rounded-circle bg-white text-primary p-3 d-inline-flex align-items-center justify-content-center shadow-sm mb-2" style="width: 60px; height: 60px;">
            <i class="bi bi-person-vcard-fill fs-2 text-primary"></i>
          </div>
          <h4 class="fw-bold mb-1 text-white">Consulta Segura por NIE</h4>
          <small class="text-light opacity-75">MINEDUCYT &bull; República de El Salvador</small>
        </div>

        <div class="card-body p-4 p-md-5 bg-white">
          {% if error_msg %}
          <div class="alert alert-danger d-flex align-items-center gap-2 mb-4 rounded-3 shadow-sm">
            <i class="bi bi-exclamation-triangle-fill fs-4 flex-shrink-0"></i>
            <div>{{ error_msg }}</div>
          </div>
          {% endif %}

          <form action="/perfil" method="GET">
            <div class="mb-3">
              <label class="form-label fw-bold text-dark">1. Número de NIE:</label>
              <div class="input-group input-group-lg">
                <span class="input-group-text bg-light text-primary border-end-0">
                  <i class="bi bi-upc-scan"></i>
                </span>
                <input type="text" name="nie" id="nieInputLogin" class="form-control font-monospace border-start-0 ps-0" value="{{ searched_nie or '' }}" placeholder="Ej. 12345678" maxlength="12" required autofocus autocomplete="off">
              </div>
              <div class="form-text text-muted mt-1 small">
                <i class="bi bi-info-circle me-1"></i> Número de Identificación asignado por tu institución o carné estudiantil.
              </div>
            </div>

            <div class="mb-4">
              <div class="d-flex justify-content-between align-items-center">
                <label class="form-label fw-bold text-dark mb-1">2. Clave o Últimos 4 caracteres de tu Licencia:</label>
                <span class="badge bg-primary-subtle text-primary small">Seguridad</span>
              </div>
              <div class="input-group input-group-lg">
                <span class="input-group-text bg-light text-warning border-end-0">
                  <i class="bi bi-key-fill text-warning"></i>
                </span>
                <input type="text" name="clave" id="claveInputLogin" class="form-control font-monospace text-uppercase border-start-0 ps-0" placeholder="Ej. 3D9D o clave completa" maxlength="30" required autocomplete="off">
              </div>
              <div class="form-text text-muted mt-2 small">
                <i class="bi bi-shield-lock-fill text-primary me-1"></i> Si tienes tu clave del colegio o compra de $1 (ej. <code>2TECA-A01-3D9D</code>), ingresa los últimos 4 caracteres (<strong>3D9D</strong>) o tu clave completa. Si aún no tienes licencia, ingresa los últimos 4 dígitos de tu NIE.
              </div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold shadow py-3 rounded-3 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-shield-check fs-5"></i> Ingresar a Mi Expediente
            </button>
          </form>

          <!-- AVISO DE PRIVACIDAD ESTUDIANTIL -->
          <div class="p-3 mt-4 rounded-3 bg-light border text-muted small">
            <div class="d-flex align-items-start gap-2">
              <i class="bi bi-lock-fill text-warning fs-5"></i>
              <div>
                <strong>Privacidad de Datos Protegida:</strong> Por seguridad de los alumnos y normativa de protección de datos escolares, las calificaciones y boletas oficiales son estrictamente personales y requieren la verificación del NIE.
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ACCIONES PARA NUEVOS ESTUDIANTES -->
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <div class="row align-items-center g-3">
          <div class="col-md-8">
            <h5 class="fw-bold mb-1 text-dark">¿Primera vez que utilizas el simulador?</h5>
            <p class="text-muted small mb-0">
              Realiza una prueba diagnóstica completa con cronómetro oficial y genera tu primera boleta de resultados con NIE.
            </p>
          </div>
          <div class="col-md-4 text-md-end">
            <a href="/simulador" class="btn btn-outline-primary fw-bold rounded-pill px-4 shadow-sm w-100 w-md-auto">
              <i class="bi bi-play-fill me-1"></i> Iniciar Simulacro
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>

  {% else %}
  <!-- ============================================================ -->
  <!-- VISTA 2: EXPEDIENTE VERIFICADO DEL ESTUDIANTE (CON NIE)      -->
  <!-- ============================================================ -->

  <!-- BANNER SUPERIOR DEL ESTUDIANTE -->
  <div class="card border-0 shadow-lg text-white mb-4" style="background: linear-gradient(135deg, #07162c 0%, #0f2d4e 100%); border-radius: 16px; border-top: 5px solid #38bdf8 !important;">
    <div class="card-body p-4 p-md-4">
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div class="d-flex align-items-center gap-3">
          <div class="rounded-circle bg-white text-primary p-3 d-flex align-items-center justify-content-center shadow-sm" style="width: 58px; height: 58px; font-size: 1.6rem;">
            <i class="bi bi-person-fill"></i>
          </div>
          <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <h4 class="fw-bold text-white mb-0" id="prof-name-disp">{{ student.name }}</h4>
              <span class="badge bg-primary px-3 py-1 font-monospace">NIE: {{ student.nie }}</span>
              {% if student.has_license %}
              <span class="badge bg-success bg-opacity-25 text-success border border-success border-opacity-50 px-2 py-1">
                <i class="bi bi-check-circle-fill me-1"></i> Licencia Activa
              </span>
              {% else %}
              <span class="badge bg-warning bg-opacity-25 text-warning border border-warning border-opacity-50 px-2 py-1">
                <i class="bi bi-shield-exclamation me-1"></i> Acceso Básico
              </span>
              {% endif %}
            </div>
            <p class="text-light opacity-75 small mb-0 mt-1">
              <i class="bi bi-building me-1"></i> {{ student.school }} &bull; {{ student.section }}
            </p>
          </div>
        </div>

        <div class="d-flex align-items-center gap-2 flex-wrap">
          <a href="{{ url_for('exam_view') }}" class="btn btn-warning btn-sm fw-bold text-dark shadow-sm">
            <i class="bi bi-play-circle-fill me-1"></i> Nuevo Simulacro
          </a>
          <button type="button" onclick="logoutStudentProfile()" class="btn btn-outline-danger btn-sm fw-semibold text-white border-danger" title="Cerrar la consulta de este NIE de forma segura">
            <i class="bi bi-box-arrow-right me-1"></i> Salir / Limpiar
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <!-- COLUMNA IZQUIERDA: DATOS Y SEGURIDAD DEL DISPOSITIVO -->
    <div class="col-lg-5">
      <!-- TARJETA EDITAR PERFIL -->
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
        <h6 class="fw-bold text-dark text-uppercase small mb-3 border-bottom pb-2">
          <i class="bi bi-person-badge text-primary me-1"></i> Datos Registrados en la Boleta
        </h6>

        <form id="profile-form" onsubmit="saveProfileData(event)">
          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Nombre Completo:</label>
            <input type="text" id="prof-name" class="form-control" value="{{ student.name }}" placeholder="Tu nombre y apellidos">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">NIE (Número de Identificación):</label>
            <input type="text" id="prof-nie" class="form-control font-monospace" value="{{ student.nie }}" readonly style="background-color: #f8fafc;">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Instituto / Complejo Educativo:</label>
            <input type="text" id="prof-school" class="form-control" value="{{ student.school }}" placeholder="Ej. Complejo Educativo Barrio La Cruz">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold small text-muted">Sección / Bachillerato:</label>
            <input type="text" id="prof-section" class="form-control" value="{{ student.section }}" placeholder="Ej. 2.° Bachillerato General Sección A">
          </div>

          <button type="submit" class="btn btn-primary w-100 fw-bold py-2 shadow-sm">
            <i class="bi bi-save me-1"></i> Guardar Mis Datos
          </button>
        </form>
      </div>

      <!-- ESTADO DE LA LICENCIA DE ESTE EQUIPO -->
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <h6 class="fw-bold text-dark text-uppercase small mb-3 border-bottom pb-2">
          <i class="bi bi-shield-lock-fill text-primary me-1"></i> Licencia y Seguridad del Dispositivo
        </h6>

        <div class="p-3 bg-light rounded-3 border mb-3">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="text-muted small">Estado de Licencia:</span>
            {% if student.has_license %}
            <span id="lic-status-badge" class="badge bg-success">Activa (Ilimitada)</span>
            {% else %}
            <span id="lic-status-badge" class="badge bg-warning text-dark">Acceso Básico ($1)</span>
            {% endif %}
          </div>
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="text-muted small">Clave Vinculada:</span>
            <strong id="lic-key-disp" class="font-monospace text-primary">{{ student.license_key or 'Ninguna' }}</strong>
          </div>
          <div class="text-muted font-monospace" style="font-size: 0.72rem;">
            ID Dispositivo: <span id="lic-dev-id">...</span>
          </div>
        </div>

        <div class="border-top pt-3">
          <label class="form-label fw-semibold small text-dark">Activar Clave de $1.00 USD:</label>
          <div class="input-group mb-2">
            <input type="text" id="activate-key-input" class="form-control font-monospace text-uppercase" placeholder="AVZ-XXXX-XXXX">
            <button onclick="doManualActivate()" class="btn btn-warning fw-bold text-dark">
              Activar
            </button>
          </div>
          <small class="text-muted d-block" style="font-size: 0.75rem;">
            ¿No tienes clave? Adquiérela por <strong>$1.00 USD</strong> con Chivo, Strike o Blink en la sección de compra.
          </small>
        </div>
      </div>
    </div>

    <!-- COLUMNA DERECHA: HISTORIAL REAL DE EVALUACIONES Y BOLETAS -->
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
          <div>
            <h5 class="fw-bold text-dark mb-1">
              <i class="bi bi-file-earmark-check-fill text-primary me-1"></i> Historial de Evaluaciones y Boletas
            </h5>
            <p class="text-muted small mb-0">Simulacros completados oficialmente bajo el NIE <strong>{{ student.nie }}</strong>.</p>
          </div>
          <span class="badge bg-light text-dark border px-3 py-2">
            Total Registradas: <strong>{{ student.attempts|length }}</strong>
          </span>
        </div>

        {% if student.attempts and student.attempts|length > 0 %}
        <div class="list-group list-group-flush">
          {% for a in student.attempts %}
          <div class="list-group-item p-3 d-flex justify-content-between align-items-center flex-wrap gap-2 rounded-3 border mb-2">
            <div>
              <div class="d-flex align-items-center gap-2 mb-1">
                <span class="badge bg-primary">Simulacro AVANZO</span>
                <span class="text-muted small"><i class="bi bi-calendar3 me-1"></i>{{ a.created_at }}</span>
              </div>
              <div class="fw-bold fs-6 text-dark">
                Calificación: <span class="text-primary font-monospace fs-5">{{ a.score }} / 10.0</span> 
                &bull; <span class="badge {% if a.score >= 8.0 %}bg-success{% elif a.score >= 6.0 %}bg-info{% else %}bg-warning text-dark{% endif %}">{{ a.nivel_logro }}</span>
              </div>
              {% if a.score_by_subject %}
              <div class="d-flex gap-1 mt-1 flex-wrap">
                {% for sub, sc in a.score_by_subject.items() %}
                <span class="badge bg-light text-secondary border font-monospace" style="font-size: 0.72rem;">{{ sub }}: {{ sc }}</span>
                {% endfor %}
              </div>
              {% endif %}
            </div>
            <div>
              <a href="/boleta/{{ a.id }}" target="_blank" class="btn btn-outline-primary btn-sm fw-bold shadow-sm d-inline-flex align-items-center gap-1">
                <i class="bi bi-file-earmark-pdf-fill text-danger"></i> Boleta Oficial PDF
              </a>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <!-- SIN SIMULACROS REGISTRADOS AÚN -->
        <div class="text-center py-5 px-3 bg-light rounded-4 border">
          <div class="rounded-circle bg-white text-muted p-3 d-inline-flex align-items-center justify-content-center shadow-sm mb-3" style="width: 65px; height: 65px;">
            <i class="bi bi-clipboard2-x fs-2 text-warning"></i>
          </div>
          <h6 class="fw-bold text-dark mb-1">No se registran exámenes completados</h6>
          <p class="text-muted small mb-3" style="max-width: 420px; margin: 0 auto;">
            Aún no hay evaluaciones finalizadas para el NIE <strong>{{ student.nie }}</strong>. Realiza un simulacro completo para generar tu boleta oficial con firma digital.
          </p>
          <a href="{{ url_for('exam_view') }}" class="btn btn-primary fw-bold px-4 py-2 rounded-pill shadow-sm">
            <i class="bi bi-play-circle-fill me-1"></i> Realizar Mi Primer Simulacro
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const licDevId = document.getElementById("lic-dev-id");
    if (licDevId && typeof currentDeviceId !== "undefined") {
      licDevId.innerText = currentDeviceId;
    }
  });

  function saveProfileData(e) {
    e.preventDefault();
    const name = document.getElementById("prof-name").value.trim();
    const nie = document.getElementById("prof-nie").value.trim();
    const school = document.getElementById("prof-school").value.trim();
    const section = document.getElementById("prof-section").value.trim();

    localStorage.setItem("avanzo_student_name", name);
    localStorage.setItem("avanzo_student_nie", nie);
    localStorage.setItem("avanzo_student_school", school);
    localStorage.setItem("avanzo_student_section", section);

    const disp = document.getElementById("prof-name-disp");
    if (disp) disp.innerText = name || "Estudiante Bachillerato";

    alert("¡Datos del estudiante guardados correctamente para tus próximas boletas!");
  }

  function doManualActivate() {
    const key = document.getElementById("activate-key-input").value;
    const name = document.getElementById("prof-name") ? document.getElementById("prof-name").value : "";
    const nie = document.getElementById("prof-nie") ? document.getElementById("prof-nie").value : "";

    activateLicenseCode(key, name, nie, (res) => {
      if (res.valid) {
        alert(res.msg);
        location.reload();
      }
    });
  }

  function logoutStudentProfile() {
    localStorage.removeItem("avanzo_student_nie");
    localStorage.removeItem("avanzo_student_name");
    localStorage.removeItem("avanzo_student_school");
    localStorage.removeItem("avanzo_student_section");
    window.location.href = "/perfil";
  }
</script>
{% endblock %}