'use client'
import { useT } from '@/contexts/LangContext'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import { styled } from '@mui/material/styles'
import MuiTimeline from '@mui/lab/Timeline'
import TimelineItem from '@mui/lab/TimelineItem'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineDot from '@mui/lab/TimelineDot'
import type { TimelineProps } from '@mui/lab/Timeline'
import type { AgentActivity } from './types'
import { ACTIVITY_ICONS } from './toolActivityMap'

const Timeline = styled(MuiTimeline)<TimelineProps>({
  paddingLeft: 0,
  paddingRight: 0,
  '& .MuiTimelineItem-root': {
    width: '100%',
    '&:before': { display: 'none' },
  },
})

const AgentActivityCard = ({ activities, viewAllHref }: { activities: AgentActivity[]; viewAllHref?: string }) => {
  const t = useT()
  return (
    <Card>
      <CardHeader
        title={t.dashboard.agentActivity}
        titleTypographyProps={{ variant: 'h6' }}
        avatar={<i className='ri-robot-line text-info-main text-xl' />}
        action={
          viewAllHref && (
            <Button component='a' href={viewAllHref} size='small'
              endIcon={<i className='ri-arrow-right-line' />} sx={{ fontSize: '0.72rem' }}>
              {t.common.viewAll}
            </Button>
          )
        }
      />
      <CardContent className='pt-0' sx={{ overflowY: 'auto', maxHeight: 260 }}>
        <Timeline>
          {activities.slice(0, 6).map((activity, i) => (
            <TimelineItem key={activity.id}>
              <TimelineSeparator>
                <TimelineDot color={activity.color} sx={{ my: 0.5, p: 0.5 }}>
                  <i className={ACTIVITY_ICONS[activity.activityType ?? 'document'] ?? ''} style={{ fontSize: '0.75rem' }} />
                </TimelineDot>
                {i < Math.min(activities.length, 6) - 1 && <TimelineConnector />}
              </TimelineSeparator>
              <TimelineContent sx={{ py: 0, px: 2, pb: 2 }}>
                <div className='flex items-start justify-between gap-2'>
                  <div>
                    <Typography variant='body2' className='font-medium' color='text.primary'>
                      {activity.action}
                    </Typography>
                    {activity.matter && (
                      <Typography variant='caption' color='text.secondary'>
                        {activity.matter}
                      </Typography>
                    )}
                  </div>
                  <Typography variant='caption' color='text.disabled' className='whitespace-nowrap shrink-0'>
                    {activity.timestamp}
                  </Typography>
                </div>
              </TimelineContent>
            </TimelineItem>
          ))}
        </Timeline>
      </CardContent>
    </Card>
  )
}

export default AgentActivityCard
