const allData = {
    jual: [],
    beli: [
        { x: new Date('2025-07-15'), y: 1710000 },
    { x: new Date('2025-07-16'), y: 1700000 },
    { x: new Date('2025-07-17'), y: 1686000 },
    { x: new Date('2025-07-17'), y: 1700000 },
    { x: new Date('2025-07-18'), y: 1700000 },
    { x: new Date('2025-07-19'), y: 1700000 },
    { x: new Date('2025-07-21'), y: 1715000 },
    { x: new Date('2025-07-22'), y: 1715000 },
    { x: new Date('2025-07-23'), y: 1730000 },
    { x: new Date('2025-07-24'), y: 1745000 },
    { x: new Date('2025-07-25'), y: 1715000 },
    { x: new Date('2025-07-26'), y: 1715000 },
    { x: new Date('2025-07-28'), y: 1693000 },
    { x: new Date('2025-07-29'), y: 1705000 },
    { x: new Date('2025-07-30'), y: 1700000 },
    { x: new Date('2025-07-31'), y: 1715000 },
    { x: new Date('2025-08-01'), y: 1695000 },
    { x: new Date('2025-08-02'), y: 1715000 },
    { x: new Date('2025-08-04'), y: 1735000 },
    { x: new Date('2025-08-05'), y: 1735000 },
    { x: new Date('2025-08-06'), y: 1730000 },
    { x: new Date('2025-08-07'), y: 1735000 },
    { x: new Date('2025-08-08'), y: 1725000 },
    { x: new Date('2025-08-09'), y: 1725000 },
    { x: new Date('2025-08-11'), y: 1725000 },
    { x: new Date('2025-08-11'), y: 1725000 },
    { x: new Date('2025-08-12'), y: 1715000 },
    { x: new Date('2025-08-13'), y: 1720000 },
    { x: new Date('2025-08-14'), y: 1715000 },
    { x: new Date('2025-08-15'), y: 1720000 },
    { x: new Date('2025-08-16'), y: 1695000 },
    { x: new Date('2025-08-18'), y: 1700000 },
    { x: new Date('2025-08-19'), y: 1700000 },
    { x: new Date('2025-08-20'), y: 1700000 },
    { x: new Date('2025-08-21'), y: 1700000 },
    { x: new Date('2025-08-22'), y: 1720000 },
    { x: new Date('2025-08-23'), y: 1720000 },
    { x: new Date('2025-08-25'), y: 1730000 },
    { x: new Date('2025-08-26'), y: 1730000 },
    { x: new Date('2025-08-27'), y: 1725000 },
    { x: new Date('2025-08-28'), y: 1730000 },
    { x: new Date('2025-08-29'), y: 1750000 },
    { x: new Date('2025-08-30'), y: 1750000 },
    { x: new Date('2025-09-01'), y: 1775000 },
    { x: new Date('2025-09-02'), y: 1775000 },
    { x: new Date('2025-09-03'), y: 1785000 },
    { x: new Date('2025-09-04'), y: 1820000 },
    { x: new Date('2025-09-05'), y: 1830000 },
    { x: new Date('2025-09-06'), y: 1825000 },
    { x: new Date('2025-09-08'), y: 1835000 },
    { x: new Date('2025-09-09'), y: 1835000 },
    { x: new Date('2025-09-10'), y: 1850000 },
    { x: new Date('2025-09-11'), y: 1860000 },
    { x: new Date('2025-09-12'), y: 1860000 },
    { x: new Date('2025-09-15'), y: 1865000 },
    { x: new Date('2025-09-16'), y: 1885000 },
    { x: new Date('2025-09-17'), y: 1890000 },
    { x: new Date('2025-09-18'), y: 1875000 },
    { x: new Date('2025-09-19'), y: 1875000 },
    { x: new Date('2025-09-22'), y: 1905000 },
    { x: new Date('2025-09-23'), y: 1935000 },
    { x: new Date('2025-09-24'), y: 1935000 },
    { x: new Date('2025-09-26'), y: 1960000 },
    { x: new Date('2025-09-27'), y: 1965000 },
    { x: new Date('2025-09-29'), y: 1965000 },
    { x: new Date('2025-09-30'), y: 1975000 },
    { x: new Date('2025-10-01'), y: 1995000 },
    { x: new Date('2025-10-02'), y: 2000000 },
    { x: new Date('2025-10-03'), y: 2000000 },
    { x: new Date('2025-10-04'), y: 2015000 },
    { x: new Date('2025-10-06'), y: 2025000 },
    { x: new Date('2025-10-07'), y: 2035000 },
    { x: new Date('2025-10-08'), y: 2075000 },
    { x: new Date('2025-10-09'), y: 2085000 },
    { x: new Date('2025-10-10'), y: 2110000 },
    { x: new Date('2025-10-11'), y: 2110000 },
    { x: new Date('2025-10-13'), y: 2125000 },
    { x: new Date('2025-10-14'), y: 2125000 },
    { x: new Date('2025-10-15'), y: 2190000 },
    { x: new Date('2025-10-16'), y: 2225000 },
    { x: new Date('2025-10-17'), y: 2295000 },
    { x: new Date('2025-10-18'), y: 2240000 },
    { x: new Date('2025-10-21'), y: 2225000 },
    { x: new Date('2025-10-22'), y: 2135000 },
    { x: new Date('2025-10-23'), y: 2130000 },
    { x: new Date('2025-10-24'), y: 2140000 },
    { x: new Date('2025-10-25'), y: 2185000 },
    { x: new Date('2025-10-27'), y: 2170000 },
    { x: new Date('2025-10-28'), y: 2145000 },
    { x: new Date('2025-10-29'), y: 2100000 },
    { x: new Date('2025-10-30'), y: 2080000 },
    { x: new Date('2025-10-31'), y: 2075000 },
    { x: new Date('2025-11-03'), y: 2110000 },
    { x: new Date('2025-11-04'), y: 2095000 },
    { x: new Date('2025-11-05'), y: 2115000 },
    { x: new Date('2025-11-06'), y: 2110000 },
    { x: new Date('2025-11-07'), y: 2110000 },
    { x: new Date('2025-11-08'), y: 2110000 },
    { x: new Date('2025-11-10'), y: 2125000 },
    { x: new Date('2025-11-11'), y: 2185000 },
    { x: new Date('2025-11-12'), y: 2185000 },
    { x: new Date('2025-11-13'), y: 2200000 },
    { x: new Date('2025-11-14'), y: 2220000 },
    { x: new Date('2025-11-15'), y: 2160000 },
    { x: new Date('2025-11-17'), y: 2170000 },
    { x: new Date('2025-11-18'), y: 2170000 },
    { x: new Date('2025-11-19'), y: 2165000 },
    { x: new Date('2025-11-20'), y: 2165000 },
    { x: new Date('2025-11-21'), y: 2170000 },
    { x: new Date('2025-11-22'), y: 2170000 },
    { x: new Date('2025-11-24'), y: 2160000 },
    { x: new Date('2025-11-25'), y: 2160000 },
    { x: new Date('2025-11-26'), y: 2200000 },
    { x: new Date('2025-11-27'), y: 2260000 },
    { x: new Date('2025-11-28'), y: 2260000 },
    { x: new Date('2025-11-29'), y: 2280000 },
    { x: new Date('2025-12-01'), y: 2280000 },
    { x: new Date('2025-12-04'), y: 2285000 },
    { x: new Date('2025-12-05'), y: 2250000 },
    { x: new Date('2025-12-06'), y: 2240000 },
    { x: new Date('2025-12-08'), y: 2240000 },
    { x: new Date('2025-12-09'), y: 2235000 },
    { x: new Date('2025-12-10'), y: 2240000 },
    { x: new Date('2025-12-11'), y: 2240000 },
    { x: new Date('2025-12-12'), y: 2255000 },
    { x: new Date('2025-12-13'), y: 2265000 },
    { x: new Date('2025-12-15'), y: 2265000 },
    { x: new Date('2025-12-16'), y: 2265000 },
    { x: new Date('2025-12-17'), y: 2275000 },
    { x: new Date('2025-12-18'), y: 2290000 },
    { x: new Date('2025-12-19'), y: 2323000 },
    { x: new Date('2025-12-20'), y: 2330000 },
    { x: new Date('2025-12-22'), y: 2330000 },
    { x: new Date('2025-12-23'), y: 2350000 },
    { x: new Date('2025-12-24'), y: 2405000 },
    { x: new Date('2025-12-25'), y: 2393000 },
    { x: new Date('2025-12-26'), y: 2397000 },
    { x: new Date('2025-12-29'), y: 2417000 },
    { x: new Date('2025-12-30'), y: 2412000 },
    { x: new Date('2025-12-31'), y: 2380000 },
    { x: new Date('2026-01-02'), y: 2365000 },
    { x: new Date('2026-01-03'), y: 2334000 },
    { x: new Date('2026-01-05'), y: 2363000 },
    { x: new Date('2026-01-06'), y: 2386000 },
    { x: new Date('2026-01-07'), y: 2408000 },
    { x: new Date('2026-01-08'), y: 2397000 },
    { x: new Date('2026-01-09'), y: 2403000 },
    { x: new Date('2026-01-10'), y: 2430000 },
    { x: new Date('2026-01-12'), y: 2436000 },
    { x: new Date('2026-01-13'), y: 2451000 },
    { x: new Date('2026-01-14'), y: 2466000 },
    { x: new Date('2026-01-15'), y: 2461000 },
    { x: new Date('2026-01-16'), y: 2472000 },
    { x: new Date('2026-01-18'), y: 2484000 },
    { x: new Date('2026-01-19'), y: 2502000 },
    { x: new Date('2026-01-20'), y: 2514000 },
    { x: new Date('2026-01-21'), y: 2598000 },
    { x: new Date('2026-01-22'), y: 2572000 },
    { x: new Date('2026-01-23'), y: 2656000 },
    { x: new Date('2026-01-24'), y: 2674000 },
    { x: new Date('2026-01-26'), y: 2720000 },
    { x: new Date('2026-01-27'), y: 2683000 },
    { x: new Date('2026-01-28'), y: 2769000 },
    { x: new Date('2026-01-29'), y: 2922000 },
    { x: new Date('2026-01-30'), y: 2828000 },
    { x: new Date('2026-01-31'), y: 2579000 },
    { x: new Date('2026-02-02'), y: 2459000 },
    { x: new Date('2026-02-03'), y: 2559000 },
    { x: new Date('2026-02-04'), y: 2649000 },
    { x: new Date('2026-02-05'), y: 2613000 },
    { x: new Date('2026-02-06'), y: 2551000 },
    { x: new Date('2026-02-09'), y: 2676000 },
    { x: new Date('2026-02-10'), y: 2679000 },
    { x: new Date('2026-02-11'), y: 2683000 },
    { x: new Date('2026-02-13'), y: 2663000 },
    { x: new Date('2026-02-14'), y: 2673000 },
    { x: new Date('2026-02-16'), y: 2664000 },
    { x: new Date('2026-02-17'), y: 2643000 },
    { x: new Date('2026-02-18'), y: 2604000 },
    { x: new Date('2026-02-19'), y: 2683000 }    ]
};

