rips_manager/app/templates/queries.html

{% extends "base.html" %}
{% block title %}SQL Workbench{% endblock %}
{% block header %}SQL Workbench{% endblock %}
{% block content %}

<style>
    .CodeMirror { height: 180px; font-size: 13px; }
    .cm-s-default .cm-keyword { color: #0000ff; font-weight: bold; }
    .schema-col:hover { background: #eff6ff; }
    .schema-table-row:hover { background: #f3f4f6; }
    #result-table table { border-collapse: collapse; width: 100%; }
    #result-table th { position: sticky; top: 0; background: #f9fafb; z-index: 1; }
    #result-table td, #result-table th { padding: 4px 10px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; font-size: 12px; text-align: left; }
    #result-table tr:hover td { background: #eff6ff; }
    #result-table tr:nth-child(even) td { background: #fafafa; }
    #result-table tr:nth-child(even):hover td { background: #eff6ff; }
</style>

<div class="flex gap-3" style="height: calc(100vh - 148px);">

    <!-- ── LEFT PANEL ─────────────────────────────────────────────── -->
    <div class="flex flex-col gap-3" style="width: 240px; flex-shrink: 0;">

        <!-- Schema Browser -->
        <div class="bg-white rounded-xl border border-gray-200 flex flex-col" style="flex: 1; min-height: 0;">
            <div class="px-3 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Esquema</span>
                <button id="btn-conectar" onclick="cargarEsquema()"
                    class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                    <i class="fas fa-plug"></i> Conectar
                </button>
            </div>
            <div id="schema-search-wrap" class="hidden px-2 pt-2 flex-shrink-0">
                <input id="schema-search" type="text" placeholder="Buscar tabla..."
                    oninput="filtrarTablas(this.value)"
                    class="w-full text-xs border border-gray-200 rounded px-2 py-1 focus:outline-none focus:border-blue-400">
            </div>
            <div id="schema-tree" class="flex-1 overflow-y-auto p-2 text-xs">
                <p class="text-gray-400 italic text-center mt-4">Presioná Conectar para<br>cargar el esquema Firebird</p>
            </div>
        </div>

        <!-- Saved Queries -->
        <div class="bg-white rounded-xl border border-gray-200 flex flex-col" style="max-height: 38%; min-height: 120px;">
            <div class="px-3 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Consultas</span>
                <button onclick="abrirModalNueva()"
                    class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>
            </div>
            <div class="overflow-y-auto flex-1">
                {% for q in queries %}
                <div class="group flex items-center px-3 py-1.5 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-0"
                     data-sql="{{ q.query_text | e }}"
                     data-name="{{ q.name | e }}"
                     data-type="{{ q.query_type }}"
                     data-id="{{ q.id }}"
                     data-desc="{{ (q.description or '') | e }}"
                     onclick="cargarConsultaEl(this)">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5">
                            <span class="text-xs px-1 rounded {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-600{% else %}bg-purple-100 text-purple-600{% endif %}">
                                {{ q.query_type[:4] }}
                            </span>
                            <span class="text-xs text-gray-800 truncate">{{ q.name }}</span>
                        </div>
                    </div>
                    <div class="hidden group-hover:flex items-center gap-1 ml-1 flex-shrink-0">
                        <button onclick="event.stopPropagation();editarConsultaEl(this.closest('[data-id]'))"
                            class="text-blue-400 hover:text-blue-600 p-0.5"><i class="fas fa-edit text-xs"></i></button>
                        <form method="POST" action="/queries/delete/{{ q.id }}" onsubmit="return confirm('¿Eliminar consulta?')" class="inline">
                            <button type="submit" class="text-red-400 hover:text-red-600 p-0.5"><i class="fas fa-trash text-xs"></i></button>
                        </form>
                    </div>
                </div>
                {% else %}
                <p class="text-xs text-gray-400 italic p-3 text-center">Sin consultas guardadas</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- ── RIGHT PANEL ────────────────────────────────────────────── -->
    <div class="flex-1 flex flex-col gap-3 min-w-0">

        <!-- Toolbar -->
        <div class="bg-white rounded-xl border border-gray-200 px-4 py-2.5 flex items-center gap-2 flex-shrink-0">
            <button onclick="ejecutar()" id="btn-run"
                class="flex items-center gap-2 px-4 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg font-medium">
                <i class="fas fa-play text-xs"></i> Ejecutar
            </button>
            <span class="text-gray-200 select-none">|</span>
            <input type="text" id="q-name" placeholder="Nombre de la consulta"
                class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 w-44 focus:outline-none focus:border-blue-400">
            <select id="q-type" class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:border-blue-400">
                <option value="terceros">Terceros</option>
                <option value="transaccion">Transacción</option>
            </select>
            <button onclick="guardar()"
                class="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg">
                <i class="fas fa-save text-xs"></i> Guardar
            </button>
            <button id="btn-cancel" onclick="cancelarEdicion()"
                class="hidden items-center gap-1 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-lg">
                <i class="fas fa-times text-xs"></i> Cancelar
            </button>
            <span class="text-xs text-gray-400 ml-1 hidden" id="editing-label"></span>
            <div class="ml-auto text-xs" id="status-bar"></div>
        </div>

        <!-- Editor -->
        <div class="bg-white rounded-xl border border-gray-200 flex-shrink-0">
            <div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-100">
                <span class="text-xs text-gray-500 font-mono" id="editor-label">SQL</span>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-400">Ctrl+Enter para ejecutar</span>
                    <button onclick="limpiar()" class="text-xs text-gray-400 hover:text-gray-600"><i class="fas fa-eraser"></i></button>
                </div>
            </div>
            <textarea id="sql-editor" class="hidden"></textarea>
        </div>

        <!-- Results -->
        <div class="bg-white rounded-xl border border-gray-200 flex-1 flex flex-col min-h-0">
            <div class="px-4 py-2 border-b border-gray-100 flex items-center justify-between flex-shrink-0">
                <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Resultados</span>
                <div class="flex items-center gap-3">
                    <span id="result-info" class="text-xs text-gray-400"></span>
                    <button id="btn-download" onclick="descargarJSON()" class="hidden items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg">
                        <i class="fas fa-download"></i> JSON
                    </button>
                </div>
            </div>
            <div id="result-table" class="flex-1 overflow-auto">
                <div class="flex flex-col items-center justify-center h-full text-gray-300 select-none">
                    <i class="fas fa-table text-4xl mb-3"></i>
                    <p class="text-sm">Ejecutá una consulta para ver resultados</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ── MODAL GUARDAR ──────────────────────────────────────────────── -->
<div id="modal-save" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6">
        <h3 class="font-semibold text-gray-800 mb-4 text-base" id="modal-title">Guardar consulta</h3>
        <form id="form-save" method="POST" action="/queries/create" class="space-y-3">
            <input type="text" name="name" id="form-name" required placeholder="Nombre *"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
            <div class="grid grid-cols-2 gap-3">
                <select name="query_type" id="form-type"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
                    <option value="terceros">Terceros</option>
                    <option value="transaccion">Transacción</option>
                </select>
                <input type="text" name="description" id="form-desc" placeholder="Descripción"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
            </div>
            <textarea name="query_text" id="form-sql" rows="5"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:outline-none focus:border-blue-400"></textarea>
            <div class="flex justify-end gap-2 pt-1">
                <button type="button" onclick="cerrarModal()"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Cancelar</button>
                <button type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Guardar</button>
            </div>
        </form>
    </div>
</div>

<script>
let editor, esquema = [], editandoId = null, ultimosRows = [];

// ── INIT CODEMIRROR ──────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    editor = CodeMirror.fromTextArea(document.getElementById('sql-editor'), {
        mode: 'text/x-sql',
        lineNumbers: true,
        autofocus: true,
        tabSize: 4,
        indentWithTabs: false,
        lineWrapping: true,
        hintOptions: { tables: {}, completeSingle: false }
    });
    editor.setSize(null, 180);

    // autocomplete al escribir
    editor.on('inputRead', (cm, event) => {
        if (event.origin === '+input' && event.text[0] && /[\w.]/.test(event.text[0])) {
            cm.showHint({ completeSingle: false });
        }
    });

    editor.on('keydown', (cm, e) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            ejecutar();
        }
    });
});

