{% extends 'base.html' %}
{% from 'macros.html' import render_messages %}

{% block content %}
<div class="container-fluid">
    {{ render_messages() }}
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2>
                <i class="bi bi-code-square me-2"></i>
                {{ _('Editor de Esquema') }}: {{ rule.nombre }}
            </h2>
            <small class="text-muted">
                {{ rule.codigo }} v{{ rule.version }} | {{ rule.jurisdiccion or _('Sin jurisdicción') }}
            </small>
        </div>
        <div>
            <a href="{{ url_for('calculation_rule.edit', id=rule.id) }}" class="btn btn-secondary">
                <i class="bi bi-pencil me-1"></i>{{ _('Editar Metadatos') }}
            </a>
            <a href="{{ url_for('calculation_rule.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{{ _('Volver') }}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Left Panel: Visual Editor -->
        <div class="col-lg-7">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <i class="bi bi-ui-checks me-2"></i>{{ _('Editor Visual') }}
                </div>
                <div class="card-body">
                    <!-- Meta Section -->
                    <div class="schema-section mb-4">
                        <h5 class="section-title">
                            <i class="bi bi-info-circle me-2"></i>{{ _('Configuración') }}
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ _('Nombre de la regla') }}</label>
                                    <input type="text" class="form-control" id="meta-name" 
                                           placeholder="{{ _('Ej: Income Tax Rule') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">{{ _('Moneda de Referencia') }}</label>
                                    <input type="text" class="form-control" id="meta-reference-currency" 
                                           placeholder="{{ _('Ej: NIO, USD') }}">
                                    <div class="form-text">
                                        {{ _('Moneda base para los cálculos. La moneda de la planilla se define en el Tipo de Planilla.') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ _('Descripción') }}</label>
                            <textarea class="form-control" id="meta-description" rows="2" 
                                      placeholder="{{ _('Descripción de lo que calcula esta regla') }}"></textarea>
                        </div>
                    </div>

                    <!-- Inputs Section -->
                    <div class="schema-section mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="section-title mb-0">
                                <i class="bi bi-box-arrow-in-right me-2"></i>{{ _('Variables de Entrada') }}
                            </h5>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addInput()">
                                <i class="bi bi-plus-lg me-1"></i>{{ _('Agregar') }}
                            </button>
                        </div>
                        <div id="inputs-container">
                            <!-- Dynamic inputs will be added here -->
                        </div>
                        <div class="text-muted small mt-2">
                            <i class="bi bi-info-circle me-1"></i>
                            {{ _('Las variables de entrada pueden venir de la base de datos (empleado.salario_base) o ser valores estáticos.') }}
                        </div>
                    </div>

                    <!-- Steps Section -->
                    <div class="schema-section mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="section-title mb-0">
                                <i class="bi bi-list-ol me-2"></i>{{ _('Pasos de Cálculo') }}
                            </h5>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="bi bi-plus-lg me-1"></i>{{ _('Agregar Paso') }}
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" onclick="addStep('calculation')">
                                        <i class="bi bi-calculator me-2"></i>{{ _('Cálculo') }}
                                    </a></li>
                                    <li><a class="dropdown-item" href="#" onclick="addStep('conditional')">
                                        <i class="bi bi-signpost-split me-2"></i>{{ _('Condicional') }}
                                    </a></li>
                                    <li><a class="dropdown-item" href="#" onclick="addStep('tax_lookup')">
                                        <i class="bi bi-table me-2"></i>{{ _('Búsqueda en Tabla') }}
                                    </a></li>
                                    <li><a class="dropdown-item" href="#" onclick="addStep('assignment')">
                                        <i class="bi bi-arrow-right-circle me-2"></i>{{ _('Asignación') }}
                                    </a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="steps-container">
                            <!-- Dynamic steps will be added here -->
                        </div>
                    </div>

                    <!-- Tax Tables Section -->
                    <div class="schema-section mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="section-title mb-0">
                                <i class="bi bi-table me-2"></i>{{ _('Tablas de Impuestos') }}
                            </h5>
                            <button type="button" class="btn btn-sm btn-primary" onclick="addTaxTable()">
                                <i class="bi bi-plus-lg me-1"></i>{{ _('Agregar Tabla') }}
                            </button>
                        </div>
                        <div id="tax-tables-container">
                            <!-- Dynamic tax tables will be added here -->
                        </div>
                    </div>

                    <!-- Output Section -->
                    <div class="schema-section">
                        <h5 class="section-title">
                            <i class="bi bi-box-arrow-right me-2"></i>{{ _('Resultado Final') }}
                        </h5>
                        <div class="mb-3">
                            <label class="form-label">{{ _('Variable de salida') }}</label>
                            <select class="form-select" id="output-variable">
                                <option value="">{{ _('Seleccionar variable de resultado...') }}</option>
                            </select>
                            <div class="form-text">
                                {{ _('Seleccione la variable que contiene el resultado final del cálculo.') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Panel: JSON Preview & Testing -->
        <div class="col-lg-5">
            <!-- JSON Preview -->
            <div class="card mb-4">
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-code-slash me-2"></i>{{ _('Vista Previa JSON') }}</span>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-light" onclick="copyJson()">
                            <i class="bi bi-clipboard"></i>
                        </button>
                        <button type="button" class="btn btn-outline-light" onclick="formatJson()">
                            <i class="bi bi-magic"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <textarea id="json-preview" class="form-control font-monospace" rows="15" 
                              style="border: none; border-radius: 0; resize: vertical;"></textarea>
                </div>
            </div>

            <!-- Test Panel -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <i class="bi bi-play-circle me-2"></i>{{ _('Probar Cálculo') }}
                </div>
                <div class="card-body">
                    <div id="test-inputs-container">
                        <!-- Dynamic test inputs will be generated -->
                    </div>
                    <button type="button" class="btn btn-info w-100 mt-3" onclick="testCalculation()">
                        <i class="bi bi-play-fill me-1"></i>{{ _('Ejecutar Prueba') }}
                    </button>
                    <div id="test-result" class="mt-3" style="display: none;">
                        <h6>{{ _('Resultado:') }}</h6>
                        <pre class="bg-light p-3 rounded" id="test-result-content"></pre>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-success btn-lg" onclick="saveSchema()">
                            <i class="bi bi-check-lg me-2"></i>{{ _('Guardar Esquema') }}
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('json-file-input').click()">
                            <i class="bi bi-upload me-2"></i>{{ _('Cargar desde Archivo JSON') }}
                        </button>
                        <input type="file" id="json-file-input" accept=".json" style="display: none;" onchange="loadJsonFile(event)">
                        <button type="button" class="btn btn-outline-secondary" onclick="loadExample()">
                            <i class="bi bi-file-earmark-code me-2"></i>{{ _('Cargar Ejemplo de Impuesto Progresivo') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.schema-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid #e9ecef;
}

.section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
}

.input-item, .step-item, .tax-table-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    cursor: move;
}

.input-item .drag-handle, .step-item .drag-handle {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    cursor: grab;
    font-size: 1.2rem;
}

.input-item .drag-handle:active, .step-item .drag-handle:active {
    cursor: grabbing;
}

.reorder-buttons {
    position: absolute;
    right: 3rem;
    top: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

.reorder-buttons .btn {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.input-item:hover, .step-item:hover, .tax-table-item:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
}

.remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.step-type-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.bracket-row {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

#json-preview {
    font-size: 0.85rem;
    background: #1e1e1e;
    color: #d4d4d4;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-drag {
    opacity: 0.8;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
</style>

<script>
// Initialize with existing schema
let schema = {{ schema_json|safe }} || {
    meta: {},
    inputs: [],
    steps: [],
    tax_tables: {},
    output: ''
};

const exampleSchema = {{ example_schema|safe }};

// Available data sources from the database
const availableSources = {{ available_sources|safe }};

// Counter for unique IDs
let inputCounter = 0;
let stepCounter = 0;
let tableCounter = 0;

// Sortable instances
let inputsSortable = null;
let stepsSortable = null;

document.addEventListener('DOMContentLoaded', function() {
    loadSchemaToEditor();
    updateJsonPreview();
    initializeSortable();
});

function initializeSortable() {
    // Initialize sortable for inputs
    const inputsContainer = document.getElementById('inputs-container');
    if (inputsContainer && typeof Sortable !== 'undefined') {
        inputsSortable = Sortable.create(inputsContainer, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            onEnd: function() {
                updateJsonPreview();
            }
        });
    }
    
    // Initialize sortable for steps
    const stepsContainer = document.getElementById('steps-container');
    if (stepsContainer && typeof Sortable !== 'undefined') {
        stepsSortable = Sortable.create(stepsContainer, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            onEnd: function() {
                updateJsonPreview();
            }
        });
    }
}

function loadSchemaToEditor() {
    // Load meta
    if (schema.meta) {
        document.getElementById('meta-name').value = schema.meta.name || '';
        document.getElementById('meta-reference-currency').value = schema.meta.reference_currency || schema.meta.currency || '';
        document.getElementById('meta-description').value = schema.meta.description || '';
    }

    // Load inputs
    const inputsContainer = document.getElementById('inputs-container');
    inputsContainer.innerHTML = '';
    if (schema.inputs && schema.inputs.length > 0) {
        schema.inputs.forEach(input => addInput(input));
    }

    // Load steps
    const stepsContainer = document.getElementById('steps-container');
    stepsContainer.innerHTML = '';
    if (schema.steps && schema.steps.length > 0) {
        schema.steps.forEach(step => addStep(step.type, step));
    }

    // Load tax tables
    const tablesContainer = document.getElementById('tax-tables-container');
    tablesContainer.innerHTML = '';
    if (schema.tax_tables) {
        Object.entries(schema.tax_tables).forEach(([name, brackets]) => {
            addTaxTable(name, brackets);
        });
    }

    // Load output
    updateOutputSelect();
    document.getElementById('output-variable').value = schema.output || '';
}

function addInput(data = null) {
    const container = document.getElementById('inputs-container');
    const id = inputCounter++;
    
    // Build source options grouped by category
    let sourceOptionsHtml = '<option value="">{{ _("Seleccionar origen o escribir valor...") }}</option>';
    let currentCategory = '';
    availableSources.forEach(source => {
        if (source.category !== currentCategory) {
            if (currentCategory !== '') {
                sourceOptionsHtml += '</optgroup>';
            }
            sourceOptionsHtml += `<optgroup label="${source.category}">`;
            currentCategory = source.category;
        }
        sourceOptionsHtml += `<option value="${source.value}" title="${source.description}">${source.label}</option>`;
    });
    if (currentCategory !== '') {
        sourceOptionsHtml += '</optgroup>';
    }
    
    const currentSourceValue = data?.source || data?.default || '';
    
    const html = `
        <div class="input-item" id="input-${id}">
            <div class="drag-handle">
                <i class="bi bi-grip-vertical"></i>
            </div>
            <div class="reorder-buttons">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveInputUp(${id})" title="{{ _('Subir') }}">
                    <i class="bi bi-arrow-up"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveInputDown(${id})" title="{{ _('Bajar') }}">
                    <i class="bi bi-arrow-down"></i>
                </button>
            </div>
            <button type="button" class="btn btn-danger btn-sm remove-btn" onclick="removeInput(${id})">
                <i class="bi bi-x"></i>
            </button>
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label small">{{ _('Nombre') }}</label>
                    <input type="text" class="form-control form-control-sm input-name" 
                           value="${data?.name || ''}" placeholder="{{ _('Ej: salario_mensual') }}"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">{{ _('Tipo') }}</label>
                    <select class="form-select form-select-sm input-type" onchange="updateJsonPreview()">
                        <option value="decimal" ${data?.type === 'decimal' ? 'selected' : ''}>{{ _('Decimal') }}</option>
                        <option value="integer" ${data?.type === 'integer' ? 'selected' : ''}>{{ _('Entero') }}</option>
                        <option value="string" ${data?.type === 'string' ? 'selected' : ''}>{{ _('Texto') }}</option>
                        <option value="boolean" ${data?.type === 'boolean' ? 'selected' : ''}>{{ _('Booleano') }}</option>
                        <option value="date" ${data?.type === 'date' ? 'selected' : ''}>{{ _('Fecha') }}</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label small">{{ _('Origen de Datos') }}</label>
                    <select class="form-select form-select-sm input-source-select" 
                            onchange="handleSourceChange(this, ${id}); updateJsonPreview()">
                        ${sourceOptionsHtml}
                        <option value="__custom__">{{ _('Valor personalizado...') }}</option>
                    </select>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-sm input-source-custom" 
                           value="${currentSourceValue}" 
                           placeholder="{{ _('Origen (empleado.campo) o valor default') }}"
                           onchange="updateJsonPreview()"
                           style="${currentSourceValue && !availableSources.find(s => s.value === currentSourceValue) ? '' : 'display:none'}">
                </div>
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-sm input-description" 
                           value="${data?.description || ''}" 
                           placeholder="{{ _('Descripción (opcional)') }}"
                           onchange="updateJsonPreview()">
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    
    // Set the select value if it matches an available source
    const selectEl = document.querySelector(`#input-${id} .input-source-select`);
    if (currentSourceValue) {
        const matchingSource = availableSources.find(s => s.value === currentSourceValue);
        if (matchingSource) {
            selectEl.value = currentSourceValue;
        } else {
            selectEl.value = '__custom__';
            document.querySelector(`#input-${id} .input-source-custom`).style.display = '';
        }
    }
    
    updateJsonPreview();
}

function handleSourceChange(selectEl, inputId) {
    const customInput = document.querySelector(`#input-${inputId} .input-source-custom`);
    if (selectEl.value === '__custom__') {
        customInput.style.display = '';
        customInput.focus();
    } else if (selectEl.value === '') {
        customInput.style.display = 'none';
        customInput.value = '';
    } else {
        customInput.style.display = 'none';
        customInput.value = selectEl.value;
    }
}

function removeInput(id) {
    document.getElementById(`input-${id}`).remove();
    updateJsonPreview();
}

function moveInputUp(id) {
    const element = document.getElementById(`input-${id}`);
    const prev = element.previousElementSibling;
    if (prev) {
        element.parentNode.insertBefore(element, prev);
        updateJsonPreview();
    }
}

function moveInputDown(id) {
    const element = document.getElementById(`input-${id}`);
    const next = element.nextElementSibling;
    if (next) {
        element.parentNode.insertBefore(next, element);
        updateJsonPreview();
    }
}

function addStep(type, data = null) {
    const container = document.getElementById('steps-container');
    const id = stepCounter++;
    
    let typeHtml = '';
    let typeBadgeClass = '';
    
    switch(type) {
        case 'calculation':
            typeBadgeClass = 'bg-primary';
            typeHtml = `
                <div class="mb-2">
                    <label class="form-label small">{{ _('Fórmula') }}</label>
                    <input type="text" class="form-control form-control-sm step-formula" 
                           value="${data?.formula || ''}" 
                           placeholder="{{ _('Ej: salario_mensual * 12') }}"
                           onchange="updateJsonPreview()">
                </div>
            `;
            break;
        case 'conditional':
            typeBadgeClass = 'bg-warning text-dark';
            typeHtml = `
                <div class="mb-2">
                    <label class="form-label small">{{ _('Condición') }}</label>
                    <div class="row g-2">
                        <div class="col-4">
                            <input type="text" class="form-control form-control-sm step-cond-left" 
                                   value="${data?.condition?.left || ''}" placeholder="{{ _('Variable') }}"
                                   onchange="updateJsonPreview()">
                        </div>
                        <div class="col-2">
                            <select class="form-select form-select-sm step-cond-op" onchange="updateJsonPreview()">
                                <option value=">" ${ data?.condition?.operator === '>' ? 'selected' : '' }>&gt;</option>
                                <option value=">=" ${ data?.condition?.operator === '>=' ? 'selected' : '' }>&gt;=</option>
                                <option value="<" ${ data?.condition?.operator === '<' ? 'selected' : '' }>&lt;</option>
                                <option value="<=" ${ data?.condition?.operator === '<=' ? 'selected' : '' }>&lt;=</option>
                                <option value="==" ${ data?.condition?.operator === '==' ? 'selected' : '' }>==</option>
                                <option value="!=" ${ data?.condition?.operator === '!=' ? 'selected' : '' }>!=</option>
                            </select>
                        </div>
                        <div class="col-4">
                            <input type="text" class="form-control form-control-sm step-cond-right" 
                                   value="${data?.condition?.right || ''}" placeholder="{{ _('Valor') }}"
                                   onchange="updateJsonPreview()">
                        </div>
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label small">{{ _('Si verdadero') }}</label>
                        <input type="text" class="form-control form-control-sm step-if-true" 
                               value="${data?.if_true || ''}" placeholder="{{ _('Fórmula si cumple') }}"
                               onchange="updateJsonPreview()">
                    </div>
                    <div class="col-6">
                        <label class="form-label small">{{ _('Si falso') }}</label>
                        <input type="text" class="form-control form-control-sm step-if-false" 
                               value="${data?.if_false || ''}" placeholder="{{ _('Fórmula si no cumple') }}"
                               onchange="updateJsonPreview()">
                    </div>
                </div>
            `;
            break;
        case 'tax_lookup':
            typeBadgeClass = 'bg-danger';
            typeHtml = `
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label small">{{ _('Tabla de impuestos') }}</label>
                        <input type="text" class="form-control form-control-sm step-table" 
                               value="${data?.table || ''}" placeholder="{{ _('Nombre de la tabla') }}"
                               onchange="updateJsonPreview()">
                    </div>
                    <div class="col-6">
                        <label class="form-label small">{{ _('Variable de entrada') }}</label>
                        <input type="text" class="form-control form-control-sm step-input" 
                               value="${data?.input || ''}" placeholder="{{ _('Variable a buscar') }}"
                               onchange="updateJsonPreview()">
                    </div>
                </div>
            `;
            break;
        case 'assignment':
            typeBadgeClass = 'bg-info';
            typeHtml = `
                <div class="mb-2">
                    <label class="form-label small">{{ _('Valor') }}</label>
                    <input type="text" class="form-control form-control-sm step-value" 
                           value="${data?.value || ''}" placeholder="{{ _('Variable o valor a asignar') }}"
                           onchange="updateJsonPreview()">
                </div>
            `;
            break;
    }
    
    const html = `
        <div class="step-item" id="step-${id}" data-type="${type}">
            <div class="drag-handle">
                <i class="bi bi-grip-vertical"></i>
            </div>
            <div class="reorder-buttons">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveStepUp(${id})" title="{{ _('Subir') }}">
                    <i class="bi bi-arrow-up"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moveStepDown(${id})" title="{{ _('Bajar') }}">
                    <i class="bi bi-arrow-down"></i>
                </button>
            </div>
            <button type="button" class="btn btn-danger btn-sm remove-btn" onclick="removeStep(${id})">
                <i class="bi bi-x"></i>
            </button>
            <div class="d-flex align-items-center mb-2">
                <span class="badge ${typeBadgeClass} step-type-badge me-2">${type}</span>
                <input type="text" class="form-control form-control-sm step-name" 
                       value="${data?.name || ''}" placeholder="{{ _('Nombre del paso') }}"
                       style="max-width: 200px;" onchange="updateJsonPreview()">
            </div>
            ${typeHtml}
            <div class="mt-2">
                <input type="text" class="form-control form-control-sm step-description" 
                       value="${data?.description || ''}" placeholder="{{ _('Descripción (opcional)') }}"
                       onchange="updateJsonPreview()">
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    updateJsonPreview();
}

function removeStep(id) {
    document.getElementById(`step-${id}`).remove();
    updateJsonPreview();
}

function moveStepUp(id) {
    const element = document.getElementById(`step-${id}`);
    const prev = element.previousElementSibling;
    if (prev) {
        element.parentNode.insertBefore(element, prev);
        updateJsonPreview();
    }
}

function moveStepDown(id) {
    const element = document.getElementById(`step-${id}`);
    const next = element.nextElementSibling;
    if (next) {
        element.parentNode.insertBefore(next, element);
        updateJsonPreview();
    }
}

function addTaxTable(name = null, brackets = null) {
    const container = document.getElementById('tax-tables-container');
    const id = tableCounter++;
    
    const html = `
        <div class="tax-table-item" id="table-${id}">
            <button type="button" class="btn btn-danger btn-sm remove-btn" onclick="removeTaxTable(${id})">
                <i class="bi bi-x"></i>
            </button>
            <div class="mb-3">
                <label class="form-label small">{{ _('Nombre de la tabla') }}</label>
                <input type="text" class="form-control form-control-sm table-name" 
                       value="${name || ''}" placeholder="{{ _('Ej: income_tax_brackets') }}"
                       onchange="updateJsonPreview()">
            </div>
            <div class="brackets-container" id="brackets-${id}">
                <!-- Brackets will be added here -->
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addBracket(${id})">
                <i class="bi bi-plus-lg me-1"></i>{{ _('Agregar Tramo') }}
            </button>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    
    // Add existing brackets
    if (brackets && brackets.length > 0) {
        brackets.forEach(bracket => addBracket(id, bracket));
    }
    
    updateJsonPreview();
}

function removeTaxTable(id) {
    document.getElementById(`table-${id}`).remove();
    updateJsonPreview();
}

function addBracket(tableId, data = null) {
    const container = document.getElementById(`brackets-${tableId}`);
    const html = `
        <div class="bracket-row">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <input type="number" class="form-control form-control-sm bracket-min" 
                           value="${data?.min ?? ''}" placeholder="{{ _('Mín') }}"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col">
                    <input type="number" class="form-control form-control-sm bracket-max" 
                           value="${data?.max ?? ''}" placeholder="{{ _('Máx') }}"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col">
                    <input type="number" class="form-control form-control-sm bracket-rate" 
                           value="${data?.rate ?? ''}" placeholder="{{ _('Tasa') }}" step="0.01"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col">
                    <input type="number" class="form-control form-control-sm bracket-fixed" 
                           value="${data?.fixed ?? ''}" placeholder="{{ _('Fijo') }}"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col">
                    <input type="number" class="form-control form-control-sm bracket-over" 
                           value="${data?.over ?? ''}" placeholder="{{ _('Sobre') }}"
                           onchange="updateJsonPreview()">
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.bracket-row').remove(); updateJsonPreview();">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    updateJsonPreview();
}

function updateOutputSelect() {
    const select = document.getElementById('output-variable');
    const currentValue = select.value;
    select.innerHTML = '<option value="">{{ _("Seleccionar variable de resultado...") }}</option>';
    
    // Add all input names
    document.querySelectorAll('.input-name').forEach(input => {
        if (input.value) {
            select.innerHTML += `<option value="${input.value}">${input.value} (input)</option>`;
        }
    });
    
    // Add all step names
    document.querySelectorAll('.step-name').forEach(input => {
        if (input.value) {
            select.innerHTML += `<option value="${input.value}">${input.value} (step)</option>`;
        }
    });
    
    select.value = currentValue;
}

function collectSchemaFromEditor() {
    const newSchema = {
        meta: {
            name: document.getElementById('meta-name').value,
            reference_currency: document.getElementById('meta-reference-currency').value,
            description: document.getElementById('meta-description').value
        },
        inputs: [],
        steps: [],
        tax_tables: {},
        output: document.getElementById('output-variable').value
    };
    
    // Collect inputs
    document.querySelectorAll('.input-item').forEach(item => {
        const input = {
            name: item.querySelector('.input-name').value,
            type: item.querySelector('.input-type').value
        };
        // Get source from either the select dropdown or the custom input field
        const selectEl = item.querySelector('.input-source-select');
        const customEl = item.querySelector('.input-source-custom');
        let source = '';
        if (selectEl && selectEl.value && selectEl.value !== '__custom__' && selectEl.value !== '') {
            source = selectEl.value;
        } else if (customEl) {
            source = customEl.value;
        }
        if (source) {
            if (source.includes('.')) {
                input.source = source;
            } else if (!isNaN(source)) {
                input.default = parseFloat(source);
            } else {
                input.default = source;
            }
        }
        const desc = item.querySelector('.input-description').value;
        if (desc) input.description = desc;
        
        if (input.name) newSchema.inputs.push(input);
    });
    
    // Collect steps
    document.querySelectorAll('.step-item').forEach(item => {
        const type = item.dataset.type;
        const step = {
            name: item.querySelector('.step-name').value,
            type: type
        };
        
        switch(type) {
            case 'calculation':
                step.formula = item.querySelector('.step-formula').value;
                break;
            case 'conditional':
                step.condition = {
                    left: item.querySelector('.step-cond-left').value,
                    operator: item.querySelector('.step-cond-op').value,
                    right: item.querySelector('.step-cond-right').value
                };
                // Try to parse right value as number
                if (!isNaN(step.condition.right)) {
                    step.condition.right = parseFloat(step.condition.right);
                }
                step.if_true = item.querySelector('.step-if-true').value;
                step.if_false = item.querySelector('.step-if-false').value;
                break;
            case 'tax_lookup':
                step.table = item.querySelector('.step-table').value;
                step.input = item.querySelector('.step-input').value;
                break;
            case 'assignment':
                step.value = item.querySelector('.step-value').value;
                break;
        }
        
        const desc = item.querySelector('.step-description').value;
        if (desc) step.description = desc;
        
        if (step.name) newSchema.steps.push(step);
    });
    
    // Collect tax tables
    document.querySelectorAll('.tax-table-item').forEach(item => {
        const tableName = item.querySelector('.table-name').value;
        if (!tableName) return;
        
        const brackets = [];
        item.querySelectorAll('.bracket-row').forEach(row => {
            const bracket = {};
            const min = row.querySelector('.bracket-min').value;
            const max = row.querySelector('.bracket-max').value;
            const rate = row.querySelector('.bracket-rate').value;
            const fixed = row.querySelector('.bracket-fixed').value;
            const over = row.querySelector('.bracket-over').value;
            
            if (min !== '') bracket.min = parseFloat(min);
            if (max !== '') bracket.max = parseFloat(max);
            else bracket.max = null;
            if (rate !== '') bracket.rate = parseFloat(rate);
            if (fixed !== '') bracket.fixed = parseFloat(fixed);
            if (over !== '') bracket.over = parseFloat(over);
            
            if (Object.keys(bracket).length > 0) brackets.push(bracket);
        });
        
        if (brackets.length > 0) {
            newSchema.tax_tables[tableName] = brackets;
        }
    });
    
    return newSchema;
}

function updateJsonPreview() {
    schema = collectSchemaFromEditor();
    document.getElementById('json-preview').value = JSON.stringify(schema, null, 2);
    updateOutputSelect();
    generateTestInputs();
}

function generateTestInputs() {
    const container = document.getElementById('test-inputs-container');
    container.innerHTML = '';
    
    schema.inputs.forEach(input => {
        const html = `
            <div class="mb-2">
                <label class="form-label small">${input.name}</label>
                <input type="number" class="form-control form-control-sm test-input" 
                       data-name="${input.name}" 
                       value="${input.default || 0}" step="0.01">
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    });
}

