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

{% block title %}Aktions-Dashboard{% endblock %}
{% block heading %}Aktions-Dashboard{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/production">Alle</a>
    <a class="tab {% if status_filter=='running' %}is-active{% endif %}" href="/production?status=running">Laufend</a>
    <a class="tab {% if status_filter=='queued' %}is-active{% endif %}" href="/production?status=queued">Wartend</a>
    <a class="tab {% if status_filter=='done' %}is-active{% endif %}" href="/production?status=done">Fertig</a>
  </div>
{% endblock %}

{% block content %}

<!-- KPI bar -->
<section class="grid grid-cols-2 md:grid-cols-5 gap-4">
  <div class="kpi" style="border-left:4px solid #3b82f6;">
    <p class="label" style="color:#1d4ed8;">Laufend</p>
    <p class="value">{{ kpis.running }}</p>
    <p class="sub">Maschinen aktiv</p>
  </div>
  <div class="kpi" style="border-left:4px solid #f59e0b;">
    <p class="label" style="color:#b45309;">Pausiert</p>
    <p class="value">{{ kpis.paused }}</p>
    <p class="sub">Setup / Wartung</p>
  </div>
  <div class="kpi" style="border-left:4px solid #737373;">
    <p class="label">Wartend</p>
    <p class="value">{{ kpis.queued }}</p>
    <p class="sub">in der Warteschlange</p>
  </div>
  <div class="kpi" style="border-left:4px solid #10b981;">
    <p class="label" style="color:#047857;">Fertig heute</p>
    <p class="value">{{ kpis.done_today }}</p>
    <p class="sub">Aufträge abgeschlossen</p>
  </div>
  <div class="kpi" style="border-left:4px solid #2563EB;">
    <p class="label" style="color:#1e40af;">Stück heute</p>
    <p class="value">{{ kpis.pieces_today }}</p>
    <p class="sub">produzierte Teile</p>
  </div>
</section>

<!-- New job form -->
<details class="card">
  <summary class="card-header cursor-pointer" style="list-style:none;">
    <div>
      <h2>+ Neuen Auftrag anlegen</h2>
      <p class="sub">Maschine, Artikel, Stückzahl-Soll</p>
    </div>
  </summary>
  <form method="post" action="/production/new" class="p-5 grid grid-cols-3 gap-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auftragsnummer *</label>
      <input class="input mt-1 w-full nums" type="text" name="ident" value="{{ next_ident }}" required>
    </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="">— wählen —</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">Mitarbeiter</label>
      <select class="select mt-1 w-full" name="user_id">
        <option value="">— später zuweisen —</option>
        {% for u in users %}<option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Artikel (zu produzierender)</label>
      <select class="select mt-1 w-full" name="item_id">
        <option value="">— wählen —</option>
        {% for it in items %}<option value="{{ it.id }}">{{ it.ident }} — {{ it.description }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Stückzahl-Soll *</label>
      <input class="input mt-1 w-full nums" type="number" name="qty_target" value="100" min="1" required>
    </div>
    <div class="col-span-3">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz / Zeichnung-Nr.</label>
      <input class="input mt-1 w-full" type="text" name="note" placeholder="z.B. Zg. 4100-02">
    </div>
    <div class="col-span-3 flex justify-end">
      <button class="btn btn-primary" type="submit">Auftrag anlegen</button>
    </div>
  </form>
</details>

{# Option-F.2: Auto-Vorschläge-Widget #}
{% if suggestions %}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-bottom:16px;">
  {% for s in suggestions %}
  <div style="background:rgba(15,22,48,0.40);border:1px solid {{ s.color }}40;border-left:4px solid {{ s.color }};border-radius:10px;padding:14px;display:flex;gap:12px;">
    <div style="font-size:24px;flex-shrink:0;">{{ s.icon }}</div>
    <div style="flex:1;min-width:0;">
      <div style="font-weight:700;font-size:13px;color:{{ s.color }};">{{ s.title }}</div>
      <div style="font-size:12px;color:rgba(255,255,255,0.75);margin-top:2px;">{{ s.body }}</div>
      {% if s.action_url %}
      <a href="{{ s.action_url }}" style="display:inline-block;margin-top:6px;font-size:11px;color:{{ s.color }};font-weight:600;text-decoration:none;">{{ s.action_label }}</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<!-- Jobs list -->
<div class="card">
  <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
    <div>
      <h2>{{ jobs|length }} Aufträge</h2>
      <p class="sub">{% if sort_mode == 'auto' %}🤖 Auto-priorisiert nach Liefertermin + Priorität{% else %}Laufende oben, fertige unten{% endif %}</p>
    </div>
    {# Option-E.1: Sortier-Toggle #}
    <div style="display:flex;gap:6px;">
      <a href="/production" class="btn btn-sm {% if sort_mode != 'auto' %}btn-primary{% else %}btn-secondary{% endif %}">📅 Standard</a>
      <a href="/production?sort=auto" class="btn btn-sm {% if sort_mode == 'auto' %}btn-primary{% else %}btn-secondary{% endif %}">🤖 Auto-Priorität</a>
    </div>
  </div>
  {% if jobs %}
  <div class="divide-y" style="border-color:#e5e5e5;">
  {% for j in jobs %}
    <div class="p-5">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-3 mb-1">
            <span class="nums font-semibold text-base">{{ j.ident }}</span>
            {% if j.status == 'running' %}
              <span class="badge badge-blue">● Läuft</span>
            {% elif j.status == 'paused' %}
              <span class="badge badge-amber">⏸ Pausiert</span>
            {% elif j.status == 'queued' %}
              <span class="badge badge-neutral">Wartet</span>
            {% elif j.status == 'done' %}
              <span class="badge badge-emerald">✓ Fertig</span>
            {% else %}
              <span class="badge badge-red">Storniert</span>
            {% endif %}
            {% if j.machine_name %}<span class="text-xs text-neutral-500">{{ j.machine_name }}</span>{% endif %}
            {% if j.first_name %}<span class="text-xs text-neutral-500">· {{ j.first_name }} {{ j.last_name }}</span>{% endif %}
            {% if j.parent_item_ident %}
            <span class="badge" style="background:#fef3c7; color:#92400e;"
                  title="Sub-Auftrag — Teil von {{ j.parent_item_ident }}">
              Sub von {{ j.parent_item_ident }}
            </span>
            {% endif %}
            {% if j.sub_job_count and j.sub_job_count > 0 %}
            <span class="badge" style="background:#d1fae5; color:#065f46;"
                  title="Diese Baugruppe hat {{ j.sub_job_count }} Sub-Auftr&auml;ge">
              + {{ j.sub_job_count }} Sub-Auftr&auml;ge
            </span>
            {% endif %}
          </div>
          {% if j.item_ident %}
          <div class="text-sm">
            <span class="text-neutral-500">Artikel:</span>
            <a href="/items/{{ j.item_id }}" class="text-blue-600 hover:underline nums">{{ j.item_ident }}</a>
            <span class="text-neutral-600 text-xs">— {{ j.item_description }}</span>
          </div>
          {% endif %}
          {% if j.note %}<p class="text-xs text-neutral-500 mt-1">{{ j.note }}</p>{% endif %}

          <!-- Progress bar -->
          <div class="mt-3 flex items-center gap-4">
            <div class="flex-1 relative h-3 bg-neutral-100 rounded-full overflow-hidden">
              <div class="absolute inset-y-0 left-0 transition-all"
                   style="width:{{ j.percent }}%; background:{% if j.status=='done' %}#10b981{% elif j.status=='paused' %}#f59e0b{% else %}#3b82f6{% endif %};"></div>
            </div>
            <span class="nums text-sm font-semibold w-32 text-right">
              {{ j.qty_done }} / {{ j.qty_target }} <span class="text-xs text-neutral-500">({{ j.percent }}%)</span>
            </span>
          </div>
        </div>

        <div class="flex flex-col gap-2 items-end">
          {% if j.status in ('running', 'paused', 'queued') %}
          <form method="post" action="/production/{{ j.id }}/progress" class="flex items-center gap-2">
            <input class="input nums w-20" type="number" name="qty_done" value="{{ j.qty_done }}" min="0" max="{{ j.qty_target * 2 }}">
            <button class="btn btn-sm btn-secondary" type="submit">Stück melden</button>
          </form>
          <div class="flex gap-1">
            {% if j.status == 'queued' %}
              <form method="post" action="/production/{{ j.id }}/start"><button class="btn btn-sm btn-primary">▶ Start</button></form>
              {# Mängel-Beseitigung: scheduled-Button #}
              <button type="button" class="btn btn-sm btn-secondary" title="Auf 'geplant' setzen mit Datum"
                      onclick="scheduleJob({{ j.id }})">📅 Planen</button>
            {% elif j.status == 'scheduled' %}
              <form method="post" action="/production/{{ j.id }}/start"><button class="btn btn-sm btn-primary">▶ Start jetzt</button></form>
              <span class="badge badge-blue" style="font-size:10px;">📅 geplant{% if j.scheduled_for %} {{ j.scheduled_for[:10] }}{% endif %}</span>
            {% elif j.status == 'running' %}
              <form method="post" action="/production/{{ j.id }}/pause"><button class="btn btn-sm btn-secondary">⏸ Pause</button></form>
              <form method="post" action="/production/{{ j.id }}/finish"><button class="btn btn-sm btn-primary">✓ Fertig</button></form>
            {% elif j.status == 'paused' %}
              <form method="post" action="/production/{{ j.id }}/resume"><button class="btn btn-sm btn-primary">▶ Fortsetzen</button></form>
            {% endif %}
            <form method="post" action="/production/{{ j.id }}/cancel" onsubmit="return confirm('Auftrag stornieren?')">
              <button class="btn btn-sm btn-secondary" style="color:#dc2626;">×</button>
            </form>
          </div>
          {% else %}
          <div class="text-xs text-neutral-500 nums">
            {% if j.finished_at %}Fertig: {{ j.finished_at[:16] }}{% endif %}
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
  </div>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">
    Noch keine Aufträge — oben "+ Neuen Auftrag anlegen" aufklappen.
  </div>
  {% endif %}
</div>

<script>
window.scheduleJob = function(jobId) {
  const today = new Date().toISOString().substring(0,10);
  const when = prompt('Job auf "geplant" setzen — Termin (YYYY-MM-DD):', today);
  if (!when) return;
  fetch('/api/production/' + jobId + '/schedule', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({scheduled_for: when})
  }).then(r=>r.json()).then(d => {
    if (d.ok) location.reload();
    else alert('Fehler: ' + (d.error||'unbekannt'));
  });
};
</script>

{% endblock %}