'use client'
import { useEffect, useState } from 'react'
import Box from '@mui/material/Box'
import LinearProgress from '@mui/material/LinearProgress'
import Typography from '@mui/material/Typography'

const STATUS_MESSAGES = [
  'Reading your request\u2026',
  'Checking records\u2026',
  'Reviewing documents\u2026',
  'Checking regulations\u2026',
  'Preparing your answer\u2026',
]

const AgentProgressBar = ({ active, light }: { active: boolean; light?: boolean }) => {
  const [msgIndex, setMsgIndex] = useState(0)

  useEffect(() => {
    if (!active) {
      setMsgIndex(0)
      return
    }
    const id = setInterval(() => setMsgIndex(i => (i + 1) % STATUS_MESSAGES.length), 2200)
    return () => clearInterval(id)
  }, [active])

  if (!active) return null

  return (
    <Box sx={{ width: '100%' }}>
      <LinearProgress
        variant='indeterminate'
        sx={{
          borderRadius: 1,
          height: 3,
          ...(light && {
            bgcolor: 'rgba(255,255,255,0.25)',
            '& .MuiLinearProgress-bar': { bgcolor: '#fff' },
          }),
        }}
      />
      <Typography
        variant='caption'
        sx={{ mt: 0.75, display: 'block', color: light ? 'rgba(255,255,255,0.8)' : 'text.secondary' }}
      >
        {STATUS_MESSAGES[msgIndex]}
      </Typography>
    </Box>
  )
}

export default AgentProgressBar
