import {
  createChart as untypedLcCreateChart,
  CandlestickSeries,
  HistogramSeries,
  LineSeries,
  BaselineSeries,
  // } from "../modules/lightweight-charts/5.1.0/dist/lightweight-charts.standalone.development.mjs";
} from "../modules/lightweight-charts/5.1.0/dist/lightweight-charts.standalone.production.mjs";
import { createLegend } from "./legend.js";
import { capture, canCapture } from "./capture.js";
import { colors } from "./colors.js";
import { createChoiceField } from "../utils/dom.js";
import { createPersistedValue } from "../utils/persisted.js";
import { onChange as onThemeChange } from "../utils/theme.js";
import { throttle, debounce } from "../utils/timing.js";
import { serdeBool, serdeChartableIndex } from "../utils/serde.js";
import { stringToId, numberToShortUSFormat } from "../utils/format.js";
import { style } from "../utils/elements.js";

/**
 * @typedef {_ISeriesApi<LCSeriesType>} ISeries
 * @typedef {_ISeriesApi<'Candlestick'>} CandlestickISeries
 * @typedef {_ISeriesApi<'Histogram'>} HistogramISeries
 * @typedef {_ISeriesApi<'Line'>} LineISeries
 * @typedef {_ISeriesApi<'Baseline'>} BaselineISeries
 *
 * @typedef {_LineSeriesPartialOptions} LineSeriesPartialOptions
 * @typedef {_HistogramSeriesPartialOptions} HistogramSeriesPartialOptions
 * @typedef {_BaselineSeriesPartialOptions} BaselineSeriesPartialOptions
 * @typedef {_CandlestickSeriesPartialOptions} CandlestickSeriesPartialOptions
 */

/**
 * @template T
 * @typedef {Object} Series
 * @property {string} key
 * @property {string} id
 * @property {number} paneIndex
 * @property {PersistedValue<boolean>} active
 * @property {(value: boolean) => void} setActive
 * @property {() => void} show
 * @property {() => void} hide
 * @property {(order: number) => void} setOrder
 * @property {() => void} highlight
 * @property {() => void} tame
 * @property {() => boolean} hasData
 * @property {() => void} [fetch]
 * @property {string | null} url
 * @property {() => readonly T[]} getData
 * @property {(data: T) => void} update
 * @property {VoidFunction} remove
 */

/**
 * @typedef {Series<any>} AnySeries
 */

/**
 * @typedef {_SingleValueData} SingleValueData
 * @typedef {_CandlestickData} CandlestickData
 * @typedef {_LineData} LineData
 * @typedef {_BaselineData} BaselineData
 * @typedef {_HistogramData} HistogramData
 *
 * @typedef {Object} Legend
 * @property {HTMLLegendElement} element
 * @property {function({ series: AnySeries, name: string, order: number, colors: Color[] }): void} addOrReplace
 * @property {function(number): void} removeFrom
 */

const lineWidth = /** @type {any} */ (1.5);

/**
 * @param {Object} args
 * @param {string} args.id
 * @param {HTMLElement} args.parent
 * @param {BrkClient} args.brk
 * @param {true} [args.fitContent]
 * @param {HTMLElement} [args.captureElement]
 * @param {{unit: Unit; blueprints: AnyFetchedSeriesBlueprint[]}[]} [args.config]
 */
