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

// ── Reproducible synthetic data (seeded PRNG, no network) ──────────────
function mulberry32(a) {
  return function () {
    a |= 0
    a = (a + 0x6d2b79f5) | 0
    var t = Math.imul(a ^ (a >>> 15), 1 | a)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}
var rng = mulberry32(1357924680)

function gauss(mean, sd) {
  var u = 0,
    v = 0
  while (u === 0) u = rng()
  while (v === 0) v = rng()
  return mean + sd * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v)
}

function sample(n, mean, sd) {
  var out = []
  for (var i = 0; i < n; i++) {
    out.push(Math.round(gauss(mean, sd) * 10) / 10)
  }
  return out
}

// Daily afternoon temperature (°C) across the year — each dot is one day,
// coloured by how warm it was (cool → warm along the ramp). [month, mean, sd]
// follow a seasonal arc, so the colour gradient sweeps low → high → low.
var MONTHS = [
  ['Jan', 4, 3],
  ['Feb', 6, 3],
  ['Mar', 11, 3.5],
  ['Apr', 15, 4],
  ['May', 20, 4],
  ['Jun', 24, 4],
  ['Jul', 27, 3.5],
  ['Aug', 26, 3.5],
  ['Sep', 21, 4],
  ['Oct', 15, 4.5],
  ['Nov', 9, 3.5],
  ['Dec', 5, 3],
].map(function (m) {
  return { name: m[0], data: sample(110, m[1], m[2]) }
})

// Gaussian KDE → [[value, density], ...]. The chart renders the profile you
// supply; the smoothness is a property of this bandwidth, computed here.
function kde(values, bw) {
  var min = Math.min.apply(null, values) - bw
  var max = Math.max.apply(null, values) + bw
  var N = values.length
  var profile = []
  for (var x = min; x <= max; x += 0.4) {
    var sum = 0
    for (var k = 0; k < N; k++) {
      var d = (x - values[k]) / bw
      sum += Math.exp(-0.5 * d * d)
    }
    profile.push([Math.round(x * 100) / 100, sum / (N * bw)])
  }
  return profile
}

// A sequential cool→warm colour ramp (low → high).
var COLOR_RAMP = ['#2c7bb6', '#abd9e9', '#ffffbf', '#fdae61', '#d7191c']

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: 'Temperature',
        data: MONTHS.map(function (m) {
          return {
            x: m.name,
            y: { density: kde(m.data, 1.5), points: m.data },
          }
        }),
      },
    ],
    options: {
      chart: {
        type: 'violin',
        height: 560,
      },
      title: {
        text: 'Afternoon temperature through the year — dots coloured by value',
      },
      // muted grey violins so the colour-graded dots are the focus
      colors: ['#b8c4cc'],
      stroke: { width: 1, colors: ['#90a4ae'] },
      fill: { opacity: 0.6 },
      legend: { show: false },
      yaxis: {
        title: { text: 'Temperature (°C)' },
      },
      plotOptions: {
        violin: {
          points: {
            show: true,
            size: 5,
            jitter: 0.8,
            opacity: 1,
            strokeColor: '#fff',
            strokeWidth: 1,
            // colour each observation by its value along the ramp
            colorScale: { colors: COLOR_RAMP, min: 0, max: 32 },
          },
        },
      },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="violin"
          height={560}
        />
      </div>
    </div>
  )
}

export default ApexChart