{# Wiederverwendbares Drag&Drop-Upload-Widget für Anhänge.
   Aufruf: {% include '_attachments_dropzone.html' with context %}
   Erwartet im Context:
     attach_entity_type:  'sales_order' | 'inquiry' | 'quote' | 'item' | ...
     attach_entity_id:    int
     attach_title:        optional, Default 'Dokumente & Zeichnungen'
#}

<style>
  .takoma-dropzone {
    border: 2px dashed var(--card-border); border-radius: 12px;
    padding: 18px; text-align: center;
    background: rgba(255,255,255,0.02);
    transition: all 160ms;
    cursor: pointer;
  }
  .takoma-dropzone.drag {
    border-color: var(--brand-orange);
    background: rgba(242, 88, 27, 0.08);
    transform: scale(1.01);
  }
  .takoma-dropzone .dz-icon { font-size: 32px; line-height: 1; opacity: 0.6; }
  .takoma-dropzone .dz-hint { color: var(--card-text-muted); font-size: 13px; margin-top: 6px; }
  .takoma-att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
  .takoma-att-card {
    background: var(--card-bg-2); border: 1px solid var(--card-border-2);
    border-radius: 8px; padding: 10px 12px;
    display: flex; align-items: flex-start; gap: 8px;
    transition: border-color 120ms;
  }
  .takoma-att-card:hover { border-color: var(--brand-orange); }
  .takoma-att-card .ico { font-size: 24px; flex-shrink: 0; }
  .takoma-att-card .info { flex: 1; min-width: 0; }
  .takoma-att-card .name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .takoma-att-card .meta { font-size: 11px; color: var(--card-text-muted); margin-top: 2px; }
  .takoma-att-card .rev-badge {
    background: rgba(74, 222, 128, 0.20); color: #4ade80;
    padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
    margin-left: 4px;
  }
</style>

<div class="card">
  <div class="card-header"><div>
    <h2>{{ attach_title or 'Dokumente & Zeichnungen' }}
      <span id="att-count-{{ attach_entity_type }}-{{ attach_entity_id }}"
            class="text-neutral-400 font-normal text-sm">· lade …</span>
    </h2>
    <p class="sub">Drag &amp; Drop · Werkstatt-Tablet sieht neue Versionen sofort</p>
  </div></div>

  <div style="padding: 14px;">
    <div class="takoma-dropzone" id="takoma-dz-{{ attach_entity_type }}-{{ attach_entity_id }}">
      <div class="dz-icon">📎</div>
      <div><b>Datei hierher ziehen</b> oder <span style="color: var(--brand-orange); text-decoration: underline;">klicken zum Auswählen</span></div>
      <div class="dz-hint">PDF · DXF · DWG · STEP · IGES · STL · PNG · JPG · Office-Dokumente — max. 50 MB pro Datei</div>
      <input type="file" id="takoma-fi-{{ attach_entity_type }}-{{ attach_entity_id }}"
             multiple style="display: none;"
             accept=".pdf,.dxf,.dwg,.step,.stp,.iges,.igs,.stl,.obj,.3mf,.png,.jpg,.jpeg,.gif,.bmp,.docx,.xlsx,.pptx,.txt,.csv">
    </div>
    <div id="takoma-att-list-{{ attach_entity_type }}-{{ attach_entity_id }}" class="takoma-att-list"></div>
  </div>
</div>

<script>
(function () {
  const ENTITY = "{{ attach_entity_type }}";
  const ENTITY_ID = {{ attach_entity_id }};
  const dz = document.getElementById(`takoma-dz-${ENTITY}-${ENTITY_ID}`);
  const fi = document.getElementById(`takoma-fi-${ENTITY}-${ENTITY_ID}`);
  const list = document.getElementById(`takoma-att-list-${ENTITY}-${ENTITY_ID}`);
  const count = document.getElementById(`att-count-${ENTITY}-${ENTITY_ID}`);
  if (!dz || !fi || !list) return;

  function iconFor(name) {
    const ext = (name.split('.').pop() || '').toLowerCase();
    if (['pdf'].includes(ext)) return '📄';
    if (['dxf','dwg','step','stp','iges','igs','stl','obj','3mf'].includes(ext)) return '📐';
    if (['png','jpg','jpeg','gif','bmp'].includes(ext)) return '🖼';
    if (['docx','doc'].includes(ext)) return '📝';
    if (['xlsx','xls','csv'].includes(ext)) return '📊';
    return '📎';
  }

  function loadList() {
    fetch(`/api/attachments/${ENTITY}/${ENTITY_ID}`)
      .then(r => r.json()).then(d => {
        if (!d.ok) return;
        count.textContent = '· ' + d.attachments.length + ' Datei' + (d.attachments.length !== 1 ? 'en' : '');
        if (d.attachments.length === 0) {
          list.innerHTML = '<div style="grid-column: 1 / -1; padding: 14px; text-align: center; color: var(--card-text-muted); font-size: 13px;">Noch keine Anhänge.</div>';
          return;
        }
        list.innerHTML = d.attachments.map(a => {
          const ext = (a.filename.split('.').pop() || '').toLowerCase();
          const sizeKb = Math.round((a.size_bytes || 0) / 1024);
          const isView = ['pdf','png','jpg','jpeg','gif','dxf'].includes(ext);
          const previewUrl = ext === 'dxf' ? `/api/dxf-preview/${a.id}.svg` : a.web_path;
          return `
            <div class="takoma-att-card">
              <div class="ico">${iconFor(a.filename)}</div>
              <div class="info">
                <div class="name" title="${a.filename}">${a.filename}${(a.revision || 1) > 1 ? `<span class="rev-badge">Rev. ${a.revision}</span>` : ''}</div>
                <div class="meta">
                  ${sizeKb} KB · ${(a.created_at || '').slice(0, 16)}
                  ${a.uploaded_by_name ? ' · ' + a.uploaded_by_name : ''}
                </div>
                <div style="margin-top: 6px; display: flex; gap: 6px;">
                  ${isView ? `<a href="${previewUrl}" target="_blank" class="btn btn-sm btn-secondary" style="font-size:11px;padding:3px 8px;">Vorschau</a>` : ''}
                  <a href="/attachments/${a.id}/download" class="btn btn-sm btn-secondary" style="font-size:11px;padding:3px 8px;">↓ Download</a>
                </div>
              </div>
            </div>`;
        }).join('');
      });
  }

  function upload(files) {
    if (!files || !files.length) return;
    const fd = new FormData();
    fd.append('entity_type', ENTITY);
    fd.append('entity_id', String(ENTITY_ID));
    for (const f of files) fd.append('files', f);
    dz.querySelector('.dz-icon').textContent = '⏳';
    dz.querySelector('div:nth-child(2)').innerHTML = '<b>Lade hoch…</b>';
    fetch('/api/attachments/upload', { method: 'POST', body: fd })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          if (window.toast) toast(d.count + ' Datei(en) hochgeladen' + (d.created.some(c=>c.is_new_version) ? ' (neue Version)' : ''), 'success', { ttl: 2500 });
          loadList();
        } else {
          alert('Upload-Fehler: ' + (d.error || 'unbekannt'));
        }
        dz.querySelector('.dz-icon').textContent = '📎';
        dz.querySelector('div:nth-child(2)').innerHTML = '<b>Datei hierher ziehen</b> oder <span style="color: var(--brand-orange); text-decoration: underline;">klicken zum Auswählen</span>';
      })
      .catch(err => {
        alert('Netzwerk-Fehler: ' + err);
        dz.querySelector('.dz-icon').textContent = '📎';
      });
  }

  dz.addEventListener('click', () => fi.click());
  fi.addEventListener('change', e => upload(e.target.files));
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag'); });
  dz.addEventListener('dragleave', () => dz.classList.remove('drag'));
  dz.addEventListener('drop', e => {
    e.preventDefault(); dz.classList.remove('drag');
    upload(e.dataTransfer.files);
  });
  loadList();
})();
</script>