<?php
session_start();
include __DIR__ . '/../includes/session_control.php';

$user = $_SESSION['user'] ?? null;
$isSuper = is_array($user) && isset($user['isSuper']) && (int)$user['isSuper'] === 1;
if (!$isSuper) {
    header('Location: /index.php');
    exit;
}

include __DIR__ . '/../templates/header.php';
?>

<h1 class="h3 mb-4 text-gray-800">Usuarios Administrativos</h1>

<div class="mb-3">
    <button class="btn btn-success" data-toggle="modal" data-target="#modalCreateUser">
        Crear Usuario
    </button>
</div>

<div class="table-responsive">
    <table id="adminUsersTable" class="table table-bordered table-sm">
        <thead class="thead-light">
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Email</th>
                <th>Rol</th>
                <th>Activo</th>
                <th>Creado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<!-- Modal crear -->
<div class="modal fade" id="modalCreateUser" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="formCreateUser" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Crear Usuario</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Nombre</label>
                    <input name="nombre" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Apellido</label>
                    <input name="apellido" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Correo</label>
                    <input name="email" type="email" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Contraseña</label>
                    <input name="password" type="password" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Rol</label>
                    <select name="roleId" class="form-control select2" required>
                        <option value="1">Administrador</option>
                        <option value="2">Editor</option>
                        <option value="3">Impresor</option>
                    </select>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="activo" id="createActivo" checked>
                    <label class="form-check-label" for="createActivo">Activo</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Crear</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal editar -->
<div class="modal fade" id="modalEditUser" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="formEditUser" class="modal-content">
            <input type="hidden" name="id">
            <div class="modal-header">
                <h5 class="modal-title">Editar Usuario</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Nombre</label>
                    <input name="nombre" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Apellido</label>
                    <input name="apellido" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Rol</label>
                    <select name="roleId" class="form-control select2" required>
                        <option value="1">Administrador</option>
                        <option value="2">Editor</option>
                        <option value="3">Impresor</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label>Nueva contraseña (opcional)</label>
                    <input name="password" type="password" class="form-control" placeholder="(dejar vacío para no cambiar)">
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="activo" id="editActivo">
                    <label class="form-check-label" for="editActivo">Activo</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Guardar</button>
            </div>
        </form>
    </div>
</div>

