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

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <div class="lg:col-span-3">
        <div class="flex space-x-1 border-b border-gray-200 mb-4">
            <button onclick="cambiarTab('probador')" class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-blue-600 text-blue-600" id="tab-probador"><i class="fas fa-play mr-1"></i> Probador</button>
            <button onclick="cambiarTab('constructor')" class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-constructor"><i class="fas fa-wrench mr-1"></i> Constructor</button>
            <button onclick="cambiarTab('editor')" class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-editor"><i class="fas fa-code mr-1"></i> Editor</button>
        </div>

        <div id="panel-probador">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="p-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-terminal mr-2 text-green-500"></i>Escribí tu SQL y ejecutalo</h3>
                    <div class="flex space-x-2">
                        <button onclick="ejecutarProbador()" class="px-4 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-play mr-1"></i> Ejecutar</button>
                        <button onclick="limpiarProbador()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-eraser mr-1"></i> Limpiar</button>
                    </div>
                </div>
                <div>
                    <textarea id="probador-sql" rows="6" class="w-full px-4 py-3 text-sm font-mono border-0 focus:ring-0" placeholder="SELECT * FROM ..."></textarea>
                </div>
                <div id="probador-resultados" class="border-t border-gray-200 overflow-x-auto max-h-96 overflow-y-auto"></div>
                <div id="probador-info" class="px-4 py-2 text-xs text-gray-500 border-t border-gray-200"></div>
            </div>
        </div>

        <div id="panel-constructor" class="hidden">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual</h3>
                    <button onclick="cargarEsquema()" class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-sync mr-1"></i> Cargar esquema</button>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                        <div>
                            <h4 class="text-xs font-semibold text-gray-700 mb-2">Tablas</h4>
                            <div id="builder-tablas" class="space-y-1 max-h-64 overflow-y-auto border rounded p-2 bg-gray-50 text-xs">
                                <p class="text-gray-400 italic">Presiona "Cargar esquema"</p>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-xs font-semibold text-gray-700 mb-2">Columnas</h4>
                            <div id="builder-columnas" class="border rounded p-2 bg-gray-50 min-h-[100px] text-xs">
                                <p class="text-gray-400 italic">Seleccioná una tabla</p>
                            </div>
                            <h4 class="text-xs font-semibold text-gray-700 mt-3 mb-2">Filtros</h4>
                            <div id="builder-where" class="space-y-1 text-xs"></div>
                            <button onclick="agregarFiltro()" class="mt-1 text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>
                        </div>
                        <div>
                            <h4 class="text-xs font-semibold text-gray-700 mb-2">SQL</h4>
                            <textarea id="builder-sql" rows="4" readonly class="w-full px-2 py-1 border rounded text-xs font-mono bg-gray-100"></textarea>
                            <p id="builder-params" class="text-xs text-blue-600 mt-1"></p>
                            <button onclick="ejecutarBuilder()" class="mt-2 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-play mr-1"></i> Ejecutar</button>
                            <button onclick="usarSqlEditor()" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg ml-1"><i class="fas fa-arrow-right mr-1"></i> Enviar al Editor</button>
                        </div>
                    </div>
                    <div id="builder-resultados" class="mt-3 border-t border-gray-200 pt-3 overflow-x-auto max-h-60 overflow-y-auto"></div>
                </div>
            </div>
        </div>

        <div id="panel-editor" class="hidden">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200">
                <div class="px-4 py-3 border-b border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-save mr-2 text-blue-500"></i>Guardar consulta</h3>
                </div>
                <div class="p-4">
                    <form method="POST" action="/queries/create" class="space-y-3">
                        <input type="hidden" name="query_id" id="query_id" value="">
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Nombre</label>
                                <input type="text" name="name" id="q_name" required class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm" placeholder="Nombre">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Tipo</label>
                                <select name="query_type" id="q_type" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                    <option value="terceros">Terceros</option>
                                    <option value="transaccion">Transacción</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">SQL</label>
                            <textarea name="query_text" id="q_text" rows="8" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono" placeholder="PEGA ACA LA SQL YA PROBADA"></textarea>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Descripción</label>
                            <input type="text" name="description" id="q_desc" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm" placeholder="Descripción">
                        </div>
                        <div class="flex space-x-2">
                            <button type="submit" class="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm"><i class="fas fa-save mr-1"></i> Guardar</button>
                            <button type="button" onclick="cancelEdit()" class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Consultas</h3>
            </div>
            <div class="p-3 space-y-2 max-h-[calc(100vh-200px)] overflow-y-auto">
                {% for q in queries %}
                <div class="p-2 rounded-lg border border-gray-200 text-xs">
                    <div onclick="cargarConsulta({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`)" class="cursor-pointer">
                        <div class="flex items-center justify-between">
                            <span class="font-medium text-gray-800 truncate">{{ q.name }}</span>
                            <span class="px-1.5 py-0.5 rounded text-xs {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type[:4] }}</span>
                        </div>
                        <p class="text-gray-500 mt-0.5 truncate">{{ q.description or 'Sin descripción' }}</p>
                    </div>
                    <div class="flex space-x-2 mt-1">
                        <button onclick="event.stopPropagation();ejecutarConsultaId({{ q.id }})" class="text-green-600 hover:text-green-800"><i class="fas fa-play"></i></button>
                        <button onclick="event.stopPropagation();cargarConsulta({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`)" class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button>
                        <form method="POST" action="/queries/delete/{{ q.id }}" class="inline" onsubmit="return confirm('Eliminar?')">
                            <button type="submit" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
