{% extends "base.html" %}
{% block title %}Importar datos{% endblock %}
{% block page_title %}Importar datos{% endblock %}

{% block content %}
{% with msgs = get_flashed_messages(with_categories=true) %}
  {% for cat, msg in msgs %}
  <div class="alert alert-{{ cat }} alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endfor %}
{% endwith %}

<div class="alert alert-info mb-4" style="font-size:.85rem">
  <i class="bi bi-info-circle me-2"></i>
  Importa datos desde archivos <strong>CSV</strong> o <strong>Excel (.xlsx)</strong>.
  Descarga la plantilla correspondiente, rellénala y súbela aquí.
  Los registros duplicados (mismo nombre) se omiten automáticamente.
</div>

<div class="row g-4">

  <!-- Clientes -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-people me-2" style="color:#10b981"></i>Clientes
      </div>
      <div class="card-body d-flex flex-column">
        <p class="text-muted small">Importa tu lista de clientes. Columnas admitidas:</p>
        <code class="small d-block mb-3" style="background:#f8fafc;padding:8px;border-radius:6px;font-size:.75rem">
          nombre*, nif, email, telefono,<br>
          direccion, cp, ciudad, pais, notas
        </code>
        <div class="mt-auto">
          <a href="{{ url_for('importar.plantilla', entidad='clientes') }}"
             class="btn btn-sm btn-outline-success mb-3 w-100">
            <i class="bi bi-download me-1"></i>Descargar plantilla CSV
          </a>
          <form method="post" action="{{ url_for('importar.clientes') }}" enctype="multipart/form-data">
            <div class="mb-2">
              <input type="file" name="archivo" class="form-control form-control-sm"
                     accept=".csv,.xlsx,.xls" required>
            </div>
            <button class="btn btn-success btn-sm w-100">
              <i class="bi bi-upload me-1"></i>Importar clientes
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Proveedores -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-shop me-2" style="color:#ef4444"></i>Proveedores
      </div>
      <div class="card-body d-flex flex-column">
        <p class="text-muted small">Importa tu lista de proveedores. Mismas columnas que clientes:</p>
        <code class="small d-block mb-3" style="background:#f8fafc;padding:8px;border-radius:6px;font-size:.75rem">
          nombre*, nif, email, telefono,<br>
          direccion, cp, ciudad, pais, notas
        </code>
        <div class="mt-auto">
          <a href="{{ url_for('importar.plantilla', entidad='proveedores') }}"
             class="btn btn-sm btn-outline-danger mb-3 w-100">
            <i class="bi bi-download me-1"></i>Descargar plantilla CSV
          </a>
          <form method="post" action="{{ url_for('importar.proveedores') }}" enctype="multipart/form-data">
            <div class="mb-2">
              <input type="file" name="archivo" class="form-control form-control-sm"
                     accept=".csv,.xlsx,.xls" required>
            </div>
            <button class="btn btn-danger btn-sm w-100">
              <i class="bi bi-upload me-1"></i>Importar proveedores
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Catálogo -->
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-box-seam me-2" style="color:#f59e0b"></i>Catálogo de productos
      </div>
      <div class="card-body d-flex flex-column">
        <p class="text-muted small">Importa productos o servicios al catálogo. Columnas admitidas:</p>
        <code class="small d-block mb-3" style="background:#f8fafc;padding:8px;border-radius:6px;font-size:.75rem">
          nombre*, descripcion,<br>
          precio, iva_pct, unidad
        </code>
        <div class="mt-auto">
          <a href="{{ url_for('importar.plantilla', entidad='catalogo') }}"
             class="btn btn-sm btn-outline-warning mb-3 w-100">
            <i class="bi bi-download me-1"></i>Descargar plantilla CSV
          </a>
          <form method="post" action="{{ url_for('importar.catalogo') }}" enctype="multipart/form-data">
            <div class="mb-2">
              <input type="file" name="archivo" class="form-control form-control-sm"
                     accept=".csv,.xlsx,.xls" required>
            </div>
            <button class="btn btn-warning btn-sm w-100">
              <i class="bi bi-upload me-1"></i>Importar catálogo
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Consejos -->
<div class="card mt-4">
  <div class="card-header fw-semibold" style="font-size:.85rem">
    <i class="bi bi-lightbulb me-2" style="color:#f59e0b"></i>Consejos para la importación
  </div>
  <div class="card-body" style="font-size:.84rem">
    <div class="row g-3">
      <div class="col-md-4">
        <strong>Formatos aceptados</strong>
        <ul class="text-muted mt-1 mb-0 ps-3">
          <li>CSV (separado por coma, punto y coma o tabulador)</li>
          <li>Excel .xlsx{% if not xl_ok %} <span class="text-danger">(no instalado)</span>{% endif %}</li>
          <li>Codificación UTF-8 recomendada</li>
        </ul>
      </div>
      <div class="col-md-4">
        <strong>Cabeceras flexibles</strong>
        <ul class="text-muted mt-1 mb-0 ps-3">
          <li>Se aceptan variantes: <em>Razón social, CIF, Correo, Tel...</em></li>
          <li>El orden de columnas no importa</li>
          <li>Las columnas no reconocidas se ignoran</li>
        </ul>
      </div>
      <div class="col-md-4">
        <strong>Duplicados</strong>
        <ul class="text-muted mt-1 mb-0 ps-3">
          <li>Si el nombre ya existe en la base de datos, la fila se omite</li>
          <li>No hay actualización de datos existentes</li>
          <li>Puedes editarlos manualmente después</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}