import * as React from 'react'
import { useState } from 'react'
import { getSlowOperations } from '../bootstrap/state.js'
import { Text, useInterval } from '@anthropic/ink'

// Show DevBar for dev builds or all ants
function shouldShowDevBar(): boolean {
  return (
    process.env.NODE_ENV === 'development' || process.env.USER_TYPE === 'ant'
  )
}

export function DevBar(): React.ReactNode {
  const [slowOps, setSlowOps] =
    useState<
      ReadonlyArray<{
        operation: string
        durationMs: number
        timestamp: number
      }>
    >(getSlowOperations)

  useInterval(
    () => {
      setSlowOps(getSlowOperations())
    },
    shouldShowDevBar() ? 500 : null,
  )

  // Only show when there's something to display
  if (!shouldShowDevBar() || slowOps.length === 0) {
    return null
  }

  // Single-line format so short terminals don't lose rows to dev noise.
  const recentOps = slowOps
    .slice(-3)
    .map(op => `${op.operation} (${Math.round(op.durationMs)}ms)`)
    .join(' · ')

  return (
    <Text wrap="truncate-end" color="warning">
      [ANT-ONLY] slow sync: {recentOps}
    </Text>
  )
}