var cellCount = 10000
var DAY = 86400000

// A heatmap is a rows x cols matrix; each cell is one value. The cell count
// is what scales cost, so map a target cell count to a rows/cols shape. Here
// the rows are latitude bands (north to south) and the columns are days, so
// the matrix is a daily mean-temperature field: warm near the equator, cold
// toward the poles, with a seasonal wave that grows toward the poles and runs
// half a year out of phase between the two hemispheres.
function shapeFor(cells) {
  if (cells <= 10000) return { rows: 50, cols: cells / 50 }
  return { rows: 100, cols: cells / 100 }
}

function formatLat(lat) {
  var r = Math.round(lat)
  if (r > 0) return r + '°N'
  if (r < 0) return -r + '°S'
  return '0°'
}

function generateHeatmap(cells) {
  var shape = shapeFor(cells)
  // Columns are consecutive days ending today, anchored to UTC midnight so
  // every day is exactly 86400000 ms and the seasonal phase never drifts.
  var now = new Date()
  var end = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
  var start = end - (shape.cols - 1) * DAY

  // Deterministic PRNG so the field looks the same on every reload.
  var seed = 1013904223
  function rand() {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff
    return seed / 0x7fffffff
  }

  var series = new Array(shape.rows)
  for (var r = 0; r < shape.rows; r++) {
    var lat = 90 - (r / (shape.rows - 1)) * 180
    var absLat = Math.abs(lat) / 90
    // Warm at the equator (~27C), cold at the poles (~-30C).
    var baseTemp = 27 - 57 * Math.pow(absLat, 1.05)
    // Seasonal swing: tiny at the equator, large toward the poles.
    var swing = 2 + 22 * absLat
    var hemi = lat >= 0 ? 1 : -1
    var data = new Array(shape.cols)
    for (var c = 0; c < shape.cols; c++) {
      var t = start + c * DAY
      var d = new Date(t)
      var doy = (t - Date.UTC(d.getUTCFullYear(), 0, 0)) / DAY
      // Northern hemisphere peaks in mid-July; southern is the opposite.
      var seasonal = swing * Math.sin((2 * Math.PI * doy) / 365 - 1.87) * hemi
      var temp = baseTemp + seasonal + (rand() - 0.5) * 3
      data[c] = { x: t, y: Math.round(temp) }
    }
    series[r] = { name: formatLat(lat), data: data }
  }
  // Rows read north (top) -> south (bottom); ApexCharts draws the last series
  // on top, so reverse before returning.
  return series.reverse()
}

var heatmapData = generateHeatmap(cellCount)

// Stateless helper shared by the vanilla, React and Vue builds.
function domNodeCount() {
  var el = document.querySelector('#chart')
  return el ? el.getElementsByTagName('*').length : 0
}

var options = {
  series: heatmapData,
  chart: {
    height: 500,
    type: 'heatmap',
    renderer: 'canvas',
    rendererThreshold: 8000,
    animations: { enabled: false },
    toolbar: { show: false },
  },
  title: {
    text: 'Heatmap: 10,000 cells',
    align: 'left',
  },
  subtitle: {
    text: 'Daily mean surface temperature (°C) by latitude, cold (blue) to warm (red)',
    align: 'left',
  },
  dataLabels: { enabled: false },
  // No cell stroke: at high cell counts each cell is ~1px, and a stroke that
  // wide would cover the fill entirely (cells look blank). Solid fills only.
  stroke: { show: false },
  plotOptions: {
    heatmap: {
      // Flat temperature buckets (no within-bucket shading) on a cold-to-warm
      // scale, so a cell's color reads as a temperature straight off the legend.
      enableShades: false,
      colorScale: {
        ranges: [
          { from: -60, to: -25, color: '#313695', name: 'below -25' },
          { from: -25, to: -15, color: '#4575b4', name: '-25 to -15' },
          { from: -15, to: -5, color: '#74add1', name: '-15 to -5' },
          { from: -5, to: 2, color: '#abd9e9', name: '-5 to 2' },
          { from: 2, to: 9, color: '#fee090', name: '2 to 9' },
          { from: 9, to: 16, color: '#fdae61', name: '9 to 16' },
          { from: 16, to: 23, color: '#f46d43', name: '16 to 23' },
          { from: 23, to: 60, color: '#d73027', name: 'above 23' },
        ],
      },
    },
  },
  xaxis: {
    type: 'datetime',
    labels: { datetimeUTC: true, style: { fontSize: '12px' } },
    axisTicks: { show: false },
    axisBorder: { show: false },
  },
  yaxis: {
    labels: { style: { fontSize: '12px' } },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

// cellCount, heatmapData, generateHeatmap, shapeFor and domNodeCount come from
// the shared head script; updateStats and lastRenderMs are chart-bound so they
// live here.
var lastRenderMs = 0

function updateStats() {
  var el = document.getElementById('stats')
  if (!el || typeof chart === 'undefined') return
  var active = chart.getActiveRenderer ? chart.getActiveRenderer() : 'svg'
  el.innerHTML =
    'Cells: <b>' +
    cellCount.toLocaleString() +
    '</b> &nbsp;·&nbsp; Active renderer: <b>' +
    active.toUpperCase() +
    '</b> &nbsp;·&nbsp; DOM nodes in chart: <b>' +
    domNodeCount().toLocaleString() +
    '</b> &nbsp;·&nbsp; Render: <b>' +
    (lastRenderMs > 0 ? lastRenderMs + ' ms' : 'change a control to time it') +
    '</b>'
}

requestAnimationFrame(function poll() {
  if (chart && chart.w && chart.w.globals && chart.w.globals.series) {
    updateStats()
  } else {
    requestAnimationFrame(poll)
  }
})

function rebuild() {
  cellCount = parseInt(document.getElementById('cellCount').value, 10)
  var mode = document.getElementById('rendererMode').value

  heatmapData = generateHeatmap(cellCount)
  options.chart.renderer = mode
  options.series = heatmapData
  options.title.text = 'Heatmap: ' + cellCount.toLocaleString() + ' cells'

  var t = performance.now()
  chart.destroy()
  chart = new ApexCharts(document.querySelector('#chart'), options)
  chart.render().then(function () {
    lastRenderMs = Math.round(performance.now() - t)
    updateStats()
  })
}

document.getElementById('rerender').addEventListener('click', rebuild)
document.getElementById('rendererMode').addEventListener('change', rebuild)
document.getElementById('cellCount').addEventListener('change', rebuild)