document.addEventListener('DOMContentLoaded', async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const orderId = urlParams.get('orderId');
  const reportId = urlParams.get('id');

  if (!orderId && !reportId) {
    showError('Ingen rapport angiven');
    return;
  }

  try {
    let response;
    if (orderId) {
      response = await fetch(`/api/reports/order/${orderId}`);
    } else {
      response = await fetch(`/api/reports/${reportId}`);
    }

    const result = await response.json();

    if (response.ok) {
      displayReport(result.data);
    } else {
      showError(result.error || 'Rapport hittades inte');
    }
  } catch (error) {
    showError('Kunde inte ladda rapporten');
  }
});

function displayReport(report) {
  document.getElementById('loading').classList.add('hidden');
  document.getElementById('reportContent').classList.remove('hidden');

  document.getElementById('reportTitle').textContent = report.title;
  document.getElementById('reportMeta').innerHTML = `
    Genererad: ${new Date(report.generatedAt).toLocaleString('sv-SE')} | 
    Order: ${report.order?.productName || 'N/A'}
  `;

  if (report.executiveSummary) {
    document.getElementById('executiveSummary').innerHTML = `
      <h3>Exekutiv Sammanfattning</h3>
      <p>${report.executiveSummary}</p>
    `;
  }

  // Render charts
  if (report.charts && report.charts.length > 0) {
    const container = document.getElementById('chartsContainer');
    container.innerHTML = '';
    
    report.charts.forEach((chart, index) => {
      const chartDiv = document.createElement('div');
      chartDiv.className = 'chart-box';
      chartDiv.innerHTML = `<canvas id="chart${index}"></canvas>`;
      container.appendChild(chartDiv);

      new Chart(document.getElementById(`chart${index}`), {
        type: chart.type,
        data: chart.data,
        options: {
          responsive: true,
          plugins: {
            title: {
              display: true,
              text: chart.title
            }
          }
        }
      });
    });
  }

  // Render report content
  if (report.htmlContent) {
    document.getElementById('reportBody').innerHTML = report.htmlContent;
  } else if (report.content) {
    document.getElementById('reportBody').innerHTML = report.content;
  }
}

function showError(message) {
  document.getElementById('loading').classList.add('hidden');
  const errorDiv = document.getElementById('error');
  errorDiv.textContent = message;
  errorDiv.classList.remove('hidden');
}