// The lightweight-charts chart: series per mode, the volume pane, rebasing lines on the visible range,
// and New York time labels.
import {
  CandlestickSeries,
  ColorType,
  CrosshairMode,
  HistogramSeries,
  LineSeries,
  createChart,
  type IChartApi,
  type ISeriesApi,
  type MouseEventParams,
  type SeriesType,
  type Time,
} from 'lightweight-charts'
import type { Bar } from './plan'
import { crosshairLabel, tickLabel } from './time'

export interface SeriesInput {
  symbol: string
  color: string
  bars: Bar[]
}

export interface ChartModel {
  mode: 'lines' | 'candles'
  series: SeriesInput[]
  active: string | null
  volume: boolean
  intraday: boolean
  /** A caption at the top of the volume pane, or null for none. */
  volumeLabel?: string | null
  /** Changes when the interval changes: the chart fits all data again. */
  dataKey: string
}

export interface LegendEntry {
  symbol: string
  color: string
  text: string
}

/** What the price pane holds after an update, as the view reports it. pane -1 means its series are split across panes. */
export interface PriceCheck {
  series: number
  points: number
  finite: boolean
  pane: number | null
  volumePane: number | null
}

const PRICE_PANE = 0
const VOLUME_PANE = 1
const UP = '#26a69a'
const DOWN = '#ef5350'
const pct = (v: number) => `${v >= 0 ? '+' : ''}${v.toFixed(2)}%`
const price = (v: number) => (Math.abs(v) >= 1000 ? v.toFixed(0) : Math.abs(v) >= 1 ? v.toFixed(2) : v.toFixed(4))
const vol = (v: number) =>
  v >= 1e9 ? `${(v / 1e9).toFixed(2)}B` : v >= 1e6 ? `${(v / 1e6).toFixed(2)}M` : v >= 1e3 ? `${(v / 1e3).toFixed(1)}K` : String(v)
const t = (bar: Bar) => bar.time as Time
/** Whether time a comes before b: seconds against seconds, YYYY-MM-DD against YYYY-MM-DD. */
const before = (a: number | string, b: number | string | { year: number; month: number; day: number }) => {
  if (typeof b === 'object') b = `${b.year}-${String(b.month).padStart(2, '0')}-${String(b.day).padStart(2, '0')}`
  return typeof a === 'number' && typeof b === 'number' ? a < b : String(a) < String(b)
}

export class PriceChart {
  private chart: IChartApi
  private model: ChartModel | null = null
  private lines = new Map<string, ISeriesApi<'Line'>>()
  private candles: ISeriesApi<'Candlestick'> | null = null
  private volumeSeries: ISeriesApi<'Histogram'> | null = null
  private hover: MouseEventParams<Time> | null = null
  private frame = 0
  private onDblClick = () => this.fit()

  private onLegend: (entries: LegendEntry[]) => void

  constructor(private el: HTMLElement, onLegend: (entries: LegendEntry[], check: PriceCheck) => void) {
    this.onLegend = (entries) => onLegend(entries, this.check())
    this.chart = createChart(el, {
      autoSize: true,
      layout: { background: { type: ColorType.Solid, color: 'transparent' }, textColor: '#a3a3a3', fontSize: 11, attributionLogo: true },
      grid: { vertLines: { color: 'rgba(255,255,255,0.05)' }, horzLines: { color: 'rgba(255,255,255,0.05)' } },
      rightPriceScale: { borderColor: 'rgba(255,255,255,0.12)' },
      timeScale: {
        borderColor: 'rgba(255,255,255,0.12)',
        timeVisible: true,
        secondsVisible: false,
        rightOffset: 3,
        tickMarkFormatter: (time: Time, markType: number) => tickLabel(time, markType),
      },
      crosshair: { mode: CrosshairMode.Normal },
      localization: { timeFormatter: (time: Time) => crosshairLabel(time) },
      handleScroll: true,
      handleScale: true,
    })
    // Pane 0 is the price pane for the chart's whole life. lightweight-charts v5 deletes a pane when its
    // last series is removed, which happens whenever the price series are swapped (an interval change in
    // lines mode removes every line until the new bars arrive; a mode switch removes the old series
    // first). The volume pane then slid up to index 0 and the next price series landed beside the
    // volume, on its scale, flattened to nothing.
    ;(this.chart.panes()[0] as unknown as { setPreserveEmptyPane?: (p: boolean) => void } | undefined)?.setPreserveEmptyPane?.(true)
    this.chart.timeScale().subscribeVisibleTimeRangeChange(() => this.schedule())
    this.chart.subscribeCrosshairMove((param) => {
      this.hover = param.time === undefined ? null : param
      this.legend()
    })
    el.addEventListener('dblclick', this.onDblClick)
    this.label.className = 'yc-vol-label'
    this.label.style.display = 'none'
    el.appendChild(this.label)
    this.resize = new ResizeObserver(() => requestAnimationFrame(() => this.placeLabel()))
    this.resize.observe(el)
  }

