const API_BASE = `${location.protocol}//${location.hostname}:8000`;

const app = document.getElementById('app');

function render(html){ app.innerHTML = html }

function showAgreement(){
  render(`<h2>Соглашение</h2><p>Нажмите продолжить, чтобы зарегистрироваться и пройти тест.</p><button id=agree>Продолжить</button>`);
  document.getElementById('agree').onclick = ()=> showRegister();
}

function showRegister(){
  render(`<h2>Регистрация</h2>
    <form id=reg>
      <label>Имя: <input name=firstname required></label><br>
      <label>Фамилия: <input name=lastname required></label><br>
      <button type=submit>Создать пользователя</button>
    </form>
    <div id=result></div>`);
  document.getElementById('reg').onsubmit = async (e)=>{
    e.preventDefault();
    const fd = new FormData(e.target);
    const first = (fd.get('firstname') || '').trim();
    const last = (fd.get('lastname') || '').trim();
    const data = {first_name: first, last_name: last};
    const res = await fetch(`${API_BASE}/users/`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
    if(!res.ok){ document.getElementById('result').innerText = 'Ошибка создания'; return }
    const user = await res.json();
    localStorage.setItem('user_id', user.id);
    showPollList();
  }
}

async function showPollList(){
  const res = await fetch(`${API_BASE}/polls`);
  const polls = res.ok ? await res.json() : [];
  render(`<h2>Доступные тесты</h2><ul id=polls>${polls.map(p=>`<li><a href=#poll-${p.id}>${p.title||p.name||p.id}</a></li>`).join('')}</ul><div id=actions><button id=refresh>Обновить</button></div>`);
  document.getElementById('refresh').onclick = showPollList;
  document.querySelectorAll('#polls a').forEach(a=>a.onclick = (ev)=>{ ev.preventDefault(); const id = a.getAttribute('href').slice(6); showPoll(id); });
}

async function showPoll(id){
  const res = await fetch(`${API_BASE}/polls/${id}`);
  if(!res.ok){ render('<p>Не удалось загрузить тест</p>'); return }
  const poll = await res.json();
  // simple rendering: list questions and choices (if present)
  const html = [`<h2>${poll.title||poll.name||'Тест'}</h2>`];
  poll.questions = poll.questions || [];
  html.push(`<form id=resp>`);
  poll.questions.forEach(q=>{
    html.push(`<div><strong>${q.text||q.prompt||q.id}</strong>`);
    const choices = q.choices || [];
    if(choices.length){
      choices.forEach(c=> html.push(`<div><label><input type=radio name="q_${q.id}" value="${c.id}" required> ${c.text||c.label||c.id}</label></div>`));
    } else {
      html.push(`<div><input name="q_${q.id}" placeholder="Ваш ответ"></div>`);
    }
    html.push('</div>');
  });
  html.push('<button type=submit>Отправить ответы</button></form>');
  html.push('<div id=msg></div>');
  render(html.join(''));
  document.getElementById('resp').onsubmit = async (e)=>{
    e.preventDefault();
    const form = new FormData(e.target);
    const answers = [];
    for(const [k,v] of form.entries()){
      if(!k.startsWith('q_')) continue;
      const qid = k.slice(2);
      answers.push({question_id: qid, choice_id: v});
    }
    const payload = {user_id: localStorage.getItem('user_id'), answers};
    const r = await fetch(`${API_BASE}/polls/${id}/responses`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
    if(!r.ok){ document.getElementById('msg').innerText = 'Ошибка отправки'; return }
    document.getElementById('msg').innerText = 'Ответы отправлены';
  }
}

// start
showAgreement();