{% extends "base.html" %}

{% block title %}Baugruppen{% endblock %}
{% block heading %}Baugruppen{% endblock %}
{% block topbar_actions %}
  <a class="btn btn-sm btn-primary" href="/items/new">+ Neue Baugruppe</a>
{% endblock %}

{% block content %}

<div class="card" style="margin-bottom: 12px;">
  <form method="GET" action="/assemblies" class="flex items-center gap-3 flex-wrap" style="margin:0;">
    <input type="search" name="q" value="{{ q }}" placeholder="🔍 Suchen (Ident, Bezeichnung)…"
           class="input" style="min-width:280px;">

    <select name="item_type" class="input" style="min-width:160px;" onchange="this.form.submit()">
      <option value="">Alle Typen</option>
      {% for t in types_present %}
        <option value="{{ t }}" {% if t == item_type %}selected{% endif %}>
          {{ ITEM_TYPE_LABELS.get(t, t) }}
        </option>
      {% endfor %}
    </select>

    <select name="status" class="input" style="min-width:200px;" onchange="this.form.submit()">
      <option value="">Alle Status</option>
      <option value="below_min" {% if status == 'below_min' %}selected{% endif %}>⚠️ Bestand unter Min</option>
      <option value="complaints" {% if status == 'complaints' %}selected{% endif %}>🔴 Mit offener Reklamation</option>
    </select>

    <button type="submit" class="btn btn-sm btn-secondary">Filter anwenden</button>
    {% if q or item_type or status %}
      <a href="/assemblies" class="btn btn-sm btn-ghost">× Zurücksetzen</a>
    {% endif %}

    <span style="margin-left:auto; color: var(--card-text-muted); font-size: 0.85em;">
      {{ assemblies|length }} Baugruppe{% if assemblies|length != 1 %}n{% endif %}
    </span>
  </form>
</div>

<div class="card">
  {% if assemblies %}
  <table class="data-table">
    <thead>
      <tr>
        <th style="width:90px;">Ident</th>
        <th>Bezeichnung</th>
        <th>Typ</th>
        <th class="num">BOM</th>
        <th class="num">Pos.</th>
        <th>Bestand</th>
        <th class="num">Ø Preis</th>
        <th class="num">Σ verkauft</th>
        <th>Kunden</th>
        <th>Letzter Verkauf</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for a in assemblies %}
      <tr class="cursor-pointer" onclick="location='/assemblies/{{ a.id }}'">
        <td class="nums font-semibold">{{ a.ident or '—' }}</td>
        <td class="text-sm" style="max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
          {{ a.description or '—' }}
        </td>
        <td class="text-xs">
          {% if a.item_type %}
            <span class="badge badge-neutral">{{ ITEM_TYPE_LABELS.get(a.item_type, a.item_type) }}</span>
          {% endif %}
        </td>
        <td class="num nums">
          {% if a.active_version %}
            <span class="badge badge-emerald">v{{ a.active_version }}</span>
          {% else %}
            <span class="badge badge-neutral">—</span>
          {% endif %}
          <span class="text-xs" style="color: var(--card-text-muted);"> /{{ a.bom_count }}</span>
        </td>
        <td class="num nums">{{ a.line_count or 0 }}</td>
        <td class="nums text-xs">
          {% if a.quantity_total is not none %}
            <span {% if a.below_min %}style="color: #d97706; font-weight: 600;"{% endif %}>
              {{ a.quantity_total }}
            </span>
            {% if a.quantity_min %}
              <span style="color: var(--card-text-muted);"> / min {{ a.quantity_min }}</span>
            {% endif %}
          {% else %}
            —
          {% endif %}
        </td>
        <td class="num nums">
          {% if a.avg_sale_price %}
            {{ "%.2f"|format(a.avg_sale_price) }} €
          {% else %}
            <span style="color: var(--card-text-muted);">—</span>
          {% endif %}
        </td>
        <td class="num nums">{{ (a.total_sold_qty or 0)|int }}</td>
        <td class="num text-xs">
          {% if a.customer_count %}
            {{ a.customer_count }} {% if a.customer_count == 1 %}Kunde{% else %}Kunden{% endif %}
          {% else %}
            <span style="color: var(--card-text-muted);">—</span>
          {% endif %}
        </td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">
          {{ (a.last_sold_at or '')[:10] or '—' }}
        </td>
        <td class="text-xs">
          {% if a.open_complaints and a.open_complaints > 0 %}
            <span class="badge badge-rose">🔴 {{ a.open_complaints }} Rekl.</span>
          {% elif a.below_min %}
            <span class="badge badge-amber">⚠️ Min</span>
          {% elif a.active_version %}
            <span class="badge badge-emerald">✓ aktiv</span>
          {% else %}
            <span class="badge badge-neutral">inaktiv</span>
          {% endif %}
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/assemblies/{{ a.id }}">Detail →</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state" style="text-align:center; padding: 3em 1em;">
    <h3 style="margin: 0 0 8px;">
      {% if q or item_type or status %}
        Keine Baugruppen mit diesen Filtern gefunden
      {% else %}
        Noch keine Baugruppen angelegt
      {% endif %}
    </h3>
    <p style="color: var(--card-text-muted); margin: 0 0 16px;">
      Eine Baugruppe entsteht, sobald ein Artikel eine Stückliste bekommt.
      Lege einen Artikel an und füge ihm im BOM-Tab Positionen hinzu.
    </p>
    {% if q or item_type or status %}
      <a href="/assemblies" class="btn btn-primary">× Filter zurücksetzen</a>
    {% else %}
      <a href="/items/new" class="btn btn-primary">+ Neuen Artikel anlegen</a>
      <a href="/items" class="btn btn-secondary">Zu allen Artikeln</a>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}