class ConfluenceChart {
  constructor() {
    this.chart = null;
    this.candles = null;
    this.resizeObserver = null;
  }

  create(el) {
    this.chart = LightweightCharts.createChart(el, {
      autoSize: true,
      layout: {
        background: { color: getComputedStyle(document.documentElement).getPropertyValue('--chart-bg').trim() },
        textColor: getComputedStyle(document.documentElement).getPropertyValue('--muted').trim(),
      },
      grid: {
        vertLines: { color: 'rgba(128,128,128,.10)' },
        horzLines: { color: 'rgba(128,128,128,.10)' },
      },
      timeScale: { timeVisible: true, secondsVisible: false },
      rightPriceScale: { borderVisible: false },
    });
    this.candles = this.chart.addSeries(LightweightCharts.CandlestickSeries, {
      upColor: '#3fb984', downColor: '#e45757', borderVisible: false,
      wickUpColor: '#3fb984', wickDownColor: '#e45757',
    });
    this.resizeObserver = new ResizeObserver(() => {
      this.chart.applyOptions({ width: el.clientWidth, height: el.clientHeight });
    });
    this.resizeObserver.observe(el);
  }

  setBars(bars) {
    this.candles.setData(bars.map(this.toCandle));
    this.chart.timeScale().fitContent();
  }

  updateBar(bar) { this.candles.update(this.toCandle(bar)); }

  toCandle(bar) {
    return { time: bar.t, open: bar.o, high: bar.h, low: bar.l, close: bar.c };
  }

  destroy() {
    if (this.resizeObserver) this.resizeObserver.disconnect();
    if (this.chart) this.chart.remove();
  }
}

window.ConfluenceChart = ConfluenceChart;