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

{% block title %}{% if mode=='new' %}Neuer Mitarbeiter{% else %}{{ user.first_name }} {{ user.last_name }} bearbeiten{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/team" class="hover:underline">Team</a> / {% if mode=='new' %}Neu{% else %}Bearbeiten{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neuer Mitarbeiter{% else %}{{ user.first_name }} {{ user.last_name }}{% endif %}{% endblock %}

{% block content %}
<form method="post" action="{% if mode=='new' %}/team/users/new{% else %}/team/users/{{ user.id }}/edit{% endif %}" class="card max-w-3xl">
  <div class="card-header"><div><h2>Mitarbeiterdaten</h2></div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    {{ field("Kurzkürzel", "ident", user.ident if user else "", placeholder="PW") }}
    {{ field("Benutzername", "username", user.username if user else "", required=true, placeholder="max.muster") }}
    {{ field("Vorname", "first_name", user.first_name if user else "") }}
    {{ field("Nachname", "last_name", user.last_name if user else "") }}
    {{ field("E-Mail", "email", user.email if user else "", type="email") }}
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Rolle</label>
      <select class="select mt-1 w-full" name="role_id">
        <option value="">—</option>
        {% for r in roles %}
          <option value="{{ r.id }}" {% if user and user.role_id == r.id %}selected{% endif %}>{{ r.name }}</option>
        {% endfor %}
      </select>
    </div>
    {% if mode == 'edit' %}
    <div class="col-span-2 pt-2">
      {{ checkbox("Aktiv", "is_active", checked=(user.is_active)) }}
    </div>
    {% endif %}
  </div>
  <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' %}

{# ===== v1.11.0: Werkstatt-Tablet-PIN ===== #}
<div class="card max-w-3xl mt-6">
  <div class="card-header"><div>
    <h2>Werkstatt-Tablet-PIN</h2>
    <p class="sub">
      Setzt einen 4-6-stelligen PIN, mit dem sich der Mitarbeiter am
      Werkstatt-Tablet anmeldet. Die PIN-Karte wird automatisch als PDF
      an seine E-Mail-Adresse geschickt.
    </p>
  </div></div>
  <div class="p-5 space-y-3" style="max-width: 500px;">
    {% if not user.email %}
    <div style="background: #fef3c7; border-left: 3px solid #f59e0b; padding: 10px;
                border-radius: 4px; color: #92400e; font-size: 13px;">
      Keine E-Mail-Adresse hinterlegt &mdash; bitte erst oben eintragen
      und speichern, bevor die PIN-Karte per Mail versendet werden kann.
    </div>
    {% endif %}
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">
        Neue PIN (4-6 Ziffern)
      </label>
      <input id="new-pin" type="text" inputmode="numeric" pattern="[0-9]*"
             maxlength="6" minlength="4"
             class="input mt-1" style="width: 200px; font-size: 18px;
                                         letter-spacing: 4px; text-align: center;"
             placeholder="z.B. 4711">
    </div>
    <div class="flex gap-2 flex-wrap">
      <button type="button" id="btn-pin-send-mail" class="btn btn-primary"
              {% if not user.email %}disabled title="Erst E-Mail eintragen"{% endif %}>
        PIN setzen + per Mail an {{ user.email or '...' }} senden
      </button>
      <button type="button" id="btn-pin-download" class="btn btn-secondary"
              title="Fallback wenn SMTP nicht funktioniert">
        Stattdessen Karte herunterladen
      </button>
    </div>
    <p id="pin-result" class="text-xs"></p>
    <p class="text-xs" style="color: var(--card-text-muted);">
      Die PIN wird gehashed gespeichert &mdash; im Klartext nur in der Mail.
      Sie bleibt g&uuml;ltig bis sie hier erneut gesetzt wird.
    </p>
  </div>
</div>

<script>
(function() {
  const userId = {{ user.id }};
  const pinInput = document.getElementById('new-pin');
  const result = document.getElementById('pin-result');
  function getCsrf() {
    return (document.cookie.split('; ').find(r => r.startsWith('csrf_token=')) || '=').split('=')[1] || '';
  }
  function setBusy(b) {
    document.getElementById('btn-pin-send-mail').disabled = b;
    document.getElementById('btn-pin-download').disabled = b;
  }
  async function action(delivery) {
    const pin = (pinInput.value || '').trim();
    if (!/^\d{4,6}$/.test(pin)) {
      result.innerHTML = '<span style="color:#dc2626;">PIN muss 4-6 Ziffern haben.</span>';
      return;
    }
    setBusy(true);
    result.textContent = '... wird verarbeitet';
    try {
      const r = await fetch('/api/users/' + userId + '/pin-card', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRF-Token': getCsrf()},
        body: JSON.stringify({pin: pin, delivery: delivery}),
      });
      if (delivery === 'download' && r.ok && r.headers.get('content-type')?.includes('pdf')) {
        const blob = await r.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url; a.download = 'pin-karte.pdf';
        document.body.appendChild(a); a.click();
        URL.revokeObjectURL(url); a.remove();
        result.innerHTML = '<span style="color:#16a34a;">PIN gesetzt &mdash; Karte heruntergeladen.</span>';
      } else {
        const d = await r.json();
        if (d.ok) {
          result.innerHTML = '<span style="color:#16a34a;">' + (d.message || 'OK') + '</span>';
          pinInput.value = '';
        } else {
          result.innerHTML = '<span style="color:#dc2626;">' + (d.error || 'Fehler') + '</span>';
        }
      }
    } catch (e) {
      result.innerHTML = '<span style="color:#dc2626;">' + e.message + '</span>';
    }
    setBusy(false);
  }
  document.getElementById('btn-pin-send-mail')?.addEventListener('click', () => action('email'));
  document.getElementById('btn-pin-download')?.addEventListener('click', () => action('download'));
})();
</script>

{# ===== Tier-A.4: Skill-Matrix (welche Maschinen kann der MA?) ===== #}
<div class="card max-w-3xl mt-6">
  <div class="card-header"><div>
    <h2>🧠 Skill-Matrix — Maschinen-Qualifikation</h2>
    <p class="sub">Welche Maschinen darf dieser Mitarbeiter bedienen? Wird beim Workplan-Release als Verfügbarkeits-Check genutzt.</p>
  </div></div>
  <div class="p-5">
    <div id="skill-matrix-list">
      <div style="color:rgba(255,255,255,0.45);font-size:13px;padding:14px;">Lade Skills…</div>
    </div>
  </div>
</div>
<script>
(function(){
  const userId = {{ user.id }};
  const list = document.getElementById('skill-matrix-list');
  const LEVEL_LABELS = {trainee:'👶 Lernend', qualified:'✅ Qualifiziert',
                        expert:'⭐ Experte', trainer:'🎓 Trainer'};
  function getCookie(n){return document.cookie.split('; ').find(r=>r.startsWith(n+'='))?.split('=')[1]||'';}
  async function loadAll() {
    // Maschinen + bestehende Skills parallel
    const [machinesRes, skillsRes] = await Promise.all([
      fetch('/api/machines/list').then(r=>r.json()).catch(()=>({machines:[]})),
      fetch('/api/users/' + userId + '/skills').then(r=>r.json()).catch(()=>({skills:[]})),
    ]);
    let machines = machinesRes.machines || machinesRes || [];
    if (!Array.isArray(machines) && machinesRes.ok && machinesRes.machines) machines = machinesRes.machines;
    if (!machines.length) {
      // Fallback: leere Liste
      list.innerHTML = '<div style="color:rgba(255,255,255,0.55);font-size:13px;padding:10px;">Keine Maschinen angelegt — bitte zuerst unter <a href="/team" style="color:#fcd34d;">Maschinen-Verwaltung</a>.</div>';
      return;
    }
    const skillsByMachine = {};
    (skillsRes.skills || []).forEach(s => skillsByMachine[s.machine_id] = s);
    const rows = machines.map(m => {
      const cur = skillsByMachine[m.id];
      const opts = Object.entries(LEVEL_LABELS).map(([code,label]) => {
        const sel = cur && cur.level === code ? 'selected' : '';
        return `<option value="${code}" ${sel}>${label}</option>`;
      }).join('');
      const hasSkill = !!cur;
      return `<tr data-machine-id="${m.id}">
        <td style="padding:8px;">${m.name||'?'}</td>
        <td style="padding:8px;font-size:11px;color:rgba(255,255,255,0.55);">${m.controller_type||''}</td>
        <td style="padding:8px;">
          <select class="select skill-level" style="font-size:13px;">
            <option value="">— nicht qualifiziert —</option>
            ${opts}
          </select>
        </td>
        <td style="padding:8px;text-align:right;">
          <button class="btn btn-sm btn-primary skill-save" type="button">Speichern</button>
          ${hasSkill ? '<button class="btn btn-sm btn-secondary skill-remove" type="button" style="margin-left:4px;">Entfernen</button>' : ''}
          <span class="skill-status" style="font-size:11px;margin-left:8px;"></span>
        </td>
      </tr>`;
    }).join('');
    list.innerHTML = `<table style="width:100%;border-collapse:collapse;">
      <thead><tr style="font-size:10px;text-transform:uppercase;color:rgba(255,255,255,0.55);text-align:left;">
        <th style="padding:8px;">Maschine</th>
        <th style="padding:8px;">Steuerung</th>
        <th style="padding:8px;">Level</th>
        <th style="padding:8px;text-align:right;">Aktion</th>
      </tr></thead>
      <tbody>${rows}</tbody>
    </table>`;
    bindSkillRowEvents();
  }
  function bindSkillRowEvents() {
    list.querySelectorAll('tr[data-machine-id]').forEach(tr => {
      const machineId = tr.dataset.machineId;
      const status = tr.querySelector('.skill-status');
      tr.querySelector('.skill-save').addEventListener('click', () => {
        const lvl = tr.querySelector('.skill-level').value;
        if (!lvl) { status.textContent = '✗ Level wählen'; status.style.color = '#fca5a5'; return; }
        status.textContent = 'speichere…'; status.style.color = '#fcd34d';
        fetch(`/api/users/${userId}/skills/${machineId}`, {
          method:'POST', headers:{'Content-Type':'application/json','X-CSRF-Token':getCookie('csrf_token')},
          body: JSON.stringify({level: lvl, csrf_token: getCookie('csrf_token')})
        }).then(r=>r.json()).then(d => {
          if (d.ok) { status.textContent = '✓ gespeichert'; status.style.color = '#10b981'; setTimeout(()=>loadAll(), 800); }
          else { status.textContent = '✗ ' + (d.error||'Fehler'); status.style.color = '#fca5a5'; }
        });
      });
      const rem = tr.querySelector('.skill-remove');
      if (rem) rem.addEventListener('click', () => {
        if (!confirm('Qualifikation entfernen?')) return;
        fetch(`/api/users/${userId}/skills/${machineId}`, {method:'DELETE'})
          .then(r=>r.json()).then(d => { if (d.ok) loadAll(); });
      });
    });
  }
  loadAll();
})();
</script>

{# ===== Schulungen / Qualifikationen ===== #}
<div class="card max-w-3xl mt-6">
  <div class="card-header"><div>
    <h2>🎓 Schulungen &amp; Qualifikationen</h2>
    <p class="sub">Externe Schulungen, Sicherheitsunterweisungen, Zertifikate.</p>
  </div></div>
  <div class="p-5">
    <div id="qual-list" style="margin-bottom:14px;">
      <div style="color:rgba(255,255,255,0.45);font-size:13px;">Lade…</div>
    </div>
    <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;align-items:end;">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bezeichnung</label>
        <input id="qual-name" class="input mt-1 w-full" placeholder="z.B. Erste-Hilfe-Kurs">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kategorie</label>
        <select id="qual-cat" class="select mt-1 w-full">
          <option value="Sicherheit">🚨 Sicherheit</option>
          <option value="Maschine">⚙️ Maschine</option>
          <option value="Schweißen">🔥 Schweißen</option>
          <option value="Mess- & Prüftechnik">📏 Mess- &amp; Prüftechnik</option>
          <option value="Stapler / Kran">🚜 Stapler / Kran</option>
          <option value="Erste Hilfe">🚑 Erste Hilfe</option>
          <option value="DGUV V3">⚡ DGUV V3</option>
          <option value="Software">💻 Software</option>
          <option value="Sonstige">❓ Sonstige</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Erworben am</label>
        <input id="qual-completed" class="input mt-1 w-full" type="date">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Gültig bis</label>
        <input id="qual-expires" class="input mt-1 w-full" type="date">
      </div>
      <button type="button" class="btn btn-primary" onclick="qualAdd()">+ Hinzu</button>
    </div>
  </div>
</div>
<script>
(function(){
  const userId = {{ user.id }};
  function getCookie(n){return document.cookie.split('; ').find(r=>r.startsWith(n+'='))?.split('=')[1]||'';}
  const CAT_LBL = {
    'Sicherheit':'🚨', 'Maschine':'⚙️', 'Schweißen':'🔥',
    'Mess- & Prüftechnik':'📏', 'Stapler / Kran':'🚜',
    'Erste Hilfe':'🚑', 'DGUV V3':'⚡', 'Software':'💻', 'Sonstige':'❓'
  };
  function load() {
    fetch('/api/users/'+userId+'/qualifications').then(r=>r.json()).then(d => {
      const list = document.getElementById('qual-list');
      if (!d.ok || !d.qualifications.length) {
        list.innerHTML = '<div style="color:rgba(255,255,255,0.45);font-size:13px;padding:10px;">Noch keine Schulungen erfasst.</div>';
        return;
      }
      const today = new Date().toISOString().substring(0,10);
      list.innerHTML = '<table style="width:100%;border-collapse:collapse;font-size:13px;"><thead><tr style="font-size:10px;text-transform:uppercase;color:rgba(255,255,255,0.55);text-align:left;"><th style="padding:6px;">Cat</th><th style="padding:6px;">Bezeichnung</th><th style="padding:6px;">Erworben</th><th style="padding:6px;">Gültig bis</th><th></th></tr></thead><tbody>'
        + d.qualifications.map(q => {
          const expired = q.expires_on && q.expires_on < today;
          const status = expired ? '<span style="color:#fca5a5;">⚠ abgelaufen</span>'
                                  : (q.expires_on ? '<span style="color:#10b981;">✓ gültig</span>' : '');
          return `<tr style="border-bottom:1px solid rgba(255,255,255,0.06);">
            <td style="padding:6px;">${CAT_LBL[q.category]||'❓'}</td>
            <td style="padding:6px;font-weight:600;">${q.name||''}</td>
            <td style="padding:6px;">${q.completed_on||'—'}</td>
            <td style="padding:6px;">${q.expires_on||'—'} ${status}</td>
            <td style="padding:6px;text-align:right;">
              <button type="button" class="btn btn-sm btn-secondary" onclick="qualDel(${q.id})">×</button>
            </td>
          </tr>`;
        }).join('')
        + '</tbody></table>';
    });
  }
  window.qualAdd = function() {
    const name = document.getElementById('qual-name').value.trim();
    if (!name) { alert('Bezeichnung fehlt'); return; }
    fetch('/api/users/'+userId+'/qualifications/new', {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRF-Token':getCookie('csrf_token')},
      body: JSON.stringify({
        name: name,
        category: document.getElementById('qual-cat').value,
        completed_on: document.getElementById('qual-completed').value || null,
        expires_on: document.getElementById('qual-expires').value || null,
        csrf_token: getCookie('csrf_token'),
      })
    }).then(r=>r.json()).then(d => {
      if (d.ok) {
        document.getElementById('qual-name').value='';
        document.getElementById('qual-completed').value='';
        document.getElementById('qual-expires').value='';
        load();
      } else alert(d.error||'Fehler');
    });
  };
  window.qualDel = function(qid) {
    if (!confirm('Wirklich löschen?')) return;
    fetch('/api/qualifications/'+qid, {method:'DELETE'})
      .then(r=>r.json()).then(d => { if (d.ok) load(); });
  };
  load();
})();
</script>

{# ===== Shopfloor-PIN (für Tablet-Login an der Maschine) ===== #}
<div class="card max-w-3xl mt-6">
  <div class="card-header"><div>
    <h2>🔒 Shopfloor-PIN</h2>
    <p class="sub">4-6 Ziffern für den Tablet-Login an der Maschine. Wird Argon2-gehasht gespeichert.</p>
  </div></div>
  <div class="p-5 flex items-end gap-3">
    <div style="flex:1; max-width:200px;">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">PIN</label>
      <input id="pin-input" class="input mt-1 w-full" type="password" inputmode="numeric"
             pattern="[0-9]{4,6}" maxlength="6" placeholder="z.B. 1234"
             autocomplete="new-password">
    </div>
    <button type="button" id="pin-save-btn" class="btn btn-primary">PIN setzen</button>
    {% if user.pin_hash %}
      <button type="button" id="pin-clear-btn" class="btn btn-secondary">PIN entfernen</button>
      <span id="pin-status" class="text-xs" style="color:#10b981;">✓ PIN aktiv</span>
    {% else %}
      <span id="pin-status" class="text-xs" style="color:rgba(255,255,255,0.45);">— noch kein PIN gesetzt —</span>
    {% endif %}
  </div>
</div>
<script>
(function(){
  function getCookie(n){return document.cookie.split('; ').find(r=>r.startsWith(n+'='))?.split('=')[1]||'';}
  async function setPin(pin){
    const csrf = getCookie('csrf_token');
    const r = await fetch('/api/users/{{ user.id }}/pin', {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRF-Token':csrf},
      body: JSON.stringify({pin: pin, csrf_token: csrf})
    });
    return r.json();
  }
  document.getElementById('pin-save-btn').addEventListener('click', async ()=>{
    const inp = document.getElementById('pin-input');
    const status = document.getElementById('pin-status');
    const pin = (inp.value||'').trim();
    if(!/^[0-9]{4,6}$/.test(pin)){ status.textContent = '✗ PIN muss 4-6 Ziffern haben'; status.style.color = '#ef4444'; return; }
    status.textContent = 'speichere…'; status.style.color = '#fcd34d';
    const res = await setPin(pin);
    if(res.ok){
      status.textContent = '✓ PIN gespeichert — du kannst jetzt im Shopfloor anmelden';
      status.style.color = '#10b981';
      inp.value = '';
      setTimeout(()=>{ document.getElementById('pin-clear-btn')?.style && (document.getElementById('pin-clear-btn').style.display=''); }, 100);
    } else {
      status.textContent = '✗ ' + (res.error || 'Fehler');
      status.style.color = '#ef4444';
    }
  });
  const clearBtn = document.getElementById('pin-clear-btn');
  if(clearBtn){
    clearBtn.addEventListener('click', async ()=>{
      if(!confirm('PIN wirklich entfernen? Der User kann sich danach nicht mehr per PIN am Shopfloor anmelden.')) return;
      const status = document.getElementById('pin-status');
      const res = await setPin('');
      if(res.ok){
        status.textContent = '— PIN entfernt —';
        status.style.color = 'rgba(255,255,255,0.45)';
        clearBtn.style.display = 'none';
      } else {
        status.textContent = '✗ ' + (res.error || 'Fehler');
      }
    });
  }
  // Enter im PIN-Feld → speichern
  document.getElementById('pin-input').addEventListener('keydown', e=>{
    if(e.key === 'Enter'){ e.preventDefault(); document.getElementById('pin-save-btn').click(); }
  });
})();
</script>

<div class="max-w-3xl mt-6 flex gap-2">
  <a class="btn btn-secondary btn-sm" href="/dsgvo/export?user_id={{ user.id }}" target="_blank"
     title="DSGVO Art. 20 — alle Daten dieses Mitarbeiters als ZIP">
    📦 DSGVO-Export
  </a>
  <form method="post" action="/team/users/{{ user.id }}/delete" style="display:inline;"
        onsubmit="return confirm('Mitarbeiter wirklich löschen? (Nur möglich, wenn keine offenen Verleihe vorliegen.)')">
    <button class="btn btn-danger btn-sm" type="submit">Mitarbeiter löschen</button>
  </form>
</div>
{% endif %}
{% endblock %}