const API_URL = window.location.origin + '/api';

const promptInput = document.getElementById('promptInput');
const tempSlider = document.getElementById('tempSlider');
const tempVal = document.getElementById('tempVal');
const topkSlider = document.getElementById('topkSlider');
const topkVal = document.getElementById('topkVal');
const generateBtn = document.getElementById('generateBtn');
const generate5Btn = document.getElementById('generate5Btn');
const outputArea = document.getElementById('outputArea');
const statusMsg = document.getElementById('statusMsg');

tempSlider.addEventListener('input', () => {
  tempVal.textContent = tempSlider.value;
});

topkSlider.addEventListener('input', () => {
  topkVal.textContent = topkSlider.value;
});

generateBtn.addEventListener('click', () => generate(1));
generate5Btn.addEventListener('click', () => generate(5));

async function generate(count) {
  const prompt = promptInput.value.trim();
  const temperature = parseFloat(tempSlider.value);
  const top_k = parseInt(topkSlider.value);

  outputArea.innerHTML = '';
  statusMsg.textContent = 'Генерация...';
  statusMsg.className = 'status-msg';

  try {
    const res = await fetch(`${API_URL}/generate`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prompt,
        temperature,
        top_k,
        num_samples: count
      })
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      throw new Error(err.detail || `Ошибка ${res.status}`);
    }

    const data = await res.json();
    statusMsg.textContent = '';
    statusMsg.className = 'status-msg';

    data.texts.forEach((text, i) => {
      const div = document.createElement('div');
      div.className = 'gen-output-item';
      if (count > 1) {
        div.innerHTML = `<span class="gen-badge">#${i + 1}</span>${text}...😱`;
      } else {
        div.textContent = `${text}...😱`;
      }
      outputArea.appendChild(div);
    });
  } catch (err) {
    statusMsg.textContent = '❌ Сервер недоступен. Запустите API: python server.py';
    statusMsg.className = 'status-msg error';
    fallbackGenerate(count, prompt, temperature, top_k);
  }
}

function fallbackGenerate(count, prompt, temperature, top_k) {
  const templates = [
    prompt
      ? `${prompt} — этот секрет знают единицы`
      : 'Этот секрет знают единицы',
    prompt
      ? `${prompt} — врачи в шоке от открытия`
      : 'Врачи в шоке от этого открытия',
    prompt
      ? `${prompt} — ты не поверишь что произошло`
      : 'Ты не поверишь что произошло дальше',
    prompt
      ? `${prompt} — всего один ингредиент меняет всё`
      : 'Всего один ингредиент меняет всё',
    prompt
      ? `${prompt} — вот почему никто не говорит об этом`
      : 'Вот почему никто не говорит об этом'
  ];

  outputArea.innerHTML = '';
  for (let i = 0; i < count && i < templates.length; i++) {
    const div = document.createElement('div');
    div.className = 'gen-output-item';
    if (count > 1) {
      div.innerHTML = `<span class="gen-badge">#${i + 1}</span>${templates[i]}...😱`;
    } else {
      div.textContent = `${templates[i]}...😱`;
    }
    outputArea.appendChild(div);
  }
}

// Example tabs
document.querySelectorAll('.ex-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.ex-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.ex-content').forEach(c => c.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('ex-' + tab.dataset.tab).classList.add('active');
  });
});