{% extends "base.html" %}
{% block title %}Prueba RDA{% endblock %}
{% block header %}Prueba RDA Individual{% endblock %}
{% block content %}
<div class="max-w-6xl space-y-6">

  <!-- Filtros y candidatos -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between flex-wrap gap-2">
      <h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Candidatos disponibles</h3>
      <div class="flex gap-2 items-center flex-wrap">
        <select id="filtro-tipo-usuario" onchange="onTipoUsuarioChange()"
          class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
          <option value="">Tipo usuario (todos)</option>
          <option value="11">11 — EPS / Contributivo</option>
          <option value="07">07 — Póliza</option>
          <option value="12">12 — Particular</option>
        </select>
        <input id="filtro-contrato" type="text" placeholder="Contrato (ej: 011)" value="12"
          class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm w-28">
        <input id="filtro-articulos" type="text" placeholder="Artículos (vacío = lista TNS)"
          class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm w-52"
          title="Vacío = lista predeterminada de artículos configurados en TNS.">
        <button onclick="cargarCandidatos(true)"
          class="px-4 py-1.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
          <i class="fas fa-search mr-1"></i> Buscar
        </button>
      </div>
    </div>
    <div class="p-4">
      <div id="cargando-candidatos" class="hidden text-center py-6 text-gray-400">
        <i class="fas fa-spinner fa-spin text-2xl"></i>
        <p class="mt-2 text-sm">Consultando Firebird...</p>
      </div>
      <div id="tabla-candidatos" class="hidden">
        <table class="w-full text-sm">
          <thead>
            <tr class="text-left text-xs text-gray-500 uppercase border-b">
              <th class="pb-2 pr-3">IDRECEPCION</th>
              <th class="pb-2 pr-3">Factura</th>
              <th class="pb-2 pr-3">Fecha</th>
              <th class="pb-2 pr-3">Paciente</th>
              <th class="pb-2 pr-3">Contrato</th>
              <th class="pb-2 pr-3">Exámenes</th>
              <th class="pb-2 text-right">Acciones</th>
            </tr>
          </thead>
          <tbody id="tbody-candidatos" class="divide-y divide-gray-100"></tbody>
        </table>
        <div class="mt-3 text-center">
          <button id="btn-ver-mas" onclick="verMas()"
            class="hidden px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm">
            <i class="fas fa-chevron-down mr-1"></i> Ver más
          </button>
        </div>
      </div>
      <p id="sin-candidatos" class="hidden text-center py-6 text-gray-400 text-sm">No se encontraron registros con los filtros aplicados.</p>
    </div>
  </div>

  <!-- Preview JSON -->
  <div id="preview-box" class="hidden bg-white rounded-xl shadow-sm border border-blue-200">
    <div class="px-6 py-4 border-b border-blue-100 flex items-center justify-between">
      <h3 class="font-semibold text-gray-800"><i class="fas fa-eye mr-2 text-blue-500"></i>Preview — JSON a enviar <span id="preview-id" class="text-blue-600 font-mono text-sm"></span></h3>
      <div class="flex gap-2">
        <button onclick="enviarDesdePreview()"
          class="px-4 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 font-medium">
          <i class="fas fa-paper-plane mr-1"></i> Confirmar envío
        </button>
        <button onclick="document.getElementById('preview-box').classList.add('hidden')"
          class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200">
          Cancelar
        </button>
      </div>
    </div>
    <pre id="preview-json" class="p-4 text-xs overflow-x-auto whitespace-pre-wrap bg-gray-50 text-gray-800 rounded-b-xl"></pre>
  </div>

  <!-- Envío manual -->
  <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-paper-plane mr-2 text-green-500"></i>Enviar RDA directo</h3>
    </div>
    <div class="p-6">
      <div class="flex gap-3 items-end flex-wrap">
        <div>
          <label class="block text-xs font-medium text-gray-600 mb-1">Tipo</label>
          <select id="modo" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
            <option value="idrecepcion">IDRECEPCION</option>
            <option value="factura">Factura</option>
          </select>
        </div>
        <div class="flex-1 max-w-xs">
          <label class="block text-xs font-medium text-gray-600 mb-1">Número</label>
          <input id="valor" type="text" placeholder="ej: 314863"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500">
        </div>
        <button onclick="previewManual()"
          class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200 font-medium">
          <i class="fas fa-eye mr-1"></i> Preview
        </button>
        <button onclick="enviarRDA()"
          class="px-5 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 font-medium">
          <i class="fas fa-paper-plane mr-1"></i> Enviar
        </button>
      </div>
    </div>
  </div>

  <!-- Resultado -->
  <div id="resultado-box" class="hidden bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
      <h3 class="font-semibold text-gray-800"><i class="fas fa-chart-bar mr-2 text-purple-500"></i>Resultado</h3>
      <div id="resumen-badges" class="flex gap-2"></div>
    </div>
    <div id="resultado-contenido" class="p-6 space-y-3"></div>
  </div>

