// Simple client for language portal
const tabs = document.querySelectorAll('#tabs button');
const content = document.getElementById('content');
let currentLang = 'en';

function setActiveTab() {
  tabs.forEach(b => b.classList.toggle('active', b.dataset.lang === currentLang));
}

async function loadTerms() {
  const resp = await fetch(`/api/terms/${currentLang}`);
  const terms = await resp.json();
  renderTerms(terms);
}

function renderTerms(terms) {
  const list = document.createElement('div');
  list.id = 'list';
  terms.forEach(t => {
    const div = document.createElement('div');
    div.className = 'term';
    div.textContent = `${t.term}: ${t.definition}`;
    list.appendChild(div);
  });
  const form = document.createElement('form');
  form.id = 'addForm';
  form.innerHTML = `
    <h3>Добавить термин</h3>
    <input name="term" placeholder="Термин" required />
    <input name="definition" placeholder="Определение" required />
    <button type="submit">Сохранить</button>
  `;
  form.addEventListener('submit', async e => {
    e.preventDefault();
    const term = e.target.term.value.trim();
    const definition = e.target.definition.value.trim();
    await fetch(`/api/terms/${currentLang}`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({term, definition})
    });
    e.target.reset();
    loadTerms();
  });
  content.innerHTML = '';
  content.appendChild(list);
  content.appendChild(form);
}

tabs.forEach(b => {
  b.addEventListener('click', () => {
    currentLang = b.dataset.lang;
    setActiveTab();
    loadTerms();
  });
});

setActiveTab();
loadTerms();