rips_manager/app/templates/automation.html

{% extends "base.html" %}
{% block title %}Envío Masivo{% endblock %}
{% block header %}Envío Masivo a TNS{% endblock %}
{% block content %}
<div class="max-w-4xl space-y-6">

  <!-- Panel de control -->
  <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-blue-500"></i>Envío automático por fecha
      </h3>
      <p class="text-xs text-gray-500 mt-1">
        Selecciona una fecha para ver cuántos pacientes y RDA se enviarán a TNS.
      </p>
    </div>
    <div class="p-6">
      <div class="flex items-end gap-4">
        <div class="flex-1">
          <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de atención</label>
          <input type="date" id="fecha-input" value="{{ today }}"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        <button onclick="previewAutomation()"
          id="btn-preview"
          class="px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 whitespace-nowrap">
          <i class="fas fa-eye"></i> Vista previa
        </button>
        <button onclick="runAutomation()"
          id="btn-run"
          class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
          disabled>
          <i class="fas fa-play"></i> Ejecutar envío
        </button>
      </div>
    </div>
  </div>

  <!-- Vista previa de datos -->
  <div id="preview-section" 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-search mr-2 text-gray-500"></i>Resumen de la fecha</h3>
      <span id="preview-fecha" class="text-sm text-gray-500"></span>
    </div>
    <div class="p-6 space-y-4">
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-blue-50 rounded-lg p-4 text-center">
          <div id="cnt-pacientes" class="text-3xl font-bold text-blue-600">0</div>
          <div class="text-sm text-blue-700 mt-1">Pacientes</div>
        </div>
        <div class="bg-purple-50 rounded-lg p-4 text-center">
          <div id="cnt-recepciones" class="text-3xl font-bold text-purple-600">0</div>
          <div class="text-sm text-purple-700 mt-1">Recepciones</div>
        </div>
        <div class="bg-green-50 rounded-lg p-4 text-center">
          <div id="cnt-examenes" class="text-3xl font-bold text-green-600">0</div>
          <div class="text-sm text-green-700 mt-1">Exámenes</div>
        </div>
      </div>
      <div>
        <p class="text-xs font-medium text-gray-600 mb-2">Primeros pacientes:</p>
        <div id="preview-table" class="divide-y divide-gray-100 border border-gray-100 rounded-lg overflow-hidden text-sm"></div>
      </div>
    </div>
  </div>

  <!-- Progreso -->
  <div id="progress-section" class="hidden space-y-4">

    <!-- Paso 1 -->
    <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">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">1</div>
          <span class="font-semibold text-gray-800">Terceros (pacientes)</span>
        </div>
        <span id="p1-badge" class="text-sm text-gray-400">Esperando...</span>
      </div>
      <div id="p1-detalle" class="divide-y divide-gray-100 hidden"></div>
    </div>

    <!-- Paso 2 -->
    <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">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white text-sm font-bold">2</div>
          <span class="font-semibold text-gray-800">RDA Paciente (recepciones)</span>
        </div>
        <span id="p2-badge" class="text-sm text-gray-400">Esperando...</span>
      </div>
      <div id="p2-detalle" class="divide-y divide-gray-100 hidden"></div>
    </div>

  </div>
</div>

<script>
async function previewAutomation() {
  const fecha = document.getElementById('fecha-input').value;
  if (!fecha) { showToast('Selecciona una fecha', 'error'); return; }

  const btn = document.getElementById('btn-preview');
  showLoading(btn);

  document.getElementById('preview-section').classList.add('hidden');
  document.getElementById('progress-section').classList.add('hidden');
  document.getElementById('btn-run').disabled = true;

  const form = new FormData();
  form.append('fecha', fecha);

  try {
    const resp = await fetch('/automation/preview', { method: 'POST', body: form, credentials: 'include' });
    const data = await resp.json();
    hideLoading(btn, '<i class="fas fa-eye"></i> Vista previa');

    if (!data.success) {
      showToast(data.message || 'Error al consultar', 'error');
      return;
    }

    document.getElementById('cnt-pacientes').textContent = data.pacientes;
    document.getElementById('cnt-recepciones').textContent = data.recepciones;
    document.getElementById('cnt-examenes').textContent = data.examenes;
    document.getElementById('preview-fecha').textContent = data.fecha;

    const table = document.getElementById('preview-table');
    if (data.pacientes === 0) {
      table.innerHTML = '<div class="p-4 text-gray-400 text-center">No hay pacientes para esta fecha</div>';
      showToast('No hay datos para esa fecha', 'warning');
    } else {
      table.innerHTML = data.pacientes_preview.map(p => `
        <div class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-50">
          <span class="text-gray-400 text-xs w-8">${p.tipo}</span>
          <span class="text-gray-500 w-32 font-mono">${p.doc}</span>
          <span class="text-gray-700 flex-1">${p.nombre}</span>
        </div>
      `).join('') + (data.hay_mas ? '<div class="px-4 py-2 text-xs text-gray-400">... y más pacientes</div>' : '');

      document.getElementById('btn-run').disabled = false;
      showToast(`${data.pacientes} paciente(s) y ${data.recepciones} recepción(es) encontradas`, 'success');
    }

    document.getElementById('preview-section').classList.remove('hidden');

  } catch (e) {
    hideLoading(btn, '<i class="fas fa-eye"></i> Vista previa');
    showToast('Error de conexión', 'error');
  }
}

