{% extends "base.html" %}
{% block title %}Catálogo de Productos{% endblock %}
{% block page_title %}Catálogo de Productos{% 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 o proveedor...">
  <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-search"></i></button>
  {% if q %}
  <a href="{{ url_for('catalogo.lista') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-x"></i>
  </a>
  {% endif %}
</form>
<a href="{{ url_for('catalogo.nuevo') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg me-1"></i>Nuevo producto
</a>
{% endblock %}

{% block content %}

{% if resumen and resumen.total %}
<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 en catálogo</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">Con inventario vinculado</div>
      <div class="fs-2 fw-bold">{{ resumen.con_inventario or 0 }}</div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="stat-card" style="background:linear-gradient(135deg,#6c757d,#495057)">
      <div class="small opacity-75 mb-1">Solo catálogo (servicios)</div>
      <div class="fs-2 fw-bold">{{ (resumen.total or 0) - (resumen.con_inventario or 0) }}</div>
    </div>
  </div>
</div>
{% endif %}

{% if productos %}
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover mb-0" style="font-size:.86rem">
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Proveedor</th>
          <th class="text-center">Stock</th>
          <th class="text-center">Comprado</th>
          <th class="text-end">Coste</th>
          <th class="text-end">P. Venta</th>
          <th class="text-center">IVA</th>
          <th class="text-center">Margen</th>
          <th class="text-center">Última compra</th>
          <th class="text-center">Estado</th>
          <th class="text-center no-print">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for p in productos %}
        {% set alerta = p.producto_id and p.stock_minimo > 0 and p.stock_disponible is not none and p.stock_disponible < p.stock_minimo %}
        {% set coste_val = p.coste or 0 %}
        {% set precio_val = p.precio or 0 %}
        {% set margen = ((precio_val - coste_val) / coste_val * 100) if coste_val > 0 and precio_val > 0 else none %}
        <tr class="{% if not p.activo %}text-muted{% elif alerta %}table-danger{% endif %}">

          <td>
            <div class="fw-semibold">{{ p.nombre }}</div>
            {% if p.descripcion %}
            <div class="text-muted" style="font-size:.78rem">{{ p.descripcion }}</div>
            {% endif %}
            {% if not p.producto_id %}
            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle"
                  style="font-size:.7rem">servicio</span>
            {% endif %}
          </td>

          <td class="text-muted small">
            {{ p.proveedor_nombre or '—' }}
          </td>

          <td class="text-center fw-bold">
            {% if p.producto_id %}
              {% if p.stock_disponible is not none %}
                {% 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>
                {% endif %}
              {% else %}
                <span class="text-muted">—</span>
              {% endif %}
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>

          <td class="text-center text-muted">
            {% if p.total_comprado > 0 %}
              {{ "%.0f"|format(p.total_comprado) }} {{ p.unidad }}
            {% else %}—{% endif %}
          </td>

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

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

          <td class="text-center text-muted">{{ p.iva_pct|int }}%</td>

          <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-center text-muted small">{{ p.ultima_compra or '—' }}</td>

          <td class="text-center">
            {% if p.activo %}
            <span class="badge bg-success-subtle text-success border border-success-subtle">Activo</span>
            {% else %}
            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactivo</span>
            {% endif %}
          </td>

          <td class="text-center no-print">
            {% if p.producto_id %}
            <a href="{{ url_for('productos.ficha', id=p.producto_id) }}"
               class="btn btn-sm btn-outline-primary btn-action" title="Ver en inventario">
              <i class="bi bi-boxes"></i>
            </a>
            {% endif %}
            <a href="{{ url_for('catalogo.editar', id=p.id) }}"
               class="btn btn-sm btn-outline-secondary btn-action" title="Editar">
              <i class="bi bi-pencil"></i>
            </a>
            <form method="post" action="{{ url_for('catalogo.eliminar', id=p.id) }}"
                  class="d-inline"
                  onsubmit="return confirm('¿Eliminar «' + {{ p.nombre | tojson }} + '» del catálogo?')">
              <button type="submit" class="btn btn-sm btn-outline-danger btn-action" title="Eliminar">
                <i class="bi bi-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="text-center py-5 text-muted">
  <i class="bi bi-box-seam" style="font-size:3rem; opacity:.3"></i>
  <p class="mt-3 fs-5">
    {% if q %}No hay resultados para "{{ q }}"
    {% else %}El catálogo está vacío{% endif %}
  </p>
  {% if not q %}
  <a href="{{ url_for('catalogo.nuevo') }}" class="btn btn-primary mt-2">
    <i class="bi bi-plus-lg me-1"></i>Añadir primer producto
  </a>
  {% endif %}
</div>
{% endif %}

{% endblock %}