<?php

if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}
require_once __DIR__ . '/../includes/session_control.php';

$user = $_SESSION['user'] ?? null;
$roleId = is_array($user) && isset($user['roleId']) ? (int)$user['roleId'] : 0;
if ($roleId !== 1) {
    header('Location: /index.php');
    exit;
}

include __DIR__ . '/../templates/header.php';
?>

<h1 class="h3 mb-4 text-gray-800">Log de usuarios</h1>

<div class="card shadow mb-3">
    <div class="card-body">
        <div class="form-row">
            <div class="form-group col-md-3">
                <label>Sección</label>
                <select id="fSection" class="form-control select2">
                    <option value="">Todas</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label>Evento</label>
                <select id="fEvent" class="form-control select2">
                    <option value="">Todos</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label>Usuario</label>
                <select id="fUser" class="form-control select2">
                    <option value="">Todos</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label>Buscar</label>
                <input id="fQ" class="form-control" placeholder="Buscar texto">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-3">
                <label>Desde</label>
                <input id="fFrom" type="date" class="form-control">
            </div>
            <div class="form-group col-md-3">
                <label>Hasta</label>
                <input id="fTo" type="date" class="form-control">
            </div>
            <div class="form-group col-md-6 d-flex align-items-end">
                <button id="btnBuscar" class="btn btn-primary mr-2">Buscar</button>
                <button id="btnLimpiar" class="btn btn-secondary">Limpiar</button>
            </div>
        </div>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-sm">
        <thead class="thead-light">
            <tr>
                <th style="width: 170px">Fecha</th>
                <th style="width: 220px">Usuario</th>
                <th style="width: 120px">Sección</th>
                <th style="width: 180px">Evento</th>
                <th>Detalle</th>
            </tr>
        </thead>
        <tbody id="logsBody"></tbody>
    </table>
</div>

<nav aria-label="Paginación">
    <ul class="pagination justify-content-center" id="logsPagination"></ul>
</nav>

<?php include __DIR__ . '/../templates/footer.php'; ?>

