{% extends "base.html" %}
{% from "_macros.html" import app_pill, item_type_badge, action_badge, avatar, money, sparkline_widget %}

{% block title %}{{ item.ident }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/items" class="hover:underline">Artikel</a> / {{ item.ident }}</p>{% endblock %}
{% block heading %}{{ item.ident }}{% endblock %}

{% block topbar_actions %}
  {{ app_pill(item.source_app) }}
  {{ item_type_badge(item.item_type) }}
  <a class="btn btn-secondary btn-sm" href="/items/{{ item.id }}/bom"
     title="Stückliste mit Material × Operationen × Werkzeug">Stückliste</a>
  <a class="btn btn-secondary btn-sm" href="/items/{{ item.id }}/cnc"
     title="CNC-Programme + Versionsgeschichte">CNC-Programme</a>
  <a class="btn btn-secondary btn-sm" href="/3d-viewer"
     title="STL/OBJ/3MF im Browser betrachten">3D-Ansicht</a>
  <a class="btn btn-secondary btn-sm" href="/items/{{ item.id }}/edit">Bearbeiten</a>
{% endblock %}

{% block content %}

  {# v1.12.0: Inline-Sparkline Verkaufs-Mengen 12 Monate #}
  <div style="margin-bottom: 14px;">
    {{ sparkline_widget("/api/sparkline/item/" ~ item.id, "Verkaufte Menge letzte 12 Monate", "qty", "Stk") }}
  </div>

  {% if request.query_params.get('error') %}
  <div class="alert alert-red text-sm">
    <p class="font-medium text-red-700">Aktion blockiert</p>
    <p class="mt-1 text-neutral-700">{{ request.query_params.get('error') }}</p>
  </div>
  {% endif %}

  <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left: master data -->
    <div class="lg:col-span-2 space-y-6">

      <div class="card">
        <div class="card-header"><div><h2>Stammdaten</h2></div></div>
        <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beschreibung</p>
            <p class="mt-0.5">{{ item.description or '—' }}</p>
          </div>
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Hinweis</p>
            <p class="mt-0.5">{{ item.description_2 or '—' }}</p>
          </div>
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestand</p>
            <p class="mt-0.5 nums">
              <b class="text-lg">{{ item.quantity_total }}</b>
              <span class="text-neutral-500">/ Min {{ item.quantity_min }}</span>
              {% if item.on_order %}<span class="badge badge-amber ml-2">{{ item.on_order }} bestellt</span>{% endif %}
            </p>
          </div>
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestell-Mindestmenge</p>
            <p class="mt-0.5 nums">{{ item.order_quantity_min }}</p>
          </div>
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Einmal-Verbrauch</p>
            <p class="mt-0.5">{{ 'Ja' if item.is_onetime_use else 'Nein' }}</p>
          </div>
          <div>
            <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestellbar</p>
            <p class="mt-0.5">{{ 'Ja' if item.is_orderable else 'Nein' }}</p>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><div><h2>Kategorien</h2></div></div>
        <div class="p-5">
          {% if categories %}
            <div class="flex flex-wrap gap-2">
              {% for c in categories %}
                <span class="text-xs">
                  <span class="text-neutral-500">{{ c.dimension }}:</span>
                  <span class="badge badge-neutral">{{ c.name }}</span>
                </span>
              {% endfor %}
            </div>
          {% else %}
            <p class="text-sm text-neutral-500">Keine Kategorien zugeordnet.</p>
          {% endif %}
        </div>
      </div>

      <div class="card">
        <div class="card-header"><div><h2>Lagerorte</h2><p class="sub">{{ locations|length }} Position(en)</p></div></div>
        {% if locations %}
        <table class="data-table">
          <thead><tr><th>Code</th><th>Größe</th><th class="num">Menge</th></tr></thead>
          <tbody>
            {% for l in locations %}
            <tr><td class="nums font-medium">{{ l.location_code }}</td><td class="text-neutral-600">{{ l.size or '—' }}</td><td class="num">{{ l.quantity }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}<div class="p-6 text-center text-sm text-neutral-500">Kein Lagerort zugewiesen</div>{% endif %}
      </div>

      <div class="card">
        <div class="card-header"><div><h2>Lieferanten & Preise</h2></div></div>
        {% if vendors %}
        <table class="data-table">
          <thead><tr><th>Lieferant</th><th>Status</th><th class="num">Preis</th></tr></thead>
          <tbody>
            {% for v in vendors %}
            <tr>
              <td>{{ v.vendor_name }}</td>
              <td>{% if v.is_primary %}<span class="badge badge-emerald">Hauptlieferant</span>{% else %}<span class="badge badge-neutral">Alternativ</span>{% endif %}</td>
              <td class="num">{{ money(v.price) }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}<div class="p-6 text-center text-sm text-neutral-500">Kein Lieferant hinterlegt</div>{% endif %}
      </div>

    </div>

    <!-- Right: actions + activity -->
    <div class="space-y-6">

      <!-- QR Code für diesen Artikel — automatisch erzeugt -->
      <div class="card">
        <div class="card-header"><div>
          <h2>QR-Etikett</h2>
          <p class="sub">Aufkleben &amp; mit Scanner-App identifizieren</p>
        </div></div>
        <div class="p-5 flex items-center gap-4">
          <div class="flex-shrink-0 p-2 border rounded" style="border-color:#d4d4d4;background:white;">
            <img src="/items/{{ item.id }}/qr.png" alt="QR-Code" style="width:96px;height:96px;display:block;">
          </div>
          <div class="flex-1 min-w-0 space-y-2">
            <p class="text-xs text-neutral-600">
              Codiert: <code class="text-blue-600 nums text-[11px]">takoma://item/{{ item.ident }}</code>
            </p>
            <a href="/items/{{ item.id }}/qr-label" target="_blank"
               class="btn btn-primary btn-sm w-full justify-center">
              <svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
              Etikett drucken
            </a>
            <a href="/items/{{ item.id }}/qr.png" download="{{ item.ident }}.png"
               class="btn btn-secondary btn-sm w-full justify-center">
              PNG herunterladen
            </a>
          </div>
        </div>
      </div>

      {% if item.item_type in ('measuring_equipment', 'clamping') and inspection %}
      <div class="card"
           {% if inspection.status == 'overdue' %}style="border-left:4px solid #ef4444;"
           {% elif inspection.status == 'warning' %}style="border-left:4px solid #f59e0b;"
           {% elif inspection.status == 'ok' %}style="border-left:4px solid #10b981;"
           {% endif %}>
        <div class="card-header"><div>
          <h2>Prüfstatus</h2>
          <p class="sub">DGUV V3 / ISO-Kalibrierung</p>
        </div></div>
        <div class="p-5 space-y-3">
          <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
            <div>
              <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Anschaffung</p>
              <p class="nums mt-0.5">{{ inspection.acquired_date or '—' }}</p>
            </div>
            <div>
              <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Intervall</p>
              <p class="nums mt-0.5">{% if inspection.inspection_interval_months %}{{ inspection.inspection_interval_months }} Monate{% else %}—{% endif %}</p>
            </div>
            <div>
              <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Letzte Prüfung</p>
              <p class="nums mt-0.5">{{ inspection.last_inspection_date or '—' }}</p>
            </div>
            <div>
              <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Nächste Prüfung</p>
              <p class="nums mt-0.5 font-semibold">{{ inspection.next_inspection_date or '—' }}</p>
            </div>
          </div>

          <div class="pt-2">
            {% if inspection.status == 'overdue' %}
              <div class="alert alert-red text-sm">
                <p class="font-semibold text-red-700">Überfällig seit {{ -inspection.days_to_next }} Tagen</p>
                <p class="text-xs text-neutral-600 mt-1">Prüfung muss umgehend durchgeführt werden — Verwendung kann gesperrt sein.</p>
              </div>
            {% elif inspection.status == 'warning' %}
              <div class="alert alert-amber text-sm">
                <p class="font-semibold text-amber-700">Fällig in {{ inspection.days_to_next }} Tagen</p>
                <p class="text-xs text-neutral-600 mt-1">Prüftermin einplanen.</p>
              </div>
            {% elif inspection.status == 'ok' %}
              <div class="alert alert-blue text-sm">
                <p class="font-medium">In Ordnung — nächste Prüfung in {{ inspection.days_to_next }} Tagen</p>
              </div>
            {% else %}
              <div class="alert alert-blue text-sm">
                <p class="font-medium">Noch keine Prüfung erfasst</p>
                <p class="text-xs text-neutral-600 mt-1">Letzte Prüfung unten eintragen, um den Zyklus zu starten.</p>
              </div>
            {% endif %}
          </div>

          {% if inspection.inspection_note %}
          <div class="text-xs text-neutral-600 pt-2 border-t border-neutral-100">
            <span class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 block mb-1">Notiz</span>
            {{ inspection.inspection_note }}
          </div>
          {% endif %}
        </div>

        <form method="post" action="/items/{{ item.id }}/inspect" class="p-5 border-t border-neutral-100 space-y-3">
          <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Prüfung erfassen</p>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-xs text-neutral-600">Prüfdatum</label>
              <input class="input mt-1 w-full nums" type="date" name="inspection_date" value="{{ today }}" required>
            </div>
            <div>
              <label class="text-xs text-neutral-600">Intervall (Monate)</label>
              <input class="input mt-1 w-full nums" type="number" name="interval_months"
                     value="{{ inspection.inspection_interval_months or (12 if item.item_type == 'measuring_equipment' else 24) }}"
                     min="1">
            </div>
          </div>
          <div>
            <label class="text-xs text-neutral-600">Geprüft von</label>
            <select class="select mt-1 w-full" name="user_id">
              <option value="">— anonym —</option>
              {% for u in users %}<option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="text-xs text-neutral-600">Notiz / Prüfsiegel-Nr. (optional)</label>
            <input class="input mt-1 w-full" type="text" name="note" placeholder="z.B. Kalibrierschein 2026-114">
          </div>
          <button class="btn btn-primary w-full" type="submit">Prüfung speichern</button>
        </form>

        <form method="post" action="/items/{{ item.id }}/acquired" class="px-5 pb-5 -mt-2">
          <details>
            <summary class="text-xs text-neutral-500 cursor-pointer hover:text-neutral-700">Anschaffungsdatum bearbeiten</summary>
            <div class="flex gap-2 mt-2">
              <input class="input flex-1 nums" type="date" name="acquired_date" value="{{ inspection.acquired_date or '' }}">
              <button class="btn btn-sm btn-secondary" type="submit">Speichern</button>
            </div>
          </details>
        </form>
      </div>
      {% endif %}

      {% if rentals %}
      <div class="card">
        <div class="card-header"><div><h2>Aktuell ausgeliehen</h2><p class="sub">{{ rentals|length }} offen</p></div></div>
        <div class="p-3">
          {% for r in rentals %}
          <div class="flex items-center gap-3 p-2 rounded-md hover:bg-neutral-50">
            {{ avatar(r.first_name, r.last_name) }}
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium">{{ r.first_name }} {{ r.last_name }}</p>
              <p class="text-xs text-neutral-500">
                {{ r.machine_name or 'Werkbank' }} ·
                <span class="nums">{{ r.quantity }}× · {{ r.rented_at }}</span>
              </p>
            </div>
            <form method="post" action="/rentals/{{ r.id }}/return">
              <button class="btn btn-sm btn-secondary" type="submit">Rückgabe</button>
            </form>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <div class="card">
        <div class="card-header"><div><h2>Bestand buchen</h2><p class="sub">Manueller Eingang, Auslagerung, Inventur, Verschrottung</p></div></div>
        <form method="post" action="/items/{{ item.id }}/adjust" class="p-5 space-y-3">
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aktion</label>
            <select class="select mt-1 w-full" name="action_code" required>
              <option value="stock_in">Einlagerung (+)</option>
              <option value="stock_out">Auslagerung (-)</option>
              <option value="inventory">Inventur (Differenz)</option>
              <option value="scrap">Verschrottung (-)</option>
            </select>
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mitarbeiter</label>
            <select class="select mt-1 w-full" name="user_id">
              <option value="">— anonym —</option>
              {% for u in users %}<option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Menge (positiv = +, negativ = -)</label>
            <input class="input mt-1 w-full nums" type="number" name="delta" value="1" required>
            <p class="text-[11px] text-neutral-500 mt-1">aktueller Bestand: {{ item.quantity_total }}</p>
          </div>
          <button class="btn btn-primary w-full" type="submit">Buchen</button>
        </form>
      </div>

      {% if item.item_type in ('tool','measuring_equipment','clamping') and item.quantity_total > 0 %}
      <div class="card">
        <div class="card-header"><div><h2>Werkzeug ausleihen</h2></div></div>
        <form method="post" action="/items/{{ item.id }}/rent" class="p-5 space-y-3">
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mitarbeiter</label>
            <select class="select mt-1 w-full" name="user_id" required>
              {% for u in users %}<option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Maschine</label>
            <select class="select mt-1 w-full" name="machine_id">
              <option value="">— keine —</option>
              {% for m in machines %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Menge</label>
            <input class="input mt-1 w-full nums" type="number" name="quantity" value="1" min="1" max="{{ item.quantity_total }}" required>
            <p class="text-[11px] text-neutral-500 mt-1">verfügbar: {{ item.quantity_total }}</p>
          </div>
          <button class="btn btn-primary w-full" type="submit">Ausleihen</button>
        </form>
      </div>
      {% endif %}

      <div class="card">
        <div class="card-header"><div><h2>Historie</h2><p class="sub">letzte {{ history|length }} Vorgänge</p></div></div>
        <div class="p-3 max-h-[500px] overflow-auto">
          {% for h in history %}
          <div class="flex items-start gap-3 p-2">
            {{ avatar(h.first_name, h.last_name) }}
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 flex-wrap">
                {{ action_badge(h.action_code, h.action_name) }}
                {% if h.quantity %}<span class="text-xs nums text-neutral-500">{{ h.quantity }}×</span>{% endif %}
              </div>
              <p class="text-xs text-neutral-500 mt-1">
                <b>{{ h.first_name or '—' }} {{ h.last_name or '' }}</b>
              </p>
              <p class="text-[10px] text-neutral-400 nums">{{ h.created_at }}</p>
            </div>
          </div>
          {% else %}
          <div class="p-4 text-center text-sm text-neutral-500">Keine Historie</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </section>

  {# v1.12.2: Drag&Drop für technische Zeichnungen #}
  {% with attach_entity_type='item', attach_entity_id=item.id,
          attach_title='Technische Zeichnungen' %}
    {% include '_attachments_dropzone.html' %}
  {% endwith %}

{% endblock %}