const form = document.querySelector('#review-form');
const statusBox = document.querySelector('#status');
const resultBox = document.querySelector('#result');
const progressBox = document.querySelector('#progress-box');
const progressBar = document.querySelector('#progress-bar');
const progressLabel = document.querySelector('#progress-label');
const progressValue = document.querySelector('#progress-value');
const button = form.querySelector('button');

const wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

function setProgress(percent, message) {
  progressBar.value = percent;
  progressBar.textContent = `${percent}%`;
  progressValue.textContent = `${percent}%`;
  progressLabel.textContent = message;
}

function showResult(data) {
  document.querySelector('#total').textContent = data.total.toLocaleString('pl-PL');
  document.querySelector('#average').textContent = data.average.toLocaleString('pl-PL', {minimumFractionDigits: 2});
  const max = Math.max(...Object.values(data.ratings), 1);
  const rows = Object.entries(data.ratings).map(([stars, count]) => {
    const row = document.createElement('div'); row.className = 'rating-row';
    const label = document.createElement('span'); label.textContent = `${stars} ★`;
    const bar = document.createElement('progress');
    bar.className = 'rating-bar'; bar.max = max; bar.value = count;
    const value = document.createElement('strong'); value.textContent = count.toLocaleString('pl-PL');
    row.append(label, bar, value); return row;
  });
  document.querySelector('#ratings').replaceChildren(...rows);
  resultBox.hidden = false;
}

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  button.disabled = true;
  resultBox.hidden = true;
  statusBox.textContent = '';
  statusBox.className = 'status';
  progressBox.hidden = false;
  setProgress(0, 'Rozpoczynam sprawdzanie');

  try {
    const startResponse = await fetch('/api/reviews', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({url: document.querySelector('#maps-url').value})
    });
    const startData = await startResponse.json();
    if (!startResponse.ok) throw new Error(startData.error || 'Nie udało się rozpocząć sprawdzania.');

    while (true) {
      const response = await fetch(`/api/reviews/${encodeURIComponent(startData.job_id)}`, {cache: 'no-store'});
      const job = await response.json();
      if (!response.ok) throw new Error(job.error || 'Nie udało się sprawdzić postępu.');
      setProgress(job.progress, job.message);
      if (job.status === 'complete') {
        showResult(job.result);
        progressBox.hidden = true;
        break;
      }
      if (job.status === 'error') throw new Error(job.message);
      await wait(350);
    }
  } catch (error) {
    progressBox.hidden = true;
    statusBox.className = 'status error';
    statusBox.textContent = error.message;
  } finally {
    button.disabled = false;
  }
});