<?php
if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}
require_once __DIR__ . '/../includes/session_control.php';
require_once __DIR__ . '/../cotizaciones/api/_node.php';

// Capturamos el id que viene por GET
$initialUserId = isset($_GET['id']) ? intval($_GET['id']) : 0;

$token = cpn_node_token_or_fail();
$base = cpn_node_api_base();

$metaResp = cpn_node_request('GET', $base . '/api/usuarios/meta', $token);
if (!isset($metaResp['ok']) || $metaResp['ok'] !== true) {
    http_response_code($metaResp['_http'] ?? 500);
    die('Error consultando meta de usuarios en Node');
}

$meta = $metaResp['data'] ?? [];
$allCities = $meta['ciudades'] ?? [];
$tipoTerceroList = $meta['tipoTercero'] ?? [];
$regimenList = $meta['regimen'] ?? [];
$tipoDocumentoList = $meta['tipoDocumento'] ?? [];
?>
<?php include '../templates/header.php'; ?>
<h1 class="h3 mb-4 text-gray-800">Administrar Usuarios</h1>

<!-- Búsqueda y Crear -->
<div class="mb-4">
    <select id="userSelect" class="form-control"></select>
    <button class="btn btn-success mt-2" data-bs-toggle="modal" data-bs-target="#newUserModal">
        Crear Usuario
    </button>
</div>

<!-- Sección de edición -->
<div id="userSection" class="d-none">
    <h2>Edición de Usuario Id: <span id="selectedUserId"></span></h2>

    <!-- Tabla de usuario -->
    <table class="table table-bordered table-sm mb-4">
        <tbody>
            <tr>
                <th>Nombre</th>
                <td><span id="field-nombre" class="editable" data-field="nombre" contenteditable="true"></span></td>
            </tr>
            <tr>
                <th>Apellido</th>
                <td><span id="field-apellido" class="editable" data-field="apellido" contenteditable="true"></span></td>
            </tr>
            <tr>
                <th>Email</th>
                <td><span id="field-email" class="editable" data-field="email" contenteditable="true"></span></td>
            </tr>
            <tr>
                <th>Teléfono</th>
                <td><span id="field-telefono" class="editable" data-field="telefono" contenteditable="true"></span></td>
            </tr>
            <tr>
                <th>Ciudad</th>
                <td>
                    <select id="field-idCiudad" class="form-control"></select>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Direcciones -->
    <h3>Direcciones Asociadas</h3>
    <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#newAddressModal">
        Agregar Dirección
    </button>
    <table id="addressTable" class="table table-bordered table-sm mb-4">
        <thead>
            <tr>
                <th>Identificación</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Razón Social</th>
                <th>Dirección</th>
                <th>Línea 2</th>
                <th>Ciudad</th>
                <th>Teléfono</th>
                <th>Email</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- Terceros -->
    <h3>Terceros Asociados</h3>
    <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#newTerceroModal">
        Agregar Tercero
    </button>
    <table id="terceroTable" class="table table-bordered table-sm mb-4">
        <thead>
            <tr>
                <th>Tipo Tercero</th>
                <th>Régimen</th>
                <th>Tipo Documento</th>
                <th>Dirección</th>
                <th>No Documento</th>
                <th>DV</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Razón Social</th>
                <th>Email Factura</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

</div> <!-- /.container-fluid -->
</div> <!-- /#content -->
<?php include '../templates/footer.php'; ?>
</div> <!-- /#content-wrapper -->
</div> <!-- /#wrapper -->

<!-- Modals -->

