import { apiAction, toast } from './api.js';
export function initCreate(){
  const btn=document.getElementById('btn-new'), dlg=document.getElementById('createDialog'), form=document.getElementById('createForm'), fields=document.getElementById('createFields'), hint=document.getElementById('createHint');
  if(!btn||!dlg||!form||!fields) return;
  const normalizeApiName=(v='')=>{
    return String(v)
      .trim()
      .toLowerCase()
      .replace(/\s+/g,'-')
      .replace(/[^a-z0-9_-]+/g,'-')
      .replace(/-+/g,'-')
      .replace(/^-|-$/g,'');
  };

  btn.onclick = async ()=>{
    const section = window.__activeSection || null;
    if (!section) {
      toast('Bitte zuerst eine Section auswählen', false);
      return;
    }
    const isTemplate = Number(section.is_template) === 1;
    fields.innerHTML='';
    const name=document.createElement('input'); name.type='text'; name.required=true; name.placeholder='Name*'; name.className='w-full border rounded-lg px-3 py-2'; name.id='f-name'; fields.appendChild(name);
    let apiName = null;
    let apiTouched = false;
    const addEditorSelect = () => {
      const editorSelect = document.createElement('select');
      editorSelect.id = 'f-editor-type';
      editorSelect.className = 'w-full border rounded-lg px-3 py-2';
      editorSelect.innerHTML = `
        <option value="grapesjs">GrapesJS</option>
        <option value="craftjs">Craft.js</option>
      `;
      const defaultEditor = (window.__editorDefault || 'grapesjs').toLowerCase();
      editorSelect.value = defaultEditor === 'craftjs' ? 'craftjs' : 'grapesjs';
      fields.appendChild(editorSelect);
    };

    if(isTemplate){
      apiName=document.createElement('input');
      apiName.type='text';
      apiName.required=true;
      apiName.placeholder='API Name* (ohne Leerzeichen)';
      apiName.className='w-full border rounded-lg px-3 py-2';
      apiName.id='f-api-name';
      fields.appendChild(apiName);
      addEditorSelect();
      apiName.addEventListener('input', ()=>{
        apiTouched = true;
        const next = normalizeApiName(apiName.value);
        if (next !== apiName.value) apiName.value = next;
      });
      name.addEventListener('input', ()=>{
        if (!apiTouched) apiName.value = normalizeApiName(name.value);
      });
    }
    if (!isTemplate) addEditorSelect();
    hint.textContent=`Neues Element in ${section.name}`; dlg.showModal();

    form.onsubmit=async(e)=>{ e.preventDefault();
      const payload={ name:(document.getElementById('f-name')?.value||'').trim() }; if(!payload.name) return;
      if(isTemplate) {
        payload.api_name=(document.getElementById('f-api-name')?.value||'').trim();
        if(!payload.api_name) return;
      }
      payload.editor_type=(document.getElementById('f-editor-type')?.value||'grapesjs');
      payload.html='';
      payload.section_id = section.id;
      const r=await apiAction('content.create', { method:'POST', data: payload });
      if(r&&r.id){
        dlg.close();
        toast('Erstellt',true);
        window.loadList && window.loadList(section);
      } else {
        toast(r?.error || 'Erstellen fehlgeschlagen',false,{duration:3000});
        console.error('Create failed',r);
      }
    };
  };
  const cancel=document.getElementById('createCancel'); cancel && (cancel.onclick=()=>dlg.close());
}