import { useEffect, useState } from 'react'
import { apiFetch } from '@core/lib/api'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'

export default function TestRunsPage() {
  const [runs, setRuns] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    setLoading(true)
    apiFetch('/api/admin-data?entity=test_runs&limit=200')
      .then(r => r.json())
      .then(json => {
        const data = Array.isArray(json?.data) ? json.data : []
        setRuns(data)
      })
      .catch(err => setError(err.message || 'Failed to load test runs'))
      .finally(() => setLoading(false))
  }, [])

  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold tracking-tight">Test Runs</h1>
      {loading && <p className="text-muted-foreground text-sm">Loading test runs…</p>}
      {error && <p className="text-destructive text-sm">{error}</p>}
      {runs.length === 0 && !loading && !error && (
        <Card>
          <CardHeader><CardTitle>No test runs</CardTitle></CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">Test runs will appear here once the test runner writes to the <code>test_runs</code> table.</p>
          </CardContent>
        </Card>
      )}
      <div className="grid gap-4">
        {runs.map((run: any) => (
          <Card key={run.id}>
            <CardContent className="p-4">
              <div className="font-medium">{run.suite || 'Unnamed run'}</div>
              <div className="text-sm text-muted-foreground">
                {run.status} · {run.total || 0} total · {run.passed || 0} passed · {run.failed || 0} failed · {run.skipped || 0} skipped
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}