{% extends "base.html" %}
{% block title %}Productos{% endblock %}
{% block page_title %}Fichas de producto{% endblock %}

{% block topbar_actions %}
<form class="d-flex gap-2" method="get">
  <input type="search" name="q" value="{{ q }}" class="form-control form-control-sm"
         style="width:220px" placeholder="Buscar producto...">
  <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-search"></i></button>
</form>
<a href="{{ url_for('productos.nuevo') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg me-1"></i>Nuevo producto
</a>
{% endblock %}

{% block content %}

{% if resumen.total > 0 %}
<div class="row g-3 mb-4">
  <div class="col-sm-4">
    <div class="stat-card" style="background:linear-gradient(135deg,#4f86f7,#3a6fd8)">
      <div class="small opacity-75 mb-1">Fichas de producto</div>
      <div class="fs-2 fw-bold">{{ resumen.total }}</div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="stat-card" style="background:linear-gradient(135deg,#28a745,#1e7e34)">
      <div class="small opacity-75 mb-1">Unidades compradas</div>
      <div class="fs-2 fw-bold">{{ "%.0f"|format(resumen.total_unidades or 0) }}</div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="stat-card" style="background:linear-gradient(135deg,#e67e22,#d35400)">
      <div class="small opacity-75 mb-1">Total gastado</div>
      <div class="fs-2 fw-bold">{{ "%.2f"|format(resumen.gasto_total or 0) }} €</div>
    </div>
  </div>
</div>
{% endif %}

<div class="card">
  <div class="card-header py-3 d-flex justify-content-between align-items-center">
    <span><i class="bi bi-box me-2"></i>Productos</span>
    {% if q %}
    <a href="{{ url_for('productos.lista') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-x me-1"></i>Quitar filtro
    </a>
    {% endif %}
  </div>

  {% if not productos %}
  <div class="text-center py-5">
    <i class="bi bi-box-seam text-muted" style="font-size:3.5rem"></i>
    <h5 class="mt-3 text-muted">
      {% if q %}No hay productos que coincidan con "{{ q }}"
      {% else %}No hay fichas de producto todavía{% endif %}
    </h5>
    {% if not q %}
    <p class="text-muted small">
      Las fichas se crean automáticamente al registrar facturas recibidas con artículos.
    </p>
    <a href="{{ url_for('productos.nuevo') }}" class="btn btn-primary mt-2">
      <i class="bi bi-plus-lg me-1"></i>Crear ficha manualmente
    </a>
    {% endif %}
  </div>
  {% else %}
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Producto</th>
          <th class="text-center">Unidad</th>
          <th class="text-center">Uds. compradas</th>
          <th class="text-center">Precio medio</th>
          <th class="text-center">Proveedores</th>
          <th class="text-end">Total gastado</th>
          <th class="text-center">Última compra</th>
          <th class="text-end no-print"></th>
        </tr>
      </thead>
      <tbody>
        {% for p in productos %}
        <tr>
          <td>
            <a href="{{ url_for('productos.ficha', id=p.id) }}"
               class="fw-semibold text-decoration-none">{{ p.nombre }}</a>
            {% if p.descripcion %}
            <div class="text-muted small">{{ p.descripcion }}</div>
            {% endif %}
          </td>
          <td class="text-center text-muted small">{{ p.unidad or 'ud' }}</td>
          <td class="text-center">
            {% if p.total_unidades %}
            <span class="badge bg-light text-dark border px-3">
              {{ "%.0f"|format(p.total_unidades) if p.total_unidades % 1 == 0 else "%.2f"|format(p.total_unidades) }}
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="text-center small">
            {% if p.precio_medio %}{{ "%.2f"|format(p.precio_medio) }} €{% else %}—{% endif %}
          </td>
          <td class="text-center">
            {% if p.num_proveedores %}
            <span class="badge rounded-pill"
                  style="background:#e8f4fd;color:#1565c0;border:1px solid #bbdefb">
              {{ p.num_proveedores }}
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="text-end fw-semibold">
            {% if p.total_gastado %}{{ "%.2f"|format(p.total_gastado) }} €{% else %}—{% endif %}
          </td>
          <td class="text-center text-muted small">{{ p.ultima_compra or '—' }}</td>
          <td class="text-end">
            <div class="d-flex gap-1 justify-content-end">
              <a href="{{ url_for('productos.ficha', id=p.id) }}"
                 class="btn btn-sm btn-outline-primary btn-action" title="Ver ficha">
                <i class="bi bi-eye"></i>
              </a>
              <a href="{{ url_for('productos.editar', id=p.id) }}"
                 class="btn btn-sm btn-outline-secondary btn-action" title="Editar">
                <i class="bi bi-pencil"></i>
              </a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}