types.ts

import type { StyleProp, ViewStyle } from 'react-native'
import type { SkFont } from '@shopify/react-native-skia'

export interface NativelinePoint {
  time: number // unix seconds — points MUST be ordered ascending by time (caller contract; not sorted internally)
  value: number
}

export type Momentum = 'up' | 'down' | 'flat'
export type ThemeMode = 'light' | 'dark'
export type WindowStyle = 'default' | 'rounded' | 'text'
export type BadgeVariant = 'default' | 'minimal'

/**
 * Viewport mode — the one real addition over liveline.
 * - 'live'   : the X axis is anchored to the wall clock and the window trails
 *              `now` (Date.now()), scrolling continuously. Identical to liveline.
 * - 'static' : the X axis is a fixed domain (from `domain`, or auto-fit to the
 *              data extent). It does NOT scroll with the clock — but value/range
 *              lerps, entrance morphs, scrub, and updates still animate. This is
 *              "unlive motion": it animates, it just doesn't chase real time.
 */
export type Viewport = 'live' | 'static'

/** Explicit X range (unix seconds) for the static viewport. */
export interface Domain {
  from: number
  to: number
}

export interface ReferenceLine {
  value: number
  label?: string
}

export interface HoverPoint {
  time: number
  value: number
  x: number
  y: number
}

export interface Padding {
  top?: number
  right?: number
  bottom?: number
  left?: number
}

export interface WindowOption {
  label: string
  secs: number
}

export interface OrderbookData {
  bids: [number, number][] // [price, size][]
  asks: [number, number][] // [price, size][]
}

export interface DegenOptions {
  /** Multiplier for particle count and size (default 1) */
  scale?: number
  /** Show particles on down-momentum swings (default false) */
  downMomentum?: boolean
}

export interface NativelineSeries {
  id: string
  data: NativelinePoint[] // MUST be ordered ascending by time (caller contract; not sorted internally)
  value: number
  color: string
  label?: string
}

export interface CandlePoint {
  time: number // unix seconds — candle open time
  open: number
  high: number
  low: number
  close: number
}

/**
 * Optional per-part font overrides. If omitted, the component builds system
 * fonts via matchFont (family from `labelFontFamily`). Each part can be
 * customized independently.
 */
export interface NativelineFonts {
  /** Grid / time-axis / reference / series labels (~11px). */
  label?: SkFont
  /** Scrub crosshair tooltip (~13px). */
  tooltip?: SkFont
  /** The value badge at the live tip (~11px × badgeScale). */
  badge?: SkFont
  /** The large `showValue` overlay (~20px). Its family/size/weight are read from this font. */
  value?: SkFont
}

export interface NativelineProps {
  data: NativelinePoint[]
  value: number

  // Multi-series mode — when provided, overrides data/value/color
  series?: NativelineSeries[]

  // Viewport (live vs. static) --------------------------------------------
  viewport?: Viewport // default 'live'
  domain?: Domain // static viewport X range; omitted => auto-fit to data extent

  // Appearance
  theme?: ThemeMode
  color?: string
  /** Actual container background (any CSS color). Aligns the chart's fade/outline
   *  math (orderbook labels, grid label fades) to it, so they don't leave a dark
   *  halo when the Canvas sits on a card that isn't the theme's default bg. */
  background?: string

  // Time
  window?: number // (live) trailing window in seconds; default 30

  // Feature flags
  grid?: boolean
  /** Show the time (x-axis) labels. Default true; set false for compact cards. */
  xAxis?: boolean
  /** Show the value (y-axis) labels. Default true; grid lines stay — only the
   *  right-edge numbers are hidden. (For no lines either, use grid={false}.) */
  yAxis?: boolean
  badge?: boolean
  momentum?: boolean | Momentum
  fill?: boolean
  loading?: boolean
  paused?: boolean
  emptyText?: string
  scrub?: boolean
  exaggerate?: boolean
  showValue?: boolean
  valueMomentumColor?: boolean
  degen?: boolean | DegenOptions
  badgeTail?: boolean

  // Time window buttons
  windows?: WindowOption[]
  onWindowChange?: (secs: number) => void
  windowStyle?: WindowStyle

  // Badge
  badgeVariant?: BadgeVariant
  /** Scale the value badge (font + padding). Default 1; e.g. 0.8 = smaller. */
  badgeScale?: number
  /** Color the badge by momentum (green/red). Default true. Set false to use
   *  the accent `color` instead — useful when `color` already encodes direction. */
  badgeMomentumColor?: boolean

  // Crosshair
  tooltipY?: number
  tooltipOutline?: boolean

  // Orderbook
  orderbook?: OrderbookData

  // Optional
  referenceLine?: ReferenceLine
  formatValue?: (v: number) => string
  formatTime?: (t: number) => string
  /** Time formatter for the scrub crosshair tooltip. Falls back to `formatTime`.
   *  Lets the hover label be range-aware (date on wide ranges, time intraday)
   *  independently of the compact axis labels. */
  formatHoverTime?: (t: number) => string
  lerpSpeed?: number
  padding?: Padding
  onHover?: (point: HoverPoint | null) => void
  pulse?: boolean
  lineWidth?: number

  // Candlestick mode
  mode?: 'line' | 'candle'
  candles?: CandlePoint[]
  candleWidth?: number
  liveCandle?: CandlePoint
  lineMode?: boolean
  lineData?: NativelinePoint[]
  lineValue?: number
  onModeChange?: (mode: 'line' | 'candle') => void
  onSeriesToggle?: (id: string, visible: boolean) => void
  seriesToggleCompact?: boolean
  /** Render the built-in multi-series show/hide chips. Default true. Set false
   *  when the host supplies its own legend/toggle UI. */
  seriesToggle?: boolean

  // React Native specifics
  fonts?: NativelineFonts
  labelFontFamily?: string // system monospace family override (e.g. 'Menlo')
  style?: StyleProp<ViewStyle>
}

export interface NativelinePalette {
  // Line
  line: string
  lineWidth: number

  // Fill gradient
  fillTop: string
  fillBottom: string

  // Grid
  gridLine: string
  gridLabel: string

  // Dot
  dotUp: string
  dotDown: string
  dotFlat: string
  glowUp: string
  glowDown: string
  glowFlat: string

  // Badge
  badgeOuterBg: string
  badgeOuterShadow: string
  badgeBg: string
  badgeText: string

  // Dash line
  dashLine: string

  // Reference line
  refLine: string
  refLabel: string

  // Time axis
  timeLabel: string

  // Crosshair
  crosshairLine: string
  tooltipBg: string
  tooltipText: string
  tooltipBorder: string

  // Background (for color fading — labels fade toward bg instead of alpha)
  bgRgb: [number, number, number]
}

/**
 * Per-frame projection, baked by the engine and read by the draw layer.
 * `toX`/`toY` are worklet closures. `valRange = (max - min) || 0.001` is the
 * sole divide-by-zero guard.
 */
export interface ChartLayout {
  w: number
  h: number
  pad: Required<Padding>
  chartW: number
  chartH: number
  leftEdge: number
  rightEdge: number
  minVal: number
  maxVal: number
  valRange: number
  toX: (t: number) => number
  toY: (v: number) => number
}