function copyJson() {
    const textarea = document.getElementById('json-preview');
    textarea.select();
    document.execCommand('copy');
    alert('{{ _("JSON copiado al portapapeles") }}');
}

function formatJson() {
    const textarea = document.getElementById('json-preview');
    try {
        const json = JSON.parse(textarea.value);
        textarea.value = JSON.stringify(json, null, 2);
    } catch (e) {
        alert('{{ _("JSON inválido") }}');
    }
}

function loadExample() {
    if (confirm('{{ _("¿Cargar el ejemplo de impuesto progresivo? Esto reemplazará el esquema actual.") }}')) {
        schema = JSON.parse(JSON.stringify(exampleSchema));
        loadSchemaToEditor();
        updateJsonPreview();
        alert('{{ _("Ejemplo cargado exitosamente") }}');
    }
}

async function saveSchema() {
    try {
        const schemaToSave = collectSchemaFromEditor();
        
        const response = await fetch('{{ url_for("calculation_rule.save_schema", id=rule.id) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ schema: schemaToSave })
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('{{ _("Esquema guardado exitosamente") }}');
        } else {
            alert('{{ _("Error: ") }}' + result.error);
        }
    } catch (e) {
        alert('{{ _("Error al guardar: ") }}' + e.message);
    }
}

async function testCalculation() {
    try {
        const testInputs = {};
        document.querySelectorAll('.test-input').forEach(input => {
            testInputs[input.dataset.name] = parseFloat(input.value) || 0;
        });
        
        const response = await fetch('{{ url_for("calculation_rule.test_schema", id=rule.id) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                schema: collectSchemaFromEditor(),
                inputs: testInputs 
            })
        });
        
        const result = await response.json();
        
        const resultDiv = document.getElementById('test-result');
        const resultContent = document.getElementById('test-result-content');
        
        resultDiv.style.display = 'block';
        
        if (result.success) {
            // Format result with 2 decimal places
            const formattedResult = formatResultWithDecimals(result.result);
            resultContent.innerHTML = JSON.stringify(formattedResult, null, 2);
            resultContent.classList.remove('text-danger');
            resultContent.classList.add('text-success');
        } else {
            resultContent.innerHTML = '{{ _("Error: ") }}' + result.error;
            resultContent.classList.remove('text-success');
            resultContent.classList.add('text-danger');
        }
    } catch (e) {
        alert('{{ _("Error al probar: ") }}' + e.message);
    }
}

