import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexNonAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexYAxis,
  ApexTitleSubtitle,
  ApexDataLabels,
  ApexStroke,
  ApexFill,
  ApexLegend,
  ApexTooltip,
  ApexMarkers,
  ApexPlotOptions,
  ApexResponsive,
  ApexGrid,
  ApexAnnotations,
  ApexStates,
  ApexTheme,
  NgApexchartsModule,
} from 'ng-apexcharts';

export type ChartOptions = {
  series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
  chart?: ApexChart;
  xaxis?: ApexXAxis;
  yaxis?: ApexYAxis | ApexYAxis[];
  title?: ApexTitleSubtitle;
  subtitle?: ApexTitleSubtitle;
  dataLabels?: ApexDataLabels;
  stroke?: ApexStroke;
  fill?: ApexFill;
  legend?: ApexLegend;
  tooltip?: ApexTooltip;
  markers?: ApexMarkers;
  plotOptions?: ApexPlotOptions;
  responsive?: ApexResponsive[];
  grid?: ApexGrid;
  annotations?: ApexAnnotations;
  states?: ApexStates;
  theme?: ApexTheme;
  colors?: string[];
  labels?: any;
};

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [NgApexchartsModule],
  templateUrl: './chart.component.html',
})
export class AppChart implements AfterViewInit, OnDestroy {
  @ViewChild('chart') chart!: ChartComponent;
  private LATENCY: any = (function () {
          var seed = 20260811
          function rand() {
            seed = (seed * 16807) % 2147483647
            return (seed - 1) / 2147483646
          }
          var out = []
          for (var i = 0; i < 1800; i++) {
            // Box-Muller into a log-normal: the standard shape for service latency.
            var u1 = Math.max(rand(), 1e-9)
            var u2 = rand()
            var z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
            out.push(Math.round(Math.exp(4.8 + z * 0.42) * 10) / 10)
          }
          return out
        })();

  private percentile = (values: any, p: any): any => {
          var sorted = values.slice().sort(function (a, b) {
            return a - b
          })
          var pos = (sorted.length - 1) * p
          var lo = Math.floor(pos)
          var hi = Math.ceil(pos)
          if (lo === hi) return sorted[lo]
          return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo)
        };

  private renderStats = (): any => {
          var el = document.querySelector('#stats')
          if (!el) return
          el.innerHTML =
            '<b>' +
            this.LATENCY.length +
            '</b> requests &middot; ' +
            'median <b>' +
            this.percentile(this.LATENCY, 0.5).toFixed(0) +
            ' ms</b> &middot; ' +
            'p95 <b>' +
            this.percentile(this.LATENCY, 0.95).toFixed(0) +
            ' ms</b> &middot; ' +
            'slowest <b>' +
            Math.max.apply(null, this.LATENCY).toFixed(0) +
            ' ms</b>'
        };

  private wireHistogramControls = (chart: any): any => {
          var buttons = [].slice.call(document.querySelectorAll('[data-bins]'))
          var cumulative = false
          var bins = 'auto'
  
          function apply(next) {
            buttons.forEach(function (b) {
              b.className = b.getAttribute('data-bins') === String(next) ? 'on' : ''
            })
            bins = next === 'auto' ? 'auto' : parseInt(next, 10)
            chart.updateOptions({
              plotOptions: { histogram: { bins: bins, cumulative: cumulative } },
              yaxis: {
                title: { text: cumulative ? 'Requests (cumulative)' : 'Requests' },
              },
            })
          }
  
          buttons.forEach(function (b) {
            b.addEventListener('click', function () {
              apply(b.getAttribute('data-bins'))
            })
          })
  
          var cb = document.querySelector('#cumulative')
          if (cb) {
            cb.addEventListener('change', function (e) {
              cumulative = e.target.checked
              apply(bins === 'auto' ? 'auto' : String(bins))
            })
          }
  
          this.renderStats()
        };

  public chartOptions: Partial<ChartOptions> = {
          series: [
            {
              name: 'Requests',
              data: this.LATENCY,
            },
          ],
          chart: {
            id: 'latency',
            type: 'histogram',
            // Fixed width, not responsive: 35 thin bars make every bar edge a hairline,
            // so a page-width nudge of a pixel or two (a scrollbar appearing as the
            // stats line renders) visibly moves the whole distribution.
            width: 700,
            height: 400,
            toolbar: {
              show: false,
            },
          },
          plotOptions: {
            histogram: {
              // 'auto' takes the narrower of Freedman-Diaconis and Sturges. Swap in a
              // number for a fixed bin count, or binWidth for fixed boundaries.
              bins: 'auto',
            },
          },
          colors: ['#008FFB'],
          fill: {
            type: 'gradient',
            gradient: {
              shadeIntensity: 0.25,
              opacityFrom: 0.95,
              opacityTo: 0.75,
              stops: [0, 100],
            },
          },
          legend: {
            show: false,
          },
          xaxis: {
            title: {
              text: 'Response time (ms)',
            },
            labels: {
              formatter: (val) => {
                return Math.round(val)
              },
            },
          },
          yaxis: {
            title: {
              text: 'Requests',
            },
          },
        };
  ngAfterViewInit() {
    (window as any).ApexCharts.setLicense('APEX-eyJleHBpcnlEYXRlIjoiMjEyNi0wNy0wNCIsImlzc3VlRGF0ZSI6IjIwMjYtMDctMjgiLCJwbGFuIjoicHJlbWl1bSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiLCJsb2NhbGhvc3QiXSwic2lnIjoieVBmb1VCc0Z3TU9ZdUEyaEZkR0I2Y1FtZ0JITUtXcVdJSjB2NVRESXRZbFR3eDJMUmh6R2x0RUc3VXJ4X0s3b25ZMWRZb2Z2VGItN01ydFYyNDVyOWcifQ==');
    this.wireHistogramControls(this.chart)

    function wireHistogramControls(chart) {
            var buttons = [].slice.call(document.querySelectorAll('[data-bins]'))
            var cumulative = false
            var bins = 'auto'

            function apply(next) {
              buttons.forEach(function (b) {
                b.className = b.getAttribute('data-bins') === String(next) ? 'on' : ''
              })
              bins = next === 'auto' ? 'auto' : parseInt(next, 10)
              this.chart.updateOptions({
                plotOptions: { histogram: { bins: bins, cumulative: cumulative } },
                yaxis: {
                  title: { text: cumulative ? 'Requests (cumulative)' : 'Requests' },
                },
              })
            }

            buttons.forEach(function (b) {
              b.addEventListener('click', () => {
                apply(b.getAttribute('data-bins'))
              })
            })

            var cb = document.querySelector('#cumulative')?
            if (cb) {
              cb.addEventListener('change', (e) => {
                cumulative = e.target.checked
                apply(bins === 'auto' ? 'auto' : String(bins))
              })
            }

            this.renderStats()
          }
  }

  ngOnDestroy() {
    // no cleanup needed
  }
}