</div>

<script>
let _offset = 0;
let _enviados = {}; // { idrecepcion: true/false }
let _previewId = null;

async function cargarEnviados() {
  const r = await fetch('/test-rda/enviados');
  const d = await r.json();
  _enviados = d.enviados || {};
}

function marcarFila(idrecepcion, ok) {
  _enviados[idrecepcion] = ok;
  const tr = document.getElementById('fila_' + idrecepcion);
  if (!tr) return;
  const btns = tr.querySelector('.acciones');
  if (!btns) return;
  if (ok) {
    btns.innerHTML = '<span class="px-3 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">✅ Enviado</span>';
  } else {
    btns.innerHTML = '<span class="px-3 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">❌ Error</span>'
      + btns.innerHTML;
  }
}

function renderFila(c) {
  const ya = _enviados.hasOwnProperty(c.idrecepcion);
  const ok = _enviados[c.idrecepcion];
  let acciones = '';
  if (ya && ok) {
    acciones = '<span class="px-3 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">✅ Enviado</span>';
  } else {
    acciones = `
      <button onclick="mostrarPreview(${c.idrecepcion})"
        class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs hover:bg-blue-200 mr-1">
        <i class="fas fa-eye"></i>
      </button>
      <button onclick="enviarDesde(${c.idrecepcion})"
        class="px-3 py-1 bg-green-100 text-green-700 rounded text-xs hover:bg-green-200 font-medium">
        <i class="fas fa-paper-plane mr-1"></i>Enviar
      </button>`;
    if (ya && !ok) {
      acciones = '<span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs mr-1">❌</span>' + acciones;
    }
  }
  return `<tr id="fila_${c.idrecepcion}" class="hover:bg-gray-50 ${ya && ok ? 'opacity-50' : ''}">
    <td class="py-2 pr-3 font-mono text-blue-700 font-medium">${c.idrecepcion}</td>
    <td class="py-2 pr-3 font-mono">${c.factura}</td>
    <td class="py-2 pr-3 text-gray-500 text-xs">${c.fecha}</td>
    <td class="py-2 pr-3 text-gray-600 text-xs">${c.paciente}</td>
    <td class="py-2 pr-3"><span class="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs font-mono">${c.contrato}</span></td>
    <td class="py-2 pr-3 text-gray-500 text-xs max-w-xs truncate" title="${c.examenes}">${c.examenes} <span class="text-gray-400">(${c.total})</span></td>
    <td class="py-2 text-right acciones">${acciones}</td>
  </tr>`;
}

async function cargarCandidatos(reset = false) {
  if (reset) _offset = 0;
  await cargarEnviados();
  document.getElementById('cargando-candidatos').classList.remove('hidden');
  document.getElementById('tabla-candidatos').classList.add('hidden');
  document.getElementById('sin-candidatos').classList.add('hidden');

  const contrato = document.getElementById('filtro-contrato').value.trim();
  const articulos = document.getElementById('filtro-articulos').value.trim();
  const tipoUsuario = document.getElementById('filtro-tipo-usuario').value;
  const params = new URLSearchParams({ offset: _offset });
  if (tipoUsuario) params.append('tipo_usuario', tipoUsuario);
  if (contrato) params.append('contrato', contrato);
  if (articulos) params.append('articulos', articulos);

  const resp = await fetch('/test-rda/candidatos?' + params.toString());
  const data = await resp.json();
  document.getElementById('cargando-candidatos').classList.add('hidden');

  if (data.error) {
    document.getElementById('sin-candidatos').textContent = 'Error: ' + data.error;
    document.getElementById('sin-candidatos').classList.remove('hidden');
    return;
  }

  const candidatos = data.candidatos || [];
  if (!candidatos.length && _offset === 0) {
    document.getElementById('sin-candidatos').classList.remove('hidden');
    return;
  }

  const tbody = document.getElementById('tbody-candidatos');
  if (_offset === 0) tbody.innerHTML = '';
  candidatos.forEach(c => { tbody.innerHTML += renderFila(c); });

  document.getElementById('tabla-candidatos').classList.remove('hidden');
  const btnMas = document.getElementById('btn-ver-mas');
  if (candidatos.length === 10) {
    btnMas.classList.remove('hidden');
  } else {
    btnMas.classList.add('hidden');
  }
}