function formatResultWithDecimals(obj) {
    if (typeof obj === 'number') {
        return parseFloat(obj.toFixed(2));
    } else if (typeof obj === 'object' && obj !== null) {
        if (Array.isArray(obj)) {
            return obj.map(item => formatResultWithDecimals(item));
        } else {
            const formatted = {};
            for (const key in obj) {
                formatted[key] = formatResultWithDecimals(obj[key]);
            }
            return formatted;
        }
    }
    return obj;
}

async function loadJsonFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    // Check file type
    if (!file.name.endsWith('.json')) {
        alert('{{ _("Por favor seleccione un archivo JSON válido") }}');
        event.target.value = '';
        return;
    }
    
    try {
        const text = await file.text();
        let jsonData;
        
        // Parse JSON
        try {
            jsonData = JSON.parse(text);
        } catch (e) {
            alert('{{ _("Error: El archivo no contiene JSON válido") }}\n' + e.message);
            event.target.value = '';
            return;
        }
        
        // Validate schema structure before loading
        const validationResult = await validateJsonSchema(jsonData);
        
        if (!validationResult.valid) {
            alert('{{ _("Error de validación") }}:\n\n' + validationResult.error);
            event.target.value = '';
            return;
        }
        
        // Show confirmation dialog
        if (confirm('{{ _("¿Cargar este esquema? Esto reemplazará el esquema actual.") }}')) {
            schema = jsonData;
            loadSchemaToEditor();
            updateJsonPreview();
            alert('{{ _("Esquema cargado exitosamente") }}');
        }
        
    } catch (e) {
        alert('{{ _("Error al leer el archivo") }}: ' + e.message);
    } finally {
        event.target.value = '';
    }
}

