import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

import 'apexcharts/features/renderer-canvas'
import 'apexcharts/features/trellis'

// A rack-temperature fleet: 60 devices, one day of 30-minute readings each.
// The grid VIRTUALIZES (`trellis.virtualize: true`): every cell and header
// exists up front (page height never shifts), but only the panels near the
// viewport are live charts. Scroll: panels mount as they approach and are
// destroyed as they leave, keeping the DOM small; a zoom set anywhere rides
// along and is restored when a panel scrolls back in.
//
// The y scale is SHARED, so the one overheating rack is visible from across
// the room, and the dense traces paint on the canvas renderer.
//
// Deterministic walks so the e2e snapshot is stable.
function mulberry32(seed) {
  return function () {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

function dayOfReadings(seed, base, drift) {
  var rand = mulberry32(seed)
  var out = []
  var ts = new Date('01 Jan 2025').getTime()
  var val = base
  for (var i = 0; i < 48; i++) {
    val += (rand() - 0.5) * 1.6 + drift
    out.push([ts, Math.round(val * 10) / 10])
    ts += 1800000 // 30 minutes
  }
  return out
}

var deviceSeries = []
for (var d = 1; d <= 60; d++) {
  var id = 'RACK-' + (d < 10 ? '0' + d : d)
  // Most racks idle in the low 40s; RACK-27 is running away.
  var hot = d === 27
  deviceSeries.push({
    name: 'Temp',
    device: id,
    data: dayOfReadings(d * 13, hot ? 68 : 40 + (d % 7), hot ? 0.35 : 0),
  })
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: deviceSeries,
    options: {
      chart: {
        id: 'deviceHealthTrellis',
        type: 'line',
        renderer: 'canvas',
      },
      trellis: {
        by: 'device',
        virtualize: true,
        panelHeight: 150,
        minPanelWidth: 240,
        gap: 12,
      },
      colors: ['#059669'],
      stroke: {
        width: 2,
        curve: 'straight',
      },
      xaxis: {
        type: 'datetime',
      },
      yaxis: {
        labels: {
          formatter: function (val) {
            return Math.round(val) + '°C'
          },
        },
      },
      dataLabels: {
        enabled: false,
      },
      tooltip: {
        x: {
          format: 'HH:mm',
        },
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>Device health, one panel per rack</h1>
        <p className="lead">
          Sixty racks, one shared temperature scale, and only the panels you can
          see are live charts. Scroll the grid: panels mount as they approach
          the viewport and unmount as they leave, so the page stays light at any
          fleet size. RACK-27 is the one to worry about.
        </p>

        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="line"
            />
          </div>
        </div>

        <div className="note">
          This grid is <strong>virtualized</strong>:{' '}
          <code>trellis.virtualize: true</code> mounts only the panels
          intersecting the viewport (plus one row of look-ahead). Every cell
          keeps its header and a fixed-height skeleton, so page height and
          scroll position never shift; a panel that scrolls out is destroyed
          with its view stashed, and scrolling back restores it, zoom window
          included. Above 64 panels this happens automatically (
          <code>virtualize: 'auto'</code>). The shared y scale is what makes the
          hot rack obvious, the traces paint on the canvas renderer (
          <code>chart.renderer: 'canvas'</code>), and mount animations default
          off above 16 panels. Trellis is a premium feature; without a license
          it renders with a trial watermark.
        </div>
      </div>
    </div>
  )
}

export default ApexChart