import { X, RefreshCw, ChevronRight } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import type { Session } from '@/types'

interface ActiveBatchBannerProps {
  treeId: string
  sessions: Session[]
  onDismiss: () => void
}

export function ActiveBatchBanner({ treeId, sessions, onDismiss }: ActiveBatchBannerProps) {
  const navigate = useNavigate()

  // Find the most recently started in-progress batch
  const inProgressSessions = sessions.filter(s => s.started_at && !s.completed_at && s.batch_id)
  if (inProgressSessions.length === 0) return null

  const batchId = inProgressSessions[0].batch_id!

  // Count all sessions in this batch
  const batchSessions = sessions.filter(s => s.batch_id === batchId)
  const completed = batchSessions.filter(s => s.completed_at).length
  const total = batchSessions.length

  return (
    <div className="flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
      <RefreshCw className="h-4 w-4 shrink-0 animate-spin text-amber-400" />
      <p className="flex-1 text-[0.875rem] text-amber-300">
        Batch in progress · <span className="font-medium">{completed} of {total}</span> targets complete
      </p>
      <button
        onClick={() => navigate(`/flows/${treeId}/batches/${batchId}`)}
        className="flex items-center gap-1 text-[0.8125rem] font-medium text-amber-400 hover:text-amber-300 transition-colors"
      >
        View Batch
        <ChevronRight className="h-3.5 w-3.5" />
      </button>
      <button
        onClick={onDismiss}
        className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
      >
        <X className="h-3.5 w-3.5" />
      </button>
    </div>
  )
}