{% extends "base.html" %}
{% block title %}Escanear Recibo{% endblock %}
{% block page_title %}Escanear Recibo / OCR{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card">
      <div class="card-body p-5 text-center">
        <i class="bi bi-upc-scan" style="font-size:3.5rem; color:var(--accent)"></i>
        <h4 class="mt-3 mb-2 fw-bold">Escanear ticket o factura</h4>
        <p class="text-muted mb-4">
          Sube una imagen o PDF de un recibo y ContaApp extraerá automáticamente el importe,
          la fecha y el proveedor para crear el ticket de gasto.
        </p>

        <form method="post" enctype="multipart/form-data" id="form-ocr">
          <div class="mb-4">
            <label for="archivo" class="form-label fw-semibold">Selecciona el archivo</label>
            <input type="file" name="archivo" id="archivo" class="form-control form-control-lg"
                   accept=".pdf,.png,.jpg,.jpeg,.webp" required
                   onchange="previewFile(this)">
            <div class="form-text">Formatos: PDF, PNG, JPG, WEBP</div>
          </div>

          <div id="preview-wrap" class="mb-3 d-none">
            <img id="preview-img" src="" class="img-fluid rounded border mb-2" style="max-height:250px">
            <div id="preview-pdf" class="p-3 bg-light rounded text-muted small d-none">
              <i class="bi bi-file-earmark-pdf text-danger fs-4 me-2"></i>
              <span id="preview-pdf-name"></span>
            </div>
          </div>

          <button type="submit" class="btn btn-primary btn-lg w-100" id="btn-ocr">
            <i class="bi bi-magic me-2"></i>Analizar archivo
          </button>
        </form>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="text-muted small fw-semibold mb-3">¿CÓMO FUNCIONA?</div>
        <div class="d-flex gap-3 mb-2">
          <i class="bi bi-file-earmark-pdf text-danger fs-5"></i>
          <div>
            <div class="fw-semibold small">PDF</div>
            <div class="text-muted small">Extracción directa del texto digital. Alta precisión.</div>
          </div>
        </div>
        <div class="d-flex gap-3">
          <i class="bi bi-image text-primary fs-5"></i>
          <div>
            <div class="fw-semibold small">Imagen (foto/escáner)</div>
            <div class="text-muted small">OCR automático si el motor de Windows está disponible. Si no, se muestra la imagen para que puedas rellenar el formulario.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function previewFile(inp) {
  var wrap = document.getElementById('preview-wrap');
  var img  = document.getElementById('preview-img');
  var pdf  = document.getElementById('preview-pdf');
  var pdfName = document.getElementById('preview-pdf-name');
  wrap.classList.remove('d-none');
  if (inp.files && inp.files[0]) {
    var f = inp.files[0];
    if (f.type === 'application/pdf') {
      img.classList.add('d-none');
      pdf.classList.remove('d-none');
      pdfName.textContent = f.name;
    } else {
      pdf.classList.add('d-none');
      img.classList.remove('d-none');
      img.src = URL.createObjectURL(f);
    }
  }
}
document.getElementById('form-ocr').addEventListener('submit', function() {
  var btn = document.getElementById('btn-ocr');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Analizando...';
});
</script>
{% endblock %}