emailtemplate.it/public/assets/js/ui-list.js

import { apiList, apiGet, apiDelete, apiUpdate, toast } from './api.js';

function formatUsage(usage){
  if (!usage || !usage.total) return '';
  const parts=[];
  if (usage.templates) parts.push(`${usage.templates} Template${usage.templates!==1?'s':''}`);
  if (usage.sections) parts.push(`${usage.sections} Section${usage.sections!==1?'s':''}`);
  if (usage.blocks) parts.push(`${usage.blocks} Block${usage.blocks!==1?'s':''}`);
  if (usage.snippets) parts.push(`${usage.snippets} Snippet${usage.snippets!==1?'s':''}`);
  if (!parts.length) return '';
  return `<div class="mt-3 text-sm text-rose-600">
    Dieses Element wird aktuell verwendet in: <strong>${parts.join(', ')}</strong>.<br>
    Das Löschen entfernt diese Referenzen.
  </div>`;
}

function esc(s=''){
  return String(s)
    .replace(/&/g,'&amp;')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;')
    .replace(/'/g,'&#39;');
}

async function openSnippetEditor(id){
  const dlg = document.getElementById('editSnippetDialog');
  const form = document.getElementById('editSnippetForm');
  const inpName = document.getElementById('edit_snip_name');
  const taContent = document.getElementById('edit_snip_content');
  const btnCancel = document.getElementById('editSnippetCancel');

  // Daten laden
  let resp = {};
  try { resp = await apiGet('snippets', id) || {}; } catch(e){}
  const row = resp?.item || resp?.data || resp || {};
  const contentValue = resp?.content ?? row.content ?? '';

  if (inpName) inpName.value = row.name || '';
  if (taContent) taContent.value = contentValue;

  function cleanup(){
    form && form.removeEventListener('submit', onSubmit);
    btnCancel && (btnCancel.onclick = null);
  }

  async function onSubmit(ev){
    ev.preventDefault();
    try{
      const res = await apiUpdate('snippets', id, {
        name: inpName ? inpName.value : '',
        content: taContent ? taContent.value : ''
      });
      toast(res && res.ok ? 'Snippet gespeichert' : 'Speichern fehlgeschlagen', !!(res && res.ok));
      dlg && dlg.close();
      cleanup();
      // Liste neu laden
      loadList('snippets');
    }catch(e){
      toast('Speichern fehlgeschlagen', false);
    }
  }

  if (form) form.addEventListener('submit', onSubmit, { once:false });
  if (btnCancel) btnCancel.onclick = () => { dlg && dlg.close(); cleanup(); };

  dlg && dlg.showModal();
}

export async function loadList(resource){
  const el=document.getElementById(`view-${resource}`); if(!el) return;

  el.innerHTML=`<div class='rounded-2xl border bg-white overflow-hidden'>
    <div class='px-4 py-2 border-b bg-gray-50 text-sm font-medium'>${resource.charAt(0).toUpperCase()+resource.slice(1)}</div>
    <div id='list-${resource}' class='divide-y'>Lade …</div></div>`;

  const data=await apiList(resource);
  const list=el.querySelector(`#list-${resource}`);

  if(!Array.isArray(data)||data.length===0){
    list.innerHTML=`<div class='p-4 text-sm text-gray-500'>Keine Einträge</div>`;
    return;
  }

  function parentBadge(r,it){
    if(r==='sections'&&it.template_id) return `<span class="chip"><span class="dot"></span> Template&nbsp;#${it.template_id}${it.template_name ? ' · '+esc(it.template_name) : ''}</span>`;
    if(r==='blocks'&&it.section_id)   return `<span class="chip"><span class="dot"></span> Section&nbsp;#${it.section_id}${it.section_name ? ' · '+esc(it.section_name) : ''}</span>`;
    if(r==='snippets'&&it.block_id)   return `<span class="chip"><span class="dot"></span> Block&nbsp;#${it.block_id}${it.block_name ? ' · '+esc(it.block_name) : ''}</span>`;
    return '<span class="chip"><span class="dot"></span> frei</span>';
  }

  list.innerHTML=data.map(item=>{
    const name = esc(item.name||'');
    const openBtn = (['templates','sections','blocks'].includes(resource))
      ? `<button class='btn' data-open='${resource}:${item.id}'>Im E-Mail-Editor öffnen</button>` : '';

    const editBtn = (resource==='snippets')
      ? `<button class='btn' data-edit='snippets:${item.id}'>Bearbeiten</button>` : '';

    const testBtn = resource==='templates'
      ? `<button class='btn' data-test='${item.id}' data-name='${name}'>Testversand</button>` : '';

    const prevBtn = `<button class='btn' data-preview='${resource}:${item.id}'>Vorschau</button>`;
    const delBtn  = `<button class='btn btn-danger' data-del='${resource}:${item.id}' data-name='${name}'>Löschen</button>`;

    return `<div class='p-3 flex items-center gap-3'>
      <div class='min-w-48 font-medium truncate' title="${name}">${name || '(ohne Name)'}</div>
      <div class='text-xs text-gray-500'>#${item.id}</div>
      <div class='text-xs'>${parentBadge(resource,item)}</div>
      <div class='ms-auto flex gap-2'>${[openBtn, editBtn, testBtn, prevBtn, delBtn].filter(Boolean).join('')}</div>
    </div>`;
  }).join('');

  // --- Editor öffnen (ANPASSUNG) -----------------------------------------
  list.querySelectorAll('[data-open]').forEach(b=>b.addEventListener('click', async ()=>{
    const [res,id]=b.dataset.open.split(':');

    // Detail laden, um Name + aktuellen HTML/Content zu haben
    const obj = await apiGet(res,id);
    const name = obj?.name || '';
    const html = obj ? (obj.html ?? obj.content ?? '') : '';

    // Globale Kontexte (werden von Editor/anderen Modulen genutzt)
    window.__currentItemId    = Number(id);
    window.__currentEditorCtx = { id:Number(id), mode:res };

    // Bevorzugt EditorUI.open nutzen; Fallback: __openEditor (Bestand)
    if (window.EditorUI && typeof window.EditorUI.open === 'function') {
      window.EditorUI.open({ id:Number(id), name, html }, res);
    } else if (window.__openEditor) {
      window.__openEditor({ resource:res, id:Number(id), name, html });
    } else {
      console.warn('Kein Editor-Entry-Point gefunden (EditorUI.open / __openEditor).');
      toast('Editor ist nicht initialisiert.', false);
    }
  }));
  // -----------------------------------------------------------------------

  // edit snippet
  list.querySelectorAll('[data-edit]').forEach(b=>b.addEventListener('click', async ()=>{
    const [, id] = b.dataset.edit.split(':');
    await openSnippetEditor(id);
  }));

  // preview
  const prevDlg=document.getElementById('previewDialog'), prevFrame=document.getElementById('previewFrame');
  list.querySelectorAll('[data-preview]').forEach(b=>b.addEventListener('click', async ()=>{
    const [res,id]=b.dataset.preview.split(':');
    const obj=await apiGet(res,id);
    const html=(obj?.html||obj?.content||'<em>(leer)</em)');
    prevFrame.srcdoc='<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body>'+html+'</body></html>';
    prevDlg.showModal();
  }));

  // test send (templates only)
  list.querySelectorAll('[data-test]').forEach(b=>b.addEventListener('click', ()=>{
    const id = Number(b.dataset.test || '0');
    const nm = b.dataset.name || '';
    if (!id) {
      toast('Testversand: Ungültige ID', false);
      return;
    }
    if (window.AdminTestSend && typeof window.AdminTestSend.open === 'function') {
      window.AdminTestSend.open({ id, name: nm });
    } else {
      toast('Testversand ist aktuell nicht verfügbar.', false);
    }
  }));

  // delete
  const delDlg=document.getElementById('deleteDialog'),
        delText=document.getElementById('deleteText'),
        delForm=document.getElementById('deleteForm'),
        delCancel=document.getElementById('deleteCancel');

  let pending=null;
  delCancel && (delCancel.onclick=()=>{pending=null;delDlg.close();});

  list.querySelectorAll('[data-del]').forEach(b=>b.addEventListener('click', async ()=>{
    const [res,id]=b.dataset.del.split(':'); const nm=b.dataset.name||'';
    let usage = null;
    try {
      const detail = await apiGet(res, id);
      usage = detail?.usage || null;
    } catch {}
    pending={res,id,nm,usage};
    const usageWarn = formatUsage(usage);
    delText && (delText.innerHTML=`Soll <strong>${nm || '(ohne Name)'} #${id}</strong> aus <strong>${res}</strong> wirklich gelöscht werden?<br><span class="text-rose-600">Achtung:</span> Kinder-Elemente werden <em>nicht</em> automatisch mit gelöscht.${usageWarn}`);
    delDlg.showModal();
  }));

  delForm && (delForm.onsubmit=async(e)=>{
    e.preventDefault();
    if(!pending) return delDlg.close();
    const r=await apiDelete(pending.res,pending.id);
    delDlg.close();
    toast(r&&r.ok?'Gelöscht':'Löschen fehlgeschlagen', !!(r&&r.ok), {duration:3000});
    loadList(resource);
  });
}

export function initLists(){
  loadList('templates');
  // Public reload helper (wird vom Snippet-Editor genutzt)
  window.__reloadList = loadList;
  // Backwards compat (falls woanders genutzt)
  window.loadList = loadList;
}