  private label = document.createElement('div')
  private resize: ResizeObserver

  /** The volume caption, at the top of the volume pane. */
  private placeLabel(): void {
    const text = this.model?.volume && this.volumeSeries ? this.model.volumeLabel : null
    if (!text) {
      this.label.style.display = 'none'
      return
    }
    const pane = this.chart.panes()[0] as unknown as { getHeight?: () => number } | undefined
    this.label.textContent = text
    this.label.style.top = `${(pane?.getHeight?.() ?? 0) + 4}px`
    this.label.style.display = 'block'
  }

  update(model: ChartModel): void {
    const before = this.model
    const refit = !before || before.dataKey !== model.dataKey || before.mode !== model.mode
    const hadData = !!before && before.series.some((s) => s.bars.length > 0)
    const range = refit ? null : this.chart.timeScale().getVisibleRange()
    this.model = model
    this.chart.applyOptions({ timeScale: { timeVisible: model.intraday } })

    if (model.mode === 'lines') {
      this.remove(this.candles)
      this.candles = null
      const wanted = new Set(model.series.filter((s) => s.bars.length > 0).map((s) => s.symbol))
      for (const [symbol, series] of this.lines)
        if (!wanted.has(symbol)) {
          this.chart.removeSeries(series)
          this.lines.delete(symbol)
        }
      for (const s of model.series) {
        if (!wanted.has(s.symbol)) continue
        const opts = { color: s.color, lineWidth: s.symbol === model.active ? 2 : 1, priceLineVisible: false, lastValueVisible: true }
        const line = this.lines.get(s.symbol)
        if (line) line.applyOptions(opts)
        else {
          this.bases.delete(s.symbol)
          this.lines.set(
            s.symbol,
            this.chart.addSeries(LineSeries, {
              ...opts,
              title: '',
              priceFormat: { type: 'custom', formatter: pct, minMove: 0.01 },
            }, PRICE_PANE),
          )
        }
      }
    } else {
      for (const series of this.lines.values()) this.chart.removeSeries(series)
      this.lines.clear()
      this.bases.clear()
      const bars = model.series.find((s) => s.symbol === model.active)?.bars ?? []
      if (!this.candles)
        this.candles = this.chart.addSeries(CandlestickSeries, {
          upColor: UP,
          downColor: DOWN,
          borderVisible: false,
          wickUpColor: UP,
          wickDownColor: DOWN,
          priceFormat: { type: 'custom', formatter: price, minMove: 0.0001 },
        }, PRICE_PANE)
      this.candles.setData(bars.map((b) => ({ time: t(b), open: b.open, high: b.high, low: b.low, close: b.close })))
    }

    this.updateVolume(model)
    this.checkPanes(model)
    this.rebase()

    if (refit || !hadData) this.fit()
    else if (range) {
      try {
        this.chart.timeScale().setVisibleRange(range)
      } catch {
        // The range is gone with the data: leave the chart where it is.
      }
    }
    this.legend()
    this.placeLabel()
    requestAnimationFrame(() => this.placeLabel())
  }

  /** The active symbol's volume in a pane of its own at the bottom, colored by the bar's direction. */
  private updateVolume(model: ChartModel): void {
    const bars = model.series.find((s) => s.symbol === model.active)?.bars ?? []
    if (!model.volume) {
      this.remove(this.volumeSeries)
      this.volumeSeries = null
      if (this.chart.panes().length > 1)
        try {
          this.chart.removePane(1)
        } catch {
          // Already gone with its last series.
        }
      return
    }
    if (!this.volumeSeries) {
      this.volumeSeries = this.chart.addSeries(
        HistogramSeries,
        { priceFormat: { type: 'custom', formatter: vol, minMove: 1 }, priceLineVisible: false, lastValueVisible: false },
        VOLUME_PANE,
      )
      const panes = this.chart.panes() as unknown as { setStretchFactor?: (n: number) => void; setHeight?: (n: number) => void }[]
      if (panes[0]?.setStretchFactor && panes[1]?.setStretchFactor) {
        panes[0].setStretchFactor(4)
        panes[1].setStretchFactor(1)
      } else panes[1]?.setHeight?.(Math.max(40, Math.round(this.el.clientHeight * 0.2)))
    }
    this.volumeSeries.setData(
      bars.map((b) => ({ time: t(b), value: b.volume, color: b.close >= b.open ? 'rgba(38,166,154,0.55)' : 'rgba(239,83,80,0.55)' })),
    )
  }