// ── SCHEMA BROWSER ───────────────────────────────────────────────────
async function cargarEsquema() {
    const btn = document.getElementById('btn-conectar');
    const tree = document.getElementById('schema-tree');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    btn.disabled = true;
    tree.innerHTML = '<p class="text-gray-400 italic text-center mt-4">Conectando...</p>';

    try {
        const resp = await fetch('/queries/esquema', { method: 'POST' });
        const data = await resp.json();
        if (data.error) {
            tree.innerHTML = `<div class="p-2 text-red-500 text-xs">${data.error}</div>`;
            showToast(data.error, 'error');
            return;
        }
        esquema = data.tablas;

        // feed schema into CodeMirror autocomplete
        const tablesHint = {};
        esquema.forEach(t => { tablesHint[t.tabla] = t.columnas.map(c => c.nombre); });
        editor.setOption('hintOptions', { tables: tablesHint });

        document.getElementById('schema-search-wrap').classList.remove('hidden');
        renderSchemaTree(esquema);
        btn.innerHTML = '<i class="fas fa-sync mr-1"></i>Refrescar';
        showToast(`${esquema.length} tablas cargadas`);
    } catch(e) {
        tree.innerHTML = `<div class="p-2 text-red-500 text-xs">Error: ${e.message}</div>`;
        showToast('Error: ' + e.message, 'error');
    } finally {
        btn.disabled = false;
    }
}

