{% extends "base.html" %}
{% block title %}Inventario{% endblock %}
{% block page_title %}Inventario y stock{% endblock %}

{% block topbar_actions %}
<form class="d-flex gap-2" method="get">
  <input type="search" name="q" value="{{ buscar }}" 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.lista') }}" class="btn btn-outline-primary btn-sm">
  <i class="bi bi-box me-1"></i>Fichas de producto
</a>
<a href="{{ url_for('catalogo.lista') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-tags me-1"></i>Catálogo
</a>
{% endblock %}

{% block content %}

{% if alertas > 0 %}
<div class="alert alert-warning d-flex align-items-center gap-3 mb-4">
  <i class="bi bi-exclamation-triangle-fill fs-4 flex-shrink-0"></i>
  <div>
    <strong>{{ alertas }} producto(s) con stock por debajo del mínimo.</strong>
    Aparecen marcados en rojo en la tabla.
  </div>
</div>
{% endif %}

{% if resumen and resumen.total_productos %}
<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">Productos distintos</div>
      <div class="fs-2 fw-bold">{{ resumen.total_productos }}</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_comprado 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 invertido</div>
      <div class="fs-2 fw-bold">{{ "%.2f"|format(resumen.total_gastado 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-boxes me-2"></i>Stock por producto</span>
    {% if buscar %}
    <a href="{{ url_for('inventario.index') }}" 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 buscar %}No hay productos que coincidan con "{{ buscar }}"
      {% else %}El inventario está vacío{% endif %}
    </h5>
    {% if not buscar %}
    <p class="text-muted small">El inventario se rellena automáticamente con las líneas de las facturas recibidas.</p>
    {% endif %}
  </div>
  {% else %}
  <div class="table-responsive">
    <table class="table table-hover mb-0" style="font-size:.86rem">
      <thead>
        <tr>
          <th>Producto</th>
          <th class="text-center">Stock disponible</th>
          <th class="text-center">Comprado</th>
          <th class="text-center">Vendido</th>
          <th class="text-center">P. compra</th>
          <th class="text-center">P. venta</th>
          <th class="text-center">Margen</th>
          <th class="text-end">Invertido</th>
          <th class="text-center">Última compra</th>
          <th class="text-end no-print"></th>
        </tr>
      </thead>
      <tbody>
        {% for p in productos %}
        {% set alerta = p.stock_minimo > 0 and p.stock_disponible < p.stock_minimo %}
        {% set margen = ((p.precio_medio_venta - p.precio_medio_compra) / p.precio_medio_compra * 100) if p.precio_medio_compra > 0 and p.precio_medio_venta > 0 else none %}
        <tr {% if alerta %}class="table-danger"{% endif %}>
          <td class="fw-semibold">
            {{ p.nombre }}
            {% if alerta %}
            <span class="badge bg-danger ms-1" title="Stock bajo (mín: {{ p.stock_minimo|int }})">
              <i class="bi bi-exclamation"></i>
            </span>
            {% endif %}
          </td>

          <!-- Stock disponible -->
          <td class="text-center fw-bold">
            {% if p.stock_disponible <= 0 %}
              <span class="text-danger">{{ "%.0f"|format(p.stock_disponible) }}</span>
            {% elif alerta %}
              <span class="text-warning">{{ "%.0f"|format(p.stock_disponible) }}</span>
            {% else %}
              <span class="text-success">{{ "%.0f"|format(p.stock_disponible) }}</span>
            {% endif %}
            {% if p.stock_minimo > 0 %}
            <div class="text-muted" style="font-size:.72rem">mín {{ p.stock_minimo|int }}</div>
            {% set raw_pct = (p.stock_disponible / p.stock_minimo * 100)|int %}
            {% if raw_pct < 0 %}{% set pct_bar = 0 %}
            {% elif raw_pct > 100 %}{% set pct_bar = 100 %}
            {% else %}{% set pct_bar = raw_pct %}{% endif %}
            <div style="height:4px;background:#e2e8f0;border-radius:2px;margin:3px auto 0;width:52px">
              <div style="height:100%;width:{{ pct_bar }}%;background:{% if p.stock_disponible <= 0 %}#ef4444{% elif alerta %}#f59e0b{% else %}#10b981{% endif %};border-radius:2px"></div>
            </div>
            {% endif %}
          </td>

          <td class="text-center text-muted">{{ "%.0f"|format(p.comprado) }}</td>
          <td class="text-center text-muted">{{ "%.0f"|format(p.vendido) }}</td>

          <td class="text-center small">
            {% if p.precio_medio_compra > 0 %}{{ "%.2f"|format(p.precio_medio_compra) }} €{% else %}—{% endif %}
          </td>
          <td class="text-center small">
            {% if p.precio_medio_venta > 0 %}{{ "%.2f"|format(p.precio_medio_venta) }} €{% else %}—{% endif %}
          </td>

          <!-- Margen -->
          <td class="text-center fw-semibold">
            {% if margen is not none %}
              <span class="{% if margen >= 0 %}text-success{% else %}text-danger{% endif %}">
                {{ "%.1f"|format(margen) }}%
              </span>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>

          <td class="text-end fw-semibold">{{ "%.2f"|format(p.total_gastado) }} €</td>
          <td class="text-center small text-muted">{{ p.ultima_compra or '—' }}</td>
          <td class="text-end">
            <a href="{{ url_for('productos.ficha', id=p.id) }}"
               class="btn btn-sm btn-outline-primary btn-action">
              <i class="bi bi-eye"></i>
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}