async function verMas() {
  _offset += 10;
  await cargarEnviados();
  const contrato = document.getElementById('filtro-contrato').value.trim();
  const articulos = document.getElementById('filtro-articulos').value.trim();
  const tipoUsuario = document.getElementById('filtro-tipo-usuario').value;
  const params = new URLSearchParams({ offset: _offset });
  if (tipoUsuario) params.append('tipo_usuario', tipoUsuario);
  if (contrato) params.append('contrato', contrato);
  if (articulos) params.append('articulos', articulos);

  const resp = await fetch('/test-rda/candidatos?' + params.toString());
  const data = await resp.json();
  if (data.error || !data.candidatos?.length) {
    document.getElementById('btn-ver-mas').classList.add('hidden');
    return;
  }
  const tbody = document.getElementById('tbody-candidatos');
  data.candidatos.forEach(c => { tbody.innerHTML += renderFila(c); });
  if (data.candidatos.length < 10) document.getElementById('btn-ver-mas').classList.add('hidden');
}

async function mostrarPreview(idrecepcion) {
  _previewId = idrecepcion;
  document.getElementById('preview-id').textContent = '#' + idrecepcion;
  document.getElementById('preview-json').textContent = 'Cargando...';
  document.getElementById('preview-box').classList.remove('hidden');
  document.getElementById('preview-box').scrollIntoView({ behavior: 'smooth' });

  const resp = await fetch('/test-rda/preview?idrecepcion=' + idrecepcion);
  const data = await resp.json();
  if (data.error) {
    document.getElementById('preview-json').textContent = 'Error: ' + data.error;
  } else {
    document.getElementById('preview-json').textContent = JSON.stringify(data.json, null, 2);
  }
}

async function enviarDesdePreview() {
  if (!_previewId) return;
  document.getElementById('preview-box').classList.add('hidden');
  document.getElementById('modo').value = 'idrecepcion';
  document.getElementById('valor').value = _previewId;
  await enviarRDA();
}

function enviarDesde(idrecepcion) {
  _previewId = null;
  document.getElementById('modo').value = 'idrecepcion';
  document.getElementById('valor').value = idrecepcion;
  enviarRDA();
}

async function previewManual() {
  const valor = document.getElementById('valor').value.trim();
  const modo = document.getElementById('modo').value;
  if (!valor) { alert('Ingresa un número'); return; }
  if (modo === 'idrecepcion') {
    mostrarPreview(parseInt(valor));
  } else {
    alert('Preview solo disponible por IDRECEPCION');
  }
}

