Country ticker

"use client"

import { formatNumber } from "@/lib/format"
import { Card } from "@/components/ui/card"
import { LiveIndicator } from "@/components/ui/live-indicator"
import { Ticker, type TickerItem } from "@/components/ui/ticker"

import { type CountryNow } from "../data"
import { useLiveTick } from "./live-tick"

/** The strip along the top: the busiest countries, each with how it is doing. */
export function LiveTicker({ countries }: { countries: CountryNow[] }) {
  const { frame, previous, running } = useLiveTick()
  if (!frame || !previous) return null

  // Each country's own reading, and its own change since the frame before —
  // `frame.countries` is in the order this list is in.
  const items: TickerItem[] = countries.map((country, i) => {
    const now = frame.countries[i] ?? country.sessions
    const before = previous.countries[i] ?? now
    return {
      key: country.country,
      label: country.country,
      value: now,
      delta: before === 0 ? 0 : (now - before) / before,
      format: (value) => formatNumber(value, { maximumFractionDigits: 0 }),
    }
  })

  return (
    <Card data-widget="widget-saas-live-live-ticker" className="flex-row items-center gap-4 overflow-hidden py-3">
      <LiveIndicator active={running} className="ms-4 shrink-0" />
      <Ticker items={items} scrolling className="min-w-0 pe-4" />
    </Card>
  )
}

/**
 * What /live reads. The floor is `db.sessions`' most recent hour — real
 * countries, real latencies — and the ticking on top of it is a seeded series
 * generated here, once, from `seeded("live")` against REFERENCE_DATE. Nothing
 * reads a clock and nothing calls Math.random, so the frame the server sends is
 * the frame the browser hydrates, and the page reads the same every time it is
 * opened.
 *
 * The islands never call any of this. A generator is a function and a function
 * cannot cross into the browser, so the whole series is generated here and
 * handed over as plain rows; the client walks it on an interval. That is also
 * what keeps `db` on the server, where it belongs.
 */
import { getInitials } from "@/lib/format"
import { db, REFERENCE_DATE, seeded, type Member, type Session } from "@/lib/sample-data"

const SESSIONS = db.sessions.all()

/** How many readings the page walks before it comes round again. */
export const FRAMES = 90

/** How long a reading stands, in milliseconds. */
export const TICK_MS = 3000

/** What p95 the page treats as its objective; anything above it is a miss. */
export const SLO_MS = 400

const LATEST = Math.max(...SESSIONS.map((row) => row.at.getTime()))
const CURRENT_HOUR = SESSIONS.filter((row) => row.at.getTime() === LATEST)

export type CountryNow = {
  country: string
  region: Session["region"]
  sessions: number
  p95Ms: number
  errorRate: number
}

const BY_COUNTRY: CountryNow[] = [...CURRENT_HOUR]
  .map(({ country, region, sessions, p95Ms, errorRate }) => ({
    country,
    region,
    sessions,
    p95Ms,
    errorRate,
  }))
  .sort((a, b) => b.sessions - a.sessions)

/** The most recent hour, country by country, busiest first. */
export function countriesNow(): CountryNow[] {
  return BY_COUNTRY
}

/** How many countries the two panels name. */
export const SHOWN_COUNTRIES = 8

export type LiveFrame = {
  sessions: number
  eventsPerMin: number
  p95Ms: number
  /** A percentage, not a ratio: this is what the tile prints. */
  errorRate: number
  /**
   * Sessions in each of the countries `countriesNow().slice(0, SHOWN_COUNTRIES)`
   * names, in that order. A country drifts on its own walk rather than sharing
   * the platform's, or a strip of eight would print the same change eight times.
   */
  countries: number[]
}

const BASE = {
  sessions: CURRENT_HOUR.reduce((total, row) => total + row.sessions, 0),
  p95Ms:
    CURRENT_HOUR.length === 0
      ? 0
      : CURRENT_HOUR.reduce((total, row) => total + row.p95Ms * row.sessions, 0) /
        Math.max(1, CURRENT_HOUR.reduce((total, row) => total + row.sessions, 0)),
  errorRate:
    CURRENT_HOUR.length === 0
      ? 0
      : CURRENT_HOUR.reduce((total, row) => total + row.errorRate * row.sessions, 0) /
        Math.max(1, CURRENT_HOUR.reduce((total, row) => total + row.sessions, 0)),
}

// Events are not a column anywhere, so they are a rule over one that is: a
// session raises about this many events a minute while it is open.
const EVENTS_PER_SESSION = 2.4

