<?php
declare(strict_types=1);

require_once __DIR__ . '/../../app/bootstrap.php';
require_login();

if (!(has_role('ADMIN') || has_role('DIRECTOR') || has_role('SECRETARIA') || has_role('DOCENTE'))) {
    http_response_code(403);
    die('Acceso no permitido');
}

function h($v): string {
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}

$title = 'Monitor tiempo real';
include __DIR__ . '/../../app/views/header.php';
?>

<style>
  body { background:#f5f7fb; }
  .card-box{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
  }
  .resumen-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(120px,1fr));
    gap:12px;
  }
  .resumen-card{
    border:1px solid rgba(0,0,0,.08);
    border-radius:12px;
    background:#fff;
    padding:14px;
    text-align:center;
  }
  .resumen-num{
    font-size:1.8rem;
    font-weight:900;
    color:#0d6efd;
  }
  .badge-soft{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
  }
  .b-activo{ background:#d1e7dd; color:#0f5132; }
  .b-inactivo{ background:#fff3cd; color:#664d03; }
  .b-registrado{ background:#e2e3e5; color:#41464b; }
  .b-desconocido{ background:#f8d7da; color:#842029; }
</style>

<div class="container py-3">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h4 mb-1">Monitor tiempo real</h1>
      <div class="text-muted small">Marcaciones biométricas en vivo</div>
    </div>
    <div class="small text-muted">
      Actualiza cada <b>30 segundos</b>
    </div>
  </div>

  <div class="card-box p-3 mb-3">
    <div class="row g-2">
      <div class="col-6 col-md-2">
        <label class="form-label">Periodo</label>
        <select id="filtroPeriodo" class="form-select">
          <option value="hoy">Hoy</option>
          <option value="ayer">Ayer</option>
          <option value="semana">Semana</option>
          <option value="mes">Mes</option>
          <option value="todos">Todos</option>
        </select>
      </div>

      <div class="col-6 col-md-2">
        <label class="form-label">Institución</label>
        <select id="filtroInstitucion" class="form-select">
          <option value="">Todas</option>
          <option value="ENC">ENC</option>
          <option value="CARF">CARF</option>
        </select>
      </div>

      <div class="col-6 col-md-2">
        <label class="form-label">Tipo</label>
        <select id="filtroTipoPersona" class="form-select">
          <option value="">Todos</option>
          <option value="estudiante_activo">Estudiantes activos</option>
          <option value="estudiante_inactivo">Estudiantes inactivos</option>
          <option value="registrado_sin_matricula">Sin matrícula</option>
          <option value="registrado">Registrados en reloj</option>
          <option value="desconocido">Desconocidos</option>
        </select>
      </div>

      <div class="col-6 col-md-2">
        <label class="form-label">Grado</label>
        <select id="filtroGrado" class="form-select">
          <option value="">Todos</option>
          <option value="7°">7°</option>
          <option value="8°">8°</option>
          <option value="9°">9°</option>
        </select>
      </div>

      <div class="col-6 col-md-2">
        <label class="form-label">Curso</label>
        <select id="filtroCurso" class="form-select">
          <option value="">Todos</option>
          <option value="1°">1°</option>
          <option value="2°">2°</option>
          <option value="3°">3°</option>
        </select>
      </div>

      <div class="col-12 col-md-2">
        <label class="form-label">Buscar</label>
        <input id="buscarTexto" class="form-control" placeholder="CI o nombre">
      </div>
    </div>
  </div>

  <div class="card-box p-3 mb-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="h6 mb-0">Resumen académico</h2>
      <div class="small text-muted" id="estadoMonitor">Cargando...</div>
    </div>
    <div id="resumenAcademico" class="resumen-grid"></div>
  </div>

  <div class="card-box p-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="h6 mb-0">Marcaciones</h2>
      <div class="small text-muted" id="serverTime"></div>
    </div>

    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <thead>
          <tr>
            <th>ID</th>
            <th>Fecha</th>
            <th>CI</th>
            <th>Nombre</th>
            <th>Tipo</th>
            <th>Institución</th>
            <th>Nivel</th>
            <th>Grado</th>
            <th>Curso</th>
            <th>Reloj</th>
          </tr>
        </thead>
        <tbody id="tablaMarcaciones">
          <tr><td colspan="10" class="text-muted">Cargando...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
const API_URL = '/Comercio/public/asistencia/api_marcaciones_tiempo_real.php';
const INTERVALO = 30000;

function formatearTipoPersona(tipo) {
    if (tipo === 'estudiante_activo') return '<span class="badge-soft b-activo">Estudiante activo</span>';
    if (tipo === 'estudiante_inactivo') return '<span class="badge-soft b-inactivo">Estudiante inactivo</span>';
    if (tipo === 'registrado_sin_matricula') return '<span class="badge-soft b-registrado">Sin matrícula</span>';
    if (tipo === 'registrado') return '<span class="badge-soft b-registrado">Registrado</span>';
    return '<span class="badge-soft b-desconocido">Desconocido</span>';
}

function escapeHtml(value) {
    return String(value ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}

function construirParams() {
    const p = new URLSearchParams();
    p.set('periodo', document.getElementById('filtroPeriodo').value);
    p.set('institucion', document.getElementById('filtroInstitucion').value);
    p.set('tipo_persona', document.getElementById('filtroTipoPersona').value);
    p.set('grado', document.getElementById('filtroGrado').value);
    p.set('curso', document.getElementById('filtroCurso').value);
    p.set('q', document.getElementById('buscarTexto').value.trim());
    p.set('limit', '100');
    p.set('_', Date.now().toString());
    return p;
}

async function cargarDatos() {
    const estado = document.getElementById('estadoMonitor');
    estado.textContent = 'Actualizando...';

    try {
        const res = await fetch(API_URL + '?' + construirParams().toString(), { cache: 'no-store' });
        const data = await res.json();

        if (!data.ok) {
            estado.textContent = 'Error al cargar';
            document.getElementById('tablaMarcaciones').innerHTML =
                '<tr><td colspan="10" class="text-danger">Error al cargar datos</td></tr>';
            return;
        }

        document.getElementById('serverTime').textContent = 'Servidor: ' + (data.server_time || '-');

        renderTabla(Array.isArray(data.rows) ? data.rows : []);
        renderResumen(Array.isArray(data.rows) ? data.rows : []);

        const total = data.resumen?.total_filtrado ?? 0;
        estado.textContent = 'OK · filtrados: ' + total;
    } catch (e) {
        estado.textContent = 'Error de conexión';
        document.getElementById('tablaMarcaciones').innerHTML =
            '<tr><td colspan="10" class="text-danger">Error de conexión</td></tr>';
    }
}

function renderTabla(rows) {
    const tbody = document.getElementById('tablaMarcaciones');

    if (!rows.length) {
        tbody.innerHTML = '<tr><td colspan="10" class="text-muted">Sin resultados</td></tr>';
        return;
    }

    tbody.innerHTML = rows.map(r => `
        <tr>
          <td>${escapeHtml(r.id)}</td>
          <td>${escapeHtml(r.fecha_hora)}</td>
          <td>${escapeHtml(r.cedula)}</td>
          <td>${escapeHtml(r.nombre)}</td>
          <td>${formatearTipoPersona(r.tipo_persona)}</td>
          <td>${escapeHtml(r.institucion)}</td>
          <td>${escapeHtml(r.nivel)}</td>
          <td>${escapeHtml(r.grado)}</td>
          <td>${escapeHtml(r.curso)}</td>
          <td>${escapeHtml(r.reloj_nombre)}</td>
        </tr>
    `).join('');
}

function renderResumen(rows) {
    const resumen = document.getElementById('resumenAcademico');
    const grupos = ['7°', '8°', '9°', '1°', '2°', '3°'];

    const activos = rows.filter(r => r.tipo_persona === 'estudiante_activo');

    resumen.innerHTML = grupos.map(g => {
        const cantidad = activos.filter(r => r.grupo_academico === g).length;
        return `
          <div class="resumen-card">
            <div>${escapeHtml(g)}</div>
            <div class="resumen-num">${cantidad}</div>
          </div>
        `;
    }).join('');
}

document.querySelectorAll('#filtroPeriodo,#filtroInstitucion,#filtroTipoPersona,#filtroGrado,#filtroCurso')
    .forEach(el => el.addEventListener('change', cargarDatos));

document.getElementById('buscarTexto').addEventListener('input', () => {
    clearTimeout(window._busquedaTimer);
    window._busquedaTimer = setTimeout(cargarDatos, 300);
});

cargarDatos();
setInterval(cargarDatos, INTERVALO);
</script>

<?php include __DIR__ . '/../../app/views/footer.php'; ?>