Background Runs

import * as React from 'react'
import BackgroundRuns, { type BackgroundRun } from '@/components/ui/background-runs'

const jobs = [
  { id: 'audit', label: 'Audit authentication flows', detail: 'Reviewing 18 routes and 42 server functions', done: '18 routes reviewed, 2 issues found' },
  { id: 'tests', label: 'Run visual regression tests', detail: 'Comparing 116 documentation routes', done: '116 routes match the baseline' },
  { id: 'docs', label: 'Draft release notes', detail: 'Summarizing 24 merged pull requests', done: 'Draft ready for review' },
]

export default function Demo() {
  const [active, setActive] = React.useState(0)
  const [progress, setProgress] = React.useState(58)
  const [seconds, setSeconds] = React.useState(18)
  const finished = active >= jobs.length

  React.useEffect(() => {
    const timer = setTimeout(
      () => {
        if (finished) {
          setActive(0)
          setProgress(6)
          setSeconds(1)
        } else if (progress >= 100) {
          setActive((value) => value + 1)
          setProgress(6)
          setSeconds(1)
        } else {
          setProgress((value) => Math.min(100, value + 10))
          setSeconds((value) => value + 1)
        }
      },
      finished ? 2400 : progress >= 100 ? 250 : 220,
    )
    return () => clearTimeout(timer)
  }, [finished, progress])

  const items: BackgroundRun[] = jobs.map((job, index) => {
    if (index < active || (index === active && progress >= 100))
      return { id: job.id, label: job.label, detail: job.done, status: 'complete', updatedAt: 'Just now' }
    if (index === active)
      return { id: job.id, label: job.label, detail: job.detail, progress, status: 'running', updatedAt: `${seconds}s` }
    if (index === active + 1 && progress >= 100)
      return { id: job.id, label: job.label, detail: job.detail, progress: 2, status: 'running', updatedAt: '0s' }
    return { id: job.id, label: job.label, detail: 'Starts after the current run', status: 'queued', updatedAt: 'Queued' }
  })

  return <BackgroundRuns className="w-full max-w-lg" items={items} />
}