<script>
    function formatCpnDateTime(value) {
        if (!value) return '';
        const dt = new Date(String(value).replace(' ', 'T'));
        if (isNaN(dt.getTime())) return String(value);

        const meses = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
        const dia = String(dt.getDate()).padStart(2, '0');
        const mes = meses[dt.getMonth()];
        const anio = String(dt.getFullYear()).slice(-2);

        let horas = dt.getHours();
        const minutos = String(dt.getMinutes()).padStart(2, '0');
        const ampm = horas >= 12 ? 'pm' : 'am';
        horas = horas % 12;
        horas = horas ? horas : 12;

        return `${dia}-${mes}-${anio} ${horas}:${minutos} ${ampm}`;
    }

    function esc(s) {
        const d = document.createElement('div');
        d.textContent = s ?? '';
        return d.innerHTML;
    }

    function ajaxFailMessage(jqXHR) {
        try {
            if (jqXHR && jqXHR.responseJSON) {
                const r = jqXHR.responseJSON;
                if (r && typeof r.error === 'string' && r.error) return r.error;
                if (r && r.error && typeof r.error.message === 'string') return r.error.message;
            }
        } catch (e) {}

        const status = jqXHR && typeof jqXHR.status === 'number' ? jqXHR.status : 0;
        if (status === 401) return 'Sesión expirada. Recarga e inicia sesión.';
        if (status === 403) return 'No autorizado.';
        return 'Error de red';
    }

    jQuery(function($) {
        let page = 1;
        const limit = 50;
        let totalPages = 1;

        function renderPagination() {
            const $ul = $('#logsPagination').empty();
            if (totalPages <= 1) return;

            function add(label, p, disabled, active) {
                const li = $('<li/>').addClass('page-item');
                if (disabled) li.addClass('disabled');
                if (active) li.addClass('active');
                const a = $('<a/>').addClass('page-link').attr('href', '#').text(label);
                if (!disabled) a.data('page', p);
                li.append(a);
                $ul.append(li);
            }

            add('«', Math.max(1, page - 1), page === 1, false);
            const start = Math.max(1, page - 3);
            const end = Math.min(totalPages, page + 3);
            for (let p = start; p <= end; p++) {
                add(String(p), p, false, p === page);
            }
            add('»', Math.min(totalPages, page + 1), page === totalPages, false);
        }

        function loadMeta() {
            return $.getJSON('/admin/api/user_logs.php', {
                action: 'meta',
                _: Date.now()
            }).done(function(resp) {
                if (!resp || !resp.ok) return;

                const sections = (resp.data && resp.data.sections) ? resp.data.sections : [];
                const events = (resp.data && resp.data.events) ? resp.data.events : [];
                const users = (resp.data && resp.data.users) ? resp.data.users : [];

                const $sec = $('#fSection').empty().append('<option value="">Todas</option>');
                sections.forEach(s => $sec.append(`<option value="${esc(s)}">${esc(s)}</option>`));

                const $ev = $('#fEvent').empty().append('<option value="">Todos</option>');
                events.forEach(e => $ev.append(`<option value="${esc(e)}">${esc(e)}</option>`));

                const $u = $('#fUser').empty().append('<option value="">Todos</option>');
                users.forEach(u => $u.append(`<option value="${esc(u.id)}">${esc(u.text)}</option>`));

                $('.select2').select2({
                    width: '100%'
                });
            }).fail(function(jqXHR) {
                const msg = ajaxFailMessage(jqXHR);
                $('#logsBody').html(`<tr><td colspan="5">${esc(msg)}</td></tr>`);
            });
        }

        function loadLogs() {
            const params = {
                page,
                limit,
                section: $('#fSection').val() || '',
                eventKey: $('#fEvent').val() || '',
                userId: $('#fUser').val() || '',
                q: $('#fQ').val() || '',
                from: $('#fFrom').val() || '',
                to: $('#fTo').val() || '',
                _: Date.now()
            };

            $('#logsBody').html('<tr><td colspan="5">Cargando…</td></tr>');

            return $.getJSON('/admin/api/user_logs.php', params).done(function(resp) {
                if (!resp || !resp.ok) {
                    const msg = (resp && resp.error) ? resp.error : 'Error cargando log.';
                    $('#logsBody').html(`<tr><td colspan="5">${esc(msg)}</td></tr>`);
                    return;
                }

                const data = resp.data || {};
                const rows = Array.isArray(data.rows) ? data.rows : [];
                totalPages = Number(data.totalPages || 1) || 1;

                const $tb = $('#logsBody').empty();
                if (!rows.length) {
                    $tb.html('<tr><td colspan="5">Sin resultados</td></tr>');
                    renderPagination();
                    return;
                }

                rows.forEach(r => {
                    const tr = $('<tr/>');
                    tr.append(`<td>${esc(formatCpnDateTime(r.fecha))}</td>`);
                    tr.append(`<td>${esc(r.usuarioNombre || '')}</td>`);
                    tr.append(`<td>${esc(r.section || '')}</td>`);
                    tr.append(`<td>${esc(r.eventKey || '')}</td>`);
                    tr.append(`<td>${esc(r.message || '')}</td>`);
                    $tb.append(tr);
                });

                renderPagination();
            }).fail(function(jqXHR) {
                const msg = ajaxFailMessage(jqXHR);
                $('#logsBody').html(`<tr><td colspan="5">${esc(msg)}</td></tr>`);
            });
        }

        $(document).on('click', '#logsPagination a.page-link', function(e) {
            e.preventDefault();
            const p = Number($(this).data('page') || 0);
            if (!p) return;
            page = p;
            loadLogs();
        });

        $('#btnBuscar').on('click', function() {
            page = 1;
            loadLogs();
        });

        $('#btnLimpiar').on('click', function() {
            $('#fSection').val('').trigger('change');
            $('#fEvent').val('').trigger('change');
            $('#fUser').val('').trigger('change');
            $('#fQ').val('');
            $('#fFrom').val('');
            $('#fTo').val('');
            page = 1;
            loadLogs();
        });

        loadMeta().always(function() {
            loadLogs();
        });
    });
</script>