<script>
    function cpnDepsReady() {
        return !!(window.jQuery && window.jQuery.fn && window.jQuery.fn.select2 && window.bootstrap);
    }

    function cpnOnDepsReady(cb, tries = 0) {
        if (cpnDepsReady()) {
            cb(window.jQuery);
            return;
        }
        if (tries > 200) {
            alert('No se pudieron cargar las dependencias (jQuery/Bootstrap/Select2).');
            return;
        }
        setTimeout(() => cpnOnDepsReady(cb, tries + 1), 50);
    }

    function formatCpnDateTime(value) {
        if (!value) return '';
        // MySQL DATETIME -> try parse as local
        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 badgeActivo(v) {
        const on = Number(v) === 1;
        return on ? '<span class="badge badge-success">Sí</span>' : '<span class="badge badge-secondary">No</span>';
    }

    function escapeHtml(s) {
        const div = document.createElement('div');
        div.textContent = s ?? '';
        return div.innerHTML;
    }

    cpnOnDepsReady(function($) {
        function loadAdminUsers() {
            $.ajax({
                url: '/usuarios/api/admin_users.php',
                method: 'GET',
                dataType: 'json'

            }).done(function(resp) {
                if (resp.error) {
                    const extra = resp.http ? `\nHTTP: ${resp.http}` : '';
                    const det = resp.details ? `\nDetalles: ${typeof resp.details === 'string' ? resp.details : JSON.stringify(resp.details)}` : '';
                    alert(resp.error + extra + det);
                    return;
                }

                const tbody = $('#adminUsersTable tbody');
                tbody.empty();
                (resp.data || []).forEach(function(u) {
                    const tr = $('<tr/>');
                    tr.append(`<td>${escapeHtml(u.nombre)}</td>`);
                    tr.append(`<td>${escapeHtml(u.apellido)}</td>`);
                    tr.append(`<td>${escapeHtml(u.email)}</td>`);
                    tr.append(`<td>${escapeHtml(u.roleName || u.roleId)}</td>`);
                    tr.append(`<td>${badgeActivo(u.activo)}</td>`);
                    tr.append(`<td>${escapeHtml(formatCpnDateTime(u.created_at))}</td>`);

                    const actions = $('<td/>');
                    actions.append(`<button class="btn btn-sm btn-primary mr-2" data-action="edit">Editar</button>`);
                    actions.append(`<button class="btn btn-sm btn-danger" data-action="delete">Eliminar</button>`);

                    actions.find('[data-action="edit"]').on('click', function() {
                        $('#formEditUser [name="id"]').val(u.id);
                        $('#formEditUser [name="nombre"]').val(u.nombre);
                        $('#formEditUser [name="apellido"]').val(u.apellido);
                        $('#formEditUser [name="roleId"]').val(String(u.roleId)).trigger('change');
                        $('#formEditUser [name="password"]').val('');
                        $('#editActivo').prop('checked', Number(u.activo) === 1);
                        $('#modalEditUser').modal('show');
                    });

                    actions.find('[data-action="delete"]').on('click', function() {
                        if (!confirm('¿Eliminar este usuario administrativo?')) return;
                        $.ajax({
                            url: '/usuarios/api/admin_users.php',
                            method: 'POST',
                            dataType: 'json',
                            data: {
                                action: 'delete',
                                id: u.id
                            }
                        }).done(function(r) {
                            if (r.error) {
                                const extra = r.http ? `\nHTTP: ${r.http}` : '';
                                const det = r.details ? `\nDetalles: ${typeof r.details === 'string' ? r.details : JSON.stringify(r.details)}` : '';
                                alert(r.error + extra + det);
                                return;
                            }
                            loadAdminUsers();
                        }).fail(function() {
                            alert('Error en comunicación (delete).');
                        });
                    });

                    tr.append(actions);
                    tbody.append(tr);
                });
            }).fail(function() {
                alert('Error en comunicación al cargar usuarios.');
            });
        }

        $(function() {
            $('.select2').select2({
                width: '100%'
            });
            loadAdminUsers();

            $('#formCreateUser').on('submit', function(e) {
                e.preventDefault();
                const payload = {
                    action: 'create',
                    nombre: $(this).find('[name="nombre"]').val().trim(),
                    apellido: $(this).find('[name="apellido"]').val().trim(),
                    email: $(this).find('[name="email"]').val().trim(),
                    password: $(this).find('[name="password"]').val(),
                    roleId: $(this).find('[name="roleId"]').val(),
                    activo: $('#createActivo').is(':checked') ? 1 : 0
                };

                $.ajax({
                    url: '/usuarios/api/admin_users.php',
                    method: 'POST',
                    dataType: 'json',
                    data: payload
                }).done(function(resp) {
                    if (resp.error) {
                        const extra = resp.http ? `\nHTTP: ${resp.http}` : '';
                        const det = resp.details ? `\nDetalles: ${typeof resp.details === 'string' ? resp.details : JSON.stringify(resp.details)}` : '';
                        alert(resp.error + extra + det);
                        return;
                    }

                    $('#modalCreateUser').modal('hide');
                    $('#formCreateUser')[0].reset();
                    $('#createActivo').prop('checked', true);
                    loadAdminUsers();
                }).fail(function() {
                    alert('Error en comunicación al crear usuario.');
                });
            });

            $('#formEditUser').on('submit', function(e) {
                e.preventDefault();
                const id = $(this).find('[name="id"]').val();
                const payload = {
                    action: 'update',
                    id: id,
                    nombre: $(this).find('[name="nombre"]').val().trim(),
                    apellido: $(this).find('[name="apellido"]').val().trim(),
                    roleId: $(this).find('[name="roleId"]').val(),
                    activo: $('#editActivo').is(':checked') ? 1 : 0,
                    password: $(this).find('[name="password"]').val()
                };
                if (!payload.password) delete payload.password;

                $.ajax({
                    url: '/usuarios/api/admin_users.php',
                    method: 'POST',
                    dataType: 'json',
                    data: payload
                }).done(function(resp) {
                    if (resp.error) {
                        const extra = resp.http ? `\nHTTP: ${resp.http}` : '';
                        const det = resp.details ? `\nDetalles: ${typeof resp.details === 'string' ? resp.details : JSON.stringify(resp.details)}` : '';
                        alert(resp.error + extra + det);
                        return;
                    }

                    $('#modalEditUser').modal('hide');
                    loadAdminUsers();
                }).fail(function() {
                    alert('Error en comunicación al editar usuario.');
                });
            });
        });
    });
</script>

<?php include __DIR__ . '/../templates/footer.php'; ?>