{% extends "base.html" %}
{% block title %}Transacción RIPS{% endblock %}
{% block header %}Envío de Transacción RIPS{% endblock %}
{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800"><i class="fas fa-cog mr-2 text-blue-500"></i>Generar y Enviar</h3>
            </div>
            <div class="p-6">
                <form id="form-transaccion" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Consulta SQL</label>
                        <select name="query_id" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            <option value="">Seleccionar consulta...</option>
                            {% for q in queries %}
                            <option value="{{ q.id }}">{{ q.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Factura <span class="text-xs text-gray-400">(opcional)</span></label>
                        <input type="text" name="factura"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                            placeholder="Ej: LHXC03404">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Inicio</label>
                            <input type="date" name="fecha_inicio" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fecha Fin</label>
                            <input type="date" name="fecha_fin" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                    </div>
                    <div class="flex space-x-3">
                        <button type="button" onclick="previewTransaccion()"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200">
                            <i class="fas fa-eye mr-1"></i> Vista Previa
                        </button>
                        <button type="button" onclick="sendTransaccion()"
                            class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium">
                            <i class="fas fa-paper-plane mr-1"></i> Enviar a API
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800"><i class="fas fa-eye mr-2 text-blue-500"></i>JSON Generado</h3>
            </div>
            <div class="p-6">
                <div id="preview-info" class="text-xs text-gray-500 mb-2"></div>
                <pre id="json-preview" class="text-xs font-mono bg-gray-50 rounded-lg p-4 overflow-x-auto max-h-96 text-gray-600"><i class="fas fa-info-circle mr-1"></i> Haz clic en "Vista Previa" para ver el JSON</pre>
            </div>
        </div>
    </div>

    <div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800"><i class="fas fa-history mr-2 text-blue-500"></i>Últimos Envíos</h3>
            </div>
            <div class="p-4">
                {% if envios %}
                <div class="space-y-2">
                    {% for e in envios %}
                    <div class="p-3 rounded-lg border border-gray-100 text-sm">
                        <div class="flex justify-between items-center">
                            <span class="font-medium text-gray-700 text-xs">{{ e.factura or 'N/A' }}</span>
                            <span class="px-2 py-0.5 rounded text-xs font-medium {% if e.status == 'success' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                                {{ 'Exitoso' if e.status == 'success' else 'Error' }}
                            </span>
                        </div>
                        <div class="flex justify-between text-xs text-gray-400 mt-1">
                            <span>{{ e.pacientes_count or 0 }} pacientes / {{ e.servicios_count or 0 }} servicios</span>
                            <span>{{ e.created_at[:19] }}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-400 py-4 text-sm">No hay envíos de transacciones aún</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
async function previewTransaccion() {
    const form = document.getElementById('form-transaccion');
    const data = new FormData(form);
    const btn = form.querySelector('[onclick="previewTransaccion()"]');
    showLoading(btn);

    const resp = await fetch('/transaccion/preview', {method:'POST', body: data, credentials: 'include'});
    const result = await resp.json();
    hideLoading(btn, '<i class="fas fa-eye mr-1"></i> Vista Previa');

    document.getElementById('preview-info').innerHTML = result.success
        ? `<span class="text-green-600"><i class="fas fa-check-circle"></i> ${result.rows_count} registros, ${result.grupos_count} grupos, ${result.total_json} JSON(s)</span>`
        : `<span class="text-red-600">Error: ${result.message}</span>`;

    const pre = document.getElementById('json-preview');
    if (result.success && result.generated_json) {
        pre.innerHTML = syntaxHighlight(result.generated_json);
    } else {
        pre.innerHTML = '<span class="text-red-600">Error: ' + (result.message || 'Sin datos') + '</span>';
    }
}

async function sendTransaccion() {
    if (!confirm('¿Enviar transacción(es) RIPS a la API?')) return;
    const form = document.getElementById('form-transaccion');
    const data = new FormData(form);
    const btn = form.querySelector('[onclick="sendTransaccion()"]');
    showLoading(btn);

    const resp = await fetch('/transaccion/send', {method:'POST', body: data, credentials: 'include'});
    const result = await resp.json();
    hideLoading(btn, '<i class="fas fa-paper-plane mr-1"></i> Enviar a API');

    if (result.success) {
        showToast(`Envío exitoso! ${result.total_enviados} transacciones`, 'success');
        setTimeout(() => location.reload(), 1500);
    } else {
        showToast(`Enviados: ${result.total_enviados}, Errores: ${result.total_errores}`, result.total_errores > 0 ? 'warning' : 'success');
    }
}

function syntaxHighlight(obj) {
    let json = JSON.stringify(obj, null, 2);
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(?:[^"\\]|\\.)*")(?=\s*:)/g, '<span class="text-blue-600">$1</span>')
               .replace(/:(\s*)("(?:[^"\\]|\\.)*")/g, ': $1<span class="text-green-600">$2</span>')
               .replace(/:(\s*)(\d+)/g, ': $1<span class="text-orange-600">$2</span>')
               .replace(/:(\s*)(null|true|false)/g, ': $1<span class="text-purple-600">$2</span>');
}
</script>
{% endblock %}