PerfMonitor

import { cn } from "cn"
import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore, type ComponentProps, type ReactNode } from "react"
import { createFrameSampler, formatMs, type FrameReport, type FrameSampler } from "@/lib/frame-stats"

// One sampler and report subscription per monitor; one metadata subscription per lane. Readings
// share those snapshots while callers own the labels, collections, controls and surrounding markup.

/** What a lane shows, the shape a row store's meta already has. */
export interface LaneMeta {
  lane: "coalesced" | "ordered"
  size: number
  /** Counts batches applied. */
  version: number
  dropped: number
  seq: number | null
  gap: boolean
  /** Wall clock of the last batch, ms since the epoch. */
  lastBatchAt: number | null
}

/** What a lane reads: a row store, or anything with a meta subscription shaped like one. */
export interface MetaSource {
  getMeta(): LaneMeta
  subscribeMeta(cb: () => void): () => void
}

export interface PerfMonitorProps extends Omit<ComponentProps<"div">, "children" | "role" | "aria-label" | "aria-labelledby"> {
  children: ReactNode
  role?: never
  "aria-label"?: never
  "aria-labelledby"?: never
  /** Histogram marker and initial budget for an internally created sampler. Default 1000/60. */
  budgetMs?: number
  /** Frames retained by an internally created sampler. Default 600. */
  window?: number
  /** Report interval for an internally created sampler. Default 250ms. */
  refreshMs?: number
  /** Started while mounted and stopped on replacement or unmount. */
  sampler?: FrameSampler
  /** Current report after mount and each report-object change. */
  onReport?: (report: FrameReport) => void
  label?: string
}

const noop = () => () => {}
const ReportContext = createContext<FrameReport | null>(null)
const BudgetContext = createContext(1000 / 60)

/** The monitor's shared report; this hook adds no subscription or sampler. */
export function usePerfReport(): FrameReport {
  const report = useContext(ReportContext)
  if (!report) throw new Error("PerfMonitor readings must be inside PerfMonitor.")
  return report
}