<!-- Crear Usuario -->
<div class="modal fade" id="newUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="newUserForm" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Crear Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label>Nombre o Razón Social</label>
                    <input name="nombre" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label>Apellido</label>
                    <input name="apellido" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Email</label>
                    <input name="email" type="email" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Teléfono</label>
                    <input name="telefono" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Ciudad</label>
                    <select name="idCiudad" class="form-control" required>
                        <?php foreach ($allCities as $c): ?>
                            <option value="<?= (int)$c['id'] ?>"><?= htmlspecialchars($c['text']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary">Crear</button>
            </div>
        </form>
    </div>
</div>

<!-- Agregar Dirección -->
<div class="modal fade" id="newAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="newAddressForm" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Dirección</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row">
                <div class="col-md-6 mb-3"><label>Identificación</label><input name="identificacion" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Nombre</label><input name="nombre" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Apellido</label><input name="apellido" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Razón Social</label><input name="razonSocial" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Dirección</label><input name="direccion" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Línea 2</label><input name="direccionLinea2" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Ciudad</label>
                    <select name="idCiudad" class="form-control">
                        <?php foreach ($allCities as $c): ?>
                            <option value="<?= (int)$c['id'] ?>"><?= htmlspecialchars($c['text']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-6 mb-3"><label>Teléfono</label><input name="telefono" class="form-control"></div>
                <div class="col-md-6 mb-3"><label>Email</label><input name="email" class="form-control"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary">Agregar</button>
            </div>
        </form>
    </div>
</div>

<!-- Agregar Tercero -->
<div class="modal fade" id="newTerceroModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="newTerceroForm" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Tercero</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body row">
                <div class="col-md-4 mb-3">
                    <label>Tipo Tercero</label>
                    <select name="idTipoTercero" class="form-control" required>
                        <?php foreach ($tipoTerceroList as $o): ?>
                            <option value="<?= (int)$o['id'] ?>"><?= htmlspecialchars($o['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label>Régimen</label>
                    <select name="idRegimen" class="form-control" required>
                        <?php foreach ($regimenList as $o): ?>
                            <option value="<?= (int)$o['id'] ?>"><?= htmlspecialchars($o['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label>Tipo Documento</label>
                    <select
                        name="idTipoDocumento"
                        class="form-control tercero-field"
                        data-field="idTipoDocumento"
                        required>
                        <?php foreach ($tipoDocumentoList as $o): ?>
                            <option value="<?= (int)$o['id'] ?>"><?= htmlspecialchars($o['nombre']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-4 mb-3">
                    <label>Dirección</label>
                    <select name="idDireccion" class="form-control" required></select>
                </div>
                <div class="col-md-4 mb-3"><label>No Documento</label><input name="noDocumento" class="form-control"></div>
                <div class="col-md-4 mb-3"><label>DV</label><input name="dv" class="form-control"></div>
                <div class="col-md-4 mb-3"><label>Nombre</label><input name="nombre" class="form-control"></div>
                <div class="col-md-4 mb-3"><label>Apellido</label><input name="apellido" class="form-control"></div>
                <div class="col-md-4 mb-3"><label>Razón Social</label><input name="razonSocial" class="form-control"></div>
                <div class="col-md-4 mb-3"><label>Email Factura</label><input name="emailFactura" class="form-control"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary">Agregar</button>
            </div>
        </form>
    </div>
</div>


<script>
    var initialUserId = <?= $initialUserId ?>;
    // Datos estáticos
    var allCities = <?= json_encode($allCities) ?>;
    var tipoTerceroList = <?= json_encode($tipoTerceroList) ?>;
    var regimenList = <?= json_encode($regimenList) ?>;
    var tipoDocumentoList = <?= json_encode($tipoDocumentoList) ?>;

    var currentUserId;

    function initSelect2() {
        $('#userSelect').select2({
            placeholder: 'Buscar usuario...',
            ajax: {
                url: 'buscar_usuarios.php',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.results
                    };
                }
            },
            templateResult: function(data) {
                return data.text ? data.text + (data.email ? ' (' + data.email + ')' : '') : data.id;
            },
            templateSelection: function(data) {
                return data.text || data.id;
            },
            minimumInputLength: 1
        }).on('select2:select', function(e) {
            loadUser(e.params.data.id);
        });
    }

    function loadUser(id) {
        currentUserId = id;
        $.ajax({
            url: 'update_usuario.php',
            dataType: 'json',
            data: {
                action: 'get_user',
                id: id
            }
        }).done(function(resp) {
            if (resp && resp.error) {
                alert(resp.error);
                $('#userSection').addClass('d-none');
                return;
            }
            if (!resp || !resp.user) {
                alert('No se pudo cargar el usuario.');
                $('#userSection').addClass('d-none');
                return;
            }
            $('#selectedUserId').text(resp.user.id);
            $('#field-nombre').text(resp.user.nombre || '');
            $('#field-apellido').text(resp.user.apellido || '');
            $('#field-email').text(resp.user.email || '');
            $('#field-telefono').text(resp.user.telefono || '');

            // Ciudad usuario
            var cityOpts = '';
            allCities.forEach(function(c) {
                cityOpts += '<option value="' + c.id + '">' + c.text + '</option>';
            });
            $('#field-idCiudad').html(cityOpts).val(resp.user.idCiudad);

            // Prefill formulario nueva dirección
            $('#newAddressForm input[name="nombre"]').val(resp.user.nombre || '');
            $('#newAddressForm input[name="apellido"]').val(resp.user.apellido || '');
            $('#newAddressForm input[name="telefono"]').val(resp.user.telefono || '');
            $('#newAddressForm select[name="idCiudad"]').val(resp.user.idCiudad || '');

            // Opciones direcciones
            var addressOptions = [];
            resp.addresses.forEach(function(a) {
                addressOptions.push({
                    id: a.id,
                    text: a.nombre + ' ' + a.apellido + ' - ' + a.direccion
                });
            });
            // Llenar select en modal tercero
            var addrSelHtml = '';
            addressOptions.forEach(function(c) {
                addrSelHtml += '<option value="' + c.id + '">' + c.text + '</option>';
            });
            $('#newTerceroForm select[name="idDireccion"]').html(addrSelHtml);

            // Render tablas
            renderAddresses(resp.addresses, addressOptions);
            renderTerceros(resp.terceros, addressOptions);

            // Bind eventos
            bindEditableFields();
            bindEditableAddress();
            bindDeleteAddress();
            bindNewAddressForm();
            bindEditableTercero();
            bindNewTerceroForm();

            $('#userSection').removeClass('d-none');
        }).fail(function(xhr) {
            var msg = 'No se pudo cargar el usuario.';
            try {
                var j = JSON.parse(xhr.responseText || '{}');
                if (j && j.error) msg = j.error;
            } catch (e) {}
            alert(msg);
            $('#userSection').addClass('d-none');
        });
    }

    function bindEditableFields() {
        $('.editable').off('blur').on('blur', function() {
            var $el = $(this),
                field = $el.data('field'),
                value = $el.text();
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_usuarios',
                id: currentUserId,
                field: field,
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
        $('#field-idCiudad').off('change').on('change', function() {
            var value = $(this).val();
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_usuarios',
                id: currentUserId,
                field: 'idCiudad',
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
    }

    function renderAddresses(addresses) {
        var rows = '';
        addresses.forEach(function(a) {
            var citySel = '<select class="form-control address-city" data-id="' + a.id + '">';
            allCities.forEach(function(c) {
                citySel += '<option value="' + c.id + '"' + (c.id == a.idCiudad ? ' selected' : '') + '>' + c.text + '</option>';
            });
            citySel += '</select>';

            rows += '<tr data-id="' + a.id + '">' +
                '<td><span class="editable-address" data-field="identificacion" contenteditable="true">' + (a.identificacion || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="nombre" contenteditable="true">' + (a.nombre || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="apellido" contenteditable="true">' + (a.apellido || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="razonSocial" contenteditable="true">' + (a.razonSocial || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="direccion" contenteditable="true">' + (a.direccion || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="direccionLinea2" contenteditable="true">' + (a.direccionLinea2 || '') + '</span></td>' +
                '<td>' + citySel + '</td>' +
                '<td><span class="editable-address" data-field="telefono" contenteditable="true">' + (a.telefono || '') + '</span></td>' +
                '<td><span class="editable-address" data-field="email" contenteditable="true">' + (a.email || '') + '</span></td>' +
                '<td><button class="btn btn-sm btn-danger delete-address">X</button></td>' +
                '</tr>';
        });
        $('#addressTable tbody').html(rows);
    }

    function renderTerceros(terceros, addressOptions) {
        var rows = '';
        terceros.forEach(function(t) {
            var tipoSel = '<select class="form-control tercero-field" data-field="idTipoTercero" data-id="' + t.id + '">';
            tipoTerceroList.forEach(function(o) {
                tipoSel += '<option value="' + o.id + '"' + (o.id == t.idTipoTercero ? ' selected' : '') + '>' + o.nombre + '</option>';
            });
            tipoSel += '</select>';

            var regimenSel = '<select class="form-control tercero-field" data-field="idRegimen" data-id="' + t.id + '">';
            regimenList.forEach(function(o) {
                regimenSel += '<option value="' + o.id + '"' + (o.id == t.idRegimen ? ' selected' : '') + '>' + o.nombre + '</option>';
            });
            regimenSel += '</select>';

            var docSel = '<select class="form-control tercero-field" data-field="idTipoDocumento" data-id="' + t.id + '">';
            tipoDocumentoList.forEach(function(o) {
                docSel += '<option value="' + o.id + '"' + (o.id == t.idTipoDocumento ? ' selected' : '') + '>' + o.nombre + '</option>';
            });
            docSel += '</select>';

            var addrSel = '<select class="form-control tercero-field" data-field="idDireccion" data-id="' + t.id + '">';
            addressOptions.forEach(function(c) {
                addrSel += '<option value="' + c.id + '"' + (c.id == t.idDireccion ? ' selected' : '') + '>' + c.text + '</option>';
            });
            addrSel += '</select>';

            rows += '<tr>' +
                '<td>' + tipoSel + '</td>' +
                '<td>' + regimenSel + '</td>' +
                '<td>' + docSel + '</td>' +
                '<td>' + addrSel + '</td>' +
                '<td><span class="editable-tercero" data-field="noDocumento" data-id="' + t.id + '" contenteditable="true">' + (t.noDocumento || '') + '</span></td>' +
                '<td><span class="editable-tercero" data-field="dv" data-id="' + t.id + '" contenteditable="true">' + (t.dv || '') + '</span></td>' +
                '<td><span class="editable-tercero" data-field="nombre" data-id="' + t.id + '" contenteditable="true">' + (t.nombre || '') + '</span></td>' +
                '<td><span class="editable-tercero" data-field="apellido" data-id="' + t.id + '" contenteditable="true">' + (t.apellido || '') + '</span></td>' +
                '<td><span class="editable-tercero" data-field="razonSocial" data-id="' + t.id + '" contenteditable="true">' + (t.razonSocial || '') + '</span></td>' +
                '<td><span class="editable-tercero" data-field="emailFactura" data-id="' + t.id + '" contenteditable="true">' + (t.emailFactura || '') + '</span></td>' +
                '</tr>';
        });
        $('#terceroTable tbody').html(rows);
    }

    function bindEditableAddress() {
        $('.editable-address').off('blur').on('blur', function() {
            var $el = $(this),
                field = $el.data('field'),
                value = $el.text(),
                id = $el.closest('tr').data('id');
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_usuarios_direcciones',
                id: id,
                field: field,
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
        $('.address-city').off('change').on('change', function() {
            var id = $(this).data('id'),
                value = $(this).val();
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_usuarios_direcciones',
                id: id,
                field: 'idCiudad',
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
    }

    function bindDeleteAddress() {
        $('.delete-address').off('click').on('click', function() {
            var id = $(this).closest('tr').data('id');
            if (!confirm('¿Eliminar esta dirección?')) return;
            $.post('update_usuario.php', {
                action: 'delete_address',
                id: id
            }, function(r) {
                if (r.success) loadUser(currentUserId);
                else alert(r.error);
            }, 'json');
        });
    }

    function bindNewAddressForm() {
        $('#newAddressForm').off('submit').on('submit', function(e) {
            e.preventDefault();
            var data = $(this).serialize() + '&action=add_address&userId=' + currentUserId;
            $.post('update_usuario.php', data, function(r) {
                if (r.success) {
                    $('#newAddressModal').modal('hide');
                    loadUser(currentUserId);
                } else alert(r.error);
            }, 'json');
        });
    }

    function bindEditableTercero() {
        $('.tercero-field').off('change').on('change', function() {
            var $el = $(this),
                field = $el.data('field'),
                value = $el.val(),
                id = $el.data('id');
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_terceros',
                id: id,
                field: field,
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
        $('.editable-tercero').off('blur').on('blur', function() {
            var $el = $(this),
                field = $el.data('field'),
                value = $el.text(),
                id = $el.data('id');
            $.post('update_usuario.php', {
                action: 'update_field',
                tabla: 'tb_terceros',
                id: id,
                field: field,
                value: value
            }, function(r) {
                if (!r.success) alert(r.error);
            }, 'json');
        });
    }

    function bindNewTerceroForm() {
        $('#newTerceroForm').off('submit').on('submit', function(e) {
            e.preventDefault();
            var data = $(this).serialize() + '&action=add_tercero&userId=' + currentUserId;
            $.post('update_usuario.php', data, function(r) {
                if (r.success) {
                    $('#newTerceroModal').modal('hide');
                    loadUser(currentUserId);
                } else alert(r.error);
            }, 'json');
        });
    }

    function bindNewUserForm() {
        $('#newUserForm').off('submit').on('submit', function(e) {
            e.preventDefault();
            var data = $(this).serialize() + '&action=create_user';
            $.post('update_usuario.php', data, function(r) {
                if (r.success) {
                    $('#newUserModal').modal('hide');
                    var option = new Option(r.name, r.newId, true, true);
                    $('#userSelect').append(option).trigger('change');
                } else alert(r.error);
            }, 'json');
        });
    }

    $(document).ready(function() {
        // Siempre dejamos disponibles buscar/crear para no dejar la pantalla en blanco
        // si la carga inicial falla (por ejemplo 404/401 desde el API).
        initSelect2();
        bindNewUserForm();

        if (initialUserId) {
            loadUser(initialUserId);
        }
    });
</script>