const bulanSingkat = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];

const chartOptions = {
  chart: {
    type: 'area',
    height: '300',
    zoom: { enabled: false },
    toolbar: { show: false },
    offsetX: 0
  },
  colors: ['#008FFB', '#DFBD69'],
  dataLabels: { enabled: false },
  stroke: { curve: 'smooth', width: 2 },
  series: [],
  xaxis: {
    type: 'datetime',
    labels: {
      datetimeUTC: false,
      formatter: function (value) {
        const date = new Date(value);
        return `${date.getDate()} ${bulanSingkat[date.getMonth()]}`;
      }
    },
    min: undefined,
    max: undefined
  },
  yaxis: {
    tickAmount: 8,
    labels: {
      style: { fontSize: '12px' },
      offsetX: -15,
      formatter: function (value) {
        return new Intl.NumberFormat('id-ID', { maximumFractionDigits: 0 }).format(value);
      }
    }
  },
      title: {
        text: 'Emas Murni (99,99%)',
        align: 'left',
        floating: true,
        offsetX: -10,
        offsetY: 7,
        style: {
            fontSize: '13px',
            fontWeight: 600,
            color: '#888'
        }
    },
  grid: { padding: { left: -10, right: 0 } },
  tooltip: {
    x: {
      formatter: function (value) {
        const date = new Date(value);
        // Tooltip tetap pakai lengkap: 16 Juli 2025
        const bulanIndo = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
        return `${date.getDate()} ${bulanIndo[date.getMonth()]} ${date.getFullYear()}`;
      }
    },
    y: {
      formatter: value => new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        maximumFractionDigits: 0
      }).format(value)
    }
  },
  fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 90, 100] } },
  legend: { position: 'top', horizontalAlign: 'right' }
};

