import { useNavigate } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import type { Session } from '../../types'

interface ActiveSessionsProps {
  sessions: Session[]
}

export function ActiveSessions({ sessions }: ActiveSessionsProps) {
  const navigate = useNavigate()
  const active = sessions.filter(s => s.status === 'running')

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm font-medium">
          Active Sessions
          {active.length > 0 && (
            <Badge variant="secondary" className="ml-2 text-xs">
              {active.length}
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {active.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">
            No active sessions
          </p>
        ) : (
          <div className="space-y-3">
            {active.map(s => {
              const pct = s.anomaliesFound > 0
                ? Math.min(100, (s.statesVisited / 100) * 100)
                : (s.statesVisited / 50) * 100

              return (
                <div
                  key={s.sessionId}
                  className="cursor-pointer hover:bg-accent/50 rounded p-2 transition-colors"
                  onClick={() => navigate(`/sessions/${s.sessionId}`)}
                >
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-sm font-medium truncate max-w-[200px]">{s.url}</span>
                    <span className="text-xs text-muted-foreground ml-2">
                      {s.statesVisited} states
                    </span>
                  </div>
                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary rounded-full transition-all"
                      style={{ width: `${Math.min(100, pct)}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </CardContent>
    </Card>
  )
}