export function createChart({
  parent,
  id: chartId,
  brk,
  fitContent,
  captureElement,
  config,
}) {
  const baseUrl = brk.baseUrl.replace(/\/$/, "");

  /** @param {ChartableIndex} idx */
  const getTimeEndpoint = (idx) =>
    idx === "height"
      ? brk.metrics.blocks.time.timestampMonotonic.by[idx]
      : brk.metrics.blocks.time.timestamp.by[idx];

  const index = {
    /** @type {Set<(index: ChartableIndex) => void>} */
    onChange: new Set(),

    get() {
      return serdeChartableIndex.deserialize(index.name.value);
    },

    name: createPersistedValue({
      defaultValue: /** @type {ChartableIndexName} */ ("date"),
      storageKey: "chart-index",
      urlKey: "i",
      serialize: (v) => v,
      deserialize: (s) => /** @type {ChartableIndexName} */ (s),
      onChange: () => {
        range.set(null);
        index.onChange.forEach((cb) => cb(index.get()));
      },
    }),
  };

  // Range state: localStorage stores all ranges per-index, URL stores current range only
  /** @typedef {{ from: number, to: number }} Range */
  const ranges = createPersistedValue({
    defaultValue: /** @type {Record<string, Range>} */ ({}),
    storageKey: "chart-ranges",
    serialize: JSON.stringify,
    deserialize: JSON.parse,
  });

  const range = createPersistedValue({
    defaultValue: /** @type {Range | null} */ (null),
    urlKey: "r",
    serialize: (v) => (v ? `${v.from.toFixed(2)}_${v.to.toFixed(2)}` : ""),
    deserialize: (s) => {
      if (!s) return null;
      const [from, to] = s.split("_").map(Number);
      return !isNaN(from) && !isNaN(to) ? { from, to } : null;
    },
  });

  /** @returns {Range | null} */
  const getRange = () => range.value ?? ranges.value[index.name.value] ?? null;

  /** @param {Range} value */
  const setRange = (value) => {
    ranges.set({ ...ranges.value, [index.name.value]: value });
    range.set(value);
  };

  const legends = {
    top: createLegend(),
    bottom: createLegend(),
  };

  const elements = {
    root: document.createElement("div"),
    chart: document.createElement("div"),

    setup() {
      elements.root.classList.add("chart");
      elements.chart.classList.add("lightweight-chart");
      parent.append(elements.root);
      elements.root.append(legends.top.element);
      elements.root.append(elements.chart);
      elements.root.append(legends.bottom.element);
    },
  };
  elements.setup();

  const ichart = /** @type {CreateLCChart} */ (untypedLcCreateChart)(
    elements.chart,
    /** @satisfies {DeepPartial<ChartOptions>} */ ({
      autoSize: true,
      layout: {
        fontFamily: style.fontFamily,
        background: { color: "transparent" },
        attributionLogo: false,
      },
      grid: {
        vertLines: { visible: false },
        horzLines: { visible: false },
      },
      rightPriceScale: {
        borderVisible: false,
      },
      timeScale: {
        borderVisible: false,
        enableConflation: true,
        // conflationThresholdFactor: 8,
        ...(fitContent
          ? {
              minBarSpacing: 0.001,
            }
          : {}),
      },
      localization: {
        priceFormatter: numberToShortUSFormat,
        locale: "en-us",
      },
      crosshair: {
        mode: 3,
      },
      ...(fitContent
        ? {
            handleScale: false,
            handleScroll: false,
          }
        : {}),
      // ..._options,
    }),
  );
  // Takes a bit more space sometimes but it's better UX than having the scale being resized on option change
  ichart.priceScale("right").applyOptions({
    minimumWidth: 80,
  });

  ichart.panes().at(0)?.setStretchFactor(1);

  /** @typedef {(visibleBarsCount: number) => void} ZoomChangeCallback */

  const initialRange = getRange();
  if (initialRange) {
    ichart.timeScale().setVisibleLogicalRange(initialRange);
  }

  let visibleBarsCount = initialRange
    ? initialRange.to - initialRange.from
    : Infinity;

  /** @type {Set<ZoomChangeCallback>} */
  const onZoomChange = new Set();

  ichart.timeScale().subscribeVisibleLogicalRangeChange(
    throttle((range) => {
      if (!range) return;
      const count = range.to - range.from;
      if (count === visibleBarsCount) return;
      visibleBarsCount = count;
      onZoomChange.forEach((cb) => cb(count));
    }, 100),
  );

  // Debounced range persistence
  ichart.timeScale().subscribeVisibleLogicalRangeChange(
    debounce((range) => {
      if (range && range.from < range.to) {
        setRange({ from: range.from, to: range.to });
      }
    }, 100),
  );

  function applyColors() {
    const defaultColor = colors.default();
    const offColor = colors.gray();
    const borderColor = colors.border();
    ichart.applyOptions({
      layout: {
        textColor: offColor,
        panes: {
          separatorColor: borderColor,
        },
      },
      crosshair: {
        horzLine: {
          color: offColor,
          labelBackgroundColor: defaultColor,
        },
        vertLine: {
          color: offColor,
          labelBackgroundColor: defaultColor,
        },
      },
    });
  }
  applyColors();
  const removeThemeListener = onThemeChange(applyColors);

  /** @type {Partial<Record<ChartableIndex, number>>} */
  const minBarSpacingByIndex = {
    monthindex: 1,
    quarterindex: 2,
    semesterindex: 3,
    yearindex: 6,
    decadeindex: 60,
  };

  /** @param {ChartableIndex} index */
  function applyIndexSettings(index) {
    const minBarSpacing = minBarSpacingByIndex[index] ?? 0.5;

    ichart.applyOptions({
      timeScale: {
        timeVisible: index === "height",
        ...(!fitContent
          ? {
              minBarSpacing,
            }
          : {}),
      },
    });
  }
  applyIndexSettings(index.get());
  index.onChange.add(applyIndexSettings);

  // Periodic refresh of active series data
  const refreshInterval = setInterval(() => serieses.refreshAll(), 30_000);

  if (fitContent) {
    new ResizeObserver(() => ichart.timeScale().fitContent()).observe(
      elements.chart,
    );
  }

  const fieldsets = {
    /** @type {Map<number, Map<string, { id: string, position: string, createChild: (pane: IPaneApi<Time>) => HTMLElement }>>} */
    configs: new Map(),

    /**
     * @param {number} configPaneIndex
     * @param {number} [targetPaneIndex]
     */
    createForPane(configPaneIndex, targetPaneIndex = configPaneIndex) {
      const pane = ichart.panes().at(targetPaneIndex);
      if (!pane) return;

      const parent = pane.getHTMLElement()?.children?.item(1)?.firstChild;
      if (!parent) return;

      const configs = this.configs.get(configPaneIndex);
      if (!configs) return;

      for (const { id, position, createChild } of configs.values()) {
        /** @type {Element} */ (parent)
          .querySelectorAll(`[data-position="${position}"]`)
          .forEach((el) => el.remove());

        const fieldset = document.createElement("fieldset");
        fieldset.dataset.size = "xs";
        fieldset.dataset.position = position;
        fieldset.id = `${id}-${configPaneIndex}`;
        parent.appendChild(fieldset);
        fieldset.append(createChild(pane));
      }
    },

    /**
     * @param {Object} args
     * @param {string} args.id
     * @param {number} args.paneIndex
     * @param {"nw" | "ne" | "se" | "sw"} args.position
     * @param {(pane: IPaneApi<Time>) => HTMLElement} args.createChild
     */
    addIfNeeded({ paneIndex, id, position, createChild }) {
      let configs = this.configs.get(paneIndex);
      if (!configs) {
        configs = new Map();
        this.configs.set(paneIndex, configs);
      }
      configs.set(id, { id, position, createChild });
    },
  };

  const panes = {
    /** @type {Map<number, Map<AnySeries, ISeries[]>>} */
    seriesByHome: new Map(),
    pendingVisibilityCheck: false,

    /** @param {number} homePane */
    isAllHidden(homePane) {
      const map = this.seriesByHome.get(homePane);
      return !map || [...map.keys()].every((s) => !s.active.value);
    },

    /**
     * @param {number} homePane
     * @param {number} targetPane
     */
    moveTo(homePane, targetPane) {
      const map = this.seriesByHome.get(homePane);
      if (!map) return;
      for (const iseries of map.values()) {
        for (const is of iseries) {
          if (is.getPane().paneIndex() !== targetPane) {
            is.moveToPane(targetPane);
          }
        }
      }
    },

    /**
     * @param {number} paneIndex
     * @param {VoidFunction} callback
     * @param {number} [retries]
     */
    whenReady(paneIndex, callback, retries = 10) {
      const pane = ichart.panes().at(paneIndex);
      const parent = pane?.getHTMLElement()?.children?.item(1)?.firstChild;
      if (parent) {
        callback();
      } else if (retries > 0) {
        requestAnimationFrame(() =>
          this.whenReady(paneIndex, callback, retries - 1),
        );
      }
    },

    updateVisibility() {
      const pane0Hidden = this.isAllHidden(0);
      const pane1Hidden = this.isAllHidden(1);
      const bothVisible = !pane0Hidden && !pane1Hidden;

      this.moveTo(1, bothVisible ? 1 : 0);

      if (bothVisible) {
        this.whenReady(1, () => {
          fieldsets.createForPane(0);
          fieldsets.createForPane(1);
        });
      } else {
        this.whenReady(0, () => {
          if (pane0Hidden && !pane1Hidden) {
            fieldsets.createForPane(1, 0);
          } else {
            fieldsets.createForPane(0);
          }
        });
      }
    },

    /**
     * @param {number} paneIndex
     * @param {AnySeries} series
     * @param {ISeries[]} iseries
     */
    register(paneIndex, series, iseries) {
      let paneMap = this.seriesByHome.get(paneIndex);
      if (!paneMap) {
        paneMap = new Map();
        this.seriesByHome.set(paneIndex, paneMap);
      }
      paneMap.set(series, iseries);

      if (!this.pendingVisibilityCheck) {
        this.pendingVisibilityCheck = true;
        requestAnimationFrame(() => {
          this.pendingVisibilityCheck = false;
          this.updateVisibility();
        });
      }
    },
  };

  const serieses = {
    /** @type {Map<string, PersistedValue<boolean>>} */
    activeStates: new Map(),
    /** @type {Map<string, Set<AnySeries>>} */
    byKey: new Map(),

    refreshAll() {
      serieses.byKey.forEach((set) => {
        set.forEach((s) => {
          if (s.active.value) s.fetch?.();
        });
      });
    },

    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {Color[]} args.colors
     * @param {LCSeriesType} args.seriesType
     * @param {AnyMetricPattern} args.metric
     * @param {number} args.paneIndex
     * @param {boolean} [args.defaultActive]
     * @param {(order: number) => void} args.setOrder
     * @param {() => void} args.show
     * @param {() => void} args.hide
     * @param {() => void} args.highlight
     * @param {() => void} args.tame
     * @param {() => readonly any[]} args.getData
     * @param {(data: any[]) => void} args.setData
     * @param {(data: any) => void} args.update
     * @param {() => void} args.onRemove
     * @param {() => void} [args.onDataLoaded]
     */
    create({
      metric,
      name,
      unit,
      order,
      seriesType,
      paneIndex,
      defaultActive,
      colors,
      setOrder,
      show,
      hide,
      highlight,
      tame,
      getData,
      setData,
      update,
      onRemove,
      onDataLoaded,
    }) {
      const key = stringToId(name);
      const id = `${key}-${paneIndex}`;

      // Reuse existing state if same name (links legends across panes)
      const existingActive = serieses.activeStates.get(key);
      const active =
        existingActive ??
        createPersistedValue({
          defaultValue: defaultActive ?? true,
          storageKey: id,
          urlKey: key,
          ...serdeBool,
        });
      if (!existingActive) serieses.activeStates.set(key, active);

      setOrder(-order);

      active.value ? show() : hide();

      let hasData = false;
      let lastTime = -Infinity;

      /** @type {VoidFunction | null} */
      let _fetch = null;

      /** @type {AnySeries} */
      const series = {
        active,
        setActive(value) {
          const wasActive = active.value;
          active.set(value);
          serieses.byKey.get(key)?.forEach((s) => {
            value ? s.show() : s.hide();
          });
          document.querySelectorAll(`[data-series="${key}"]`).forEach((el) => {
            if (el instanceof HTMLInputElement && el.type === "checkbox") {
              el.checked = value;
            }
          });
          if (value && !wasActive) _fetch?.();
          panes.updateVisibility();
        },
        setOrder,
        show,
        hide,
        highlight,
        tame,
        hasData: () => hasData,
        fetch: () => _fetch?.(),
        key,
        id,
        paneIndex,
        url: null,
        getData,
        update,
        remove() {
          onRemove();
          serieses.byKey.get(key)?.delete(series);
          panes.seriesByHome.get(paneIndex)?.delete(series);
        },
      };

      // Register series for cross-pane linking
      let keySet = serieses.byKey.get(key);
      if (!keySet) {
        keySet = new Set();
        serieses.byKey.set(key, keySet);
      }
      keySet.add(series);

      /** @param {ChartableIndex} idx */
      function setupIndexEffect(idx) {
        // Reset data state for new index
        hasData = false;
        lastTime = -Infinity;
        _fetch = null;

        const _valuesEndpoint = metric.by[idx];
        // Gracefully skip - series may be about to be removed by option change
        if (!_valuesEndpoint) return;
        const valuesEndpoint = _valuesEndpoint;

        series.url = `${baseUrl}${valuesEndpoint.path}`;

        (paneIndex ? legends.bottom : legends.top).addOrReplace({
          series,
          name,
          colors,
          order,
        });

        /**
         * @param {number[]} indexes
         * @param {(number | null | [number, number, number, number])[]} values
         */
        function processData(indexes, values) {
          const length = Math.min(indexes.length, values.length);

          // Find start index for processing
          let startIdx = 0;
          if (hasData) {
            // Binary search to find first index where time >= lastTime
            let lo = 0;
            let hi = length;
            while (lo < hi) {
              const mid = (lo + hi) >>> 1;
              if (indexes[mid] < lastTime) {
                lo = mid + 1;
              } else {
                hi = mid;
              }
            }
            startIdx = lo;
            if (startIdx >= length) return; // No new data
          }

          /**
           * @param {number} i
           * @returns {LineData | CandlestickData}
           */
          function buildDataPoint(i) {
            const time = /** @type {Time} */ (indexes[i]);
            const v = values[i];
            if (v === null) {
              return { time, value: NaN };
            } else if (typeof v === "number") {
              return { time, value: v };
            } else {
              if (!Array.isArray(v) || v.length !== 4)
                throw new Error(`Expected OHLC tuple, got: ${v}`);
              const [open, high, low, close] = v;
              return { time, open, high, low, close };
            }
          }

          if (!hasData) {
            // Initial load: build full array
            const data = /** @type {LineData[] | CandlestickData[]} */ (
              Array.from({ length })
            );

            let prevTime = null;
            let timeOffset = 0;

            for (let i = 0; i < length; i++) {
              const time = indexes[i];
              const sameTime = prevTime === time;
              if (sameTime) {
                timeOffset += 1;
              }
              const offsetedI = i - timeOffset;
              const point = buildDataPoint(i);
              if (sameTime && "open" in point) {
                const prev = /** @type {CandlestickData} */ (data[offsetedI]);
                point.open = prev.open;
                point.high = Math.max(prev.high, point.high);
                point.low = Math.min(prev.low, point.low);
              }
              data[offsetedI] = point;
              prevTime = time;
            }

            data.length -= timeOffset;

            setData(data);
            hasData = true;
            lastTime = /** @type {number} */ (data.at(-1)?.time) ?? -Infinity;

            // Restore saved range or use defaults
            const savedRange = getRange();
            if (savedRange) {
              ichart.timeScale().setVisibleLogicalRange({
                from: savedRange.from,
                to: savedRange.to,
              });
            } else if (fitContent) {
              ichart.timeScale().fitContent();
            } else if (
              (minBarSpacingByIndex[idx] ?? 0) >=
              /** @type {number} */ (minBarSpacingByIndex.quarterindex)
            ) {
              ichart
                .timeScale()
                .setVisibleLogicalRange({ from: -1, to: data.length });
            }
            // Delay until chart has applied the range
            requestAnimationFrame(() => onDataLoaded?.());
          } else {
            // Incremental update: only process new data points
            for (let i = startIdx; i < length; i++) {
              const point = buildDataPoint(i);
              update(point);
              lastTime = /** @type {number} */ (point.time);
            }
          }
        }

        async function fetchAndProcess() {
          const [timeResult, valuesResult] = await Promise.all([
            getTimeEndpoint(idx).slice(-10000).fetch(),
            valuesEndpoint.slice(-10000).fetch(),
          ]);
          if (timeResult?.data?.length && valuesResult?.data?.length) {
            processData(timeResult.data, valuesResult.data);
          }
        }

        _fetch = fetchAndProcess;

        // Initial fetch if active
        if (active.value) {
          fetchAndProcess();
        }
      }

      setupIndexEffect(index.get());
      // Series don't subscribe to index.onChange - panes recreates them on index change
      // index.onChange.add(setupIndexEffect);
      // _cleanup = () => index.onChange.delete(setupIndexEffect);

      addPriceScaleSelectorIfNeeded({
        paneIndex,
        seriesType,
        unit,
      });

      return series;
    },

    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {AnyMetricPattern} args.metric
     * @param {number} [args.paneIndex]
     * @param {[Color, Color]} [args.colors] - [upColor, downColor] for legend
     * @param {boolean} [args.defaultActive]
     * @param {boolean} [args.inverse]
     * @param {CandlestickSeriesPartialOptions} [args.options]
     */
    addCandlestick({
      metric,
      name,
      unit,
      order,
      paneIndex = 0,
      colors: customColors,
      defaultActive,
      inverse,
      options,
    }) {
      const defaultGreen = inverse ? colors.red : colors.green;
      const defaultRed = inverse ? colors.green : colors.red;
      const upColor = customColors?.[0] ?? defaultGreen;
      const downColor = customColors?.[1] ?? defaultRed;

      /** @type {CandlestickISeries} */
      const candlestickISeries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Candlestick'>} */ (CandlestickSeries),
          {
            visible: false,
            borderVisible: false,
            ...options,
          },
          paneIndex,
        )
      );

      /** @type {LineISeries} */
      const lineISeries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Line'>} */ (LineSeries),
          {
            visible: false,
            lineWidth,
            priceLineVisible: true,
          },
          paneIndex,
        )
      );

      let active = defaultActive !== false;
      let highlighted = true;
      let showLine = visibleBarsCount > 500;
      let dataLoaded = false;

      function update() {
        candlestickISeries.applyOptions({
          visible: active && !showLine,
          lastValueVisible: highlighted,
          upColor: upColor.highlight(highlighted),
          downColor: downColor.highlight(highlighted),
          wickUpColor: upColor.highlight(highlighted),
          wickDownColor: downColor.highlight(highlighted),
        });
        lineISeries.applyOptions({
          visible: active && showLine,
          lastValueVisible: highlighted,
          color: colors.default.highlight(highlighted),
        });
      }

      /** @type {ZoomChangeCallback} */
      function handleZoom(count) {
        if (!dataLoaded) return; // Ignore zoom changes until data is ready
        const newShowLine = count > 500;
        if (newShowLine === showLine) return;
        showLine = newShowLine;
        update();
      }
      onZoomChange.add(handleZoom);
      const removeSeriesThemeListener = onThemeChange(update);

      const series = serieses.create({
        colors: [upColor, downColor],
        name,
        order,
        paneIndex,
        seriesType: "Candlestick",
        unit,
        defaultActive,
        metric,
        setOrder(order) {
          candlestickISeries.setSeriesOrder(order);
          lineISeries.setSeriesOrder(order);
        },
        show() {
          if (active) return;
          active = true;
          update();
        },
        hide() {
          if (!active) return;
          active = false;
          update();
        },
        highlight() {
          if (highlighted) return;
          highlighted = true;
          update();
        },
        tame() {
          if (!highlighted) return;
          highlighted = false;
          update();
        },
        setData: (data) => {
          candlestickISeries.setData(data);
          const lineData = data.map((d) => ({ time: d.time, value: d.close }));
          lineISeries.setData(lineData);
        },
        update: (data) => {
          candlestickISeries.update(data);
          lineISeries.update({ time: data.time, value: data.close });
        },
        getData: () => candlestickISeries.data(),
        onRemove: () => {
          onZoomChange.delete(handleZoom);
          removeSeriesThemeListener();
          ichart.removeSeries(candlestickISeries);
          ichart.removeSeries(lineISeries);
        },
        onDataLoaded: () => {
          dataLoaded = true;
          update();
        },
      });

      panes.register(paneIndex, series, [candlestickISeries, lineISeries]);

      return series;
    },
    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {AnyMetricPattern} args.metric
     * @param {Color | [Color, Color]} [args.color] - Single color or [positive, negative] colors
     * @param {number} [args.paneIndex]
     * @param {boolean} [args.defaultActive]
     * @param {HistogramSeriesPartialOptions} [args.options]
     */
    addHistogram({
      metric,
      name,
      unit,
      color = [colors.green, colors.red],
      order,
      paneIndex = 0,
      defaultActive,
      options,
    }) {
      const isDualColor = Array.isArray(color);
      const positiveColor = isDualColor ? color[0] : color;
      const negativeColor = isDualColor ? color[1] : color;

      /** @type {HistogramISeries} */
      const iseries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Histogram'>} */ (HistogramSeries),
          {
            priceLineVisible: false,
            ...options,
          },
          paneIndex,
        )
      );

      let active = defaultActive !== false;
      let highlighted = true;

      function update() {
        iseries.applyOptions({
          visible: active,
          lastValueVisible: highlighted,
          color: positiveColor.highlight(highlighted),
        });
      }
      update();
      const removeSeriesThemeListener = onThemeChange(update);

      const series = serieses.create({
        colors: isDualColor ? [positiveColor, negativeColor] : [positiveColor],
        name,
        order,
        paneIndex,
        seriesType: "Bar",
        unit,
        defaultActive,
        metric,
        setOrder: (order) => iseries.setSeriesOrder(order),
        show() {
          if (active) return;
          active = true;
          update();
        },
        hide() {
          if (!active) return;
          active = false;
          update();
        },
        highlight() {
          if (highlighted) return;
          highlighted = true;
          update();
        },
        tame() {
          if (!highlighted) return;
          highlighted = false;
          update();
        },
        setData: (data) => {
          if (isDualColor) {
            iseries.setData(
              data.map((d) => ({
                ...d,
                color:
                  "value" in d && d.value >= 0
                    ? positiveColor()
                    : negativeColor(),
              })),
            );
          } else {
            iseries.setData(data);
          }
        },
        update: (data) => iseries.update(data),
        getData: () => iseries.data(),
        onRemove: () => {
          removeSeriesThemeListener();
          ichart.removeSeries(iseries);
        },
      });

      panes.register(paneIndex, series, [iseries]);

      return series;
    },
    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {AnyMetricPattern} args.metric
     * @param {Color} [args.color]
     * @param {number} [args.paneIndex]
     * @param {boolean} [args.defaultActive]
     * @param {LineSeriesPartialOptions} [args.options]
     */
    addLine({
      metric,
      name,
      unit,
      order,
      color: _color,
      paneIndex = 0,
      defaultActive,
      options,
    }) {
      const color =
        _color ?? (unit.id === "usd" ? colors.green : colors.orange);

      /** @type {LineISeries} */
      const iseries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Line'>} */ (LineSeries),
          {
            lineWidth,
            priceLineVisible: false,
            ...options,
          },
          paneIndex,
        )
      );

      let active = defaultActive !== false;
      let highlighted = true;

      function update() {
        iseries.applyOptions({
          visible: active,
          lastValueVisible: highlighted,
          color: color.highlight(highlighted),
        });
      }
      update();
      const removeSeriesThemeListener = onThemeChange(update);

      const series = serieses.create({
        colors: [color],
        name,
        order,
        paneIndex,
        seriesType: "Line",
        unit,
        defaultActive,
        metric,
        setOrder: (order) => iseries.setSeriesOrder(order),
        show() {
          if (active) return;
          active = true;
          update();
        },
        hide() {
          if (!active) return;
          active = false;
          update();
        },
        highlight() {
          if (highlighted) return;
          highlighted = true;
          update();
        },
        tame() {
          if (!highlighted) return;
          highlighted = false;
          update();
        },
        setData: (data) => iseries.setData(data),
        update: (data) => iseries.update(data),
        getData: () => iseries.data(),
        onRemove: () => {
          removeSeriesThemeListener();
          ichart.removeSeries(iseries);
        },
      });

      panes.register(paneIndex, series, [iseries]);

      return series;
    },
    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {AnyMetricPattern} args.metric
     * @param {Color} [args.color]
     * @param {number} [args.paneIndex]
     * @param {boolean} [args.defaultActive]
     * @param {LineSeriesPartialOptions} [args.options]
     */
    addDots({
      metric,
      name,
      unit,
      order,
      color: _color,
      paneIndex = 0,
      defaultActive,
      options,
    }) {
      const color =
        _color ?? (unit.id === "usd" ? colors.green : colors.orange);

      /** @type {LineISeries} */
      const iseries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Line'>} */ (LineSeries),
          {
            priceLineVisible: false,
            lineVisible: false,
            pointMarkersVisible: true,
            pointMarkersRadius: 1,
            ...options,
          },
          paneIndex,
        )
      );

      let active = defaultActive !== false;
      let highlighted = true;
      let radius =
        visibleBarsCount > 1000 ? 1 : visibleBarsCount > 200 ? 1.5 : 2;

      function update() {
        iseries.applyOptions({
          visible: active,
          lastValueVisible: highlighted,
          color: color.highlight(highlighted),
        });
      }
      update();

      /** @type {ZoomChangeCallback} */
      function handleZoom(count) {
        const newRadius = count > 1000 ? 1 : count > 200 ? 1.5 : 2;
        if (newRadius === radius) return;
        radius = newRadius;
        iseries.applyOptions({ pointMarkersRadius: radius });
      }
      onZoomChange.add(handleZoom);
      const removeSeriesThemeListener = onThemeChange(update);

      const series = serieses.create({
        colors: [color],
        name,
        order,
        paneIndex,
        seriesType: "Line",
        unit,
        defaultActive,
        metric,
        setOrder: (order) => iseries.setSeriesOrder(order),
        show() {
          if (active) return;
          active = true;
          update();
        },
        hide() {
          if (!active) return;
          active = false;
          update();
        },
        highlight() {
          if (highlighted) return;
          highlighted = true;
          update();
        },
        tame() {
          if (!highlighted) return;
          highlighted = false;
          update();
        },
        setData: (data) => iseries.setData(data),
        update: (data) => iseries.update(data),
        getData: () => iseries.data(),
        onRemove: () => {
          onZoomChange.delete(handleZoom);
          removeSeriesThemeListener();
          ichart.removeSeries(iseries);
        },
      });

      panes.register(paneIndex, series, [iseries]);

      return series;
    },
    /**
     * @param {Object} args
     * @param {string} args.name
     * @param {Unit} args.unit
     * @param {number} args.order
     * @param {AnyMetricPattern} args.metric
     * @param {number} [args.paneIndex]
     * @param {boolean} [args.defaultActive]
     * @param {Color} [args.topColor]
     * @param {Color} [args.bottomColor]
     * @param {BaselineSeriesPartialOptions} [args.options]
     */
    addBaseline({
      metric,
      name,
      unit,
      order,
      paneIndex: _paneIndex,
      defaultActive,
      topColor = colors.green,
      bottomColor = colors.red,
      options,
    }) {
      const paneIndex = _paneIndex ?? 0;

      /** @type {BaselineISeries} */
      const iseries = /** @type {any} */ (
        ichart.addSeries(
          /** @type {SeriesDefinition<'Baseline'>} */ (BaselineSeries),
          {
            lineWidth,
            baseValue: {
              price: options?.baseValue?.price ?? 0,
            },
            ...options,
            priceLineVisible: false,
            bottomFillColor1: "transparent",
            bottomFillColor2: "transparent",
            topFillColor1: "transparent",
            topFillColor2: "transparent",
            lineVisible: true,
          },
          paneIndex,
        )
      );

      let active = defaultActive !== false;
      let highlighted = true;

      function update() {
        iseries.applyOptions({
          visible: active,
          lastValueVisible: highlighted,
          topLineColor: topColor.highlight(highlighted),
          bottomLineColor: bottomColor.highlight(highlighted),
        });
      }
      update();
      const removeSeriesThemeListener = onThemeChange(update);

      const series = serieses.create({
        colors: [topColor, bottomColor],
        name,
        order,
        paneIndex,
        seriesType: "Baseline",
        unit,
        defaultActive,
        metric,
        setOrder: (order) => iseries.setSeriesOrder(order),
        show() {
          if (active) return;
          active = true;
          update();
        },
        hide() {
          if (!active) return;
          active = false;
          update();
        },
        highlight() {
          if (highlighted) return;
          highlighted = true;
          update();
        },
        tame() {
          if (!highlighted) return;
          highlighted = false;
          update();
        },
        setData: (data) => iseries.setData(data),
        update: (data) => iseries.update(data),
        getData: () => iseries.data(),
        onRemove: () => {
          removeSeriesThemeListener();
          ichart.removeSeries(iseries);
        },
      });

      panes.register(paneIndex, series, [iseries]);

      return series;
    },
  };

  /**
   * @param {Object} args
   * @param {Unit} args.unit
   * @param {LCSeriesType} args.seriesType
   * @param {number} args.paneIndex
   */
  function addPriceScaleSelectorIfNeeded({ unit, paneIndex, seriesType }) {
    const id = `${chartId}-scale`;

    /** @type {"lin" | "log"} */
    const defaultValue =
      unit.id === "usd" && seriesType !== "Baseline" ? "log" : "lin";

    const persisted = createPersistedValue({
      defaultValue,
      storageKey: `${id}-scale-${paneIndex}`,
      urlKey: paneIndex === 0 ? "price_scale" : "unit_scale",
      serialize: (v) => v,
      deserialize: (s) => /** @type {"lin" | "log"} */ (s),
    });

    /** @param {"lin" | "log"} value */
    const applyScale = (value) => {
      try {
        const pane = ichart.panes().at(paneIndex);
        pane?.priceScale("right").applyOptions({
          mode: value === "lin" ? 0 : 1,
        });
      } catch {}
    };

    // Apply scale immediately
    applyScale(persisted.value);

    fieldsets.addIfNeeded({
      id,
      paneIndex,
      position: "sw",
      createChild() {
        const field = createChoiceField({
          choices: /** @type {const} */ (["lin", "log"]),
          id: stringToId(`${id} ${paneIndex} ${unit}`),
          initialValue: persisted.value,
          onChange(value) {
            persisted.set(value);
            applyScale(value);
          },
        });

        return field;
      },
    });
  }

  const chart = {
    index,
    legends,
    serieses,
    addFieldsetIfNeeded: fieldsets.addIfNeeded.bind(fieldsets),
    destroy() {
      removeThemeListener();
      clearInterval(refreshInterval);
      ichart.remove();
    },
  };

  config?.forEach(({ unit, blueprints }, paneIndex) => {
    blueprints.forEach((blueprint, order) => {
      const common = {
        metric: blueprint.metric,
        name: blueprint.title,
        unit,
        defaultActive: blueprint.defaultActive,
        paneIndex,
        options: blueprint.options,
        order,
      };
      if (blueprint.type === "Candlestick") {
        serieses.addCandlestick({ ...common, colors: blueprint.colors });
      } else if (blueprint.type === "Baseline") {
        serieses.addBaseline(common);
      } else if (blueprint.type === "Histogram") {
        serieses.addHistogram({ ...common, color: blueprint.color });
      } else if (blueprint.type === "Dots") {
        serieses.addDots({ ...common, color: blueprint.color });
      } else {
        serieses.addLine({ ...common, color: blueprint.color });
      }
    });
  });

  if (captureElement && canCapture) {
    const domain = document.createElement("p");
    domain.innerText = window.location.host;
    domain.id = "domain";

    fieldsets.addIfNeeded({
      id: "capture",
      paneIndex: 0,
      position: "ne",
      createChild() {
        const button = document.createElement("button");
        button.id = "capture";
        button.innerText = "capture";
        button.title = "Capture chart as image";
        button.addEventListener("click", async () => {
          captureElement.dataset.screenshot = "true";
          captureElement.append(domain);
          try {
            await capture({ element: captureElement, name: chartId });
          } catch {}
          captureElement.removeChild(domain);
          captureElement.dataset.screenshot = "false";
        });
        return button;
      },
    });
  }

  return chart;
}

/**
 * @typedef {typeof createChart} CreateChart
 * @typedef {ReturnType<createChart>} Chart
 */