import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["container", "data"]

  connect() {
    const readouts = JSON.parse(this.dataTarget.textContent)
    if (readouts.length === 0) return

    const quantities = new Map()
    readouts.forEach(r => {
      if (!r.takenAt) return
      if (!quantities.has(r.quantityId)) {
        quantities.set(r.quantityId, { name: r.quantityName, unit: r.unit, x: [], y: [] })
      }
      const q = quantities.get(r.quantityId)
      q.x.push(r.takenAt)
      q.y.push(r.value)
    })

    const traces = []
    quantities.forEach(q => {
      traces.push({
        x: q.x, y: q.y,
        mode: 'lines+markers', type: 'scatter',
        name: q.name + ' (' + q.unit + ')',
        marker: { size: 5 }
      })
    })

    const div = document.createElement('div')
    div.className = 'chart-panel'
    this.containerTarget.appendChild(div)

    Plotly.newPlot(div, traces, {
      xaxis: { type: 'date', tickformat: '%Y-%m-%d %H:%M' },
      yaxis: {},
      margin: { t: 20, r: 20, b: 80, l: 60 },
      paper_bgcolor: 'transparent',
      plot_bgcolor: 'transparent',
      font: { family: 'system-ui' },
      legend: { orientation: 'h', y: -0.25 }
    }, { responsive: true, displayModeBar: false })
  }
}