Context Meter

import { ContextMeter } from '@/components/ui/context-meter'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { ContextMeter } from '@/components/ui/context-meter'

type UsageFrame = {
  used: number
  system: number
  tools: number
  history: number
}

const FIRST_FRAME: UsageFrame = {
  used: 42_800,
  system: 4_200,
  tools: 8_400,
  history: 30_200,
}

const STEPS: UsageFrame[] = [
  FIRST_FRAME,
  { used: 78_600, system: 4_200, tools: 14_100, history: 60_300 },
  { used: 128_402, system: 4_200, tools: 18_600, history: 105_602 },
  { used: 174_200, system: 4_200, tools: 22_400, history: 147_600 },
  { used: 188_900, system: 4_200, tools: 24_100, history: 160_600 },
]

const LIMIT = 200_000

export default function ContextMeterDemo() {
  const reduced = useReducedMotion()
  const [step, setStep] = useState(0)
  const frame = STEPS[step] ?? FIRST_FRAME

  useEffect(() => {
    if (reduced) {
      // settled high-water state under reduced motion
      setStep(STEPS.length - 1)
      return
    }
    const id = window.setInterval(() => {
      setStep((s) => (s + 1) % STEPS.length)
    }, 2200)
    return () => window.clearInterval(id)
  }, [reduced])

  return (
    <div className="mx-auto flex min-h-[380px] w-full max-w-lg flex-col justify-center px-4 py-16 sm:px-6">
      <div className="rounded-2xl border border-border/60 bg-card p-5 sm:p-6">
        <div className="mb-6">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
            meridian-ops · session
          </p>
          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
            Token budget for the March close run against Apex Holdings.
          </p>
        </div>
        <ContextMeter
          used={frame.used}
          limit={LIMIT}
          label="Context"
          warnAt={0.85}
          breakdown={[
            { label: 'system', tokens: frame.system },
            { label: 'tools', tokens: frame.tools },
            { label: 'history', tokens: frame.history },
          ]}
        />
      </div>
    </div>
  )
}