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

{% block title %}Werkzeug-Magazin · {{ machine.name }}{% endblock %}
{% block breadcrumb %}
  <p class="text-xs text-neutral-500">
    <a href="/team" class="hover:underline">Team &amp; Maschinen</a> /
    <a href="/team/machines/{{ machine.id }}/edit" class="hover:underline">{{ machine.name }}</a> /
    Werkzeug-Magazin
  </p>
{% endblock %}
{% block heading %}Werkzeug-Magazin · {{ machine.name }}{% endblock %}

{% block topbar_actions %}
  <a href="/werkstatt/rüstpläne?machine_id={{ machine.id }}" class="btn btn-secondary btn-sm">
    📋 Rüstpläne
  </a>
  <a href="/team/machines/{{ machine.id }}/edit" class="btn btn-secondary btn-sm">
    ⚙ Maschine bearbeiten
  </a>
{% endblock %}

{% block content %}
<style>
  .mag-config-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .mag-config-row label { font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--card-text-muted); font-weight:600; }
  .mag-config-row input, .mag-config-row select { display:block; margin-top:4px; padding:5px 9px; border:1px solid rgba(255,255,255,0.20); border-radius:5px; font-size:13px; min-width:90px; background:rgba(255,255,255,0.06); color:var(--card-text); }
  body.theme-light .mag-config-row label { color:#737373; }
  body.theme-light .mag-config-row input, body.theme-light .mag-config-row select { border-color:#d4d4d4; background:#fff; color:#1a1a1a; }

  .magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 18px;
  }
  /* Mobile-Optimierung: bei <768px größere Touch-Targets + 2-spaltiges Grid */
  @media (max-width: 768px) {
    .magazine-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mag-slot { min-height: 110px; padding: 12px 12px 14px; }
    .mag-slot-no { font-size: 12px; }
    .modal-card { max-width: 96vw; width: 96vw; max-height: 92vh; }
    .modal-body { padding: 14px 16px; gap: 16px; }
    .modal-body input, .modal-body select, .modal-body textarea { padding: 10px 12px; font-size: 14px; }
    .modal-foot button { min-height: 44px; padding: 10px 14px; }
    .mag-config-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .mag-config-row input, .mag-config-row select { width: 100%; min-width: 0; }
  }
  @media (max-width: 480px) {
    .magazine-grid { grid-template-columns: 1fr; }
  }
  .mag-slot {
    border: 1.5px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    padding: 8px 9px 10px;
    cursor: pointer;
    transition: all 120ms;
    position: relative;
    min-height: 96px;
    display: flex; flex-direction: column;
    color: var(--card-text);
  }
  .mag-slot:hover {
    border-color: var(--brand-orange);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(242,88,27,0.25);
    transform: translateY(-1px);
  }
  .mag-slot-no {
    font-size: 11px;
    color: var(--card-text-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .mag-slot.empty .mag-slot-content {
    color: var(--card-text-muted); font-style: italic; font-size: 11px;
    display: flex; align-items: center; justify-content: center; flex: 1; opacity: 0.7;
  }
  .mag-slot.filled {
    border-color: var(--brand-orange);
    background: linear-gradient(180deg, rgba(242,88,27,0.12) 0%, rgba(242,88,27,0.04) 100%);
  }
  .mag-slot.filled .mag-slot-content {
    color: var(--card-text); font-weight: 600; font-size: 11.5px; line-height: 1.3;
    word-break: break-word; flex:1;
  }
  .mag-slot .mag-slot-meta {
    font-size: 10px; color: var(--card-text-muted); margin-top: 4px; font-weight: normal;
  }
  .mag-slot .mag-slot-stand {
    margin-top: 6px;
    height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 2px;
    overflow: hidden;
  }
  body.theme-light .mag-slot { border-color:#e5e5e5; background:#fafafa; color:#1a1a1a; }
  body.theme-light .mag-slot:hover { background:#fff; }
  body.theme-light .mag-slot-no { color:#737373; }
  body.theme-light .mag-slot.empty .mag-slot-content { color:#a3a3a3; opacity:1; }
  body.theme-light .mag-slot.filled { background: linear-gradient(180deg, var(--brand-orange-tint) 0%, #fff 100%); }
  body.theme-light .mag-slot.filled .mag-slot-content { color:#1a1a1a; }
  body.theme-light .mag-slot .mag-slot-meta { color:#737373; }
  body.theme-light .mag-slot .mag-slot-stand { background:#e5e5e5; }
  .mag-slot .mag-slot-stand-bar {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 60%, #facc15 80%, #ef4444 100%);
    transition: width 200ms;
  }

  /* Modal */
  .modal-back { position: fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:9000; }
  .modal-back.is-open { display:flex; }
  .modal-card { background:#1a1a1a; color:var(--card-text); border-radius:10px; max-width:480px; width:90%; box-shadow:0 16px 40px rgba(0,0,0,0.45); max-height:90vh; overflow-y:auto; border:1px solid rgba(255,255,255,0.10); }
  .modal-head { padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.10); display:flex; justify-content:space-between; align-items:center; }
  .modal-head h3 { font-size:14px; font-weight:600; color:var(--card-text); }
  .modal-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
  .modal-body label { font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--card-text-muted); font-weight:600; }
  body.theme-light .modal-card { background:#fff; color:#1a1a1a; border-color:rgba(0,0,0,0.10); }
  body.theme-light .modal-head { border-bottom-color:#e5e5e5; }
  body.theme-light .modal-head h3 { color:#1a1a1a; }
  body.theme-light .modal-body label { color:#737373; }
  .modal-body input, .modal-body select, .modal-body textarea {
    width:100%; margin-top:4px; padding:7px 10px; border:1px solid #d4d4d4; border-radius:5px; font-size:13px;
  }
  .modal-foot { padding:12px 18px; border-top:1px solid #e5e5e5; display:flex; gap:8px; justify-content:flex-end; }
  .item-search-result { padding:6px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:12px; }
  .item-search-result:hover { background:var(--brand-orange-tint); }
  .item-search-result.selected { background:rgba(242,88,27,0.12); }
</style>

<!-- Magazin-Konfiguration -->
<div class="card">
  <div class="card-header">
    <div>
      <h2>Magazin-Konfiguration</h2>
      <p class="sub">Slot-Anzahl, maximaler Werkzeugwechsel pro Job, Maschinen-Gruppe</p>
    </div>
  </div>
  <form id="mag-config-form" class="p-5 mag-config-row" onsubmit="return saveConfig(event)">
    <div>
      <label>Magazin-Slots</label>
      <input type="number" id="cfg-size" name="magazine_size" min="0" max="200" value="{{ machine.magazine_size or 0 }}">
    </div>
    <div>
      <label>Max. Werkzeug-Wechsel</label>
      <input type="number" id="cfg-max" name="max_items" min="0" value="{{ machine.max_items or 0 }}">
    </div>
    <div>
      <label>Maschinen-Gruppe</label>
      <input type="text" id="cfg-grp" name="machine_group" placeholder="Fräsen / Drehen / …" value="{{ machine.machine_group or '' }}">
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Übernehmen</button>
    <span id="cfg-status" class="text-xs text-neutral-500"></span>
  </form>
</div>

<!-- Rüstplan-Loader -->
{% if setups %}
<div class="card" style="margin-top:14px;">
  <div class="card-header">
    <div>
      <h2>Rüstplan in Magazin laden</h2>
      <p class="sub">Komplettes Werkzeug-Setup mit einem Klick übernehmen</p>
    </div>
  </div>
  <div class="p-5 mag-config-row">
    <div style="flex:1;">
      <label>Rüstplan</label>
      <select id="setup-pick">
        <option value="">— wählen —</option>
        {% for s in setups %}
        <option value="{{ s.id }}">{{ s.name }} ({{ s.item_count }} Werkzeuge{% if s.material %} · {{ s.material }}{% endif %})</option>
        {% endfor %}
      </select>
    </div>
    <button type="button" class="btn btn-primary btn-sm" onclick="applySetup()">Laden</button>
  </div>
</div>
{% endif %}

<!-- Slot-Grid -->
<div class="card" style="margin-top:14px;">
  <div class="card-header">
    <div>
      <h2>Slot-Belegung</h2>
      <p class="sub">Klick auf einen Slot zum Belegen / Wechseln</p>
    </div>
    <div class="ml-auto text-xs text-neutral-500" id="slot-summary"></div>
  </div>
  <div class="p-5">
    {% if not slots %}
      <p class="text-sm text-neutral-500 italic">Magazin-Größe noch nicht gesetzt — oben „Magazin-Slots" eintragen und „Übernehmen".</p>
    {% else %}
      <div class="magazine-grid" id="mag-grid">
        {% for s in slots %}
        <div class="mag-slot {{ 'filled' if s.item_id or s.tool_id else 'empty' }}"
             data-slot="{{ s.slot_no }}"
             onclick="openSlotModal({{ s.slot_no }})">
          <div class="mag-slot-no">
            SLOT {{ "%02d"|format(s.slot_no) }}
            {% if s.sister_slot_no %}<span title="Sister-Tool: Slot {{ s.sister_slot_no }}" style="float:right;color:#3b82f6;font-weight:600;">↔{{ s.sister_slot_no }}</span>{% endif %}
          </div>
          <div class="mag-slot-content">
            {% if s.item_ident %}
              <div>{{ s.item_ident }} {{ app_pill(s.item_source_app) }}</div>
              {% if s.item_description %}<div class="mag-slot-meta">{{ s.item_description|truncate(40) }}</div>{% endif %}
            {% elif s.tool_name %}
              <div>{{ s.tool_name }}</div>
              {% if s.tool_ident %}<div class="mag-slot-meta">{{ s.tool_ident }}</div>{% endif %}
            {% else %}
              <span>+ belegen</span>
            {% endif %}
            {% if (s.tool_length_mm or s.tool_diameter_mm) and (s.item_id or s.tool_id) %}
              <div class="mag-slot-meta" style="color:#3b82f6;font-family:ui-monospace,monospace;">
                {% if s.tool_diameter_mm %}Ø{{ "%.2f"|format(s.tool_diameter_mm) }}{% endif %}
                {% if s.tool_length_mm %}{% if s.tool_diameter_mm %} · {% endif %}L{{ "%.1f"|format(s.tool_length_mm) }}{% endif %}
              </div>
            {% endif %}
            {% if s.standzeit_pct is not none and (s.item_id or s.tool_id) %}
              <div class="mag-slot-stand"><div class="mag-slot-stand-bar" style="width:{{ s.standzeit_pct }}%;"></div></div>
              <div class="mag-slot-meta">
                Standzeit {{ s.standzeit_pct|round(0) }}%
                {% if s.quantity and s.quantity > 1 %} · Menge {{ s.quantity }}{% endif %}
                {% if s.usage_count and s.usage_max %} · {{ s.usage_count }}/{{ s.usage_max }}{% endif %}
              </div>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>

<!-- Modal: Slot bearbeiten -->
<div class="modal-back" id="slot-modal">
  <div class="modal-card">
    <div class="modal-head">
      <h3 id="slot-modal-title">Slot bearbeiten</h3>
      <button onclick="closeSlotModal()" class="btn btn-ghost btn-sm">✕</button>
    </div>
    <div class="modal-body">
      <div>
        <label>Werkzeug suchen (Ident oder Beschreibung)</label>
        <input type="text" id="item-search" placeholder="VHM-Fräser, Bohrer Ø8, …" oninput="searchItems()">
        <div id="item-results" style="max-height:160px; overflow-y:auto; border:1px solid #e5e5e5; border-radius:5px; margin-top:6px; display:none;"></div>
      </div>
      <div id="selected-item-info" style="display:none; padding:8px; background:var(--brand-orange-tint); border-radius:5px; font-size:12px;">
        <strong>Gewählt:</strong> <span id="selected-item-text"></span>
      </div>
      <div style="display:flex; gap:10px;">
        <div style="flex:1;">
          <label>Menge</label>
          <input type="number" id="m-quantity" value="1" min="1">
        </div>
        <div style="flex:1;">
          <label>Standzeit (%)</label>
          <input type="number" id="m-standzeit" value="100" min="0" max="100" step="5">
        </div>
      </div>

      <div style="border-top:1px solid #e5e5e5; padding-top:12px; margin-top:4px;">
        <label style="color:#3b82f6;">Voreinstellung (Werkzeug-Geometrie)</label>
        <div style="display:flex; gap:10px; margin-top:4px;">
          <div style="flex:1;">
            <label style="font-size:9px;">Länge (mm)</label>
            <input type="number" id="m-length" step="0.01" placeholder="z.B. 78.42">
          </div>
          <div style="flex:1;">
            <label style="font-size:9px;">Durchmesser (mm)</label>
            <input type="number" id="m-diameter" step="0.01" placeholder="z.B. 10.00">
          </div>
        </div>
      </div>

      <div style="display:flex; gap:10px;">
        <div style="flex:1;">
          <label>Sister-Slot</label>
          <input type="number" id="m-sister" min="1" placeholder="optional">
          <div style="font-size:10px; color:#737373; margin-top:3px;">Bei Standzeit=0: Maschine wechselt auf diesen Slot</div>
        </div>
        <div style="flex:1;">
          <label>Max. Standmenge</label>
          <input type="number" id="m-usage-max" min="0" placeholder="z.B. 500 Bohrungen">
        </div>
      </div>

      <div>
        <label>Notiz</label>
        <input type="text" id="m-note" placeholder="optional">
      </div>
    </div>
    <div class="modal-foot">
      <button onclick="showSlotHistory()" class="btn btn-secondary btn-sm">📜 Verlauf</button>
      <button onclick="clearSlot()" class="btn btn-secondary btn-sm" style="color:#dc2626;">Slot leeren</button>
      <button onclick="closeSlotModal()" class="btn btn-ghost btn-sm">Abbrechen</button>
      <button onclick="saveSlot()" class="btn btn-primary btn-sm">Belegen / Speichern</button>
    </div>
  </div>
</div>

<!-- Modal: Wechsel-Historie -->
<div class="modal-back" id="history-modal">
  <div class="modal-card" style="max-width:640px;">
    <div class="modal-head">
      <h3 id="history-modal-title">Wechsel-Verlauf</h3>
      <button onclick="closeHistoryModal()" class="btn btn-ghost btn-sm">✕</button>
    </div>
    <div class="modal-body" style="max-height:60vh; overflow-y:auto;">
      <div id="history-list"><p class="text-sm text-neutral-500 italic">Lade …</p></div>
    </div>
    <div class="modal-foot">
      <button onclick="closeHistoryModal()" class="btn btn-ghost btn-sm">Schließen</button>
    </div>
  </div>
</div>

<script>
const MACHINE_ID = {{ machine.id }};
const SLOTS_DATA = {{ slots|tojson }};
let currentSlot = null;
let selectedItemId = null;
let selectedItemText = '';

function saveConfig(e) {
  e.preventDefault();
  const fd = new FormData(document.getElementById('mag-config-form'));
  fetch('/api/machines/' + MACHINE_ID + '/magazine/configure', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      const s = document.getElementById('cfg-status');
      s.textContent = '✓ gespeichert';
      s.style.color = '#16a34a';
      setTimeout(() => location.reload(), 600);
    })
    .catch(err => {
      const s = document.getElementById('cfg-status');
      s.textContent = '✗ Fehler: ' + err;
      s.style.color = '#dc2626';
    });
  return false;
}

function openSlotModal(slot) {
  currentSlot = slot;
  selectedItemId = null;
  selectedItemText = '';
  // Aktuellen Slot-Daten finden
  const cur = SLOTS_DATA.find(s => s.slot_no === slot) || {};
  const isFilled = !!(cur.item_id || cur.tool_id);
  document.getElementById('slot-modal-title').textContent =
    'Slot ' + String(slot).padStart(2,'0') + (isFilled ? ' bearbeiten' : ' belegen');
  document.getElementById('item-search').value = '';
  document.getElementById('item-results').style.display = 'none';
  document.getElementById('item-results').innerHTML = '';
  // Wenn schon belegt: aktuelles Werkzeug als „vorausgewählt" anzeigen, sodass User nur Geometrie etc. ändern kann
  if (isFilled && cur.item_id) {
    selectedItemId = cur.item_id;
    selectedItemText = (cur.item_ident || '') + (cur.item_description ? ' — ' + cur.item_description.substring(0,40) : '');
    document.getElementById('selected-item-text').textContent = selectedItemText + ' (aktuell)';
    document.getElementById('selected-item-info').style.display = 'block';
  } else {
    document.getElementById('selected-item-info').style.display = 'none';
  }
  document.getElementById('m-quantity').value = cur.quantity || 1;
  document.getElementById('m-standzeit').value = cur.standzeit_pct != null ? cur.standzeit_pct : 100;
  document.getElementById('m-length').value = cur.tool_length_mm != null ? cur.tool_length_mm : '';
  document.getElementById('m-diameter').value = cur.tool_diameter_mm != null ? cur.tool_diameter_mm : '';
  document.getElementById('m-sister').value = cur.sister_slot_no != null ? cur.sister_slot_no : '';
  document.getElementById('m-usage-max').value = cur.usage_max != null ? cur.usage_max : '';
  document.getElementById('m-note').value = cur.note || '';
  document.getElementById('slot-modal').classList.add('is-open');
  setTimeout(() => document.getElementById('item-search').focus(), 100);
}
function closeSlotModal() {
  document.getElementById('slot-modal').classList.remove('is-open');
  currentSlot = null;
}

let searchTimer = null;
function searchItems() {
  clearTimeout(searchTimer);
  const q = document.getElementById('item-search').value.trim();
  if (q.length < 2) {
    document.getElementById('item-results').style.display = 'none';
    return;
  }
  searchTimer = setTimeout(() => {
    fetch('/api/shopfloor/items/search?q=' + encodeURIComponent(q) + '&types=tool,measuring_equipment&limit=20')
      .then(r => r.json())
      .then(items => {
        const box = document.getElementById('item-results');
        if (!items || items.length === 0) {
          box.innerHTML = '<div style="padding:10px;color:#737373;font-style:italic;">Keine Treffer</div>';
        } else {
          box.innerHTML = items.map(i =>
            '<div class="item-search-result" onclick="pickItem(' + i.id + ',\'' +
            (i.ident || '').replace(/'/g,"\\'") + ' — ' + (i.description || '').replace(/'/g,"\\'").substring(0,40) +
            '\')">' +
            '<strong>' + escHtml(i.ident || '?') + '</strong>' +
            (i.description ? ' — ' + escHtml(i.description.substring(0,50)) : '') +
            '</div>'
          ).join('');
        }
        box.style.display = 'block';
      });
  }, 250);
}
function pickItem(itemId, text) {
  selectedItemId = itemId;
  selectedItemText = text;
  document.getElementById('selected-item-text').textContent = text;
  document.getElementById('selected-item-info').style.display = 'block';
  document.getElementById('item-results').style.display = 'none';
}
function escHtml(s) {
  return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

async function saveSlot() {
  if (!selectedItemId) {
    alert('Bitte erst ein Werkzeug suchen und auswählen.');
    return;
  }
  const slot = currentSlot;
  // 1. Belegen (oder Re-Belegung) — wirft alten Eintrag ins Archiv
  const fd = new FormData();
  fd.append('item_id', selectedItemId);
  fd.append('quantity', document.getElementById('m-quantity').value || '1');
  fd.append('standzeit_pct', document.getElementById('m-standzeit').value || '100');
  fd.append('note', document.getElementById('m-note').value);
  await fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + slot + '/assign', { method:'POST', body: fd });
  // 2. Geometrie (L/Ø) speichern — auch wenn leer (=clear)
  const geomFd = new FormData();
  geomFd.append('tool_length_mm', document.getElementById('m-length').value);
  geomFd.append('tool_diameter_mm', document.getElementById('m-diameter').value);
  await fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + slot + '/geometry', { method:'POST', body: geomFd });
  // 3. Sister-Slot
  const sisFd = new FormData();
  sisFd.append('sister_slot_no', document.getElementById('m-sister').value);
  await fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + slot + '/sister', { method:'POST', body: sisFd });
  // 4. Usage-Max
  const umFd = new FormData();
  umFd.append('usage_max', document.getElementById('m-usage-max').value);
  await fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + slot + '/usage-max', { method:'POST', body: umFd });
  location.reload();
}

function showSlotHistory() {
  if (!currentSlot) return;
  document.getElementById('history-modal-title').textContent =
    'Wechsel-Verlauf · Slot ' + String(currentSlot).padStart(2,'0');
  document.getElementById('history-list').innerHTML = '<p class="text-sm text-neutral-500 italic">Lade …</p>';
  document.getElementById('history-modal').classList.add('is-open');
  fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + currentSlot + '/history')
    .then(r => r.json())
    .then(d => {
      const list = d.history || [];
      if (list.length === 0) {
        document.getElementById('history-list').innerHTML =
          '<p class="text-sm text-neutral-500 italic">Noch keine Wechsel-Einträge für diesen Slot.</p>';
        return;
      }
      document.getElementById('history-list').innerHTML = list.map(h => {
        const name = h.item_ident || h.tool_ident || '—';
        const desc = h.item_description || h.tool_name || '';
        const status = h.removed_at
          ? '<span style="color:#737373;">entfernt ' + h.removed_at.substring(0,16) + '</span>'
          : '<span style="color:#16a34a;font-weight:600;">aktuell aktiv</span>';
        const setBy = h.set_by_name || '—';
        const geom = (h.tool_diameter_mm || h.tool_length_mm)
          ? ' · <span style="color:#3b82f6;font-family:ui-monospace,monospace;">' +
            (h.tool_diameter_mm ? 'Ø' + Number(h.tool_diameter_mm).toFixed(2) : '') +
            (h.tool_length_mm ? ' L' + Number(h.tool_length_mm).toFixed(1) : '') +
            '</span>'
          : '';
        return '<div style="border-bottom:1px solid #f0f0f0; padding:10px 0; font-size:12px;">' +
               '<div style="display:flex; justify-content:space-between; gap:10px;">' +
                 '<div><strong>' + escHtml(name) + '</strong>' +
                 (desc ? ' <span style="color:#737373;">— ' + escHtml(desc.substring(0,50)) + '</span>' : '') +
                 geom + '</div>' +
                 '<div style="text-align:right; font-size:11px; white-space:nowrap;">' + status + '</div>' +
               '</div>' +
               '<div style="font-size:11px; color:#737373; margin-top:3px;">' +
                 'Gesetzt: ' + (h.set_at ? h.set_at.substring(0,16) : '?') +
                 ' · von ' + escHtml(setBy) +
                 (h.note ? ' · Notiz: ' + escHtml(h.note) : '') +
                 (h.standzeit_pct != null ? ' · Standzeit ' + Math.round(h.standzeit_pct) + '%' : '') +
                 (h.usage_count ? ' · ' + h.usage_count + ' Stk.' : '') +
               '</div>' +
               '</div>';
      }).join('');
    });
}
function closeHistoryModal() {
  document.getElementById('history-modal').classList.remove('is-open');
}
function clearSlot() {
  if (!currentSlot) return;
  if (!confirm('Slot ' + currentSlot + ' wirklich leeren?')) return;
  fetch('/api/machines/' + MACHINE_ID + '/magazine/slot/' + currentSlot + '/clear', { method:'POST' })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}

function applySetup() {
  const sid = document.getElementById('setup-pick').value;
  if (!sid) { alert('Bitte einen Rüstplan auswählen.'); return; }
  if (!confirm('Rüstplan in Magazin laden? Bestehende Belegung wird überschrieben.')) return;
  const fd = new FormData();
  fd.append('machine_id', MACHINE_ID);
  fetch('/api/tool-setups/' + sid + '/apply', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (d.ok) {
        alert(d.slots_filled + ' Slots geladen.');
        location.reload();
      }
    });
}

// Summary
(function() {
  const slots = document.querySelectorAll('.mag-slot');
  const filled = document.querySelectorAll('.mag-slot.filled').length;
  document.getElementById('slot-summary').textContent =
    filled + ' / ' + slots.length + ' Slots belegt';
})();

// Multi-User-Sync via SSE: wenn anderer Browser-Tab Slot ändert, reload diese Seite
(function() {
  if (typeof EventSource === 'undefined') return;
  try {
    const es = new EventSource('/api/machines/' + MACHINE_ID + '/magazine/events');
    let lastReload = Date.now();
    es.addEventListener('magazine-update', (e) => {
      try {
        const data = JSON.parse(e.data);
        // Eigene Updates nicht reloaden (passieren ja bereits durch unsere POSTs + reload)
        if (data.by && data.by === '{{ request.state.current_user.username if request.state.current_user else "" }}') return;
        // Debounce: max 1 Reload pro 2s
        const now = Date.now();
        if (now - lastReload < 2000) return;
        lastReload = now;
        // Sanfter Hinweis statt Hard-Reload
        const banner = document.createElement('div');
        banner.textContent = '🔄 Magazin wurde von einem anderen Nutzer aktualisiert — neu laden …';
        banner.style.cssText = 'position:fixed;top:0;left:0;right:0;background:var(--brand-orange);color:#fff;padding:8px 14px;text-align:center;font-size:13px;z-index:99999;';
        document.body.appendChild(banner);
        setTimeout(() => location.reload(), 1500);
      } catch (err) { /* ignore */ }
    });
    es.onerror = () => { /* silent */ };
  } catch (err) { /* SSE nicht verfügbar */ }
})();
</script>
{% endblock %}