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

{% block title %}{% if mode=='new' %}Neue Maschine{% else %}{{ machine.name }} bearbeiten{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/team" class="hover:underline">Team & Maschinen</a> / {% if mode=='new' %}Neu{% else %}Bearbeiten{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neue Maschine{% else %}{{ machine.name }}{% endif %}{% endblock %}

{% block topbar_actions %}
  {% if mode == 'edit' %}
  <a href="/werkstatt/maschinen/{{ machine.id }}/magazin" class="btn btn-secondary btn-sm"
     title="Werkzeug-Magazin (Slot-Belegung mit Standzeit)">
    📦 Werkzeug-Magazin
  </a>
  <a href="/machines/{{ machine.id }}/tool-plan" class="btn btn-secondary btn-sm"
     title="Werkzeugbelegung (Slot 1..N) für diese Maschine">
    🔧 Werkzeugplan
  </a>
  {% endif %}
{% endblock %}

{% block content %}

<form method="post" action="{% if mode=='new' %}/team/machines/new{% else %}/team/machines/{{ machine.id }}/edit{% endif %}" class="card max-w-3xl">
  <div class="card-header"><div><h2>Stammdaten</h2></div></div>
  <div class="p-5">
    {{ field("Maschinenname", "name", machine.name if machine else "", required=true, placeholder="DMG Mori NLX 2500") }}
  </div>

  {% if mode == 'edit' %}
  <div class="card-header" style="border-top:1px solid #e5e5e5;">
    <div>
      <h2>CNC-Steuerung &amp; Anbindung</h2>
      <p class="sub">DMG Mori, Hwacheon, Mazak — mit Fanuc / Siemens / Heidenhain-Steuerung anbinden</p>
    </div>
  </div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Steuerungs-Typ</label>
      <select class="select mt-1 w-full" name="controller_type">
        {% for code, label in controllers.items() %}
          <option value="{{ code }}" {% if (machine.controller_type or 'none') == code %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Modell / Generation</label>
      <input class="input mt-1 w-full" type="text" name="controller_model"
             value="{{ machine.controller_model or '' }}"
             placeholder="z.B. SINUMERIK 840D sl, TNC 640, Series 31i-B">
    </div>

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Protokoll</label>
      <select class="select mt-1 w-full" name="protocol">
        {% for code, label in protocols.items() %}
          <option value="{{ code }}" {% if (machine.protocol or 'none') == code %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">IP-Adresse</label>
      <input class="input mt-1 w-full nums" type="text" name="ip_address"
             value="{{ machine.ip_address or '' }}"
             placeholder="192.168.10.21">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Port</label>
      <input class="input mt-1 w-full nums" type="number" name="port"
             value="{{ machine.port or '' }}" min="1" max="65535"
             placeholder="z.B. 4840 (OPC UA), 8193 (FOCAS), 7878 (MTConnect)">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verbindungs-Status</label>
      <p class="mt-2">
        {% if machine.conn_status == 'online' %}
          <span class="badge badge-emerald">● Online</span>
          {% if machine.last_seen %}<span class="text-xs text-neutral-500 nums ml-2">letzter Kontakt: {{ machine.last_seen }}</span>{% endif %}
        {% elif machine.conn_status == 'offline' %}
          <span class="badge badge-red">● Offline</span>
        {% else %}
          <span class="badge badge-neutral">● Unbekannt</span>
        {% endif %}
      </p>
    </div>

    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">OPC-UA / MTConnect Endpoint (vollständige URL, optional)</label>
      <input class="input mt-1 w-full font-mono text-xs" type="text" name="opcua_endpoint"
             value="{{ machine.opcua_endpoint or '' }}"
             placeholder="opc.tcp://192.168.10.22:4840  oder  http://192.168.10.24:7878/current">
    </div>

    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz (Werkzeug-Speicher, Magazin-Plätze, Drehbares-Tischmaß, …)</label>
      <textarea class="input mt-1 w-full" rows="2" name="note">{{ machine.note or '' }}</textarea>
    </div>
  </div>

  <div class="alert alert-blue mx-5 mb-4 text-xs">
    <p class="font-medium">Was wird angebunden?</p>
    <ul class="mt-1 ml-4 list-disc text-neutral-600 space-y-0.5">
      <li><strong>Stückzahl-Rückmeldung</strong> ans Aktions-Dashboard (statt manuell "Stück melden")</li>
      <li><strong>Maschinenstatus</strong> (Läuft/Setup/Alarm) live in Übersicht</li>
      <li><strong>Werkzeugverschleiß</strong> aus Steuerung → Auto-Bestellung bei Mindestbestand</li>
      <li><strong>Programm-Nummern</strong> mit Auftrag verknüpfen für OEE-Reporting</li>
    </ul>
  </div>
  {% endif %}

  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <a class="btn btn-secondary" href="/team">Abbrechen</a>
    <button class="btn btn-primary" type="submit">{% if mode=='new' %}Anlegen{% else %}Speichern{% endif %}</button>
  </div>
</form>

{% if mode == 'edit' %}

{# Option-F.1: Predictive Maintenance #}
<div class="card max-w-3xl mt-6">
  <div class="card-header"><div>
    <h2>🛠 Wartung &amp; Predictive Maintenance</h2>
    <p class="sub">Wartungs-Intervall in Stunden — die App zählt Lauf+Rüstzeit + warnt rechtzeitig.</p>
  </div></div>
  <div class="p-5">
    <form method="post" action="/team/machines/{{ machine.id }}/maintenance-config" style="display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;">
      <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Wartungs-Intervall (Stunden)</label>
        <input class="input mt-1 w-full nums" type="number" min="0" name="maintenance_interval_h"
               value="{{ machine.maintenance_interval_h or '' }}"
               placeholder="z.B. 500">
        <p class="text-[10px] text-neutral-500 mt-1">Üblich: 250-2000 Lauf-Stunden je nach Typ.</p>
      </div>
      <div>
        <button type="submit" class="btn btn-secondary">Intervall speichern</button>
      </div>
    </form>

    <div id="maint-status" style="margin-top:18px;padding:14px 18px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);">
      <div style="font-size:11px;color:rgba(255,255,255,0.55);">Lade Wartungs-Status…</div>
    </div>

    <button type="button" id="btn-maint-done" onclick="markMaintenanceDone()"
            style="margin-top:10px;padding:10px 16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:700;border:none;border-radius:8px;cursor:pointer;font-size:13px;">
      ✓ Wartung wurde gerade durchgeführt
    </button>
  </div>
</div>
<script>
(function(){
  const machineId = {{ machine.id }};
  function loadMaint() {
    fetch('/api/machines/' + machineId + '/maintenance').then(r=>r.json()).then(d => {
      const box = document.getElementById('maint-status');
      if (!d.ok || d.status === 'unknown') {
        box.innerHTML = '<div style="color:rgba(255,255,255,0.55);font-size:12px;">— kein Intervall gesetzt —</div>';
        return;
      }
      const colors = {ok:'#10b981', warn:'#fcd34d', overdue:'#ef4444'};
      const labels = {ok:'✓ Innerhalb Intervall', warn:'⏳ Bald fällig', overdue:'⚠ ÜBERFÄLLIG'};
      const c = colors[d.status] || '#fff';
      box.innerHTML = `
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:14px;">
          <div>
            <div style="font-weight:700;font-size:18px;color:${c};">${labels[d.status]}</div>
            <div style="font-size:13px;color:rgba(255,255,255,0.85);margin-top:4px;">
              <strong>${d.hours_since_maint}</strong> von <strong>${d.interval_h}</strong> Stunden gelaufen
              (${d.ratio}% des Intervalls)
            </div>
            <div style="font-size:11px;color:rgba(255,255,255,0.55);margin-top:4px;">
              Letzte Wartung: ${d.last_maintenance_at ? d.last_maintenance_at.substring(0,16) : '— noch nie erfasst —'}
            </div>
          </div>
          <div style="font-size:42px;">${d.status==='overdue' ? '⚠' : (d.status==='warn' ? '⏳' : '✓')}</div>
        </div>
        <div style="height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;margin-top:10px;">
          <div style="height:100%;width:${Math.min(100, d.ratio)}%;background:${c};"></div>
        </div>`;
    });
  }
  window.markMaintenanceDone = function() {
    const note = prompt('Was wurde gemacht? (kurze Notiz, optional)', '');
    if (note === null) return;
    fetch('/api/machines/' + machineId + '/maintenance/done', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({note: note})
    }).then(r=>r.json()).then(d => {
      if (d.ok) { alert('✓ Wartung erfasst.'); loadMaint(); }
      else alert('Fehler: ' + (d.error||'unbekannt'));
    });
  };
  loadMaint();
})();
</script>

<form method="post" action="/team/machines/{{ machine.id }}/delete" class="max-w-3xl mt-6"
      onsubmit="return confirm('Maschine wirklich löschen?')">
  <button class="btn btn-danger btn-sm" type="submit">Maschine löschen</button>
</form>
{% endif %}
{% endblock %}