import { AlertTriangle, CheckCircle, Info } from 'lucide-react'

import { cn } from '@evobgp/ui/lib/utils'

import { StatusBadge } from '@/components/status-badge'
import type { PlatformActivityItem } from '@/lib/metrics'

const KIND_ICON = {
  job: Info,
  revision: CheckCircle,
  network: AlertTriangle,
} as const

const KIND_ICON_CLASS = {
  job: 'text-info',
  revision: 'text-success',
  network: 'text-warning',
} as const

export function AnalyticsActivityList({
  items,
  className,
}: {
  items: PlatformActivityItem[]
  className?: string
}) {
  if (items.length === 0) {
    return <p className="text-sm text-muted-foreground">Нет недавних событий</p>
  }

  return (
    <ul className={cn('space-y-3', className)}>
      {items.map((item) => {
        const Icon = KIND_ICON[item.kind]
        return (
          <li key={item.id} className="flex items-start justify-between gap-3">
            <div className="flex min-w-0 items-start gap-2.5">
              <span
                className={cn(
                  'mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-muted/60',
                  KIND_ICON_CLASS[item.kind],
                )}
              >
                <Icon className="size-3.5" />
              </span>
              <p className="text-sm leading-snug">{item.message}</p>
            </div>
            <StatusBadge status={item.status} label={item.statusLabel} />
          </li>
        )
      })}
    </ul>
  )
}