/** The four measures a tile prints; `countries` is the strip's, not a tile's. */
export type LiveMeasure = Exclude<keyof LiveFrame, "countries">

const SHOWN = BY_COUNTRY.slice(0, SHOWN_COUNTRIES)

/** A bounded random walk: each step nudges the last one, and never runs away. */
const step = (rand: () => number, from: number, size: number, bound: number) =>
  Math.max(-bound, Math.min(bound, from + (rand() - 0.5) * size))

/**
 * The readings the page walks. Each frame drifts from the last rather than
 * being drawn fresh, so the numbers wander the way a live gauge does instead of
 * jumping; the walk is bounded, so nothing ever runs away.
 */
const FRAME_SERIES: LiveFrame[] = (() => {
  const rand = seeded("live")
  let drift = 0
  const local = SHOWN.map(() => 0)

  return Array.from({ length: FRAMES }, () => {
    drift = step(rand, drift, 0.06, 0.18)
    const load = 1 + drift
    for (let i = 0; i < local.length; i++) local[i] = step(rand, local[i], 0.09, 0.22)

    return {
      sessions: Math.round(BASE.sessions * load),
      eventsPerMin: Math.round(BASE.sessions * load * EVENTS_PER_SESSION),
      // Latency follows the load, and a little harder than linearly: a busy
      // minute is a slow minute.
      p95Ms: Math.round(BASE.p95Ms * (1 + drift * 1.6) + rand() * 24),
      errorRate: Math.round((BASE.errorRate * (1 + drift * 2) + rand() * 0.004) * 1000) / 10,
      // A country carries the platform's drift and a wander of its own, so two
      // countries never move by the same percentage twice.
      countries: SHOWN.map((country, i) => Math.round(country.sessions * (load + local[i]))),
    }
  })
})()

/** Every reading, in order. The client walks it; it never generates its own. */
export function liveFrames(): LiveFrame[] {
  return FRAME_SERIES
}

export type LiveRow = {
  id: string
  text: string
  tone: "success" | "warning" | "danger" | "info" | "neutral"
  at: Date
}

/** How many rows the feed holds. */
export const FEED_ROWS = 7

const FEED_SPACING_MS = 12_000

type Line = { text: (rand: () => number) => string; tone: LiveRow["tone"]; weight: number }

// The vocabulary of a live feed: what a platform actually says about itself.
// Each line is written from the rows the page already shows, so nothing here is
// a number nobody could check.
const LINES: Line[] = [
  { text: (rand) => `Order paid · $${(40 + rand() * 900).toFixed(2)}`, tone: "success", weight: 0.26 },
  { text: () => "Trial started", tone: "success", weight: 0.1 },
  { text: (rand) => `Deploy ${sha(rand)} finished`, tone: "info", weight: 0.12 },
  { text: (rand) => `Signup from ${country(rand)}`, tone: "info", weight: 0.16 },
  { text: (rand) => `p95 crossed ${SLO_MS} ms in ${country(rand)}`, tone: "warning", weight: 0.14 },
  { text: () => "Rate limit hit · api-gateway · 429", tone: "warning", weight: 0.08 },
  { text: (rand) => `Webhook delivery failed · attempt ${1 + Math.floor(rand() * 4)} of 5`, tone: "danger", weight: 0.08 },
  { text: () => "Cache warmed · search index", tone: "neutral", weight: 0.06 },
]

const SHA_CHARS = "0123456789abcdef"

function sha(rand: () => number): string {
  return Array.from({ length: 7 }, () => SHA_CHARS[Math.floor(rand() * SHA_CHARS.length)]).join("")
}

function country(rand: () => number): string {
  return BY_COUNTRY[Math.floor(rand() * BY_COUNTRY.length)]?.country ?? "the United States"
}

/**
 * The rows the feed walks. The first `FEED_ROWS` are stamped back from
 * REFERENCE_DATE so the page opens on a feed that has been running; everything
 * after them is stamped at REFERENCE_DATE, because a row that has just arrived
 * arrived now.
 */
const FEED_SERIES: LiveRow[] = (() => {
  const rand = seeded("live-feed")
  const total = LINES.reduce((sum, line) => sum + line.weight, 0)

  return Array.from({ length: FRAMES }, (_, index) => {
    let ticket = rand() * total
    let line = LINES[LINES.length - 1]
    for (const candidate of LINES) {
      ticket -= candidate.weight
      if (ticket < 0) {
        line = candidate
        break
      }
    }

    return {
      id: `live_${String(index + 1).padStart(3, "0")}`,
      text: line.text(rand),
      tone: line.tone,
      at: new Date(REFERENCE_DATE.getTime() - Math.max(0, FEED_ROWS - 1 - index) * FEED_SPACING_MS),
    }
  })
})()

