<?php
declare(strict_types=1);
require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';

$pageTitle = 'Importación de Datos';
$activeMenu = 'importar';
$basePath = '..';

$conn = db();
$token = csrfToken();

$logs = $conn->query('SELECT * FROM importaciones_log ORDER BY creado_en DESC LIMIT 20');

require __DIR__ . '/../includes/header.php';
?>
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-upload"></i> Importación de datos (CSV)</h4>
</div>

<div class="row g-4">
  <div class="col-lg-5">
    <div class="card shadow-sm">
      <div class="card-body">
        <form id="formImportar">
          <input type="hidden" name="csrf_token" value="<?= h($token) ?>">

          <div class="mb-3">
            <label class="form-label">Tipo de datos a importar</label>
            <select name="tipo" id="selTipo" class="form-select" required>
              <option value="">Seleccione...</option>
              <option value="vendedores">Vendedores</option>
              <option value="clientes">Clientes</option>
              <option value="productos">Productos</option>
              <option value="ventas">Ventas</option>
              <option value="cartera">Cartera (saldos vigentes)</option>
              <option value="recaudos">Recaudos</option>
            </select>
            <div class="form-text">
              Orden recomendado para carga inicial: Vendedores → Clientes → Productos → Ventas → Cartera → Recaudos.
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Archivo CSV</label>
            <input type="file" name="archivo" id="inpArchivo" class="form-control" accept=".csv" required>
            <div class="form-text">Máximo <?= MAX_UPLOAD_MB ?>MB. Delimitador coma (,) o punto y coma (;).</div>
          </div>

          <button type="submit" class="btn btn-primary" id="btnSubmit">
            <i class="bi bi-cloud-upload"></i> Procesar archivo
          </button>
          <a href="#" id="linkPlantilla" class="btn btn-outline-secondary" target="_blank">
            <i class="bi bi-download"></i> Descargar plantilla
          </a>
        </form>

        <div id="resultadoImportacion" class="mt-4" style="display:none;"></div>
      </div>
    </div>
  </div>

  <div class="col-lg-7">
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <strong>Historial de importaciones recientes</strong>
      </div>
      <div class="card-body p-0">
        <table class="table table-sm table-striped mb-0">
          <thead>
            <tr><th>Fecha</th><th>Tipo</th><th>Archivo</th><th>Leídas</th><th>Insert.</th><th>Actual.</th><th>Errores</th></tr>
          </thead>
          <tbody>
            <?php while ($l = $logs->fetch_assoc()): ?>
            <tr>
              <td><?= h($l['creado_en']) ?></td>
              <td><span class="badge bg-secondary"><?= h($l['tipo']) ?></span></td>
              <td class="text-truncate" style="max-width:160px;" title="<?= h($l['archivo']) ?>"><?= h($l['archivo']) ?></td>
              <td><?= (int) $l['filas_leidas'] ?></td>
              <td class="text-success"><?= (int) $l['filas_insertadas'] ?></td>
              <td class="text-primary"><?= (int) $l['filas_actualizadas'] ?></td>
              <td class="<?= $l['filas_error'] > 0 ? 'text-danger' : '' ?>"><?= (int) $l['filas_error'] ?></td>
            </tr>
            <?php endwhile; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<?php
$extraScripts = <<<HTML
<script>
const plantillas = {
  vendedores: '../plantillas/vendedores_template.csv',
  clientes: '../plantillas/clientes_template.csv',
  productos: '../plantillas/productos_template.csv',
  ventas: '../plantillas/ventas_template.csv',
  cartera: '../plantillas/cartera_template.csv',
  recaudos: '../plantillas/recaudos_template.csv',
};
const selTipo = document.getElementById('selTipo');
const linkPlantilla = document.getElementById('linkPlantilla');
selTipo.addEventListener('change', function () {
  linkPlantilla.href = plantillas[this.value] || '#';
});

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

document.getElementById('formImportar').addEventListener('submit', async function (e) {
  e.preventDefault();
  const btn = document.getElementById('btnSubmit');
  const resultado = document.getElementById('resultadoImportacion');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Procesando...';
  resultado.style.display = 'none';

  try {
    const formData = new FormData(this);
    const resp = await fetch('procesar.php', { method: 'POST', body: formData });
    const data = await resp.json();

    let html = '';
    if (data.ok) {
      html += '<div class="alert alert-success"><strong>Importación completada.</strong><br>';
      html += 'Filas leídas: ' + data.filas_leidas + ' · Insertadas: ' + data.insertadas + ' · Actualizadas: ' + data.actualizadas + '</div>';
      if (data.errores && data.errores.length) {
        html += '<div class="alert alert-warning"><strong>Observaciones (' + data.errores.length + '):</strong>';
        html += '<ul class="mb-0 small">' + data.errores.slice(0, 50).map(e => '<li>' + escapeHtml(e) + '</li>').join('') + '</ul></div>';
      }
      setTimeout(() => window.location.reload(), 4000);
    } else {
      html = '<div class="alert alert-danger"><strong>Error:</strong> ' + escapeHtml(data.error) + '</div>';
    }
    resultado.innerHTML = html;
    resultado.style.display = 'block';
  } catch (err) {
    resultado.innerHTML = '<div class="alert alert-danger">Error de red: ' + err.message + '</div>';
    resultado.style.display = 'block';
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-cloud-upload"></i> Procesar archivo';
  }
});
</script>
HTML;
require __DIR__ . '/../includes/footer.php';
?>
