(function () {
  "use strict";

  var canvas = document.getElementById("chartjsArea");
  if (!canvas || typeof Chart === "undefined") {
    return;
  }

  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 ctx = canvas.getContext("2d");
  var primaryGradient = ctx.createLinearGradient(0, 0, 0, 320);
  var successGradient = ctx.createLinearGradient(0, 0, 0, 320);

  primaryGradient.addColorStop(0, "rgba(79, 140, 255, .34)");
  primaryGradient.addColorStop(1, "rgba(79, 140, 255, .02)");
  successGradient.addColorStop(0, "rgba(45, 212, 191, .28)");
  successGradient.addColorStop(1, "rgba(45, 212, 191, .02)");

  new Chart(ctx, {
    type: "line",
    data: {
      labels: labels,
      datasets: [
        {
          label: "Member",
          data: data.memberTrend || [0, 0, 0, 0, 0, 0],
          borderColor: "#4f8cff",
          backgroundColor: primaryGradient,
          pointBackgroundColor: "#4f8cff",
          pointBorderColor: "#ffffff",
          pointBorderWidth: 2,
          pointRadius: 4,
          pointHoverRadius: 6,
          borderWidth: 3,
          tension: .42,
          fill: true
        },
        {
          label: "Topup Sukses",
          data: data.successTopup || [0, 0, 0, 0, 0, 0],
          borderColor: "#2dd4bf",
          backgroundColor: successGradient,
          pointBackgroundColor: "#2dd4bf",
          pointBorderColor: "#ffffff",
          pointBorderWidth: 2,
          pointRadius: 4,
          pointHoverRadius: 6,
          borderWidth: 3,
          tension: .42,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: "index",
        intersect: false
      },
      plugins: {
        legend: {
          labels: {
            color: textColor,
            boxWidth: 12,
            boxHeight: 12,
            usePointStyle: true,
            font: { weight: "700" }
          }
        },
        tooltip: {
          backgroundColor: isDark ? "#282d3d" : "#101828",
          padding: 12,
          titleFont: { weight: "800" },
          bodyFont: { weight: "700" }
        }
      },
      scales: {
        x: {
          grid: { display: false },
          ticks: {
            color: mutedColor,
            font: { weight: "700" }
          }
        },
        y: {
          beginAtZero: true,
          grid: { color: gridColor },
          ticks: {
            color: mutedColor,
            precision: 0,
            font: { weight: "700" }
          }
        }
      }
    }
  });
})();