/** Every row the feed will show, in the order it will show them. */
export function liveRows(): LiveRow[] {
  return FEED_SERIES
}

/** The bell's contents: the newest notifications, unread first in the panel. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

function ownerRow(): Member {
  return db.members.all().find((member) => member.role === "owner") ?? db.members.all()[0]
}

/** The person looking at the page: whoever owns this workspace. */
export function currentUser() {
  const owner = ownerRow()
  return { name: owner.name, email: owner.email, initials: getInitials(owner.name), avatarUrl: owner.avatarUrl }
}

const STAMP = new Intl.DateTimeFormat("en-US", {
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "UTC",
})

/** What the page is measuring against, as a line under the title. */
export function lastUpdated(): string {
  return `The hour to ${STAMP.format(REFERENCE_DATE)} UTC · ${SLO_MS} ms objective`
}

"use client"

import * as React from "react"

import { useInterval } from "@/hooks/use-interval"
import { useReducedMotion } from "@/hooks/use-reduced-motion"

import { type LiveFrame } from "../data"

type Tick = { frames: LiveFrame[]; index: number; running: boolean }

const TickContext = React.createContext<Tick>({ frames: [], index: 0, running: false })

/** Whether the document is currently on screen. False on the server, where it is not. */
function useHidden(): boolean {
  const [hidden, setHidden] = React.useState(false)

  React.useEffect(() => {
    const read = () => setHidden(document.hidden)
    read()
    document.addEventListener("visibilitychange", read)
    return () => document.removeEventListener("visibilitychange", read)
  }, [])

  return hidden
}

export type LiveTickProviderProps = {
  /** Every reading, generated once on the server. The client only walks it. */
  frames: LiveFrame[]
  /** Milliseconds a reading stands for. */
  every: number
  /**
   * Hold the clock without a box of its own. On the page the box is the column
   * the panels stack in, and the node a `[data-motion="reduced"]` above it is
   * heard at; a panel drawn alone — one widget — is the whole tree, so the
   * clock wraps nothing and listens to the document instead.
   */
  bare?: boolean
  children: React.ReactNode
}

/**
 * The one clock on the page.
 *
 * Every panel that ticks reads the same index from here, so the tiles, the
 * strip and the sparklines can never disagree about what minute it is — which
 * two panels each running their own interval eventually would. It walks a
 * series the server generated; nothing is drawn here, so the page is the same
 * page every time it is opened. It stops when nobody is watching: a hidden tab
 * or a reader who has asked for less motion parks it on the frame it is on.
 */
export function LiveTickProvider({ frames, every, bare = false, children }: LiveTickProviderProps) {
  const root = React.useRef<HTMLDivElement | null>(null)
  const [index, setIndex] = React.useState(0)
  const hidden = useHidden()
  const reduced = useReducedMotion(root)
  const running = !hidden && !reduced && frames.length > 1

  useInterval(() => setIndex((current) => (current + 1) % frames.length), running ? every : null)

  const value = React.useMemo(() => ({ frames, index, running }), [frames, index, running])
  const clock = <TickContext.Provider value={value}>{children}</TickContext.Provider>
  if (bare) return clock

  return (
    <div
      ref={root}
      data-slot="live-tick"
      className="flex flex-col gap-6"
      data-running={running || undefined}
    >
      {clock}
    </div>
  )
}

/** The reading being shown, and whether it is still moving. */
export function useLiveTick(): { frame: LiveFrame | undefined; previous: LiveFrame | undefined; running: boolean } {
  const { frames, index, running } = React.useContext(TickContext)
  return {
    frame: frames[index],
    // The frame before this one, wrapping, so a delta always has something to
    // be measured against — including on the first one.
    previous: frames[(index - 1 + frames.length) % Math.max(1, frames.length)],
    running,
  }
}

/** The readings up to and including the current one, for a sparkline. */
export function useLiveWindow(size: number): LiveFrame[] {
  const { frames, index } = React.useContext(TickContext)
  return React.useMemo(() => {
    if (frames.length === 0) return []
    return Array.from({ length: size }, (_, step) => {
      const at = index - (size - 1 - step)
      return frames[((at % frames.length) + frames.length) % frames.length]
    })
  }, [frames, index, size])
}