import { apiAction, toast } from './api.js';

function renderTabs(nav, sections, activeId) {
  nav.innerHTML = '';
  sections.forEach((section, idx) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.dataset.sectionId = String(section.id);
    btn.className = 'px-4 py-2 text-sm border-e';
    btn.textContent = section.name || `Section ${idx + 1}`;
    if (section.id === activeId) {
      btn.classList.add('bg-sky-50', 'text-sky-700');
    }
    nav.appendChild(btn);
  });
}

function pickDefaultSection(sections) {
  if (!Array.isArray(sections) || !sections.length) return null;
  const tpl = sections.find(s => Number(s.is_template) === 1);
  return tpl || sections[0];
}

export async function initTabs() {
  const nav = document.getElementById('sectionTabs');
  if (!nav) return;

  const setActive = (sections, id) => {
    const next = sections.find(s => Number(s.id) === Number(id));
    if (!next) return;
    window.__activeSection = next;
    renderTabs(nav, sections, next.id);
    if (typeof window.loadList === 'function') {
      window.loadList(next);
    }
  };

  nav.addEventListener('click', (ev) => {
    const btn = ev.target?.closest?.('button[data-section-id]');
    if (!btn) return;
    const sections = window.__sectionsConfig || [];
    if (!sections.length) return;
    const id = Number(btn.dataset.sectionId || 0);
    if (!id) return;
    setActive(sections, id);
  });

  const readyPromise = (async () => {
    try {
      const res = await apiAction('sections_config.list', { method: 'GET' });
      const sections = Array.isArray(res?.items) ? res.items : [];
      if (!sections.length) {
        nav.innerHTML = '<span class="px-4 py-2 text-sm text-slate-500">Keine Sections</span>';
        return;
      }
      window.__sectionsConfig = sections;
      const active = pickDefaultSection(sections);
      window.__activeSection = active;
      renderTabs(nav, sections, active?.id);
      if (typeof window.loadList === 'function' && active) {
        window.loadList(active);
      }
    } catch (err) {
      toast(err.message || 'Sections konnten nicht geladen werden', false);
    }
  })();
  window.__sectionsReady = readyPromise;
  return readyPromise;
}