async function validateJsonSchema(jsonData) {
    // Basic structure validation
    if (!jsonData || typeof jsonData !== 'object') {
        return { valid: false, error: '{{ _("El esquema debe ser un objeto JSON") }}' };
    }
    
    // Check for required sections
    if (!jsonData.steps || !Array.isArray(jsonData.steps)) {
        return { valid: false, error: '{{ _("El esquema debe contener una sección \'steps\' con un array de pasos") }}' };
    }
    
    // Validate steps structure
    for (let i = 0; i < jsonData.steps.length; i++) {
        const step = jsonData.steps[i];
        if (!step.name) {
            return { valid: false, error: `{{ _("El paso") }} ${i + 1} {{ _("debe tener un campo \'name\'") }}` };
        }
        if (!step.type) {
            return { valid: false, error: `{{ _("El paso") }} ${i + 1} {{ _("debe tener un campo \'type\'") }}` };
        }
        
        // Validate step type
        const validTypes = ['calculation', 'conditional', 'tax_lookup', 'assignment'];
        if (!validTypes.includes(step.type)) {
            return { 
                valid: false, 
                error: `{{ _("El paso") }} ${i + 1} {{ _("tiene un tipo inválido") }}: '${step.type}'. {{ _("Tipos permitidos") }}: ${validTypes.join(', ')}` 
            };
        }
        
        // Validate step-specific fields
        if (step.type === 'calculation' && !step.formula) {
            return { valid: false, error: `{{ _("El paso de cálculo") }} '${step.name}' {{ _("debe tener un campo \'formula\'") }}` };
        }
        if (step.type === 'conditional' && !step.condition) {
            return { valid: false, error: `{{ _("El paso condicional") }} '${step.name}' {{ _("debe tener un campo \'condition\'") }}` };
        }
        if (step.type === 'tax_lookup' && (!step.table || !step.input)) {
            return { valid: false, error: `{{ _("El paso de búsqueda en tabla") }} '${step.name}' {{ _("debe tener campos \'table\' e \'input\'") }}` };
        }
        if (step.type === 'assignment' && step.value === undefined) {
            return { valid: false, error: `{{ _("El paso de asignación") }} '${step.name}' {{ _("debe tener un campo \'value\'") }}` };
        }
    }
    
    // Validate with backend FormulaEngine
    try {
        const response = await fetch('{{ url_for("calculation_rule.validate_schema_api", id=rule.id) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ schema: jsonData })
        });
        
        const result = await response.json();
        
        if (!result.success) {
            return { valid: false, error: result.error };
        }
        
        return { valid: true };
    } catch (e) {
        // If backend validation fails, still allow if basic validation passed
        console.warn('Backend validation failed:', e);
        return { valid: true };
    }
}
</script>

<!-- Include SortableJS library -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
{% endblock %}
