import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import type { Session } from '../../types'

interface SessionConfigProps {
  session: Session
}

export function SessionConfig({ session }: SessionConfigProps) {
  const duration = session.finishedAt
    ? Math.round((new Date(session.finishedAt).getTime() - new Date(session.startedAt).getTime()) / 1000)
    : null

  const rows = [
    { label: 'URL', value: session.url },
    { label: 'Status', value: session.status },
    { label: 'Started', value: new Date(session.startedAt).toLocaleString() },
    ...(session.finishedAt ? [{ label: 'Finished', value: new Date(session.finishedAt).toLocaleString() }] : []),
    ...(duration !== null ? [{ label: 'Duration', value: `${duration}s` }] : []),
    { label: 'States Visited', value: String(session.statesVisited) },
    { label: 'Findings', value: String(session.anomaliesFound) },
    ...(session.seed != null ? [{ label: 'Seed', value: String(session.seed) }] : []),
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm font-medium">Session Configuration</CardTitle>
      </CardHeader>
      <CardContent>
        <dl className="space-y-2">
          {rows.map(row => (
            <div key={row.label} className="flex gap-3 text-sm">
              <dt className="text-muted-foreground w-28 shrink-0">{row.label}</dt>
              <dd className="font-mono break-all">{row.value}</dd>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  )
}