Live events

"use client"

import * as React from "react"

import { LiveFeed } from "@/components/ui/live-feed"
import { LiveIndicator } from "@/components/ui/live-indicator"
import { Widget } from "@/components/ui/widget"

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

export type LiveEventsProps = {
  /** Every row the feed will show, generated on the server, in order. */
  rows: LiveRow[]
  /** Milliseconds between rows. */
  every: number
  limit: number
  /** What the stamps are measured against — the page's reference instant. */
  now: Date
}

/**
 * The feed. A function cannot cross into the browser, so the server hands over
 * the rows and the source is built here: it walks them and comes round again,
 * giving each pass its own ids so React still has a key per row.
 */
export function LiveEvents({ rows, every, limit, now }: LiveEventsProps) {
  const [source] = React.useState(() => {
    let step = 0
    return () => {
      const row = rows[step % rows.length]
      const pass = Math.floor(step / rows.length)
      step += 1
      return pass === 0 ? row : { ...row, id: `${row.id}_${pass}`, at: now }
    }
  })

  return (
    <Widget
      data-widget="widget-saas-live-live-events"
      title="Live events"
      description="Everything the platform did in the last few minutes"
      actions={<LiveIndicator />}
      className="h-full"
    >
      <LiveFeed source={source} every={every} limit={limit} now={now} />
    </Widget>
  )
}

/**
 * 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`
}