let sqlEditor = null;
let esquema = [];
let tablasSeleccionadas = {};
let filtros = [];
let aliasCounter = 0;

function cambiarTab(tab) {
    ['probador','constructor','editor'].forEach(t => {
        document.getElementById('panel-'+t).classList.toggle('hidden', t !== tab);
        const btn = document.getElementById('tab-'+t);
        if (t === tab) {
            btn.className = 'tab-btn px-4 py-2 text-sm font-medium border-b-2 border-blue-600 text-blue-600';
        } else {
            btn.className = 'tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent';
        }
    });
    if (tab === 'constructor' && !esquema.length) cargarEsquema();
}

// ───── PROBADOR ─────
function ejecutarProbador() {
    const sql = document.getElementById('probador-sql').value.trim();
    if (!sql) { showToast('Escribí una consulta SQL', 'warning'); return; }
    ejecutarSql(sql, 'probador-resultados', 'probador-info');
}

function limpiarProbador() {
    document.getElementById('probador-sql').value = '';
    document.getElementById('probador-resultados').innerHTML = '';
    document.getElementById('probador-info').innerHTML = '';
}

async function ejecutarSql(sql, outputId, infoId) {
    const outputDiv = document.getElementById(outputId);
    const infoDiv = document.getElementById(infoId);
    outputDiv.innerHTML = '<div class="p-4 text-center"><i class="fas fa-spinner fa-spin mr-2"></i>Ejecutando...</div>';
    if (infoDiv) infoDiv.innerHTML = '';
    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();
        if (data.error) {
            outputDiv.innerHTML = `<div class="p-4 text-red-600 text-sm"><i class="fas fa-exclamation-circle mr-1"></i> ${data.error}</div>`;
            return;
        }
        let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';
        data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold whitespace-nowrap">' + c + '</th>'; });
        html += '</tr></thead><tbody>';
        data.rows.slice(0, 200).forEach(r => {
            html += '<tr class="hover:bg-gray-50">';
            data.columns.forEach(c => { html += '<td class="p-2 border whitespace-nowrap">' + (r[c] ?? '') + '</td>'; });
            html += '</tr>';
        });
        html += '</tbody></table>';
        outputDiv.innerHTML = html;
        if (infoDiv) infoDiv.innerHTML = `${data.total} registros (mostrando ${Math.min(data.total, 200)})`;
        if (data.total > 200) infoDiv.innerHTML += ' <span class="text-yellow-600">- Resultado truncado a 200 filas</span>';
    } catch(e) {
        outputDiv.innerHTML = `<div class="p-4 text-red-600 text-sm">Error: ${e.message}</div>`;
    }
}

// ───── CONSTRUCTOR ─────
async function cargarEsquema() {
    const btn = document.querySelector('#panel-constructor .bg-green-600');
    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';
    try {
        const resp = await fetch('/queries/esquema', { method: 'POST' });
        const data = await resp.json();
        if (data.error) { showToast(data.error, 'error'); return; }
        esquema = data.tablas;
        renderizarTablas();
    } catch(e) { showToast('Error: ' + e.message, 'error'); }
    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-sync mr-1"></i> Cargar esquema'; }
}