async function enviarRDA() {
  const modo = document.getElementById('modo').value;
  const valor = document.getElementById('valor').value.trim();
  if (!valor) { alert('Ingresa un número'); return; }

  const box = document.getElementById('resultado-box');
  const contenido = document.getElementById('resultado-contenido');
  const badges = document.getElementById('resumen-badges');
  box.classList.remove('hidden');
  contenido.innerHTML = '<div class="text-center py-8 text-gray-400"><i class="fas fa-spinner fa-spin text-3xl"></i><p class="mt-2">Enviando...</p></div>';
  badges.innerHTML = '';
  box.scrollIntoView({ behavior: 'smooth' });

  const fd = new FormData();
  fd.append('modo', modo);
  fd.append('valor', valor);

  const resp = await fetch('/test-rda/enviar', { method: 'POST', body: fd });
  const data = await resp.json();

  if (data.error) {
    contenido.innerHTML = `<div class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm"><i class="fas fa-times-circle mr-2"></i>${data.error}</div>`;
    return;
  }

  const res = data.resumen || {};
  badges.innerHTML = `
    <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">${res.rda_exitosos} exitosos</span>
    <span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">${res.rda_errores} errores</span>
    <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">${res.pacientes_procesados} pacientes</span>
  `;

  let html = '';
  (data.pasos || []).forEach(p => {
    const icon = p.ok ? '✅' : '❌';
    if (p.tipo === 'tercero') {
      html += `
        <div class="flex items-start gap-3 p-3 rounded-lg border ${p.ok ? 'border-green-100 bg-green-50' : 'border-red-100 bg-red-50'}">
          <span class="text-base">${icon}</span>
          <div>
            <p class="text-sm font-medium text-gray-700">Tercero: <span class="font-mono text-blue-700">${p.codigo}</span> — ${esc(p.nombre || '')}</p>
            <p class="text-xs mt-0.5 ${p.ok ? 'text-green-700' : 'text-red-700'}">${esc(p.mensaje || '')}</p>
          </div>
        </div>`;
    } else {
      marcarFila(p.idrecepcion, p.ok);
      const uid = 'j' + p.idrecepcion + '_' + Math.random().toString(36).slice(2);
      const uid2 = 'r' + p.idrecepcion + '_' + Math.random().toString(36).slice(2);

      let respHtml = '(sin respuesta)';
      try {
        const obj = JSON.parse(p.respuesta_tns || '{}');
        respHtml = syntaxHL(obj);
      } catch(e) { respHtml = esc(p.respuesta_tns || ''); }

      let jsonHtml = '{}';
      try { jsonHtml = syntaxHL(p.json_enviado || {}); } catch(e) {}

      const msgClass = p.ok
        ? 'border-green-300 bg-green-100 text-green-900'
        : 'border-red-300 bg-red-100 text-red-900';

      html += `
        <div class="rounded-lg border ${p.ok ? 'border-green-200 bg-green-50/50' : 'border-red-200 bg-red-50/50'}">
          <div class="p-4 flex items-start gap-3">
            <span class="text-lg leading-tight shrink-0">${icon}</span>
            <div class="flex-1 min-w-0">
              <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
                <span class="font-medium text-gray-800">IDRECEPCION <span class="font-mono text-blue-700">${p.idrecepcion}</span></span>
                <span class="text-gray-400">·</span>
                <span class="text-gray-600">Factura <span class="font-mono font-medium">${esc(String(p.factura||''))}</span></span>
                <span class="text-gray-400">·</span>
                <span class="text-gray-600">Contrato <span class="font-mono font-medium text-purple-700">${esc(String(p.contrato||''))}</span></span>
                <span class="px-1.5 py-0.5 rounded text-xs font-mono ${p.status >= 400 ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-500'}">HTTP ${p.status||'?'}</span>
              </div>
              <p class="text-xs text-gray-500 mt-1">Exámenes: <span class="font-mono">${esc((p.examenes||[]).join(', '))}</span></p>
              <div class="mt-2 px-3 py-2 rounded-lg border ${msgClass} text-sm font-medium">
                ${esc(p.mensaje || '(sin mensaje de TNS)')}
              </div>
            </div>
            <div class="flex flex-col gap-1.5 shrink-0">
              <button onclick="togglePre('${uid2}')"
                class="px-2.5 py-1 text-xs bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded font-medium whitespace-nowrap">
                <i class="fas fa-server mr-1"></i>Resp. TNS
              </button>
              <button onclick="togglePre('${uid}')"
                class="px-2.5 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 rounded font-medium whitespace-nowrap">
                <i class="fas fa-code mr-1"></i>JSON env.
              </button>
            </div>
          </div>
          <pre id="${uid2}" class="hidden mx-4 mb-1 p-3 bg-amber-950 text-amber-100 rounded-lg text-xs overflow-x-auto whitespace-pre-wrap">${respHtml}</pre>
          <pre id="${uid}"  class="hidden mx-4 mb-4 p-3 bg-gray-900 text-green-300 rounded-lg text-xs overflow-x-auto whitespace-pre-wrap">${jsonHtml}</pre>
        </div>`;
    }
  });
  contenido.innerHTML = html;
}

function onTipoUsuarioChange() {
  const tipo = document.getElementById('filtro-tipo-usuario').value;
  const contratoInput = document.getElementById('filtro-contrato');
  if (tipo === '12') {
    contratoInput.value = '';
    contratoInput.disabled = true;
    contratoInput.classList.add('bg-gray-100', 'text-gray-400');
  } else {
    contratoInput.disabled = false;
    contratoInput.classList.remove('bg-gray-100', 'text-gray-400');
    if (!contratoInput.value) contratoInput.value = '011';
  }
}

cargarCandidatos(true);

function esc(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function togglePre(id) {
  document.getElementById(id).classList.toggle('hidden');
}

function syntaxHL(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 style="color:#93c5fd">$1</span>')
    .replace(/:(\s*)("(?:[^"\\]|\\.)*")/g,': $1<span style="color:#86efac">$2</span>')
    .replace(/:(\s*)(\d+(?:\.\d+)?)/g,': $1<span style="color:#fdba74">$2</span>')
    .replace(/:(\s*)(null|true|false)/g,': $1<span style="color:#d8b4fe">$2</span>');
}
</script>
{% endblock %}