<!doctype html>
{% extends "index.html" %}

{% block title %}Panel admin · EpicrisisIA{% endblock %}
{% block body_class %}app-page app-page--admin{% endblock %}
{% block shell_class %}app-page__shell{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="/static/css/app-pages.css" />
{% endblock %}

{% block header_actions %}
  {% set back_href = "/dashboard" %}
  {% set back_label = "Volver al dashboard" %}
  {% include "includes/auth_header_actions.html" %}
{% endblock %}

{% block content %}
  <div class="app-page__content">
    <div class="app-page__stack">
      <section class="ui-card app-page__hero">
        <div class="app-page__hero-grid">
          <div>
            <p class="app-page__eyebrow">Gobierno operativo</p>
            <h1>Panel de administración</h1>
            <p>
              Gestiona usuarios de auditoría, resetea credenciales y mantén control del acceso operativo sin salir del
              sistema principal.
            </p>
          </div>
          <div class="app-page__stats">
            <article class="app-page__stat">
              <span>Usuarios visibles</span>
              <strong>{{ usuarios|length }}</strong>
            </article>
            <article class="app-page__stat">
              <span>Administradores</span>
              <strong>{{ usuarios|selectattr("role", "equalto", "admin")|list|length }}</strong>
            </article>
            <article class="app-page__stat">
              <span>Auditores / médicos</span>
              <strong>{{ usuarios|rejectattr("role", "equalto", "admin")|list|length }}</strong>
            </article>
          </div>
        </div>
      </section>

      <div class="app-page__split">
        <section class="ui-card app-page__section">
          <div class="app-page__section-head">
            <div>
              <p class="app-page__eyebrow">Alta de acceso</p>
              <h2>Crear usuario</h2>
            </div>
          </div>

          {% if crear_error %}
            <div class="ui-alert ui-alert--error">
              <div class="ui-alert__title">No se pudo crear el usuario</div>
              <div class="ui-alert__body">{{ crear_error }}</div>
            </div>
          {% endif %}
          {% if crear_exito %}
            <div class="ui-alert ui-alert--success">
              <div class="ui-alert__title">Usuario creado</div>
              <div class="ui-alert__body">{{ crear_exito }}</div>
            </div>
          {% endif %}

          <form method="post" action="/admin/usuarios/crear" class="app-page__form">
            <div class="app-page__form-grid">
              <label class="ui-field">
                <span>Usuario</span>
                <input type="text" name="username" placeholder="usuario.auditoria" required />
              </label>
              <label class="ui-field">
                <span>Contraseña inicial</span>
                <input type="password" name="password" placeholder="Mínimo 6 caracteres" required />
              </label>
            </div>
            <label class="ui-field">
              <span>Rol</span>
              <select name="role" required>
                <option value="" disabled selected>Selecciona un rol</option>
                <option value="medico">Médico / auditor</option>
                <option value="admin">Administrador</option>
              </select>
            </label>
            <div class="app-page__actions">
              <button type="submit" class="ui-button">Crear usuario</button>
            </div>
          </form>
        </section>

        <aside class="ui-card app-page__section">
          <div class="app-page__section-head">
            <div>
              <p class="app-page__eyebrow">Controles</p>
              <h2>Lineamientos rápidos</h2>
            </div>
          </div>
          <div class="app-page__card-list">
            <article class="app-page__card">
              <h3>Evita el usuario raíz</h3>
              <p>No elimines la cuenta principal `admin`; el backend ya la protege, pero la UI la mantiene visible.</p>
            </article>
            <article class="app-page__card">
              <h3>Cambios inmediatos</h3>
              <p>La actualización de contraseñas y la eliminación impactan al usuario de forma instantánea.</p>
            </article>
          </div>
        </aside>
      </div>

      <section class="ui-card app-page__section">
        <div class="app-page__section-head">
          <div>
            <p class="app-page__eyebrow">Directorio operativo</p>
            <h2>Usuarios registrados</h2>
          </div>
        </div>

        {% if clave_error %}
          <div class="ui-alert ui-alert--error">
            <div class="ui-alert__title">No se pudo cambiar la contraseña</div>
            <div class="ui-alert__body">{{ clave_error }}</div>
          </div>
        {% endif %}
        {% if clave_exito %}
          <div class="ui-alert ui-alert--success">
            <div class="ui-alert__title">Contraseña actualizada</div>
            <div class="ui-alert__body">{{ clave_exito }}</div>
          </div>
        {% endif %}
        {% if eliminar_error %}
          <div class="ui-alert ui-alert--error">
            <div class="ui-alert__title">No se pudo eliminar el usuario</div>
            <div class="ui-alert__body">{{ eliminar_error }}</div>
          </div>
        {% endif %}
        {% if eliminar_exito %}
          <div class="ui-alert ui-alert--success">
            <div class="ui-alert__title">Usuario eliminado</div>
            <div class="ui-alert__body">{{ eliminar_exito }}</div>
          </div>
        {% endif %}

        <div class="ui-table-wrap">
          <table>
            <thead>
              <tr>
                <th>Usuario</th>
                <th>Rol</th>
                <th>Cambiar contraseña</th>
                <th>Eliminar</th>
              </tr>
            </thead>
            <tbody>
              {% for managed_user in usuarios %}
                <tr>
                  <td><strong>{{ managed_user.username }}</strong></td>
                  <td>{{ managed_user.role }}</td>
                  <td>
                    <form method="post" action="/admin/usuarios/cambiar-password" class="app-page__form">
                      <input type="hidden" name="username" value="{{ managed_user.username }}" />
                      <div class="app-table-actions">
                        <input
                          type="password"
                          name="new_password"
                          placeholder="Nueva contraseña"
                          required
                        />
                        <button type="submit" class="ui-button ui-button--secondary">Actualizar</button>
                      </div>
                    </form>
                  </td>
                  <td>
                    <form method="post" action="/admin/usuarios/eliminar">
                      <input type="hidden" name="username" value="{{ managed_user.username }}" />
                      <button
                        type="submit"
                        class="ui-button ui-button--ghost"
                        {% if managed_user.username == "admin" %}disabled{% endif %}
                      >
                        Eliminar
                      </button>
                    </form>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
{% endblock %}

{% block scripts %}
{% endblock %}