function renderizarTablas() {
    const div = document.getElementById('builder-tablas');
    div.innerHTML = '';
    esquema.forEach(t => {
        const id = 'tab-' + t.tabla.replace(/[^a-zA-Z0-9]/g, '_');
        const checked = tablasSeleccionadas[t.tabla] ? 'checked' : '';
        const card = document.createElement('div');
        card.className = 'border rounded p-1.5 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');
        card.innerHTML = `
            <label class="flex items-center space-x-1 cursor-pointer">
                <input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">
                <span class="font-medium text-xs">${t.tabla}</span>
                <span class="text-gray-400 text-xs">(${t.columnas.length})</span>
            </label>
            <div id="${id}" class="ml-4 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;
        div.appendChild(card);
    });
    actualizarBuilder();
}

function renderizarColumnas(tabla, columnas) {
    let html = '';
    columnas.forEach(c => {
        const sel = tablasSeleccionadas[tabla]?.columnas?.[c.nombre] ? 'checked' : '';
        html += `<label class="flex items-center space-x-1 py-0.5 cursor-pointer hover:bg-blue-100 px-1 rounded text-xs">
            <input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">
            <span>${c.nombre} <span class="text-gray-400">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span></span>
        </label>`;
    });
    return html;
}

function toggleTabla(tabla, checked) {
    if (checked) tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };
    else delete tablasSeleccionadas[tabla];
    renderizarTablas(); actualizarBuilder();
}

function toggleColumna(tabla, columna, checked) {
    if (!tablasSeleccionadas[tabla]) return;
    if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;
    else delete tablasSeleccionadas[tabla].columnas[columna];
    renderizarTablas(); actualizarBuilder();
}

function agregarFiltro() {
    filtros.push({ campo: '', operador: '=', parametro: '', condicion: 'AND' });
    renderizarFiltros(); actualizarBuilder();
}

function renderizarFiltros() {
    const div = document.getElementById('builder-where');
    div.innerHTML = '';
    if (!filtros.length) { div.innerHTML = '<p class="text-gray-400 italic">Sin filtros</p>'; return; }
    filtros.forEach((f, i) => {
        const opts = [];
        Object.entries(tablasSeleccionadas).forEach(([t, info]) => {
            const tInfo = esquema.find(e => e.tabla === t);
            if (tInfo) tInfo.columnas.forEach(c => {
                opts.push({ value: `${t}.${c.nombre}`, label: `${info.alias}.${c.nombre}` });
            });
        });
        const row = document.createElement('div');
        row.className = 'flex items-center space-x-1 text-xs';
        row.innerHTML = `
            <select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-1 py-0.5 text-xs max-w-[100px]">
                <option value="">--campo--</option>
                ${opts.map(o => `<option value="${o.value}" ${f.campo===o.value?'selected':''}>${o.label}</option>`).join('')}
            </select>
            <select onchange="actualizarFiltro(${i},'operador',this.value)" class="border rounded px-1 py-0.5 text-xs w-14">
                ${['=','>','<','>=','<=','<>','LIKE','BETWEEN'].map(o => `<option ${f.operador===o?'selected':''}>${o}</option>`).join('')}
            </select>
            <input type="text" value="${f.parametro}" onchange="actualizarFiltro(${i},'parametro',this.value)" placeholder=":param" class="border rounded px-1 py-0.5 text-xs font-mono w-20">
            <button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarBuilder();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>`;
        div.appendChild(row);
        if (i < filtros.length - 1) {
            const sep = document.createElement('div');
            sep.className = 'ml-1';
            sep.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-1 py-0.5 text-xs w-14">
                <option value="AND" ${filtros[i+1]?.condicion==='AND'?'selected':''}>AND</option>
                <option value="OR" ${filtros[i+1]?.condicion==='OR'?'selected':''}>OR</option>
            </select>`;
            div.appendChild(sep);
        }
    });
}

function actualizarFiltro(i, prop, val) {
    if (!filtros[i]) filtros[i] = { campo: '', operador: '=', parametro: '', condicion: 'AND' };
    filtros[i][prop] = val;
    actualizarBuilder();
}