const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);

window.addEventListener('load', () => chart.render().then(() => filterData('1')));

function padIfTooFew(data, cutoff, now) {
  if (data.length === 1) {
    return [
      { x: cutoff.getTime(), y: null },
      ...data,
      { x: now.getTime(), y: null }
    ];
  }
  return data;
}

function filterData(months) {
  const now = new Date();
  let cutoff = months === 'all' ? new Date('2000-01-01') : new Date(new Date().setMonth(new Date().getMonth() - parseInt(months)));

  let filteredJual = allData.jual.filter(d => d.x >= cutoff.getTime());
  let filteredBeli = allData.beli.filter(d => d.x >= cutoff.getTime());

  filteredJual = padIfTooFew(filteredJual, cutoff, now);
  filteredBeli = padIfTooFew(filteredBeli, cutoff, now);

  chart.updateSeries([
    { name: 'Harga Jual', data: filteredJual },
    { name: 'Harga Beli', data: filteredBeli }
  ]);

  chart.updateOptions({
    xaxis: {
      labels: {
        formatter: function (value) {
          const date = new Date(value);
          return `${date.getDate()} ${bulanSingkat[date.getMonth()]}`;
        }
      }
    },
  });
}

document.querySelectorAll(".filter-btn").forEach(btn => {
  btn.addEventListener("click", function () {
    document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
    this.classList.add("active");
    const months = this.getAttribute("data-months");
    if (months) filterData(months);
  });
});

// Initial load (1 Bulan)
filterData('1');