<?php
/**
 * Template: Listado de Proyectos Administrativos
 *
 * @var \dokuwiki\plugin\bez\meta\Tpl $tpl
 */
?>

<style>
    .admin-threads-container {
        max-width: 700px;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }

    .admin-threads-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .admin-threads-header h1 {
        margin: 0;
        color: #333;
        font-size: 1.2em;
    }

    .btn-crear {
        background: #fff9c4;
        color: #333;
        padding: 8px 14px;
        border: 1px solid #f0e68c;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85em;
        white-space: nowrap;
    }

    .btn-crear:hover {
        background: #fff176;
        color: #333;
        text-decoration: none;
    }

    .btn-crear .cruz-verde {
        color: #4CAF50;
        font-weight: bold;
        font-size: 1.2em;
    }

    .filtros-container {
        background: #f5f5f5;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .filtros-container form {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filtros-container label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 0.9em;
    }

    .filtros-container select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-width: 100px;
    }

    .filtros-container button {
        padding: 8px 16px;
        background: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .admin-threads-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
        table-layout: fixed;
    }

    .admin-threads-table thead {
        background: #1e3a5f !important;
        color: #ffffff !important;
    }

    .admin-threads-table th {
        padding: 10px 8px;
        text-align: left;
        font-weight: 600;
        color: #ffffff !important;
        background: #1e3a5f !important;
        font-size: 0.8em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-threads-table td {
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
        font-size: 0.85em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-threads-table tbody tr:hover {
        background: #f9f9f9;
    }

    .admin-threads-table tbody tr:last-child td {
        border-bottom: none;
    }

    .estado-badge {
        padding: 3px 8px;
        border-radius: 20px;
        font-size: 0.75em;
        font-weight: 500;
        white-space: nowrap;
    }

    .estado-opened {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .estado-closed {
        background: #ffebee;
        color: #c62828;
    }

    .estado-compilado {
        background: #fff3e0;
        color: #e65100;
    }

    .progress-bar-container {
        width: 100%;
        height: 16px;
        background: #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 9px;
        transition: width 0.3s ease;
    }

    .progress-red { background: #f44336; }
    .progress-orange { background: #ff9800; }
    .progress-blue { background: #2196f3; }
    .progress-green { background: #4caf50; }

    .btn-ver {
        background: #2196F3;
        color: #ffffff !important;
        padding: 5px 8px;
        border-radius: 4px;
        text-decoration: none !important;
        font-size: 0.8em;
        white-space: nowrap;
    }

    .btn-ver:hover {
        background: #555555;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .btn-ver:visited {
        color: #ffffff !important;
    }

    .btn-editar {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.1em;
        padding: 2px 5px;
        border-radius: 4px;
        transition: background 0.2s;
    }
    .btn-editar:hover { background: #e3f2fd; }

    .btn-guardar-row {
        background: #4CAF50;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 0.9em;
        padding: 3px 7px;
        border-radius: 4px;
        margin-right: 3px;
    }
    .btn-guardar-row:hover { background: #388E3C; }

    .btn-cancelar-row {
        background: #f44336;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 0.9em;
        padding: 3px 7px;
        border-radius: 4px;
    }
    .btn-cancelar-row:hover { background: #c62828; }

    .edit-input-nombre {
        width: 100%;
        padding: 4px 6px;
        border: 1px solid #90CAF9;
        border-radius: 4px;
        font-size: 0.85em;
        box-sizing: border-box;
    }

    .edit-select-estado {
        padding: 3px 6px;
        border: 1px solid #90CAF9;
        border-radius: 4px;
        font-size: 0.8em;
    }

    .edit-input-fecha {
        padding: 3px 6px;
        border: 1px solid #90CAF9;
        border-radius: 4px;
        font-size: 0.8em;
        width: 100%;
        box-sizing: border-box;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }

    .empty-state svg {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .preferencia-check {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #ff9800;
    }

    .preferencia-check:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
</style>

<div class="admin-threads-container">

    <div class="admin-threads-header">
        <h1>📋 Gestión Administrativa del Sistema NICC</h1>
        <div style="display:flex; gap:10px; align-items:center;">
            <a href="<?php echo $tpl->url('admin_threads_filtro') ?>" class="btn-crear" style="background:linear-gradient(45deg,#1a1a2e,#2a2a4e);">
                🔍 Filtro de Proyectos
            </a>
            <?php if ($tpl->get('puedeCrear')): ?>
            <a href="<?php echo $tpl->url('admin_thread_form') ?>" class="btn-crear">
                <span class="cruz-verde">+</span> Nuevo
            </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Filtros -->
    <div class="filtros-container">
        <form method="post" action="<?php echo $tpl->url('admin_threads') ?>">
            <div>
                <label>Estado</label>
                <select name="state">
                    <option value="">Todos</option>
                    <option value="opened" <?php echo ($tpl->get('filters')['state'] ?? '') === 'opened' ? 'selected' : '' ?>>Abiertos</option>
                    <option value="closed" <?php echo ($tpl->get('filters')['state'] ?? '') === 'closed' ? 'selected' : '' ?>>Cerrados</option>
                    <option value="compilado" <?php echo ($tpl->get('filters')['state'] ?? '') === 'compilado' ? 'selected' : '' ?>>Compilados</option>
                </select>
            </div>
            <div>
                <label>Nombre</label>
                <select name="trabajador">
                    <option value="">Todos</option>
                    <?php foreach ($tpl->get('trabajadores') as $t): ?>
                    <option value="<?php echo htmlspecialchars($t['trabajador_id']) ?>"
                        <?php echo ($tpl->get('filters')['trabajador_id'] ?? '') === $t['trabajador_id'] ? 'selected' : '' ?>>
                        <?php echo htmlspecialchars($t['trabajador_nombre']) ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label>Año</label>
                <select name="anio">
                    <option value="">Todos</option>
                    <?php foreach ($tpl->get('anios') as $a): ?>
                    <option value="<?php echo htmlspecialchars($a['anio']) ?>"
                        <?php echo ($tpl->get('filters')['anio'] ?? '') === $a['anio'] ? 'selected' : '' ?>>
                        <?php echo htmlspecialchars($a['anio']) ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <button type="submit">Filtrar</button>
        </form>
    </div>

    <?php $proyectos = $tpl->get('proyectos'); ?>

    <?php if (empty($proyectos)): ?>
    <div class="empty-state">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10,19L12,15H9V10H15V15L13,19H10Z"/>
        </svg>
        <h3>No hay proyectos administrativos</h3>
        <p>Crea un nuevo proyecto para comenzar a gestionar el control administrativo.</p>
        <?php if ($tpl->get('puedeCrear')): ?>
        <a href="<?php echo $tpl->url('admin_thread_form') ?>" class="btn-crear" style="margin-top: 15px;">
            <span class="cruz-verde">+</span> Crear Primer Proyecto
        </a>
        <?php endif; ?>
    </div>

    <?php else: ?>
    <table class="admin-threads-table">
        <thead>
            <tr>
                <th style="width:30px;">#</th>
                <th style="width:40px;text-align:center;">Pref.</th>
                <th>Nombre</th>
                <th style="width:80px;">Estado</th>
                <th style="width:130px;">Progreso</th>
                <th style="width:80px;">Fecha</th>
                <th style="width:90px;">Acción</th>
            </tr>
        </thead>
        <tbody>
            <?php $preferenciaActual = $tpl->get('preferenciaActual'); ?>
            <?php $puedeOperar = $tpl->get('puedeOperar'); ?>
            <?php foreach ($proyectos as $p): ?>
            <tr data-id="<?php echo intval($p['id']) ?>"
                data-nombre="<?php echo htmlspecialchars($p['trabajador_nombre'], ENT_QUOTES) ?>"
                data-state="<?php echo htmlspecialchars($p['state'] ?? '', ENT_QUOTES) ?>"
                data-fecha="<?php echo htmlspecialchars($p['fecha_inicio'] ?? '', ENT_QUOTES) ?>">
                <td><strong><?php echo intval($p['id']) ?></strong></td>
                <td style="text-align:center;">
                    <?php if ($puedeOperar): ?>
                    <input type="checkbox" class="preferencia-check"
                           data-id="<?php echo intval($p['id']) ?>"
                           <?php echo ($preferenciaActual !== null && $preferenciaActual == $p['id']) ? 'checked' : '' ?> />
                    <?php elseif ($preferenciaActual !== null && $preferenciaActual == $p['id']): ?>
                    <span title="Proyecto preferido">★</span>
                    <?php endif; ?>
                </td>
                <td class="cel-nombre"><?php echo htmlspecialchars($p['trabajador_nombre']) ?></td>
                <td class="cel-estado">
                    <span class="estado-badge estado-<?php echo htmlspecialchars($p['state'] ?? '') ?>">
                        <?php if ($p['state'] === 'opened'): ?>● Abierto<?php elseif ($p['state'] === 'closed'): ?>○ Cerrado<?php else: ?>◆ Compilado<?php endif; ?>
                    </span>
                </td>
                <td>
                    <?php
                    $porcentaje = floatval($p['porcentaje_total']);
                    $colorClass = 'progress-red';
                    if ($porcentaje >= 100) $colorClass = 'progress-green';
                    elseif ($porcentaje >= 50) $colorClass = 'progress-blue';
                    elseif ($porcentaje >= 30) $colorClass = 'progress-orange';
                    ?>
                    <div class="progress-bar-container">
                        <div class="progress-bar <?php echo $colorClass ?>" style="width: <?php echo $porcentaje ?>%;">
                            <?php echo $porcentaje ?>%
                        </div>
                    </div>
                    <small style="color: #666;"><?php echo $p['tareas_completadas'] ?>/<?php echo $p['total_tareas'] ?> tareas</small>
                </td>
                <td class="cel-fecha"><?php echo !empty($p['fecha_inicio']) ? date('d/m/Y', strtotime($p['fecha_inicio'])) : '—' ?></td>
                <td class="cel-accion">
                    <?php if ($puedeOperar): ?>
                    <button type="button" class="btn-editar" title="Editar">&#9998;</button>
                    <?php endif; ?>
                    <a href="<?php echo $tpl->url('admin_thread', 'id', $p['id']) ?>" class="btn-ver">
                        Ver
                    </a>
                    <?php if ($puedeOperar && intval($p['id']) !== 1): ?>
                    <button type="button" class="btn-eliminar-proyecto" data-id="<?php echo intval($p['id']) ?>" title="Eliminar proyecto" style="background:#f44336;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:13px;margin-left:4px;">&#10005;</button>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    <?php endif; ?>

</div>

<script>
(function() {
    var checkboxes = document.querySelectorAll('.preferencia-check');
    if (!checkboxes.length) return;

    checkboxes.forEach(function(cb) {
        cb.addEventListener('change', function() {
            var projectId = this.getAttribute('data-id');
            var checked = this.checked;

            // Si desmarca, no hacer nada (siempre debe haber uno marcado o ninguno)
            // En este caso, re-marcamos ya que solo se cambia marcando otro
            if (!checked) {
                // Permitir desmarcar: simplemente no hacemos el AJAX
                return;
            }

            // Desmarcar todos los demás en el DOM
            checkboxes.forEach(function(other) {
                if (other !== cb) other.checked = false;
            });

            // Deshabilitar mientras se procesa
            checkboxes.forEach(function(c) { c.disabled = true; });

            // Enviar AJAX
            var formData = new FormData();
            formData.append('accion', 'marcarPreferenciaAdmin');
            formData.append('admin_thread_id', projectId);
            formData.append('sectok', JSINFO.sectok || document.querySelector('input[name="sectok"]')?.value || '');

            fetch(DOKU_BASE + 'lib/plugins/bez/meta/ajax_handler.php', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(function(response) { return response.json(); })
            .then(function(data) {
                if (data.status === 'success') {
                    // Éxito: el checkbox ya está actualizado en el DOM
                } else {
                    // Error: revertir
                    alert(data.mensaje || data.error || 'Error al guardar preferencia.');
                    cb.checked = false;
                }
            })
            .catch(function(err) {
                alert('Error de conexión al guardar preferencia.');
                cb.checked = false;
            })
            .finally(function() {
                checkboxes.forEach(function(c) { c.disabled = false; });
            });
        });
    });
})();

// === Edición inline de proyectos ===
(function() {
    var editingRow = null; // Solo una fila en edición a la vez

    function getAjaxUrl() {
        if (typeof DOKU_BASE !== 'undefined') return DOKU_BASE + 'lib/plugins/bez/meta/ajax_handler.php';
        var scripts = document.querySelectorAll('script[src*="doku"]');
        return '/lib/plugins/bez/meta/ajax_handler.php';
    }

    function getSectok() {
        if (typeof JSINFO !== 'undefined' && JSINFO.sectok) return JSINFO.sectok;
        var input = document.querySelector('input[name="sectok"]');
        return input ? input.value : '';
    }

    function estadoLabel(state) {
        if (state === 'opened') return '<span class="estado-badge estado-opened">&#9679; Abierto</span>';
        if (state === 'closed') return '<span class="estado-badge estado-closed">&#9675; Cerrado</span>';
        return '<span class="estado-badge estado-compilado">&#9670; Compilado</span>';
    }

    function formatFecha(dateStr) {
        if (!dateStr) return '—';
        var parts = dateStr.split('-');
        if (parts.length === 3) return parts[2] + '/' + parts[1] + '/' + parts[0];
        return dateStr;
    }

    function cancelEdit(tr) {
        if (!tr) return;
        var nombre = tr.getAttribute('data-nombre');
        var state = tr.getAttribute('data-state');
        var fecha = tr.getAttribute('data-fecha');

        tr.querySelector('.cel-nombre').innerHTML = nombre;
        tr.querySelector('.cel-estado').innerHTML = estadoLabel(state);
        tr.querySelector('.cel-fecha').textContent = formatFecha(fecha);

        // Restaurar botones
        var celAccion = tr.querySelector('.cel-accion');
        var verLink = celAccion.querySelector('.btn-ver');
        celAccion.innerHTML = '';
        var btnEdit = document.createElement('button');
        btnEdit.type = 'button';
        btnEdit.className = 'btn-editar';
        btnEdit.title = 'Editar';
        btnEdit.innerHTML = '&#9998;';
        celAccion.appendChild(btnEdit);
        if (verLink) celAccion.appendChild(verLink);
        else {
            var a = document.createElement('a');
            a.className = 'btn-ver';
            a.textContent = 'Ver';
            celAccion.appendChild(a);
        }

        editingRow = null;
    }

    function startEdit(tr) {
        // Cancelar edición previa si existe
        if (editingRow && editingRow !== tr) cancelEdit(editingRow);

        editingRow = tr;
        var nombre = tr.getAttribute('data-nombre');
        var state = tr.getAttribute('data-state');
        var fecha = tr.getAttribute('data-fecha');

        // Nombre → input text
        tr.querySelector('.cel-nombre').innerHTML =
            '<input type="text" class="edit-input-nombre" value="' + nombre.replace(/"/g, '&quot;') + '" />';

        // Estado → select
        tr.querySelector('.cel-estado').innerHTML =
            '<select class="edit-select-estado">' +
            '<option value="opened"' + (state === 'opened' ? ' selected' : '') + '>Abierto</option>' +
            '<option value="closed"' + (state === 'closed' ? ' selected' : '') + '>Cerrado</option>' +
            '</select>';

        // Fecha → input date
        tr.querySelector('.cel-fecha').innerHTML =
            '<input type="date" class="edit-input-fecha" value="' + (fecha || '') + '" />';

        // Accion → Guardar + Cancelar + Ver
        var celAccion = tr.querySelector('.cel-accion');
        var verLink = celAccion.querySelector('.btn-ver');
        celAccion.innerHTML = '';

        var btnGuardar = document.createElement('button');
        btnGuardar.type = 'button';
        btnGuardar.className = 'btn-guardar-row';
        btnGuardar.innerHTML = '&#10003;';
        btnGuardar.title = 'Guardar';

        var btnCancelar = document.createElement('button');
        btnCancelar.type = 'button';
        btnCancelar.className = 'btn-cancelar-row';
        btnCancelar.innerHTML = '&#10007;';
        btnCancelar.title = 'Cancelar';

        celAccion.appendChild(btnGuardar);
        celAccion.appendChild(btnCancelar);
        if (verLink) { celAccion.appendChild(document.createTextNode(' ')); celAccion.appendChild(verLink); }

        // Focus en nombre
        var inputNombre = tr.querySelector('.edit-input-nombre');
        if (inputNombre) inputNombre.focus();

        // Eventos
        btnCancelar.addEventListener('click', function() { cancelEdit(tr); });
        btnGuardar.addEventListener('click', function() { saveEdit(tr); });

        // Enter para guardar, Escape para cancelar
        tr.addEventListener('keydown', function handler(e) {
            if (e.key === 'Enter') { e.preventDefault(); saveEdit(tr); tr.removeEventListener('keydown', handler); }
            if (e.key === 'Escape') { cancelEdit(tr); tr.removeEventListener('keydown', handler); }
        });
    }

    function saveEdit(tr) {
        var id = tr.getAttribute('data-id');
        var inputNombre = tr.querySelector('.edit-input-nombre');
        var selectEstado = tr.querySelector('.edit-select-estado');
        var inputFecha = tr.querySelector('.edit-input-fecha');

        if (!inputNombre || !selectEstado || !inputFecha) return;

        var nuevoNombre = inputNombre.value.trim();
        var nuevoState = selectEstado.value;
        var nuevaFecha = inputFecha.value;

        if (!nuevoNombre) {
            alert('El nombre no puede estar vacio.');
            inputNombre.focus();
            return;
        }

        // Deshabilitar inputs mientras guarda
        inputNombre.disabled = true;
        selectEstado.disabled = true;
        inputFecha.disabled = true;
        var btnGuardar = tr.querySelector('.btn-guardar-row');
        var btnCancelar = tr.querySelector('.btn-cancelar-row');
        if (btnGuardar) btnGuardar.disabled = true;
        if (btnCancelar) btnCancelar.disabled = true;

        var formData = new FormData();
        formData.append('accion', 'editarAdminThread');
        formData.append('admin_thread_id', id);
        formData.append('trabajador_nombre', nuevoNombre);
        formData.append('state', nuevoState);
        formData.append('fecha_inicio', nuevaFecha);
        formData.append('sectok', getSectok());

        fetch(getAjaxUrl(), {
            method: 'POST',
            body: formData,
            credentials: 'same-origin'
        })
        .then(function(r) {
            if (!r.ok) {
                return r.text().then(function(txt) {
                    throw new Error('HTTP ' + r.status + ': ' + txt.substring(0, 200));
                });
            }
            return r.text().then(function(txt) {
                try { return JSON.parse(txt); }
                catch(e) { throw new Error('Respuesta no JSON: ' + txt.substring(0, 200)); }
            });
        })
        .then(function(data) {
            if (data.status === 'success') {
                // Actualizar data attributes
                tr.setAttribute('data-nombre', nuevoNombre);
                tr.setAttribute('data-state', nuevoState);
                tr.setAttribute('data-fecha', nuevaFecha);

                // Salir de modo edicion (restaura celdas con nuevos valores)
                cancelEdit(tr);
            } else {
                alert(data.mensaje || data.error || 'Error al guardar.');
                // Re-habilitar
                inputNombre.disabled = false;
                selectEstado.disabled = false;
                inputFecha.disabled = false;
                if (btnGuardar) btnGuardar.disabled = false;
                if (btnCancelar) btnCancelar.disabled = false;
            }
        })
        .catch(function(err) {
            alert('Error de conexion al guardar.\nURL: ' + getAjaxUrl() + '\nError: ' + err.message);
            inputNombre.disabled = false;
            selectEstado.disabled = false;
            inputFecha.disabled = false;
            if (btnGuardar) btnGuardar.disabled = false;
            if (btnCancelar) btnCancelar.disabled = false;
        });
    }

    // Delegacion de eventos para botones de editar
    document.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-editar');
        if (btn) {
            var tr = btn.closest('tr');
            if (tr) startEdit(tr);
        }
    });

    // Delegacion de eventos para botones de eliminar
    var _delSectok = '<?php echo getSecurityToken(); ?>';
    var _delBaseUrl = '<?php echo DOKU_BASE; ?>';

    document.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-eliminar-proyecto');
        if (!btn) return;

        var pid = btn.getAttribute('data-id');
        if (pid === '1') return;

        if (!confirm('¿Eliminar el proyecto #' + pid + '? Esta acción lo marcará como eliminado.')) return;

        btn.disabled = true;
        var formData = new FormData();
        formData.append('accion', 'eliminarAdminThread');
        formData.append('admin_thread_id', pid);
        formData.append('sectok', _delSectok);

        fetch(_delBaseUrl + 'lib/plugins/bez/meta/ajax_handler.php', {
            method: 'POST',
            body: formData,
            credentials: 'same-origin'
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'success') {
                var tr = btn.closest('tr');
                if (tr) tr.remove();
            } else {
                alert('Error: ' + (data.mensaje || data.error || 'Error desconocido'));
                btn.disabled = false;
            }
        })
        .catch(function(err) {
            alert('Error de conexión: ' + err.message);
            btn.disabled = false;
        });
    });
})();
</script>
