{% extends "base.html" %}

{% block title %}DMS · Dokumenten-Verwaltung{% endblock %}
{% block heading %}📁 Dokumenten-Management{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">System / DMS</p>{% endblock %}

{% block content %}
<style>
  .dms-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
  .dms-side { position: sticky; top: 12px; align-self: start; }
  .dms-list .doc-row {
    display: grid; grid-template-columns: 28px 38px 1fr 110px 90px 90px 80px;
    gap: 10px; align-items: center; padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; transition: background 120ms;
  }
  .dms-list .doc-row:hover { background: rgba(255,255,255,0.04); }
  .dms-list .doc-row.is-selected { background: rgba(242,88,27,0.10); }
  .dms-list .doc-icon { font-size: 22px; text-align: center; }
  .dms-list .doc-name {
    font-weight: 600; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dms-list .doc-meta { font-size: 11px; color: var(--card-text-muted); }
  .dms-list .badge-doctype { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
  .badge-expired { background: rgba(239,68,68,0.20); color: #fca5a5; }
  .badge-soon    { background: rgba(245,158,11,0.20); color: #fcd34d; }
  .badge-valid   { background: rgba(16,185,129,0.20); color: #6ee7b7; }
  .filter-block { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .filter-block label { font-size: 10px; text-transform: uppercase; color: var(--card-text-muted); font-weight: 700; }
  .dms-dropzone {
    border: 2px dashed rgba(255,255,255,0.18);
    border-radius: 12px; padding: 24px; text-align: center;
    transition: border-color 160ms, background 160ms;
    margin-bottom: 12px; cursor: pointer;
  }
  .dms-dropzone.is-drag { border-color: #f2581b; background: rgba(242,88,27,0.08); }
  .dms-dropzone .icon { font-size: 36px; }
  .dms-modal {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.85);
    align-items: center; justify-content: center; padding: 30px;
  }
  .dms-modal.is-open { display: flex; }
  .dms-modal-inner {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 14px; max-width: 1200px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .dms-modal-head {
    padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border-2);
  }
  .dms-modal-body { flex: 1; overflow: auto; background: rgba(0,0,0,0.20); }
  .dms-modal-body iframe, .dms-modal-body img { width: 100%; height: 80vh; display: block; background: white; }
  .dms-modal-meta {
    padding: 14px 20px; background: rgba(0,0,0,0.30);
    border-top: 1px solid var(--card-border-2);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; font-size: 12px;
  }
</style>

{% if expiring_count %}
<div class="card mb-4" style="border-left: 4px solid #ef4444; background: rgba(239,68,68,0.05);">
  <div class="px-5 py-3 flex items-center gap-3 text-sm">
    <span style="font-size:22px;">⚠</span>
    <div style="flex:1;">
      <strong>{{ expiring_count }} Dokument(e)</strong>
      laufen ab oder sind bereits abgelaufen — z.B. Kalibrier-Zertifikate, Werkstoff-Atteste.
    </div>
    <a href="/dms?expires=expired" class="btn btn-sm btn-secondary">Abgelaufene anzeigen</a>
    <a href="/dms?expires=soon"    class="btn btn-sm btn-secondary">In ≤30 Tagen</a>
  </div>
</div>
{% endif %}

<form method="get" action="/dms" class="mb-3">
  <div style="display:flex; gap:8px; align-items:center;">
    <input type="text" name="q" value="{{ q }}" placeholder="🔍 Volltext-Suche (Filename · OCR-Text · Tags · Beschreibung)…"
           class="input" style="flex:1;">
    <button type="submit" class="btn btn-primary">Suchen</button>
    <a href="/dms" class="btn btn-secondary">Reset</a>
  </div>
  <input type="hidden" name="doc_type"    value="{{ doc_type_filter }}">
  <input type="hidden" name="entity_type" value="{{ entity_type_filter }}">
  <input type="hidden" name="expires"     value="{{ expires_filter }}">
  <input type="hidden" name="sort"        value="{{ sort }}">
</form>

<div class="dms-grid">
  <div class="dms-side">
    <div class="card">
      <div class="card-header"><div><h2>Filter</h2></div></div>
      <div class="filter-block">
        <label>Doc-Typ</label>
        <div class="mt-2 space-y-1 text-sm">
          <a href="/dms?q={{ q }}" class="block py-1 px-2 rounded"
             style="color: {% if not doc_type_filter %}#f2581b{% else %}var(--card-text){% endif %}; text-decoration:none;">
            Alle
          </a>
          {% for code, label in DOC_TYPES.items() %}
          <a href="/dms?q={{ q }}&doc_type={{ code }}" class="block py-1 px-2 rounded"
             style="color: {% if doc_type_filter == code %}#f2581b{% else %}var(--card-text){% endif %}; text-decoration:none;">
            {{ label }}
          </a>
          {% endfor %}
        </div>
      </div>

      <div class="filter-block">
        <label>Entity-Typ</label>
        <select onchange="window.location='/dms?q={{ q }}&entity_type='+this.value+'&doc_type={{ doc_type_filter }}'"
                class="select mt-2 w-full" style="font-size:12px;">
          <option value="">— alle —</option>
          {% for et in entity_types %}
          <option value="{{ et }}" {% if entity_type_filter == et %}selected{% endif %}>{{ et }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-block">
        <label>Verfallsdatum</label>
        <div class="mt-2 space-y-1 text-sm">
          <a href="/dms?q={{ q }}&doc_type={{ doc_type_filter }}" class="block py-1"
             style="color: {% if not expires_filter %}#f2581b{% else %}var(--card-text){% endif %}; text-decoration:none;">Alle</a>
          <a href="/dms?q={{ q }}&doc_type={{ doc_type_filter }}&expires=expired" class="block py-1"
             style="color: {% if expires_filter == 'expired' %}#fca5a5{% else %}var(--card-text){% endif %}; text-decoration:none;">⚠ Abgelaufen</a>
          <a href="/dms?q={{ q }}&doc_type={{ doc_type_filter }}&expires=soon" class="block py-1"
             style="color: {% if expires_filter == 'soon' %}#fcd34d{% else %}var(--card-text){% endif %}; text-decoration:none;">⏰ ≤ 30 Tage</a>
          <a href="/dms?q={{ q }}&doc_type={{ doc_type_filter }}&expires=valid" class="block py-1"
             style="color: {% if expires_filter == 'valid' %}#6ee7b7{% else %}var(--card-text){% endif %}; text-decoration:none;">✓ Gültig</a>
        </div>
      </div>

      <div class="filter-block">
        <label>Sortierung</label>
        <select onchange="window.location='/dms?q={{ q }}&doc_type={{ doc_type_filter }}&sort='+this.value"
                class="select mt-2 w-full" style="font-size:12px;">
          <option value="newest" {% if sort == 'newest' %}selected{% endif %}>Neueste zuerst</option>
          <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>Älteste zuerst</option>
          <option value="name"   {% if sort == 'name'   %}selected{% endif %}>Name (A→Z)</option>
          <option value="size"   {% if sort == 'size'   %}selected{% endif %}>Größe (groß→klein)</option>
        </select>
      </div>

      <div class="filter-block" style="border-bottom:none;">
        <button type="button" id="dms-ocr-now" class="btn btn-secondary w-full">
          OCR-Backlog jetzt verarbeiten
        </button>
        <p class="text-[10px] text-neutral-500 mt-1">Tesseract läuft auf nicht-erkannten PDFs/Bildern</p>
      </div>
    </div>
  </div>

  <div>
    <div id="dms-dropzone" class="dms-dropzone">
      <div class="icon">📤</div>
      <p style="font-size:14px; margin-top:6px;" id="dms-drop-msg">
        <strong>Dateien hier reinziehen</strong> — oder
        <label style="color:#f2581b; cursor:pointer; text-decoration:underline;">
          aus Finder wählen
          <input type="file" id="dms-file-input" multiple style="display:none;">
        </label>
      </p>
      <p class="text-[11px] text-neutral-500 mt-1">PDFs, Bilder, DXF, Office, Zip — max 50 MB pro Datei</p>
    </div>

    <div id="dms-bulkbar" class="card mb-3" style="display:none; border-color:#f2581b;">
      <div class="px-4 py-3 flex items-center gap-3 text-sm">
        <span><strong id="dms-bulk-count">0</strong> ausgewählt</span>
        <button type="button" id="dms-bulk-zip" class="btn btn-sm btn-primary">⬇ Als ZIP herunterladen</button>
        <button type="button" id="dms-bulk-clear" class="btn btn-sm btn-secondary">Auswahl aufheben</button>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <div>
          <h2>{{ results|length }} Dokument(e)</h2>
          <p class="sub">{% if q %}Suche: „{{ q }}"{% else %}Browse-Modus · neueste zuerst{% endif %}</p>
        </div>
      </div>
      {% if results %}
      <div class="dms-list">
        <div class="doc-row" style="font-weight:700; font-size:10px; text-transform:uppercase; color:var(--card-text-muted); cursor:default; background:rgba(255,255,255,0.02);">
          <div><input type="checkbox" id="dms-check-all"></div>
          <div></div>
          <div>Datei / Beschreibung</div>
          <div>Doc-Typ</div>
          <div>Entity</div>
          <div>Größe / Datum</div>
          <div>Verfall</div>
        </div>
        {% for r in results %}
        <div class="doc-row" data-att-id="{{ r.id }}" data-mime="{{ r.content_type or '' }}"
             data-name="{{ r.filename }}" data-doctype="{{ DOC_TYPES.get(r.doc_type, '—') }}"
             data-entity="{{ r.entity_type }} #{{ r.entity_id }}"
             data-expires="{{ r.expires_at[:10] if r.expires_at else '—' }}">
          <div onclick="event.stopPropagation();">
            <input type="checkbox" class="dms-check" value="{{ r.id }}">
          </div>
          <div class="doc-icon">
            {% set ct = r.content_type or '' %}
            {% if 'pdf' in ct %}📄
            {% elif 'image' in ct %}🖼
            {% elif 'dxf' in (r.filename or '')|lower or 'dwg' in (r.filename or '')|lower %}📐
            {% elif 'word' in ct or 'doc' in ct %}📝
            {% elif 'excel' in ct or 'sheet' in ct %}📊
            {% elif 'zip' in ct %}🗜
            {% else %}📎{% endif %}
          </div>
          <div>
            <div class="doc-name">{{ r.filename }}</div>
            <div class="doc-meta">
              {% if r.description %}{{ r.description[:80] }}<br>{% endif %}
              {% if r.revision %}<span class="badge badge-neutral" style="font-size:9px;">{{ r.revision }}</span>{% endif %}
              {% if r.view_count %}· 👁 {{ r.view_count }}x{% endif %}
            </div>
          </div>
          <div>
            {% if r.doc_type %}
              <span class="badge-doctype" style="background:rgba(53,102,146,0.20); color:#7dd3fc;">
                {{ DOC_TYPES.get(r.doc_type, r.doc_type) }}
              </span>
            {% else %}
              <span class="text-[10px] text-neutral-500">—</span>
            {% endif %}
          </div>
          <div class="doc-meta">
            <strong>{{ r.entity_type }}</strong>
            {% if r.entity_id %}<br>#{{ r.entity_id }}{% endif %}
          </div>
          <div class="doc-meta">
            {{ ((r.size or 0) / 1024)|round(0)|int }} KB<br>
            {{ r.uploaded_at[:10] if r.uploaded_at else '' }}
          </div>
          <div>
            {% if r.expires_at %}
              <span class="badge-doctype badge-soon">{{ r.expires_at[:10] }}</span>
            {% else %}
              <span class="text-[10px] text-neutral-500">—</span>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="p-12 text-center text-sm" style="color: var(--card-text-muted);">
        {% if q or doc_type_filter or entity_type_filter or expires_filter %}
          Keine Treffer für die aktuellen Filter.
        {% else %}
          Noch keine Dokumente. Ziehe Dateien in die Drop-Zone oben oder lade sie aus den jeweiligen Belegen hoch.
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</div>

<div class="dms-modal" id="dms-modal">
  <div class="dms-modal-inner">
    <div class="dms-modal-head">
      <h3 id="dms-modal-title" style="margin:0; font-size:15px;">Dokument-Vorschau</h3>
      <div class="flex gap-2">
        <a id="dms-modal-download" href="#" class="btn btn-sm btn-secondary">⬇ Download</a>
        <button type="button" id="dms-modal-close" class="btn btn-sm btn-secondary">✕ Schließen</button>
      </div>
    </div>
    <div class="dms-modal-body" id="dms-modal-body">
      <div style="padding:60px; text-align:center; color:rgba(255,255,255,0.6);">Lade…</div>
    </div>
    <div class="dms-modal-meta">
      <div><span class="text-neutral-500 text-[10px]">Dateiname</span><br><strong id="m-filename">—</strong></div>
      <div><span class="text-neutral-500 text-[10px]">Doc-Typ</span><br><span id="m-doctype">—</span></div>
      <div><span class="text-neutral-500 text-[10px]">Entity</span><br><span id="m-entity">—</span></div>
      <div><span class="text-neutral-500 text-[10px]">Verfallsdatum</span><br><span id="m-expires">—</span></div>
    </div>
  </div>
</div>

<script>
(function () {
  function getCookie(n){return (document.cookie.split('; ').find(r=>r.startsWith(n+'='))||'=').split('=')[1]||'';}

  const modal     = document.getElementById('dms-modal');
  const modalBody = document.getElementById('dms-modal-body');
  const modalTitle= document.getElementById('dms-modal-title');
  const modalDl   = document.getElementById('dms-modal-download');

  function openPreview(row) {
    const id   = row.dataset.attId;
    const name = row.dataset.name;
    const mime = row.dataset.mime || '';
    modalTitle.textContent = name;
    modalDl.href = '/attachments/' + id + '/download';
    document.getElementById('m-filename').textContent = name;
    document.getElementById('m-doctype').textContent  = row.dataset.doctype || '—';
    document.getElementById('m-entity').textContent   = row.dataset.entity || '—';
    document.getElementById('m-expires').textContent  = row.dataset.expires || '—';
    if (mime.includes('image')) {
      modalBody.innerHTML = '<img src="/attachments/' + id + '/preview" alt="' + name + '">';
    } else if (mime.includes('pdf')) {
      modalBody.innerHTML = '<iframe src="/attachments/' + id + '/preview" title="' + name + '"></iframe>';
    } else {
      modalBody.innerHTML = '<div style="padding:60px;text-align:center;color:rgba(255,255,255,0.6);">' +
        'Vorschau für „' + (mime || 'unbekannt') + '" nicht verfügbar.<br>' +
        '<a href="/attachments/' + id + '/download" style="color:#f2581b;">→ Datei herunterladen</a></div>';
    }
    modal.classList.add('is-open');
  }
  document.querySelectorAll('.dms-list .doc-row[data-att-id]').forEach(r => {
    r.addEventListener('click', e => {
      if (e.target.matches('input,a,button,label')) return;
      openPreview(r);
    });
  });
  document.getElementById('dms-modal-close').addEventListener('click', () => modal.classList.remove('is-open'));
  modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('is-open'); });
  document.addEventListener('keydown', e => { if (e.key === 'Escape') modal.classList.remove('is-open'); });

  const bulkBar   = document.getElementById('dms-bulkbar');
  const bulkCount = document.getElementById('dms-bulk-count');
  function updateBulk() {
    const selected = document.querySelectorAll('.dms-check:checked');
    bulkCount.textContent = selected.length;
    bulkBar.style.display = selected.length ? 'block' : 'none';
    document.querySelectorAll('.dms-list .doc-row[data-att-id]').forEach(r => {
      const cb = r.querySelector('.dms-check');
      r.classList.toggle('is-selected', cb && cb.checked);
    });
  }
  document.querySelectorAll('.dms-check').forEach(cb => cb.addEventListener('change', updateBulk));
  document.getElementById('dms-check-all').addEventListener('change', e => {
    document.querySelectorAll('.dms-check').forEach(cb => cb.checked = e.target.checked);
    updateBulk();
  });
  document.getElementById('dms-bulk-zip').addEventListener('click', () => {
    const ids = Array.from(document.querySelectorAll('.dms-check:checked')).map(cb => cb.value);
    if (!ids.length) return;
    window.location = '/dms/zip?ids=' + ids.join(',');
  });
  document.getElementById('dms-bulk-clear').addEventListener('click', () => {
    document.querySelectorAll('.dms-check').forEach(cb => cb.checked = false);
    document.getElementById('dms-check-all').checked = false;
    updateBulk();
  });

  const drop  = document.getElementById('dms-dropzone');
  const fileI = document.getElementById('dms-file-input');
  const dropMsg = document.getElementById('dms-drop-msg');
  drop.addEventListener('click', e => {
    if (e.target.matches('input,label')) return;
    fileI.click();
  });
  ['dragover','dragenter'].forEach(ev => drop.addEventListener(ev, e => {
    e.preventDefault(); drop.classList.add('is-drag');
  }));
  ['dragleave','drop'].forEach(ev => drop.addEventListener(ev, e => {
    e.preventDefault(); drop.classList.remove('is-drag');
  }));
  drop.addEventListener('drop', e => uploadFiles(e.dataTransfer.files));
  fileI.addEventListener('change', e => uploadFiles(e.target.files));

  async function uploadFiles(fileList) {
    if (!fileList || !fileList.length) return;
    const fd = new FormData();
    for (const f of fileList) fd.append('files', f);
    fd.append('csrf_token', getCookie('csrf_token'));
    dropMsg.innerHTML = '<strong>Lade ' + fileList.length + ' Datei(en) hoch…</strong>';
    try {
      const r = await fetch('/api/dms/upload', { method: 'POST', body: fd });
      const d = await r.json();
      if (d.ok) {
        dropMsg.innerHTML = '<strong style="color:#10b981;">✓ ' + d.ids.length + ' Datei(en) hochgeladen</strong>';
        setTimeout(() => location.reload(), 600);
      } else {
        dropMsg.innerHTML = '<strong style="color:#ef4444;">Fehler: ' + (d.error || 'unbekannt') + '</strong>';
      }
    } catch (err) {
      dropMsg.innerHTML = '<strong style="color:#ef4444;">Netzwerk-Fehler</strong>';
    }
  }

  document.getElementById('dms-ocr-now').addEventListener('click', async () => {
    const btn = document.getElementById('dms-ocr-now');
    btn.disabled = true; btn.textContent = 'Verarbeite…';
    try {
      const r = await fetch('/api/dms/ocr-now', { method: 'POST',
        headers: { 'X-CSRF-Token': getCookie('csrf_token') } });
      const d = await r.json();
      btn.textContent = d.ok ? ('✓ ' + d.processed + ' verarbeitet') : ('Fehler: ' + d.error);
      if (d.ok) setTimeout(() => location.reload(), 1500);
    } catch (e) { btn.textContent = 'Netzwerk-Fehler'; }
    setTimeout(() => { btn.disabled = false; }, 3000);
  });
})();
</script>
{% endblock %}