function filtrarTablas(q) {
    const filtradas = q.trim()
        ? esquema.filter(t => t.tabla.toLowerCase().includes(q.toLowerCase()))
        : esquema;
    renderSchemaTree(filtradas);
}

function renderSchemaTree(tablas) {
    const tree = document.getElementById('schema-tree');
    if (!tablas.length) {
        tree.innerHTML = '<p class="text-gray-400 italic text-center mt-4 text-xs">Sin resultados</p>';
        return;
    }
    tree.innerHTML = '';
    tablas.forEach(t => {
        const key = t.tabla.replace(/\W/g, '_');
        const wrap = document.createElement('div');
        wrap.className = 'mb-0.5';

        // fila de la tabla
        const row = document.createElement('div');
        row.className = 'schema-table-row flex items-center gap-1 px-2 py-1 rounded cursor-pointer group select-none';
        row.innerHTML = `
            <i id="chev-${key}" class="fas fa-chevron-right text-gray-300 text-xs transition-transform duration-150" style="width:10px"></i>
            <i class="fas fa-table text-blue-400 text-xs"></i>
            <span class="font-semibold text-gray-700 flex-1 text-xs">${t.tabla}</span>
            <span class="text-gray-300 text-xs">${t.columnas.length}</span>`;
        row.addEventListener('click', () => toggleCols(key));

        // botón SELECT * — sin JSON en atributo
        const btnSelect = document.createElement('button');
        btnSelect.title = 'SELECT *';
        btnSelect.className = 'hidden group-hover:inline text-blue-400 hover:text-blue-600 text-xs ml-0.5';
        btnSelect.innerHTML = '<i class="fas fa-code"></i>';
        btnSelect.addEventListener('click', e => { e.stopPropagation(); selectAll(t.tabla); });
        row.appendChild(btnSelect);

        // columnas
        const colsDiv = document.createElement('div');
        colsDiv.id = 'cols-' + key;
        colsDiv.className = 'hidden ml-4 border-l border-gray-200 pl-2';
        t.columnas.forEach(c => {
            const colRow = document.createElement('div');
            colRow.className = 'schema-col flex items-center gap-1 px-1 py-0.5 rounded cursor-pointer text-xs';
            colRow.title = `Insertar ${c.nombre}`;
            colRow.innerHTML = `
                <i class="fas fa-columns text-gray-300" style="font-size:9px;width:10px"></i>
                <span class="text-gray-700 flex-1">${c.nombre}</span>
                <span class="text-gray-400" style="font-size:10px">${c.tipo}</span>`;
            colRow.addEventListener('click', () => insertarTexto(c.nombre));
            colsDiv.appendChild(colRow);
        });

        wrap.appendChild(row);
        wrap.appendChild(colsDiv);
        tree.appendChild(wrap);
    });
}

