const allData = {
    jual: [
        { x: new Date('2025-07-14'), y: 1928810 },
    { x: new Date('2025-07-15'), y: 1918785 },
    { x: new Date('2025-07-16'), y: 1918785 },
    { x: new Date('2025-07-17'), y: 1923798 },
    { x: new Date('2025-07-18'), y: 1921793 },
    { x: new Date('2025-07-19'), y: 1931818 },
    { x: new Date('2025-07-20'), y: 1931818 },
    { x: new Date('2025-07-21'), y: 1931818 },
    { x: new Date('2025-07-22'), y: 1950865 },
    { x: new Date('2025-07-23'), y: 1974925 },
    { x: new Date('2025-07-24'), y: 1949863 },
    { x: new Date('2025-07-25'), y: 1938835 },
    { x: new Date('2025-07-28'), y: 1918785 },
    { x: new Date('2025-07-29'), y: 1910765 },
    { x: new Date('2025-07-30'), y: 1922795 },
    { x: new Date('2025-07-31'), y: 1905753 },
    { x: new Date('2025-08-01'), y: 1905753 },
    { x: new Date('2025-08-02'), y: 1952870 },
    { x: new Date('2025-08-04'), y: 1950865 },
    { x: new Date('2025-08-05'), y: 1963898 },
    { x: new Date('2025-08-06'), y: 1954875 },
    { x: new Date('2025-08-07'), y: 1947858 },
    { x: new Date('2025-08-08'), y: 1963898 },
    { x: new Date('2025-08-09'), y: 1955878 },
    { x: new Date('2025-08-11'), y: 1949863 },
    { x: new Date('2025-08-12'), y: 1928810 },
    { x: new Date('2025-08-14'), y: 1921793 },
    { x: new Date('2025-08-15'), y: 1913773 },
    { x: new Date('2025-08-16'), y: 1900740 },
    { x: new Date('2025-08-18'), y: 1898735 }    ],
    beli: [
        { x: new Date('2025-07-14'), y: 1768000 },
    { x: new Date('2025-07-15'), y: 1758000 },
    { x: new Date('2025-07-16'), y: 1752000 },
    { x: new Date('2025-07-17'), y: 1763000 },
    { x: new Date('2025-07-18'), y: 1763000 },
    { x: new Date('2025-07-19'), y: 1773000 },
    { x: new Date('2025-07-20'), y: 1773000 },
    { x: new Date('2025-07-21'), y: 1773000 },
    { x: new Date('2025-07-22'), y: 1792000 },
    { x: new Date('2025-07-23'), y: 1816000 },
    { x: new Date('2025-07-24'), y: 1791000 },
    { x: new Date('2025-07-25'), y: 1780000 },
    { x: new Date('2025-07-28'), y: 1760000 },
    { x: new Date('2025-07-29'), y: 1752000 },
    { x: new Date('2025-07-30'), y: 1764000 },
    { x: new Date('2025-07-31'), y: 1746000 },
    { x: new Date('2025-08-01'), y: 1746000 },
    { x: new Date('2025-08-02'), y: 1793000 },
    { x: new Date('2025-08-04'), y: 1792000 },
    { x: new Date('2025-08-05'), y: 1805000 },
    { x: new Date('2025-08-06'), y: 1796000 },
    { x: new Date('2025-08-07'), y: 1789000 },
    { x: new Date('2025-08-08'), y: 1805000 },
    { x: new Date('2025-08-09'), y: 1797000 },
    { x: new Date('2025-08-11'), y: 1791000 },
    { x: new Date('2025-08-12'), y: 1770000 },
    { x: new Date('2025-08-14'), y: 1779000 },
    { x: new Date('2025-08-15'), y: 1755000 },
    { x: new Date('2025-08-16'), y: 1742000 },
    { x: new Date('2025-08-18'), y: 1740000 }    ]
};

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