  /**
   * The price series in pane 0 and the volume alone in pane 1. Should the price pane have been dropped
   * all the same (a lightweight-charts without setPreserveEmptyPane), the volume series is put back in
   * a pane of its own below the price.
   */
  private checkPanes(model: ChartModel): void {
    const v = this.volumeSeries
    if (!v) return
    const pane = v.getPane()
    if (pane.paneIndex() === VOLUME_PANE && pane.getSeries().length === 1) return
    this.chart.removeSeries(v)
    this.volumeSeries = null
    this.updateVolume(model)
  }

  /** What the price pane holds, for the view to report: points, whether all are finite, and its pane. */
  private check(): PriceCheck {
    const series: ISeriesApi<SeriesType>[] = this.model?.mode === 'candles' ? (this.candles ? [this.candles] : []) : [...this.lines.values()]
    let points = 0
    let finite = true
    let pane: number | null = null
    for (const s of series) {
      const data = s.data() as { value?: number; open?: number; high?: number; low?: number; close?: number }[]
      points += data.length
      for (const d of data) {
        const values = 'value' in d ? [d.value] : [d.open, d.high, d.low, d.close]
        if (!values.every((x) => typeof x === 'number' && Number.isFinite(x))) finite = false
      }
      const index = s.getPane().paneIndex()
      pane = pane === null || pane === index ? index : -1
    }
    const volumePane = this.volumeSeries ? this.volumeSeries.getPane().paneIndex() : null
    return { series: series.length, points, finite: points > 0 && finite, pane, volumePane }
  }

  /** Every bar on screen. */
  fit(): void {
    this.chart.timeScale().fitContent()
  }

  destroy(): void {
    cancelAnimationFrame(this.frame)
    this.resize.disconnect()
    this.label.remove()
    this.el.removeEventListener('dblclick', this.onDblClick)
    this.chart.remove()
  }

  /** Rebases the lines once a frame while the visible range moves. */
  private schedule(): void {
    if (this.frame) return
    this.frame = requestAnimationFrame(() => {
      this.frame = 0
      this.rebase()
      this.placeLabel()
    })
  }

  /** Each line as % change from its first bar on screen. */
  private rebase(): void {
    const model = this.model
    if (!model || model.mode !== 'lines') return
    const from = this.chart.timeScale().getVisibleRange()?.from as number | string | undefined
    for (const s of model.series) {
      const line = this.lines.get(s.symbol)
      if (!line || s.bars.length === 0) continue
      const first = from === undefined ? s.bars[0] : (s.bars.find((b) => !before(b.time, from)) ?? s.bars[s.bars.length - 1])
      const base = first.close
      if (!base) continue
      const key = `${String(first.time)}:${base}:${s.bars.length}:${String(s.bars[s.bars.length - 1].time)}:${s.bars[s.bars.length - 1].close}`
      if (this.bases.get(s.symbol) === key) continue
      this.bases.set(s.symbol, key)
      line.setData(s.bars.map((b) => ({ time: t(b), value: (b.close / base - 1) * 100 })))
    }
    this.legend()
  }

  private bases = new Map<string, string>()

  /** The legend's lines: each symbol's hovered or latest value. */
  private legend(): void {
    const model = this.model
    if (!model) return this.onLegend([])
    const hovered = this.hover
    if (model.mode === 'lines') {
      this.onLegend(
        model.series.map((s) => {
          const line = this.lines.get(s.symbol)
          if (!line) return { symbol: s.symbol, color: s.color, text: '–' }
          const at = hovered?.seriesData.get(line) as { value?: number } | undefined
          const data = line.data()
          const last = data[data.length - 1] as { value?: number } | undefined
          const value = at?.value ?? last?.value
          return { symbol: s.symbol, color: s.color, text: value === undefined ? '–' : pct(value) }
        }),
      )
      return
    }
    const s = model.series.find((x) => x.symbol === model.active)
    if (!s || !this.candles || s.bars.length === 0) return this.onLegend(s ? [{ symbol: s.symbol, color: s.color, text: '–' }] : [])
    const at = hovered?.seriesData.get(this.candles) as { time?: Time } | undefined
    const index = at?.time === undefined ? s.bars.length - 1 : s.bars.findIndex((b) => String(b.time) === String(at.time))
    const bar = s.bars[index < 0 ? s.bars.length - 1 : index]
    const prev = s.bars[(index < 0 ? s.bars.length - 1 : index) - 1]
    const change = prev ? ` ${pct((bar.close / prev.close - 1) * 100)}` : ''
    this.onLegend([
      {
        symbol: s.symbol,
        color: s.color,
        text: `O ${price(bar.open)} H ${price(bar.high)} L ${price(bar.low)} C ${price(bar.close)}${change} V ${vol(bar.volume)}`,
      },
    ])
  }

  private remove(series: ISeriesApi<SeriesType> | null): void {
    if (series) this.chart.removeSeries(series)
  }
}

export { UP, DOWN, pct, price, vol, t }