Latency Heartbeat

import { LatencyHeartbeat } from '@/components/ui/latency-heartbeat'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { LatencyHeartbeat } from '@/components/ui/latency-heartbeat'

/** Deterministic Meridian streaming run, settle, degrade past warnAt, recover. */
type Sample = { ms: number; streaming: boolean; holdMs: number }

const SEQUENCE: Sample[] = [
  { ms: 48, streaming: true, holdMs: 900 },
  { ms: 62, streaming: true, holdMs: 800 },
  { ms: 91, streaming: true, holdMs: 800 },
  { ms: 118, streaming: true, holdMs: 900 },
  { ms: 340, streaming: true, holdMs: 1000 },
  { ms: 720, streaming: true, holdMs: 900 },
  { ms: 1240, streaming: true, holdMs: 1200 },
  { ms: 1840, streaming: true, holdMs: 1400 },
  { ms: 980, streaming: true, holdMs: 1000 },
  { ms: 410, streaming: true, holdMs: 900 },
  { ms: 156, streaming: true, holdMs: 1000 },
  { ms: 88, streaming: true, holdMs: 1200 },
  { ms: 72, streaming: false, holdMs: 2000 },
]

export default function LatencyHeartbeatDemo() {
  const reduced = useReducedMotion()
  const [index, setIndex] = useState(0)
  const sample = SEQUENCE[index] ?? SEQUENCE[0]!

  useEffect(() => {
    if (reduced) {
      // composed mid-stream frame under reduced motion
      setIndex(3)
      return
    }
    const id = window.setTimeout(() => {
      setIndex((i) => (i + 1) % SEQUENCE.length)
    }, sample.holdMs)
    return () => window.clearTimeout(id)
  }, [index, sample.holdMs, reduced])

  const frame = reduced
    ? { ms: 118, streaming: true }
    : { ms: sample.ms, streaming: sample.streaming }

  return (
    <div className="mx-auto flex min-h-[280px] w-full max-w-md flex-col justify-center px-4 py-16 sm:px-6">
      <div className="overflow-hidden rounded-2xl border border-border/60 bg-card">
        <div className="border-b border-border/60 px-4 py-3 sm:px-5">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
            meridian-ops · stream footer
          </p>
        </div>
        <div className="space-y-4 px-4 py-6 sm:px-5">
          <p className="text-sm leading-relaxed text-foreground">
            {frame.streaming
              ? 'Reconciling Acme Logistics charge against Xero invoice inv_2026_03_8841…'
              : 'Stream settled, refund proposal ready for review.'}
          </p>
          <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
            <LatencyHeartbeat
              ms={frame.ms}
              streaming={frame.streaming}
              warnAt={1000}
              label="latency"
            />
            <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground">
              gpt-4.1-mini
            </span>
          </div>
        </div>
      </div>
    </div>
  )
}