let metricChartInstance = null;
let spikeChartInstance = null;

function renderMetricCharts(metricReport) {
  if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
    console.warn('renderMetricCharts: invalid metricReport');
    return;
  }

  const ctxMetrics = document.getElementById('metricChart');
  const ctxSpikes = document.getElementById('spikeChart');
  if (!ctxMetrics || !ctxSpikes) {
    console.error('Chart canvas elements not found');
    return;
  }

  if (metricChartInstance) {
    metricChartInstance.destroy();
  }
  if (spikeChartInstance) {
    spikeChartInstance.destroy();
  }

  const labels = metricReport.metrics.map(m => m.name);
  const dataValues = metricReport.metrics.map(m => m.value);

  metricChartInstance = new Chart(ctxMetrics, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Metrik-Werte',
        data: dataValues,
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'top' },
        title: { display: true, text: 'Migrationsmetriken (nach Setup)' }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });

  const spikeLabels = metricReport.spikes ? metricReport.spikes.map(s => s.timestamp) : [];
  const spikeValues = metricReport.spikes ? metricReport.spikes.map(s => s.intensity) : [];
  spikeChartInstance = new Chart(ctxSpikes, {
    type: 'line',
    data: {
      labels: spikeLabels,
      datasets: [{
        label: 'Spike Intensität',
        data: spikeValues,
        borderColor: 'rgba(255, 99, 132, 1)',
        backgroundColor: 'rgba(255, 99, 132, 0.3)',
        tension: 0.3,
        fill: true
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'top' },
        title: { display: true, text: 'Migrationsspitzen über Zeit' }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
}

function updateSummaryCards(metricReport) {
  if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
    console.warn('updateSummaryCards: invalid metricReport');
    return;
  }

  const avgValue = metricReport.metrics.reduce((acc, m) => acc + (m.value || 0), 0) / metricReport.metrics.length;
  const maxValue = Math.max(...metricReport.metrics.map(m => m.value || 0));
  const minValue = Math.min(...metricReport.metrics.map(m => m.value || 0));

  const cardAvg = document.getElementById('card-average');
  const cardMax = document.getElementById('card-max');
  const cardMin = document.getElementById('card-min');

  if (cardAvg) cardAvg.textContent = avgValue.toFixed(2);
  if (cardMax) cardMax.textContent = maxValue.toFixed(2);
  if (cardMin) cardMin.textContent = minValue.toFixed(2);
}

window.renderMetricCharts = renderMetricCharts;
window.updateSummaryCards = updateSummaryCards;