import { Link, useParams } from 'react-router'
import { useOne } from '@refinedev/core'
import { Alert, Button, Card, CardContent, DetailList, PageHeader, PageState } from './lib/ui.jsx'
import { useTitle } from './lib/hooks.js'

function PendingOrError({ pending, error, children }) {
  if (pending) return <PageState pending />
  if (error) return <Alert variant="destructive">{error.message}</Alert>
  return children
}

export function AttemptDetail() {
  const { id } = useParams()
  const { result, error, isPending } = useOne({ resource: 'attempts', id, queryOptions: { retry: false } })
  const attempt = result
  useTitle('CreatorHub · Attempt 详情')
  return (
    <PendingOrError pending={isPending} error={error}>
      {attempt ? (
        <div>
          <PageHeader title="Attempt 详情" description={<span className="anywhere">{attempt.id}</span>} />
          <Card>
            <CardContent className="space-y-4">
              <DetailList rows={[
                ['结果', attempt.outcome || '执行中'],
                ['开始', new Date(attempt.started_at).toLocaleString('zh-CN')],
                ['环境 / 出口 / 绑定版本', <span className="anywhere">{attempt.browser_env_alias || '未记录'} · {attempt.network_exit_id || '未记录'} · {attempt.binding_version || '未记录'}</span>],
              ]} />
              <div className="flex flex-wrap gap-3">
                <Button as={Link} to={`/tasks/${encodeURIComponent(attempt.task_id)}`}>返回任务</Button>
                <Button as={Link} to={`/audit?attempt_id=${encodeURIComponent(attempt.id)}`}>查看审计</Button>
                {attempt.browser_env_alias ? <Button as={Link} to={`/browsers/${encodeURIComponent(attempt.browser_env_alias)}`}>查看环境</Button> : null}
                {attempt.network_exit_id ? <Button as={Link} to={`/network-exits/${encodeURIComponent(attempt.network_exit_id)}`}>查看出口</Button> : null}
              </div>
            </CardContent>
          </Card>
        </div>
      ) : null}
    </PendingOrError>
  )
}