async function runAutomation() {
  const fecha = document.getElementById('fecha-input').value;
  if (!fecha) { showToast('Selecciona una fecha', 'error'); return; }

  if (!confirm(`¿Enviar a TNS todos los pacientes y RDA del ${fecha}?`)) return;

  const btn = document.getElementById('btn-run');
  showLoading(btn);
  document.getElementById('btn-preview').disabled = true;
  document.getElementById('progress-section').classList.remove('hidden');
  document.getElementById('p1-badge').textContent = 'Enviando...';
  document.getElementById('p1-badge').className = 'text-sm text-blue-500';
  document.getElementById('p2-badge').textContent = 'Esperando...';
  document.getElementById('p2-badge').className = 'text-sm text-gray-400';

  const form = new FormData();
  form.append('fecha', fecha);

  try {
    const resp = await fetch('/automation/run', { method: 'POST', body: form, credentials: 'include' });
    const data = await resp.json();
    hideLoading(btn, '<i class="fas fa-play"></i> Ejecutar envío');
    document.getElementById('btn-preview').disabled = false;

    if (!data.success) {
      showToast(data.message || 'Error', 'error');
      document.getElementById('p1-badge').textContent = 'Error';
      document.getElementById('p1-badge').className = 'text-sm text-red-500';
      return;
    }

    const r = data.resultado;

    renderBadge('p1-badge', r.paso1_terceros.enviados, r.paso1_terceros.errores);
    renderDetalle('p1-detalle', r.paso1_terceros.detalle.map(d => ({
      col1: d.doc, col2: d.nombre,
      col3: `${d.ok ? '✅' : '❌'} ${d.msg || ''}`, ok: d.ok,
    })));

    renderBadge('p2-badge', r.paso2_rda.enviados, r.paso2_rda.errores);
    renderDetalle('p2-detalle', r.paso2_rda.detalle.map(d => ({
      col1: `Fac. ${d.factura}`,
      col2: `Pac. ${d.paciente} — ${d.examenes} examen(es)`,
      col3: `${d.ok ? '✅' : '❌'} ${d.msg || ''}`, ok: d.ok,
    })));

    const totalErr = r.paso1_terceros.errores + r.paso2_rda.errores;
    showToast(totalErr === 0 ? 'Envío completado sin errores' : `Completado con ${totalErr} error(es)`,
              totalErr === 0 ? 'success' : 'warning');

  } catch (e) {
    hideLoading(btn, '<i class="fas fa-play"></i> Ejecutar envío');
    document.getElementById('btn-preview').disabled = false;
    showToast('Error de conexión', 'error');
  }
}

function renderBadge(id, enviados, errores) {
  const el = document.getElementById(id);
  if (errores === 0) {
    el.textContent = `✅ ${enviados} enviados`;
    el.className = 'text-sm text-green-600 font-medium';
  } else if (enviados > 0) {
    el.textContent = `⚠️ ${enviados} OK / ${errores} errores`;
    el.className = 'text-sm text-yellow-600 font-medium';
  } else {
    el.textContent = `❌ ${errores} errores`;
    el.className = 'text-sm text-red-600 font-medium';
  }
}

function renderDetalle(id, items) {
  const el = document.getElementById(id);
  if (!items || items.length === 0) return;
  el.innerHTML = items.map(i => `
    <div class="px-6 py-2 flex items-center gap-3 text-sm ${i.ok ? '' : 'bg-red-50'}">
      <span class="text-gray-500 w-28 shrink-0">${i.col1}</span>
      <span class="text-gray-700 flex-1 truncate">${i.col2}</span>
      <span class="text-xs ${i.ok ? 'text-green-600' : 'text-red-600'} shrink-0 max-w-xs truncate">${i.col3}</span>
    </div>
  `).join('');
  el.classList.remove('hidden');
}
</script>
{% endblock %}