function toggleCols(key) {
    const div = document.getElementById('cols-' + key);
    const chev = document.getElementById('chev-' + key);
    const open = !div.classList.contains('hidden');
    div.classList.toggle('hidden', open);
    chev.style.transform = open ? '' : 'rotate(90deg)';
}

function insertarTexto(texto) {
    if (!editor) return;
    editor.replaceSelection(texto);
    editor.focus();
}

function selectAll(tabla) {
    const t = esquema.find(e => e.tabla === tabla);
    if (!t) return;
    const cols = t.columnas.map(c => `    ${c.nombre}`).join(',\n');
    const sql = `SELECT\n${cols}\nFROM ${tabla}\nROWS 50`;
    editor.setValue(sql);
    editor.focus();
}

// ── EJECUTAR ─────────────────────────────────────────────────────────
async function ejecutar() {
    const sql = editor.getValue().trim();
    if (!sql) { showToast('Escribí una consulta SQL', 'warning'); return; }

    const resultDiv = document.getElementById('result-table');
    const infoDiv  = document.getElementById('result-info');
    const statusBar = document.getElementById('status-bar');
    const btnRun   = document.getElementById('btn-run');

    btnRun.disabled = true;
    btnRun.innerHTML = '<i class="fas fa-spinner fa-spin text-xs mr-2"></i>Ejecutando...';
    resultDiv.innerHTML = '<div class="flex items-center justify-center h-full text-gray-400 text-sm gap-2"><i class="fas fa-spinner fa-spin"></i> Ejecutando...</div>';
    infoDiv.textContent = '';
    statusBar.innerHTML = '';

    const t0 = performance.now();
    try {
        const form = new FormData();
        form.append('sql', sql);
        const resp = await fetch('/queries/run-sql', { method: 'POST', body: form });
        const data = await resp.json();
        const ms = performance.now() - t0;
        const elapsed = ms < 1000 ? `${Math.round(ms)}ms` : `${(ms/1000).toFixed(2)}s`;

        if (data.error) {
            resultDiv.innerHTML = `<div class="p-4 text-red-600 text-sm flex items-start gap-2"><i class="fas fa-exclamation-circle mt-0.5"></i><pre class="whitespace-pre-wrap font-mono text-xs">${escHtml(data.error)}</pre></div>`;
            statusBar.innerHTML = `<span class="text-red-500"><i class="fas fa-times-circle mr-1"></i>Error · ${elapsed}</span>`;
            return;
        }

        if (!data.rows || !data.rows.length) {
            resultDiv.innerHTML = '<div class="flex items-center justify-center h-full text-gray-400 text-sm">Sin resultados</div>';
            infoDiv.textContent = '0 filas';
            statusBar.innerHTML = `<span class="text-gray-500">0 filas · ${elapsed}</span>`;
            return;
        }

        let html = '<table><thead><tr>';
        data.columns.forEach(c => {
            html += `<th class="text-gray-700 font-semibold">${escHtml(c)}</th>`;
        });
        html += '</tr></thead><tbody>';
        data.rows.forEach(r => {
            html += '<tr>';
            data.columns.forEach(c => {
                const v = r[c] ?? '';
                const vs = String(v);
                html += `<td title="${escAttr(vs)}">${escHtml(vs)}</td>`;
            });
            html += '</tr>';
        });
        html += '</tbody></table>';
        resultDiv.innerHTML = html;
        ultimosRows = data.rows;
        const btnDl = document.getElementById('btn-download');
        btnDl.classList.remove('hidden');
        btnDl.style.display = 'inline-flex';

        const shown = Math.min(data.total, 200);
        const trunc = data.total > 200 ? ` <span class="text-yellow-600 font-medium">(truncado a 200)</span>` : '';
        infoDiv.innerHTML = `${data.total} fila${data.total !== 1 ? 's' : ''}${trunc}`;
        statusBar.innerHTML = `<span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i>${shown} fila${shown !== 1 ? 's' : ''} · ${elapsed}</span>`;

    } catch(e) {
        resultDiv.innerHTML = `<div class="p-4 text-red-600 text-sm">Error de red: ${escHtml(e.message)}</div>`;
    } finally {
        btnRun.disabled = false;
        btnRun.innerHTML = '<i class="fas fa-play text-xs"></i> Ejecutar';
    }
}