export function PerfMonitor({ budgetMs = 1000 / 60, window: frames = 600, refreshMs = 250, sampler: given, onReport, label = "Frame health", children, className, ...props }: PerfMonitorProps) {
  const [own] = useState(() => given ?? createFrameSampler({ budgetMs, window: frames, refreshMs }))
  const sampler = given ?? own
  useEffect(() => {
    sampler.start()
    return () => sampler.stop()
  }, [sampler])
  // Called through the sampler, not detached from it, so a class-based sampler keeps its `this`.
  const subscribeReport = useCallback((cb: () => void) => (sampler.subscribe ? sampler.subscribe(cb) : noop()), [sampler])
  const readReport = useCallback(() => sampler.report(), [sampler])
  const report = useSyncExternalStore(subscribeReport, readReport, readReport)
  useEffect(() => {
    onReport?.(report)
    // Callback replacement alone must not publish the current report again.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [report])

  return (
    <BudgetContext.Provider value={budgetMs}>
      <ReportContext.Provider value={report}>
        <div {...props} role="group" aria-label={label} aria-labelledby={undefined} data-slot="tradecn-perf-monitor" data-dropped={report.dropped} data-frames={report.frames} className={cn("flex flex-col gap-1 font-(family-name:--tradecn-font-mono) text-xs lining-nums tabular-nums", className)}>
          {children}
        </div>
      </ReportContext.Provider>
    </BudgetContext.Provider>
  )
}

export type PerfMetric = "frames" | "p50" | "p99" | "max" | "mean" | "dropped" | "long"

export interface PerfMonitorValueProps extends Omit<ComponentProps<"span">, "children"> {
  metric: PerfMetric
  /** Null means long-task observation is unavailable. */
  format?: (value: number | null, report: FrameReport) => ReactNode
}

export function PerfMonitorValue({ metric, format, className, ...props }: PerfMonitorValueProps) {
  const report = usePerfReport()
  const value = metric === "long" ? (report.longTasksObserved ? report.longTasks : null) : report[metric]
  const text = value === null ? "n/a" : metric === "p50" || metric === "p99" || metric === "max" || metric === "mean" ? formatMs(value) : metric === "frames" ? value.toLocaleString() : String(value)
  return <span data-slot="tradecn-perf-monitor-value" data-numeric="" className={cn("lining-nums tabular-nums", className)} {...props}>{format ? format(value, report) : text}</span>
}

export interface PerfMonitorLaneProps {
  store: MetaSource
  children: ReactNode
}

export interface PerfLaneState {
  meta: LaneMeta
  rate: number
  age: number | null
}

const LaneContext = createContext<PerfLaneState | null>(null)

/** A lane's shared metadata and report-clock readings, without another subscription. */
export function usePerfLane(): PerfLaneState {
  const lane = useContext(LaneContext)
  if (!lane) throw new Error("PerfMonitor lane readings must be inside PerfMonitorLane.")
  return lane
}

/** Coordinates lane readings without adding markup, including inside a table or list. */
export function PerfMonitorLane({ store, children }: PerfMonitorLaneProps) {
  const { until: at } = usePerfReport()
  // Called through the store, so a class-based MetaSource keeps its `this`.
  const subscribeMeta = useCallback((cb: () => void) => store.subscribeMeta(cb), [store])
  const readMeta = useCallback(() => store.getMeta(), [store])
  const meta = useSyncExternalStore(subscribeMeta, readMeta, readMeta)
  const [seen, setSeen] = useState({ store, at, version: meta.version, rate: 0 })
  if (seen.store !== store) {
    setSeen({ store, at, version: meta.version, rate: 0 })
  } else if (seen.at !== at) {
    const seconds = (at - seen.at) / 1000
    setSeen({ store, at, version: meta.version, rate: seconds > 0 ? Math.max(0, meta.version - seen.version) / seconds : 0 })
  }
  const age = meta.lastBatchAt === null ? null : Math.max(0, at - meta.lastBatchAt)
  const state = useMemo(() => ({ meta, rate: seen.rate, age }), [meta, seen.rate, age])
  return <LaneContext.Provider value={state}>{children}</LaneContext.Provider>
}

export type PerfLaneMetric = "kind" | "rows" | "rate" | "dropped" | "seq" | "gap" | "age"

export interface PerfMonitorLaneValueProps extends Omit<ComponentProps<"span">, "children"> {
  metric: PerfLaneMetric
  /** Customize a reading from the shared lane state. */
  format?: (state: PerfLaneState) => ReactNode
}

export function PerfMonitorLaneValue({ metric, format, className, ...props }: PerfMonitorLaneValueProps) {
  const state = usePerfLane()
  const { meta, rate, age } = state
  let text: string
  switch (metric) {
    case "kind": text = meta.lane; break
    case "rows": text = meta.size.toLocaleString(); break
    case "rate": text = rate.toFixed(0); break
    case "dropped": text = meta.dropped.toLocaleString(); break
    case "seq": text = meta.seq === null ? "–" : meta.seq.toLocaleString(); break
    case "gap": text = meta.gap ? "gap" : ""; break
    case "age": text = age === null ? "–" : formatMs(age); break
  }
  return <span data-slot="tradecn-perf-monitor-lane-value" data-numeric="" className={cn("lining-nums tabular-nums", metric === "gap" && "text-stale", className)} {...props}>{format ? format(state) : text}</span>
}

export type PerfMonitorHistogramProps = Omit<ComponentProps<"svg">, "children">

/** Frame gaps against the monitor's budget, with an accessible summary and per-bin titles. */
export function PerfMonitorHistogram({ className, ...props }: PerfMonitorHistogramProps) {
  const report = usePerfReport()
  const budgetMs = useContext(BudgetContext)
  const bins = report.histogram
  const width = 160
  const height = 28
  const gap = 1
  const barWidth = width / bins.length
  const peak = Math.max(1, ...bins)
  const budgetX = Math.min(width, (budgetMs / report.binMs) * barWidth)
  // The label reads right of the marker, or left of it past the middle, so it stays inside the chart at any budget.
  const flip = budgetX > width / 2
  const end = report.binMs * (bins.length - 1)
  return (
    <svg role="img" aria-label={`Frame time histogram, ${report.binMs} ms bins to ${end} ms and over: p50 ${formatMs(report.p50)}, p99 ${formatMs(report.p99)}, ${report.dropped} dropped`} viewBox={`0 0 ${width} ${height + 14}`} width={width} height={height + 14} className={cn("shrink-0 overflow-visible", className)} data-perf-histogram {...props}>
      {bins.map((count, i) => {
        const h = count === 0 ? 0 : Math.max(1, Math.round((count / peak) * height))
        const from = i * report.binMs
        const label = i === bins.length - 1 ? `${from} ms and over: ${count} frames` : `${from} to ${from + report.binMs} ms: ${count} frames`
        return (
          <rect key={i} x={i * barWidth + gap / 2} y={height - h} width={Math.max(0.5, barWidth - gap)} height={h} rx={1} className="fill-primary" data-bin={i} data-count={count}>
            <title>{label}</title>
          </rect>
        )
      })}
      <line x1={budgetX} x2={budgetX} y1={0} y2={height} strokeDasharray="2 2" className="stroke-muted-foreground" strokeWidth={1} />
      <text x={flip ? budgetX - 2 : budgetX + 2} y={height + 13} textAnchor={flip ? "end" : "start"} className="fill-muted-foreground" fontSize={12} data-perf-budget>
        {formatMs(budgetMs)}
      </text>
    </svg>
  )
}

// Frame timing, measured the way a per-frame core is judged: the gap between one animation frame and
// the next, how many frames missed their slot, how long the longest tasks ran. Pure functions over
// the numbers, and a sampler that collects them from requestAnimationFrame and a PerformanceObserver
// into a bounded ring, reporting on a timer rather than on every frame, so watching the frame rate
// costs almost none of it.

export interface FrameReport {
  /** Frames in the window. */
  frames: number
  p50: number
  p99: number
  max: number
  mean: number
  /** Frames longer than `droppedAboveMs`. */
  dropped: number
  droppedAboveMs: number
  /** Long tasks (over 50 ms) seen while sampling, where the browser reports them. */
  longTasks: number
  /** Whether long tasks could be observed at all. */
  longTasksObserved: boolean
  /** Counts per bin, `binMs` wide from zero; the last bin holds everything past the end. */
  histogram: number[]
  binMs: number
  /** When the window started and ended, ms since the epoch. */
  since: number
  until: number
}

export interface FrameSamplerOptions {
  /** Frames kept. Default 600, ten seconds at 60 Hz. */
  window?: number
  /** The frame budget. Default 1000/60. A frame past 1.5 times it counts as dropped. */
  budgetMs?: number
  /** Histogram bin width. Default 2. */
  binMs?: number
  /** Histogram end; the last bin takes everything past it. Default 40. */
  maxMs?: number
  /** How often subscribers hear a new report. Default 250. */
  refreshMs?: number
  /** Injectable for tests. */
  raf?: (cb: (t: number) => void) => number
  caf?: (id: number) => void
  now?: () => number
  setTimer?: (cb: () => void, ms: number) => unknown
  clearTimer?: (id: unknown) => void
  observe?: boolean
}

export interface FrameSampler {
  start(): void
  stop(): void
  /** Forget every frame so far. */
  reset(): void
  /** The latest report; the same object until the next refresh. */
  report(): FrameReport
  /** Wakes on each refresh while running. */
  subscribe(cb: () => void): () => void
  readonly running: boolean
}

export function percentile(sorted: readonly number[], p: number): number {
  if (!sorted.length) return 0
  const i = Math.min(sorted.length - 1, Math.max(0, Math.ceil((p / 100) * sorted.length) - 1))
  return sorted[i]!
}

/** Counts per `binMs`-wide bin from zero to `maxMs`, the last bin taking everything past the end. */
export function histogram(values: readonly number[], binMs: number, maxMs: number): number[] {
  const bins = Math.max(1, Math.ceil(maxMs / binMs))
  const counts = new Array<number>(bins).fill(0)
  for (const v of values) {
    if (!Number.isFinite(v) || v < 0) continue
    counts[Math.min(bins - 1, Math.floor(v / binMs))]!++
  }
  return counts
}

export interface SummarizeOptions {
  budgetMs: number
  binMs: number
  maxMs: number
  longTasks: number
  longTasksObserved: boolean
  since: number
  until: number
}

/** A report from frame gaps. Dropped is a gap past 1.5 times the budget: the frame missed its slot. */
export function summarize(gaps: readonly number[], o: SummarizeOptions): FrameReport {
  const sorted = [...gaps].sort((a, b) => a - b)
  const droppedAboveMs = o.budgetMs * 1.5
  return {
    frames: sorted.length,
    p50: percentile(sorted, 50),
    p99: percentile(sorted, 99),
    max: sorted[sorted.length - 1] ?? 0,
    mean: sorted.length ? sorted.reduce((a, b) => a + b, 0) / sorted.length : 0,
    dropped: sorted.filter((d) => d > droppedAboveMs).length,
    droppedAboveMs,
    longTasks: o.longTasks,
    longTasksObserved: o.longTasksObserved,
    histogram: histogram(sorted, o.binMs, o.maxMs),
    binMs: o.binMs,
    since: o.since,
    until: o.until,
  }
}

/** "16.7 ms", "3.2 ms". */
export function formatMs(ms: number): string {
  return `${ms.toFixed(1)} ms`
}

export function createFrameSampler(options: FrameSamplerOptions = {}): FrameSampler {
  const size = options.window ?? 600
  const budgetMs = options.budgetMs ?? 1000 / 60
  const binMs = options.binMs ?? 2
  const maxMs = options.maxMs ?? 40
  const refreshMs = options.refreshMs ?? 250
  const raf = options.raf ?? ((cb) => requestAnimationFrame(cb))
  const caf = options.caf ?? ((id) => cancelAnimationFrame(id))
  const now = options.now ?? (() => Date.now())
  const setTimer = options.setTimer ?? ((cb, ms) => setInterval(cb, ms))
  const clearTimer = options.clearTimer ?? ((id) => clearInterval(id as ReturnType<typeof setInterval>))
  const observe = options.observe ?? true

  // A ring of the last `size` gaps; `head` is the next slot, `count` how many are filled.
  const ring = new Float64Array(size)
  let head = 0
  let count = 0
  let last = -1
  let frame = 0
  let timer: unknown = null
  let observer: PerformanceObserver | null = null
  let longTasks = 0
  let observed = false
  let since = now()
  let running = false
  const listeners = new Set<() => void>()
  let current: FrameReport = summarize([], { budgetMs, binMs, maxMs, longTasks: 0, longTasksObserved: false, since, until: since })

  function gaps(): number[] {
    const out: number[] = new Array(count)
    const start = (head - count + size) % size
    for (let i = 0; i < count; i++) out[i] = ring[(start + i) % size]!
    return out
  }

  function refresh() {
    current = summarize(gaps(), { budgetMs, binMs, maxMs, longTasks, longTasksObserved: observed, since, until: now() })
    for (const cb of listeners) cb()
  }

  // Each start owns a generation: when caf cannot reach a frame the raf issued — a
  // popout's frame cancelled through the opener — the stale callback must die on arrival,
  // and a stop-start replay (StrictMode's, among others) must not revive it, or every
  // restart would stack another loop reading half gaps.
  let generation = 0
  const tickFor = (mine: number) => {
    const tick = (t: number) => {
      if (mine !== generation || !running) return
      if (last >= 0) {
        ring[head] = t - last
        head = (head + 1) % size
        if (count < size) count++
      }
      last = t
      frame = raf(tick)
    }
    return tick
  }

  return {
    get running() {
      return running
    },
    start() {
      if (running) return
      running = true
      last = -1
      since = now()
      frame = raf(tickFor(++generation))
      timer = setTimer(refresh, refreshMs)
      // The spec ignores an unsupported entry type with a console warning, not an exception,
      // so observe() returning says nothing: ask the support list, or a browser without long
      // tasks would report a measured zero.
      if (observe && typeof PerformanceObserver !== "undefined" && PerformanceObserver.supportedEntryTypes?.includes("longtask")) {
        try {
          observer = new PerformanceObserver((list) => {
            longTasks += list.getEntries().length
          })
          observer.observe({ type: "longtask", buffered: false })
          observed = true
        } catch {
          observer = null
          observed = false
        }
      }
    },
    stop() {
      if (!running) return
      running = false
      generation++
      caf(frame)
      if (timer !== null) clearTimer(timer)
      timer = null
      observer?.disconnect()
      observer = null
      refresh()
    },
    reset() {
      head = 0
      count = 0
      last = -1
      longTasks = 0
      since = now()
      refresh()
    },
    report: () => current,
    subscribe(cb) {
      listeners.add(cb)
      return () => listeners.delete(cb)
    },
  }
}

:root {
  --stale: oklch(0.52 0.13 75);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dark {
  --stale: oklch(0.8 0.15 80);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-accessibility="hyperlegible"], [data-accessibility="hyperlegible"] {
  --tradecn-font-sans: var(--tradecn-font-accessible);
  --tradecn-font-mono: var(--tradecn-font-accessible-mono);
}