function generarSql() {
    const tabs = Object.entries(tablasSeleccionadas);
    if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };
    const selects = [], froms = [], allParams = new Set();
    tabs.forEach(([tabla, info]) => {
        froms.push({ tabla, alias: info.alias });
        Object.keys(info.columnas).forEach(c => selects.push(`${info.alias}.${c}`));
    });
    if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };
    let sql = 'SELECT\n    ' + selects.join(',\n    ') + '\nFROM ';
    sql += froms.map((f, i) => i === 0 ? `${f.tabla} ${f.alias}` : `JOIN ${f.tabla} ${f.alias} ON 1=1`).join('\n');
    const wheres = [];
    filtros.forEach(f => {
        if (f.campo && f.parametro) {
            const [t, c] = f.campo.split('.');
            const info = tablasSeleccionadas[t];
            if (info) { wheres.push(`${info.alias}.${c} ${f.operador} ${f.parametro}`); if (f.parametro.startsWith(':')) allParams.add(f.parametro); }
        }
    });
    if (wheres.length) sql += '\nWHERE ' + wheres.join(' ');
    sql += '\nROWS 200';
    return { sql, params: Array.from(allParams) };
}

function actualizarBuilder() {
    const { sql, params } = generarSql();
    document.getElementById('builder-sql').value = sql;
    document.getElementById('builder-params').textContent = params.length ? 'Params: ' + params.join(', ') : '';

    const tabs = Object.entries(tablasSeleccionadas);
    const div = document.getElementById('builder-columnas');
    if (!tabs.length) { div.innerHTML = '<p class="text-gray-400 italic">Seleccioná una tabla</p>'; return; }
    let html = '';
    tabs.forEach(([tabla, info]) => {
        const cols = Object.keys(info.columnas);
        if (cols.length) html += `<div class="mb-0.5 text-xs"><span class="font-medium">${info.alias}.</span> ${cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ')}</div>`;
    });
    div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';
}

function ejecutarBuilder() {
    const sql = document.getElementById('builder-sql').value;
    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
    ejecutarSql(sql, 'builder-resultados', null);
}

function usarSqlEditor() {
    const sql = document.getElementById('builder-sql').value;
    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
    document.getElementById('q_text').value = sql;
    document.getElementById('probador-sql').value = sql;
    cambiarTab('probador');
    showToast('SQL enviado al Probador');
}

// ───── CONSULTAS GUARDADAS ─────
function cargarConsulta(id, name, type, text) {
    document.getElementById('query_id').value = id;
    document.getElementById('q_name').value = name;
    document.getElementById('q_type').value = type;
    document.getElementById('q_text').value = text;
    document.getElementById('q_desc').value = '';
    document.getElementById('probador-sql').value = text;
    document.getElementById('btn-cancel').classList.remove('hidden');
    document.querySelector('#panel-editor form').action = '/queries/update/' + id;
    cambiarTab('probador');
}

function cancelEdit() {
    document.getElementById('query_id').value = '';
    document.getElementById('q_name').value = '';
    document.getElementById('q_text').value = '';
    document.getElementById('q_desc').value = '';
    document.getElementById('btn-cancel').classList.add('hidden');
    document.querySelector('#panel-editor form').action = '/queries/create';
}

async function ejecutarConsultaId(id) {
    const form = new FormData(); form.append('sql', '');
    const resp = await fetch('/queries/test', { method: 'POST', body: (()=>{const f=new FormData();f.append('query_id',id);return f;})() });
    const data = await resp.json();
    if (data.error) { showToast(data.error, 'error'); return; }
    let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';
    data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold">' + c + '</th>'; });
    html += '</tr></thead><tbody>';
    data.rows.slice(0,200).forEach(r => {
        html += '<tr class="hover:bg-gray-50">';
        data.columns.forEach(c => { html += '<td class="p-2 border whitespace-nowrap">' + (r[c] ?? '') + '</td>'; });
        html += '</tr>';
    });
    html += '</tbody></table>';
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';
    modal.innerHTML = '<div class="bg-white rounded-xl shadow-xl max-w-5xl w-full mx-4 max-h-[80vh] overflow-auto p-4"><div class="flex justify-between items-center mb-3"><h3 class="font-semibold text-sm">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-lg"></i></button></div>' + html + '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + Math.min(data.total, 200) + ')</p></div>';
    document.body.appendChild(modal);
}
</script>
{% endblock %}