{% extends "base.html" %}
{% from "_macros.html" import app_pill %}

{% block title %}Bestands-Alarme · Werkstatt{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Bestands-Alarme</p>{% endblock %}
{% block heading %}Bestands-Alarme{% endblock %}

{% block topbar_actions %}
  <button onclick="ackAll()" class="btn btn-secondary btn-sm" {% if counts.total == 0 %}disabled{% endif %}>
    ✓ Alle bestätigen ({{ counts.total }})
  </button>
{% endblock %}

{% block content %}
<style>
  .sum-bar { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:18px; }
  .sum-pill { padding:14px 18px; border-radius:8px; font-size:12px; font-weight:600; text-align:left; cursor:pointer; transition:all 120ms; text-decoration:none; }
  .sum-pill.red    { background:rgba(239,68,68,0.12); color:#fca5a5; border:1.5px solid rgba(239,68,68,0.35); }
  .sum-pill.yellow { background:rgba(250,204,21,0.10); color:#fde68a; border:1.5px solid rgba(250,204,21,0.35); }
  .sum-pill.amber  { background:rgba(245,158,11,0.12); color:#fcd34d; border:1.5px solid rgba(245,158,11,0.35); }
  .sum-pill:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.30); }
  .sum-pill .big { display:block; font-size:28px; line-height:1; margin-bottom:6px; font-weight:700; }
  .sum-pill .filter-on { display:inline-block; background:rgba(255,255,255,0.20); padding:2px 8px; border-radius:4px; font-size:10px; margin-left:6px; }

  .vendor-block { margin-bottom:20px; }
  .vendor-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:rgba(255,255,255,0.05); border-radius:6px 6px 0 0; border:1px solid rgba(255,255,255,0.10); border-bottom:none; }
  .vendor-name { font-size:13px; font-weight:700; color:var(--card-text); }
  .vendor-meta { font-size:11px; color:var(--card-text-muted); }
  .alert-table { width:100%; border-collapse:collapse; font-size:12px; border:1px solid rgba(255,255,255,0.10); border-radius:0 0 6px 6px; overflow:hidden; }
  .alert-table th { text-align:left; padding:8px 12px; font-size:10px; font-weight:600; color:var(--card-text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); }
  .alert-table td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:middle; color:var(--card-text); }
  .alert-table tr:last-child td { border-bottom:none; }
  .sev-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:6px; }
  .sev-dot.out_of_stock { background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.20); }
  .sev-dot.critical { background:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,0.20); }
  .sev-dot.warn { background:#facc15; box-shadow:0 0 0 2px rgba(250,204,21,0.20); }
  .qty-cell { font-family:ui-monospace,monospace; font-weight:600; }
  .qty-cell .now { color:#fca5a5; }
  .qty-cell .slash { color:var(--card-text-muted); margin:0 3px; }
  .qty-cell .min { color:var(--card-text-muted); }
  .ident-cell { font-family:ui-monospace,monospace; font-size:11px; color:var(--card-text); font-weight:600; }
  .order-input { width:60px; padding:3px 6px; border:1px solid rgba(255,255,255,0.20); border-radius:4px; font-size:12px; font-family:ui-monospace,monospace; background:rgba(255,255,255,0.06); color:var(--card-text); }
  /* Light-Mode-Override für Print + Theme-Light-User */
  body.theme-light .vendor-head { background:#fafafa; border-color:#e5e5e5; }
  body.theme-light .vendor-name { color:#1a1a1a; }
  body.theme-light .vendor-meta { color:#737373; }
  body.theme-light .alert-table { border-color:#e5e5e5; }
  body.theme-light .alert-table th { color:#737373; border-bottom-color:#e5e5e5; background:#fff; }
  body.theme-light .alert-table td { color:#1a1a1a; border-bottom-color:#f0f0f0; }
  body.theme-light .sum-pill.red    { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }
  body.theme-light .sum-pill.yellow { background:#fffbeb; color:#a16207; border-color:#fde68a; }
  body.theme-light .sum-pill.amber  { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
  body.theme-light .sum-pill .filter-on { background:#fff; }
  body.theme-light .qty-cell .now { color:#ef4444; }
  body.theme-light .ident-cell { color:#525252; }
  body.theme-light .order-input { border-color:#d4d4d4; background:#fff; color:#1a1a1a; }
</style>

<div class="sum-bar">
  <a href="?severity=out_of_stock" class="sum-pill red">
    <span class="big">{{ counts.out_of_stock }}</span>
    Ausverkauft (Bestand = 0)
    {% if filter_severity == 'out_of_stock' %}<span class="filter-on">aktiv</span>{% endif %}
  </a>
  <a href="?severity=critical" class="sum-pill amber">
    <span class="big">{{ counts.critical }}</span>
    Kritisch (≤ 50% Mindestbestand)
    {% if filter_severity == 'critical' %}<span class="filter-on">aktiv</span>{% endif %}
  </a>
  <a href="?severity=warn" class="sum-pill yellow">
    <span class="big">{{ counts.warn }}</span>
    Warnung (unter Mindestbestand)
    {% if filter_severity == 'warn' %}<span class="filter-on">aktiv</span>{% endif %}
  </a>
</div>

{% if filter_severity %}
<p style="margin-bottom:12px;"><a href="/werkstatt/lager/alerts" style="font-size:11px;color:var(--brand-orange);">← Alle anzeigen</a></p>
{% endif %}

{% if not alerts %}
  <div class="card"><div class="p-5 text-sm text-neutral-500 italic" style="text-align:center;">
    Keine offenen Bestands-Alarme — alles im grünen Bereich.
  </div></div>
{% else %}
  {% for vendor_name, vendor_alerts in by_vendor.items() %}
  <div class="vendor-block">
    <div class="vendor-head">
      <div>
        <span class="vendor-name">{{ vendor_name }}</span>
        <span class="vendor-meta">· {{ vendor_alerts|length }} Position{% if vendor_alerts|length != 1 %}en{% endif %}</span>
      </div>
      {% if vendor_alerts[0].vendor_id %}
      <button onclick="suggestOrder({{ vendor_alerts[0].vendor_id }}, '{{ vendor_name|e }}')"
              class="btn btn-primary btn-sm">📋 Bestellung erzeugen</button>
      {% endif %}
    </div>
    <table class="alert-table">
      <thead>
        <tr>
          <th style="width:38px;"></th>
          <th>Ident</th>
          <th>Beschreibung</th>
          <th style="width:90px;">Bestand</th>
          <th style="width:90px;">Vorschlag</th>
          <th style="width:80px;">Quelle</th>
          <th style="width:90px; text-align:right;">Aktion</th>
        </tr>
      </thead>
      <tbody>
        {% for a in vendor_alerts %}
        <tr data-alert-id="{{ a.id }}">
          <td><span class="sev-dot {{ a.severity }}" title="{{ a.severity }}"></span></td>
          <td class="ident-cell">{{ a.item_ident }}</td>
          <td>{{ (a.item_description or '')|truncate(50) }}</td>
          <td class="qty-cell">
            <span class="now">{{ a.current_qty }}</span>
            <span class="slash">/</span>
            <span class="min">{{ a.threshold }}</span>
          </td>
          <td>
            <input type="number" class="order-input" value="{{ a.suggested_qty }}" min="1"
                   data-item-id="{{ a.item_id }}" data-vendor-id="{{ a.vendor_id or '' }}">
          </td>
          <td>{{ app_pill('tools' if 'TP-' in (a.item_ident or '') else 'management') }}</td>
          <td style="text-align:right;">
            <button onclick="ackOne({{ a.id }})" class="btn btn-ghost btn-sm" title="Alarm bestätigen ohne Bestellung">✓</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
{% endif %}

<script>
function ackOne(aid) {
  fetch('/api/stock-alerts/' + aid + '/ack', { method: 'POST' })
    .then(r => r.json())
    .then(d => { if (d.ok) {
      const row = document.querySelector('tr[data-alert-id="'+aid+'"]');
      if (row) { row.style.opacity = '0.3'; setTimeout(() => row.remove(), 300); }
    }});
}
function ackAll() {
  if (!confirm('Alle {{ counts.total }} Bestands-Alarme bestätigen? (Bestellungen separat anlegen)')) return;
  fetch('/api/stock-alerts/ack-all', { method: 'POST' })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}
function suggestOrder(vendorId, vendorName) {
  // Sammle alle Vorschlag-Inputs für diesen Lieferanten
  const block = event.target.closest('.vendor-block');
  const rows = block.querySelectorAll('input.order-input');
  const items = [];
  rows.forEach(inp => {
    const qty = parseInt(inp.value) || 0;
    if (qty > 0) items.push({ item_id: parseInt(inp.dataset.itemId), quantity: qty });
  });
  if (items.length === 0) { alert('Keine Mengen eingetragen.'); return; }
  // Vorerst: kopiere als Text in Zwischenablage für manuellen Bestell-Workflow
  // (Auto-Bestell-Endpoint kommt später wenn purchase-orders-Schema aktiv ist)
  const text = 'Bestellung an: ' + vendorName + '\n\n' +
    items.map(i => '- Artikel-ID ' + i.item_id + ' × ' + i.quantity).join('\n');
  navigator.clipboard.writeText(text).then(() => {
    alert('Bestellungs-Vorschlag in Zwischenablage:\n\n' + text + '\n\nBitte als Einkaufs-Bestellung anlegen.');
  });
}
</script>
{% endblock %}