Agent Status Strip

import { AgentStatusStrip } from '@/components/ui/agent-status-strip'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import {
  AgentStatusStrip,
  type AgentStatusState,
} from '@/components/ui/agent-status-strip'

type StatusFrame = { state: AgentStatusState; step: string; holdMs: number }

const IDLE_FRAME: StatusFrame = {
  state: 'idle',
  step: 'Standing by for the next ledger close.',
  holdMs: 1600,
}

const RUNNING_FRAME: StatusFrame = {
  state: 'running',
  step: 'Reconciling 128 invoices against Xero.',
  holdMs: 3200,
}

const SEQUENCE: StatusFrame[] = [
  IDLE_FRAME,
  RUNNING_FRAME,
  {
    state: 'awaiting-approval',
    step: 'Needs sign-off on a $1,240 refund to Acme Logistics.',
    holdMs: 2800,
  },
  {
    state: 'running',
    step: 'Posting approved refund and refreshing the trial balance.',
    holdMs: 3000,
  },
  {
    state: 'idle',
    step: 'Close pack ready, no open exceptions.',
    holdMs: 2400,
  },
]

export default function AgentStatusStripDemo() {
  const reduced = useReducedMotion()
  const [index, setIndex] = useState(0)
  const current = SEQUENCE[index] ?? IDLE_FRAME

  useEffect(() => {
    if (reduced) {
      // composed running frame under reduced motion, no state walk
      setIndex(1)
      return
    }
    const hold = current.holdMs
    const id = window.setTimeout(() => {
      setIndex((i) => (i + 1) % SEQUENCE.length)
    }, hold)
    return () => window.clearTimeout(id)
  }, [index, current.holdMs, reduced])

  const frame = reduced ? RUNNING_FRAME : current

  return (
    <div className="mx-auto flex min-h-[320px] w-full max-w-3xl 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 · agent run
          </p>
        </div>
        <AgentStatusStrip
          name="meridian-ops"
          state={frame.state}
          step={frame.step}
          showTimer
          onClick={() => {
            /* demo: open run panel */
          }}
        />
        <div className="space-y-3 px-4 py-8 sm:px-5">
          <p className="text-sm font-medium tracking-tight text-foreground">
            March close, Apex Holdings control account
          </p>
          <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
            The strip sits flush in the app header while the agent walks invoices,
            pauses for human sign-off, then posts the approved refund.
          </p>
        </div>
      </div>
    </div>
  )
}