{% extends "base.html" %}
{% block title %}Resultado OCR{% endblock %}
{% block page_title %}Resultado del Análisis{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('ocr.index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Analizar otro
</a>
{% endblock %}

{% block extra_head %}
<style>
  #texto-ocr { font-family: monospace; font-size: .78rem; max-height: 300px; overflow-y: auto; }
</style>
{% endblock %}

{% block content %}
<div class="row g-4">

  <!-- Izquierda: resultado del análisis -->
  <div class="col-lg-5">
    {% if img_b64 %}
    <div class="card mb-3">
      <div class="card-header small fw-semibold"><i class="bi bi-image me-2"></i>Imagen original</div>
      <div class="card-body p-2 text-center">
        <img src="{{ img_b64 }}" class="img-fluid rounded" style="max-height:400px">
      </div>
    </div>
    {% endif %}

    {% if texto %}
    <div class="card">
      <div class="card-header small fw-semibold">
        <i class="bi bi-file-text me-2"></i>
        Texto extraído {% if es_pdf %}<span class="badge bg-danger ms-1">PDF</span>{% else %}<span class="badge bg-primary ms-1">OCR</span>{% endif %}
      </div>
      <div class="card-body p-2">
        <pre id="texto-ocr" class="mb-0 p-2 bg-light rounded">{{ texto }}</pre>
      </div>
    </div>
    {% else %}
    <div class="card">
      <div class="card-body text-center py-4 text-muted">
        <i class="bi bi-exclamation-circle fs-3 mb-2"></i>
        <p class="mb-0">No se pudo extraer texto automáticamente.<br>
        Rellena el formulario manualmente usando la imagen de arriba.</p>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Derecha: formulario pre-rellenado -->
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header fw-semibold">
        <i class="bi bi-pencil-square me-2"></i>Crear ticket de gasto
        {% if campos.importe or campos.fecha %}
        <span class="badge bg-success ms-2">Campos detectados automáticamente</span>
        {% endif %}
      </div>
      <div class="card-body p-4">
        <form method="post" action="{{ url_for('tickets.nuevo') }}">
          <div class="row g-3">
            <div class="col-md-7">
              <label class="form-label fw-semibold">Concepto *</label>
              <input type="text" name="concepto" class="form-control"
                     value="{{ campos.concepto or '' }}"
                     placeholder="Descripción del gasto" required autofocus>
            </div>
            <div class="col-md-5">
              <label class="form-label fw-semibold">Fecha *</label>
              <input type="date" name="fecha" class="form-control"
                     value="{{ campos.fecha or hoy }}" required>
            </div>
            <div class="col-md-7">
              <label class="form-label fw-semibold">Proveedor / Lugar</label>
              <input type="text" name="proveedor" class="form-control"
                     value="{{ campos.proveedor or '' }}"
                     placeholder="Nombre del comercio">
            </div>
            <div class="col-md-5">
              <label class="form-label fw-semibold">
                Importe total (€)
                {% if campos.importe %}
                <span class="badge bg-success-subtle text-success border border-success-subtle ms-1">Detectado</span>
                {% endif %}
              </label>
              <input type="number" name="importe" class="form-control"
                     value="{{ campos.importe or '0.00' }}"
                     step="0.01" min="0" required>
              <div class="form-text">IVA incluido</div>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">IVA incluido (%)</label>
              <select name="iva_pct" class="form-select">
                {% for pct in [0, 4, 10, 21] %}
                <option value="{{ pct }}"
                  {% if campos.iva_pct == pct|string %}selected
                  {% elif not campos.iva_pct and pct == 21 %}selected
                  {% endif %}>{{ pct }}%</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Categoría</label>
              <select name="categoria_id" class="form-select">
                <option value="">— Sin categoría —</option>
                {% for cat in categorias %}
                <option value="{{ cat.id }}">{{ cat.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Forma de pago</label>
              <select name="metodo_pago" class="form-select">
                {% for m in ['efectivo','tarjeta','transferencia','bizum','otro'] %}
                <option value="{{ m }}">{{ m | capitalize }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Notas</label>
              <textarea name="notas" class="form-control" rows="2"
                        placeholder="Observaciones adicionales..."></textarea>
            </div>
          </div>
          <div class="d-grid mt-4">
            <button type="submit" class="btn btn-primary btn-lg">
              <i class="bi bi-check-lg me-2"></i>Guardar ticket de gasto
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>
{% endblock %}