function limpiar() {
    if (editor) editor.setValue('');
    document.getElementById('result-table').innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-300 select-none"><i class="fas fa-table text-4xl mb-3"></i><p class="text-sm">Ejecutá una consulta para ver resultados</p></div>';
    document.getElementById('result-info').textContent = '';
    document.getElementById('status-bar').innerHTML = '';
    const btnDl2 = document.getElementById('btn-download');
    btnDl2.classList.add('hidden');
    btnDl2.style.display = '';
    ultimosRows = [];
}

function descargarJSON() {
    if (!ultimosRows.length) return;
    const blob = new Blob([JSON.stringify(ultimosRows, null, 2)], { type: 'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `consulta_${new Date().toISOString().slice(0,19).replace(/[T:]/g,'-')}.json`;
    a.click();
    URL.revokeObjectURL(a.href);
}

// ── GUARDAR / EDITAR ──────────────────────────────────────────────────
function abrirModalNueva() {
    editandoId = null;
    document.getElementById('form-save').action = '/queries/create';
    document.getElementById('modal-title').textContent = 'Nueva consulta';
    document.getElementById('form-name').value = document.getElementById('q-name').value;
    document.getElementById('form-type').value = document.getElementById('q-type').value;
    document.getElementById('form-sql').value = editor ? editor.getValue() : '';
    document.getElementById('form-desc').value = '';
    document.getElementById('modal-save').classList.remove('hidden');
    setTimeout(() => document.getElementById('form-name').focus(), 50);
}

function guardar() {
    const sql = editor ? editor.getValue().trim() : '';
    if (!sql) { showToast('No hay SQL para guardar', 'warning'); return; }
    document.getElementById('form-sql').value = sql;
    document.getElementById('form-name').value = document.getElementById('q-name').value;
    document.getElementById('form-type').value = document.getElementById('q-type').value;
    if (editandoId) {
        document.getElementById('form-save').action = '/queries/update/' + editandoId;
        document.getElementById('modal-title').textContent = 'Actualizar consulta';
    } else {
        document.getElementById('form-save').action = '/queries/create';
        document.getElementById('modal-title').textContent = 'Guardar consulta';
    }
    document.getElementById('modal-save').classList.remove('hidden');
    setTimeout(() => document.getElementById('form-name').focus(), 50);
}

function cerrarModal() {
    document.getElementById('modal-save').classList.add('hidden');
}

function cargarConsulta(sql, name, type) {
    if (editor) editor.setValue(sql);
    document.getElementById('q-name').value = name;
    document.getElementById('q-type').value = type;
    editor && editor.focus();
}

function cargarConsultaEl(el) {
    cargarConsulta(el.dataset.sql, el.dataset.name, el.dataset.type);
}

function editarConsultaEl(el) {
    editandoId = parseInt(el.dataset.id);
    cargarConsulta(el.dataset.sql, el.dataset.name, el.dataset.type);
    document.getElementById('form-desc').value = el.dataset.desc || '';
    document.getElementById('btn-cancel').classList.replace('hidden', 'flex');
    document.getElementById('editing-label').textContent = `Editando: ${el.dataset.name}`;
    document.getElementById('editing-label').classList.remove('hidden');
}

function cancelarEdicion() {
    editandoId = null;
    limpiar();
    document.getElementById('q-name').value = '';
    document.getElementById('btn-cancel').classList.replace('flex', 'hidden');
    document.getElementById('editing-label').classList.add('hidden');
}

// ── UTILS ─────────────────────────────────────────────────────────────
function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function escAttr(s) {
    return String(s).replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

// close modal on backdrop click
document.getElementById('modal-save').addEventListener('click', e => {
    if (e.target === e.currentTarget) cerrarModal();
});
</script>

{% endblock %}