(function () {
  "use strict";

  var data = window.noxpayDashboardData || {};
  var labels = data.labels || ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun"];
  var isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
  var textColor = isDark ? "#d7deeb" : "#344054";
  var mutedColor = isDark ? "#8f9bb3" : "#667085";
  var gridColor = isDark ? "rgba(143,155,179,.16)" : "rgba(102,112,133,.16)";
  var panelColor = isDark ? "#1f2230" : "#ffffff";

  function chartElement(id) {
    return document.querySelector(id);
  }

  function sharedOptions(height) {
    return {
      chart: {
        height: height || 280,
        toolbar: { show: false },
        foreColor: mutedColor,
        fontFamily: "inherit",
        animations: {
          enabled: true,
          easing: "easeinout",
          speed: 520
        }
      },
      grid: {
        borderColor: gridColor,
        strokeDashArray: 4,
        padding: { left: 4, right: 4 }
      },
      dataLabels: { enabled: false },
      tooltip: {
        theme: isDark ? "dark" : "light",
        x: { show: true }
      },
      legend: {
        labels: { colors: textColor },
        fontWeight: 700
      },
      xaxis: {
        categories: labels,
        labels: { style: { colors: mutedColor, fontWeight: 700 } },
        axisBorder: { show: false },
        axisTicks: { show: false }
      },
      yaxis: {
        labels: { style: { colors: mutedColor, fontWeight: 700 } }
      }
    };
  }

  function renderApex(selector, options) {
    var el = chartElement(selector);
    if (!el || typeof ApexCharts === "undefined") {
      return;
    }
    new ApexCharts(el, options).render();
  }

  renderApex("#apexChart1", Object.assign(sharedOptions(288), {
    chart: Object.assign(sharedOptions(288).chart, { type: "area" }),
    colors: ["#4f8cff", "#2dd4bf"],
    series: [
      { name: "Member", data: data.memberTrend || [0, 0, 0, 0, 0, 0] },
      { name: "Topup Sukses", data: data.successTopup || [0, 0, 0, 0, 0, 0] }
    ],
    stroke: { curve: "smooth", width: 3 },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: .8,
        opacityFrom: .34,
        opacityTo: .05,
        stops: [0, 90, 100]
      }
    },
    markers: { size: 0, hover: { size: 5 } }
  }));

  renderApex("#apexChart2", Object.assign(sharedOptions(288), {
    chart: Object.assign(sharedOptions(288).chart, { type: "bar" }),
    colors: ["#f79009", "#12b76a"],
    series: [
      { name: "Pending", data: data.pendingTopup || [0, 0, 0, 0, 0, 0] },
      { name: "Sukses", data: data.successTopup || [0, 0, 0, 0, 0, 0] }
    ],
    plotOptions: {
      bar: {
        borderRadius: 8,
        columnWidth: "48%",
        endingShape: "rounded"
      }
    },
    stroke: { show: true, width: 3, colors: [panelColor] }
  }));

  renderApex("#apexChart3", Object.assign(sharedOptions(288), {
    chart: Object.assign(sharedOptions(288).chart, { type: "radialBar" }),
    colors: ["#6965ff", "#1570ef"],
    series: [
      Math.min(100, Number((data.providerSplit || {}).active || 0)),
      Math.min(100, Number((data.providerSplit || {}).inactive || 0))
    ],
    labels: ["Provider Aktif", "Provider Off"],
    plotOptions: {
      radialBar: {
        hollow: { size: "38%" },
        track: { background: isDark ? "#292f40" : "#eef2f7" },
        dataLabels: {
          name: { color: mutedColor, fontWeight: 800 },
          value: { color: textColor, fontWeight: 900, fontSize: "20px" },
          total: {
            show: true,
            label: "Provider",
            color: mutedColor,
            formatter: function () {
              var split = data.providerSplit || {};
              return Number(split.active || 0) + Number(split.inactive || 0);
            }
          }
        }
      }
    },
    legend: { show: true, position: "bottom" }
  }));
})();
