{% extends "base.html" %}
{% block title %}Störungen{% endblock %}
{% block heading %}🚨 Störungs-Übersicht{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Störungen</p>{% endblock %}

{% block content %}
<style>
  .inc-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-bottom:18px; }
  .inc-stat { background:rgba(15,22,48,0.40); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:18px; }
  .inc-stat .v { font-size:32px; font-weight:700; color:#fff; }
  .inc-stat .l { font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px; }
  .inc-card { background:rgba(15,22,48,0.40); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:14px 18px; margin-bottom:10px; display:grid; grid-template-columns: 1fr auto; gap:14px; align-items:start; }
  .inc-card.is-critical { border-left:4px solid #ef4444; }
  .inc-card.is-high { border-left:4px solid #f59e0b; }
  .inc-card.is-medium { border-left:4px solid #fcd34d; }
  .inc-card.is-low { border-left:4px solid #94a3b8; }
  .inc-meta { font-size:11px; color:rgba(255,255,255,0.55); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap; }
  .inc-actions { display:flex; gap:6px; flex-direction:column; }
  .inc-btn { padding:6px 12px; border-radius:6px; font-size:12px; font-weight:600; border:none; cursor:pointer; }
  .inc-btn.assign { background:#fcd34d; color:#0f1620; }
  .inc-btn.resolve { background:#10b981; color:#fff; }
  .inc-btn.close { background:rgba(255,255,255,0.10); color:#fff; }
</style>

<div class="inc-stats">
  <div class="inc-stat">
    <div class="v" style="color:#ef4444;">{{ stats.open }}</div>
    <div class="l">🔴 Offen</div>
  </div>
  <div class="inc-stat">
    <div class="v" style="color:#fcd34d;">{{ stats.assigned }}</div>
    <div class="l">🟡 In Bearbeitung</div>
  </div>
  <div class="inc-stat">
    <div class="v" style="color:#ef4444;">{{ stats.critical }}</div>
    <div class="l">🚨 Kritisch</div>
  </div>
</div>

<div>
  {% for i in incidents %}
  {% set cat = CATEGORIES.get(i.category, ('❓ ' ~ i.category, 'medium')) %}
  <div class="inc-card is-{{ i.severity }}">
    <div>
      <div style="font-size:15px;font-weight:600;">
        {{ cat[0] }}
        <span style="margin-left:8px;font-size:11px;color:rgba(255,255,255,0.55);font-weight:normal;">
          {{ STATUS_LABELS.get(i.status, i.status) }}
        </span>
      </div>
      {% if i.description %}<div style="font-size:13px;margin-top:4px;color:rgba(255,255,255,0.85);">{{ i.description }}</div>{% endif %}
      <div class="inc-meta">
        {% if i.machine_name %}<span>⚙️ {{ i.machine_name }}</span>{% endif %}
        {% if i.job_ident %}<span>📋 {{ i.job_ident }}</span>{% endif %}
        <span>👤 {{ i.reporter_first }} {{ i.reporter_last }}</span>
        <span>🕐 {{ i.reported_at[:16] }}</span>
        {% if i.severity == 'critical' %}<span style="color:#ef4444;font-weight:700;">⚠ KRITISCH</span>{% endif %}
      </div>
    </div>
    <div class="inc-actions">
      {% if i.status == 'open' %}
        <button class="inc-btn assign" onclick="incidentSetStatus({{ i.id }}, 'assigned')">Übernehmen</button>
      {% elif i.status == 'assigned' %}
        <button class="inc-btn resolve" onclick="resolveIncident({{ i.id }})">Behoben</button>
      {% endif %}
      {% if i.status == 'resolved' %}
        <button class="inc-btn close" onclick="incidentSetStatus({{ i.id }}, 'closed')">Schließen</button>
      {% endif %}
    </div>
  </div>
  {% else %}
  <div style="text-align:center;padding:60px;color:rgba(255,255,255,0.40);font-size:14px;">
    🟢 Aktuell keine offenen Störungen.
  </div>
  {% endfor %}
</div>

<script>
function incidentSetStatus(id, status) {
  fetch('/api/incidents/' + id + '/status', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({status: status})
  }).then(r=>r.json()).then(d => { if (d.ok) location.reload(); });
}
function resolveIncident(id) {
  const minutes = prompt('Wieviele Minuten Stillstand?', '15');
  if (minutes === null) return;
  const resolution = prompt('Was wurde gemacht? (Lösung)');
  if (resolution === null) return;
  fetch('/api/incidents/' + id + '/status', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({status:'resolved', minutes_lost: parseInt(minutes), resolution: resolution})
  }).then(r=>r.json()).then(d => { if (d.ok) location.reload(); });
}
</script>

{% endblock %}