const allData = {
    jual: [
        { x: new Date('2025-06-24'), y: 1913000 },
    { x: new Date('2025-07-25'), y: 1925000 },
    { x: new Date('2025-07-29'), y: 1894000 },
    { x: new Date('2025-08-07'), y: 1934000 },
    { x: new Date('2025-08-08'), y: 1927000 },
    { x: new Date('2025-08-09'), y: 1935000 },
    { x: new Date('2025-08-11'), y: 1935000 },
    { x: new Date('2025-08-12'), y: 1924000 },
    { x: new Date('2025-08-13'), y: 1908000 },
    { x: new Date('2025-08-14'), y: 1906000 },
    { x: new Date('2025-08-15'), y: 1904000 },
    { x: new Date('2025-08-16'), y: 1888000 },
    { x: new Date('2025-08-18'), y: 1881000 },
    { x: new Date('2025-08-19'), y: 1881000 },
    { x: new Date('2025-08-20'), y: 1883000 },
    { x: new Date('2025-08-20'), y: 1876000 },
    { x: new Date('2025-08-21'), y: 1902000 },
    { x: new Date('2025-08-22'), y: 1904000 },
    { x: new Date('2025-08-24'), y: 1918000 },
    { x: new Date('2025-08-25'), y: 1914000 },
    { x: new Date('2025-08-26'), y: 1917000 },
    { x: new Date('2025-08-27'), y: 1925000 },
    { x: new Date('2025-08-28'), y: 1931000 },
    { x: new Date('2025-08-29'), y: 1948000 },
    { x: new Date('2025-08-31'), y: 1967000 },
    { x: new Date('2025-09-01'), y: 1994000 },
    { x: new Date('2025-09-02'), y: 1994000 },
    { x: new Date('2025-09-03'), y: 2023000 },
    { x: new Date('2025-09-04'), y: 2032000 },
    { x: new Date('2025-09-05'), y: 2032000 },
    { x: new Date('2025-09-07'), y: 2050000 },
    { x: new Date('2025-09-08'), y: 2052000 },
    { x: new Date('2025-09-09'), y: 2076000 },
    { x: new Date('2025-09-10'), y: 2064000 },
    { x: new Date('2025-09-11'), y: 2085000 },
    { x: new Date('2025-09-14'), y: 2084000 },
    { x: new Date('2025-09-15'), y: 2094000 },
    { x: new Date('2025-09-16'), y: 2105000 },
    { x: new Date('2025-09-17'), y: 2087000 },
    { x: new Date('2025-09-18'), y: 2087000 },
    { x: new Date('2025-09-21'), y: 2112000 },
    { x: new Date('2025-09-22'), y: 2155000 },
    { x: new Date('2025-09-24'), y: 2155000 },
    { x: new Date('2025-09-26'), y: 2161000 },
    { x: new Date('2025-09-27'), y: 2180000 },
    { x: new Date('2025-09-30'), y: 2209000 },
    { x: new Date('2025-10-01'), y: 2225000 },
    { x: new Date('2025-10-02'), y: 2229000 },
    { x: new Date('2025-10-03'), y: 2229000 },
    { x: new Date('2025-10-04'), y: 2227000 },
    { x: new Date('2025-10-06'), y: 2249000 },
    { x: new Date('2025-10-07'), y: 2258000 },
    { x: new Date('2025-10-08'), y: 2284000 },
    { x: new Date('2025-10-09'), y: 2304000 },
    { x: new Date('2025-10-10'), y: 2306000 },
    { x: new Date('2025-10-11'), y: 2301000 },
    { x: new Date('2025-10-13'), y: 2309000 },
    { x: new Date('2025-10-14'), y: 2335000 },
    { x: new Date('2025-10-15'), y: 2389000 },
    { x: new Date('2025-10-16'), y: 2418000 },
    { x: new Date('2025-10-17'), y: 2496000 },
    { x: new Date('2025-10-21'), y: 2504000 },
    { x: new Date('2025-10-22'), y: 2429000 },
    { x: new Date('2025-10-23'), y: 2413000 },
    { x: new Date('2025-10-24'), y: 2445000 },
    { x: new Date('2025-10-25'), y: 2445000 },
    { x: new Date('2025-10-27'), y: 2443000 },
    { x: new Date('2025-10-28'), y: 2428000 },
    { x: new Date('2025-10-29'), y: 2403000 },
    { x: new Date('2025-10-30'), y: 2393000 },
    { x: new Date('2025-10-31'), y: 2391000 },
    { x: new Date('2025-11-03'), y: 2396000 },
    { x: new Date('2025-11-04'), y: 2374000 },
    { x: new Date('2025-11-05'), y: 2374000 },
    { x: new Date('2025-11-06'), y: 2358000 },
    { x: new Date('2025-11-07'), y: 2374000 },
    { x: new Date('2025-11-08'), y: 2378000 },
    { x: new Date('2025-11-10'), y: 2390000 },
    { x: new Date('2025-11-11'), y: 2400000 },
    { x: new Date('2025-11-12'), y: 2422000 },
    { x: new Date('2025-11-13'), y: 2428000 },
    { x: new Date('2025-11-14'), y: 2459000 },
    { x: new Date('2025-11-15'), y: 2456000 },
    { x: new Date('2025-11-17'), y: 2413000 },
    { x: new Date('2025-11-18'), y: 2418000 },
    { x: new Date('2025-11-19'), y: 2394000 },
    { x: new Date('2025-11-20'), y: 2394000 },
    { x: new Date('2025-11-21'), y: 2396000 },
    { x: new Date('2025-11-22'), y: 2396000 },
    { x: new Date('2025-11-24'), y: 2384000 },
    { x: new Date('2025-11-25'), y: 2416000 },
    { x: new Date('2025-11-26'), y: 2416000 },
    { x: new Date('2025-11-27'), y: 2426000 },
    { x: new Date('2025-11-28'), y: 2426000 },
    { x: new Date('2025-12-01'), y: 2458000 },
    { x: new Date('2025-12-04'), y: 2452000 },
    { x: new Date('2025-12-05'), y: 2444000 },
    { x: new Date('2025-12-06'), y: 2444000 },
    { x: new Date('2025-12-08'), y: 2437000 },
    { x: new Date('2025-12-09'), y: 2442000 },
    { x: new Date('2025-12-10'), y: 2446000 },
    { x: new Date('2025-12-11'), y: 2459000 },
    { x: new Date('2025-12-12'), y: 2459000 },
    { x: new Date('2025-12-13'), y: 2491000 },
    { x: new Date('2025-12-15'), y: 2491000 },
    { x: new Date('2025-12-16'), y: 2501000 },
    { x: new Date('2025-12-17'), y: 2504000 },
    { x: new Date('2025-12-18'), y: 2515000 },
    { x: new Date('2025-12-19'), y: 2515000 },
    { x: new Date('2025-12-20'), y: 2519000 },
    { x: new Date('2025-12-22'), y: 2526000 },
    { x: new Date('2025-12-23'), y: 2536000 },
    { x: new Date('2025-12-24'), y: 2594000 },
    { x: new Date('2025-12-25'), y: 2597000 },
    { x: new Date('2025-12-26'), y: 2612000 },
    { x: new Date('2025-12-29'), y: 2627000 },
    { x: new Date('2025-12-30'), y: 2618000 },
    { x: new Date('2025-12-31'), y: 2537000 },
    { x: new Date('2026-01-02'), y: 2537000 },
    { x: new Date('2026-01-03'), y: 2537000 },
    { x: new Date('2026-01-04'), y: 2522000 },
    { x: new Date('2026-01-05'), y: 2546000 },
    { x: new Date('2026-01-06'), y: 2556000 },
    { x: new Date('2026-01-07'), y: 2582000 },
    { x: new Date('2026-01-08'), y: 2588000 },
    { x: new Date('2026-01-09'), y: 2596000 },
    { x: new Date('2026-01-10'), y: 2622000 },
    { x: new Date('2026-01-12'), y: 2622000 },
    { x: new Date('2026-01-13'), y: 2661000 },
    { x: new Date('2026-01-14'), y: 2692000 },
    { x: new Date('2026-01-15'), y: 2692000 },
    { x: new Date('2026-01-16'), y: 2692000 },
    { x: new Date('2026-01-17'), y: 2688000 },
    { x: new Date('2026-01-19'), y: 2725000 },
    { x: new Date('2026-01-20'), y: 2731000 },
    { x: new Date('2026-01-21'), y: 2766000 },
    { x: new Date('2026-01-22'), y: 2854000 },
    { x: new Date('2026-01-23'), y: 2833000 },
    { x: new Date('2026-01-24'), y: 2925000 },
    { x: new Date('2026-01-26'), y: 2925000 },
    { x: new Date('2026-01-28'), y: 2965000 },
    { x: new Date('2026-01-29'), y: 3260000 },
    { x: new Date('2026-01-30'), y: 3204000 },
    { x: new Date('2026-01-31'), y: 2981000 },
    { x: new Date('2026-02-02'), y: 2955000 },
    { x: new Date('2026-02-03'), y: 2910000 },
    { x: new Date('2026-02-04'), y: 2984000 },
    { x: new Date('2026-02-05'), y: 2974000 },
    { x: new Date('2026-02-06'), y: 2920000 },
    { x: new Date('2026-02-07'), y: 2946000 },
    { x: new Date('2026-02-09'), y: 2979000 },
    { x: new Date('2026-02-10'), y: 2987000 },
    { x: new Date('2026-02-12'), y: 2992000 },
    { x: new Date('2026-02-13'), y: 2938000 },
    { x: new Date('2026-02-14'), y: 2981000 },
    { x: new Date('2026-02-16'), y: 2971000 },
    { x: new Date('2026-02-17'), y: 2943000 },
    { x: new Date('2026-02-19'), y: 2946000 },
    { x: new Date('2026-02-21'), y: 2984000 }    ],
    beli: [
        { x: new Date('2025-06-24'), y: 1780000 },
    { x: new Date('2025-07-25'), y: 1791000 },
    { x: new Date('2025-07-29'), y: 1761000 },
    { x: new Date('2025-08-07'), y: 1799000 },
    { x: new Date('2025-08-08'), y: 1793000 },
    { x: new Date('2025-08-09'), y: 1800000 },
    { x: new Date('2025-08-11'), y: 1800000 },
    { x: new Date('2025-08-12'), y: 1790000 },
    { x: new Date('2025-08-13'), y: 1774000 },
    { x: new Date('2025-08-14'), y: 1772000 },
    { x: new Date('2025-08-15'), y: 1770000 },
    { x: new Date('2025-08-16'), y: 1755000 },
    { x: new Date('2025-08-18'), y: 1749000 },
    { x: new Date('2025-08-19'), y: 1749000 },
    { x: new Date('2025-08-20'), y: 1751000 },
    { x: new Date('2025-08-20'), y: 1745000 },
    { x: new Date('2025-08-21'), y: 1768000 },
    { x: new Date('2025-08-22'), y: 1770000 },
    { x: new Date('2025-08-24'), y: 1785000 },
    { x: new Date('2025-08-25'), y: 1781000 },
    { x: new Date('2025-08-26'), y: 1784000 },
    { x: new Date('2025-08-27'), y: 1791000 },
    { x: new Date('2025-08-28'), y: 1796000 },
    { x: new Date('2025-08-29'), y: 1812000 },
    { x: new Date('2025-08-31'), y: 1830000 },
    { x: new Date('2025-09-01'), y: 1855000 },
    { x: new Date('2025-09-02'), y: 1855000 },
    { x: new Date('2025-09-03'), y: 1882000 },
    { x: new Date('2025-09-04'), y: 1891000 },
    { x: new Date('2025-09-05'), y: 1891000 },
    { x: new Date('2025-09-07'), y: 1908000 },
    { x: new Date('2025-09-08'), y: 1908000 },
    { x: new Date('2025-09-09'), y: 1931000 },
    { x: new Date('2025-09-10'), y: 1920000 },
    { x: new Date('2025-09-11'), y: 1940000 },
    { x: new Date('2025-09-14'), y: 1939000 },
    { x: new Date('2025-09-15'), y: 1947000 },
    { x: new Date('2025-09-16'), y: 1958000 },
    { x: new Date('2025-09-17'), y: 1942000 },
    { x: new Date('2025-09-18'), y: 1942000 },
    { x: new Date('2025-09-21'), y: 1965000 },
    { x: new Date('2025-09-22'), y: 2005000 },
    { x: new Date('2025-09-24'), y: 2005000 },
    { x: new Date('2025-09-26'), y: 2011000 },
    { x: new Date('2025-09-27'), y: 2028000 },
    { x: new Date('2025-09-30'), y: 2055000 },
    { x: new Date('2025-10-01'), y: 2071000 },
    { x: new Date('2025-10-02'), y: 2077000 },
    { x: new Date('2025-10-03'), y: 2077000 },
    { x: new Date('2025-10-04'), y: 2075000 },
    { x: new Date('2025-10-06'), y: 2097000 },
    { x: new Date('2025-10-07'), y: 2097000 },
    { x: new Date('2025-10-08'), y: 2129000 },
    { x: new Date('2025-10-09'), y: 2145000 },
    { x: new Date('2025-10-10'), y: 2152000 },
    { x: new Date('2025-10-11'), y: 2148000 },
    { x: new Date('2025-10-13'), y: 2155000 },
    { x: new Date('2025-10-14'), y: 2181000 },
    { x: new Date('2025-10-15'), y: 2232000 },
    { x: new Date('2025-10-16'), y: 2260000 },
    { x: new Date('2025-10-17'), y: 2333000 },
    { x: new Date('2025-10-21'), y: 2336000 },
    { x: new Date('2025-10-22'), y: 2270000 },
    { x: new Date('2025-10-23'), y: 2256000 },
    { x: new Date('2025-10-24'), y: 2285000 },
    { x: new Date('2025-10-25'), y: 2285000 },
    { x: new Date('2025-10-27'), y: 2283000 },
    { x: new Date('2025-10-28'), y: 2269000 },
    { x: new Date('2025-10-29'), y: 2245000 },
    { x: new Date('2025-10-30'), y: 2234000 },
    { x: new Date('2025-10-31'), y: 2232000 },
    { x: new Date('2025-11-03'), y: 2237000 },
    { x: new Date('2025-11-04'), y: 2217000 },
    { x: new Date('2025-11-05'), y: 2217000 },
    { x: new Date('2025-11-06'), y: 2202000 },
    { x: new Date('2025-11-07'), y: 2217000 },
    { x: new Date('2025-11-08'), y: 2221000 },
    { x: new Date('2025-11-10'), y: 2231000 },
    { x: new Date('2025-11-11'), y: 2241000 },
    { x: new Date('2025-11-12'), y: 2262000 },
    { x: new Date('2025-11-13'), y: 2267000 },
    { x: new Date('2025-11-14'), y: 2297000 },
    { x: new Date('2025-11-15'), y: 2294000 },
    { x: new Date('2025-11-17'), y: 2254000 },
    { x: new Date('2025-11-18'), y: 2257000 },
    { x: new Date('2025-11-19'), y: 2235000 },
    { x: new Date('2025-11-20'), y: 2235000 },
    { x: new Date('2025-11-21'), y: 2237000 },
    { x: new Date('2025-11-22'), y: 2237000 },
    { x: new Date('2025-11-24'), y: 2226000 },
    { x: new Date('2025-11-25'), y: 2257000 },
    { x: new Date('2025-11-26'), y: 2257000 },
    { x: new Date('2025-11-27'), y: 2265000 },
    { x: new Date('2025-11-28'), y: 2265000 },
    { x: new Date('2025-12-01'), y: 2296000 },
    { x: new Date('2025-12-04'), y: 2290000 },
    { x: new Date('2025-12-05'), y: 2282000 },
    { x: new Date('2025-12-06'), y: 2282000 },
    { x: new Date('2025-12-08'), y: 2276000 },
    { x: new Date('2025-12-09'), y: 2280000 },
    { x: new Date('2025-12-10'), y: 2284000 },
    { x: new Date('2025-12-11'), y: 2297000 },
    { x: new Date('2025-12-12'), y: 2297000 },
    { x: new Date('2025-12-13'), y: 2327000 },
    { x: new Date('2025-12-15'), y: 2327000 },
    { x: new Date('2025-12-16'), y: 2334000 },
    { x: new Date('2025-12-17'), y: 2334000 },
    { x: new Date('2025-12-18'), y: 2349000 },
    { x: new Date('2025-12-19'), y: 2349000 },
    { x: new Date('2025-12-20'), y: 2353000 },
    { x: new Date('2025-12-22'), y: 2368000 },
    { x: new Date('2025-12-23'), y: 2378000 },
    { x: new Date('2025-12-24'), y: 2432000 },
    { x: new Date('2025-12-25'), y: 2435000 },
    { x: new Date('2025-12-26'), y: 2447000 },
    { x: new Date('2025-12-29'), y: 2463000 },
    { x: new Date('2025-12-30'), y: 2455000 },
    { x: new Date('2025-12-31'), y: 2373000 },
    { x: new Date('2026-01-02'), y: 2379000 },
    { x: new Date('2026-01-03'), y: 2379000 },
    { x: new Date('2026-01-04'), y: 2365000 },
    { x: new Date('2026-01-05'), y: 2386000 },
    { x: new Date('2026-01-06'), y: 2396000 },
    { x: new Date('2026-01-07'), y: 2421000 },
    { x: new Date('2026-01-08'), y: 2426000 },
    { x: new Date('2026-01-09'), y: 2434000 },
    { x: new Date('2026-01-10'), y: 2459000 },
    { x: new Date('2026-01-12'), y: 2459000 },
    { x: new Date('2026-01-13'), y: 2495000 },
    { x: new Date('2026-01-14'), y: 2524000 },
    { x: new Date('2026-01-15'), y: 2524000 },
    { x: new Date('2026-01-16'), y: 2524000 },
    { x: new Date('2026-01-17'), y: 2521000 },
    { x: new Date('2026-01-19'), y: 2556000 },
    { x: new Date('2026-01-20'), y: 2561000 },
    { x: new Date('2026-01-21'), y: 2593000 },
    { x: new Date('2026-01-22'), y: 2677000 },
    { x: new Date('2026-01-23'), y: 2657000 },
    { x: new Date('2026-01-24'), y: 2743000 },
    { x: new Date('2026-01-26'), y: 2743000 },
    { x: new Date('2026-01-28'), y: 2781000 },
    { x: new Date('2026-01-29'), y: 3058000 },
    { x: new Date('2026-01-30'), y: 3005000 },
    { x: new Date('2026-01-31'), y: 2771000 },
    { x: new Date('2026-02-02'), y: 2750000 },
    { x: new Date('2026-02-03'), y: 2725000 },
    { x: new Date('2026-02-04'), y: 2794000 },
    { x: new Date('2026-02-05'), y: 2789000 },
    { x: new Date('2026-02-06'), y: 2738000 },
    { x: new Date('2026-02-07'), y: 2764000 },
    { x: new Date('2026-02-09'), y: 2790000 },
    { x: new Date('2026-02-10'), y: 2801000 },
    { x: new Date('2026-02-12'), y: 2807000 },
    { x: new Date('2026-02-13'), y: 2756000 },
    { x: new Date('2026-02-14'), y: 2796000 },
    { x: new Date('2026-02-16'), y: 2786000 },
    { x: new Date('2026-02-17'), y: 2761000 },
    { x: new Date('2026-02-19'), y: 2764000 },
    { x: new Date('2026-02-21'), y: 2799000 }    ]
};

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);
        const bulan = date.toLocaleString('id-ID', { month: 'long' });
        return `${date.getDate()} ${bulan}`;
      }
    },
    min: undefined,
    max: undefined
  },
  yaxis: {
    tickAmount: 8,
    labels: {
      style: { fontSize: '12px' },
      offsetX: -15,
      formatter: function (value) {
        const text = value.toLocaleString('id-ID');
        return text.length > 5 ? text.slice(0, 6) + '' : text;
      }
    }
  },
  grid: {
    padding: {
      left: -10,
      right: 0
    }
  },
  tooltip: {
    x: {
      formatter: function (value) {
        const date = new Date(value);
        const bulan = date.toLocaleString('id-ID', { month: 'long' });
        return `${date.getDate()} ${bulan} ${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;

  if (months === 'all') {
    cutoff = new Date('2000-01-01');
  } else {
    cutoff = new Date();
    cutoff.setMonth(cutoff.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: {
      type: 'datetime',
      labels: {
        datetimeUTC: false,
        formatter: function (value) {
          const date = new Date(value);
          const bulan = date.toLocaleString('id-ID', { month: 'long' });
          return `${date.getDate()} ${bulan}`;
        }
      },
      min: undefined,
      max: undefined
    }
  });
}

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');