document.addEventListener('DOMContentLoaded', async () => {
  const faqList = document.getElementById('faq-list');
  const searchInput = document.getElementById('search-input');

  faqList.innerHTML = '<p class="loading">Загрузка...</p>';

  let faqs = [];

  try {
    const response = await fetch('http://backend.lc:8000/api/faq');
    faqs = await response.json();

    faqList.innerHTML = '';

    if (faqs.length === 0) {
      faqList.innerHTML = '<p>Пока нет вопросов.</p>';
      return;
    }

    // Функция для отображения вопросов
    function renderFaqs(filteredFaqs) {
      faqList.innerHTML = '';
      filteredFaqs.forEach(faq => {
        const item = document.createElement('div');
        item.className = 'faq-item';

        // Кнопка +/−
        const button = document.createElement('button');
        button.textContent = '+';
        button.style.cssText = `
          background: none;
          border: none;
          font-size: 20px;
          color: #7f8c8d;
          cursor: pointer;
          margin-left: 10px;
          transition: transform 0.2s;
        `;
        button.onclick = () => {
          const answer = item.querySelector('.faq-answer');
          if (answer.style.display === 'block') {
            answer.style.display = 'none';
            button.textContent = '+';
          } else {
            answer.style.display = 'block';
            button.textContent = '−';
          }
        };

        // Вопрос
        const questionEl = document.createElement('div');
        questionEl.className = 'faq-question';
        questionEl.textContent = faq.question;
        questionEl.appendChild(button);

        // Ответ
        const answerEl = document.createElement('div');
        answerEl.className = 'faq-answer';
        answerEl.style.display = 'none';
        answerEl.textContent = faq.answer;

        item.appendChild(questionEl);
        item.appendChild(answerEl);
        faqList.appendChild(item);
      });
    }

    // Показать все при старте
    renderFaqs(faqs);

    // Поиск по вопросам
    searchInput.addEventListener('input', () => {
      const query = searchInput.value.toLowerCase().trim();
      if (query === '') {
        renderFaqs(faqs); // Показать все
      } else {
        const filtered = faqs.filter(faq =>
          faq.question.toLowerCase().includes(query)
        );
        renderFaqs(filtered);
      }
    });

  } catch (err) {
    faqList.innerHTML = `<p style="color: red;">Ошибка загрузки: ${err.message}</p>`;
    console.error(err);
  }
});