import { useData } from '@jaspers-ai/sdk'
import type { ReactElement } from 'react'
import { SERVER } from './research'
import type { Setup as SetupState } from './status'

// Before the chat: the research store is a Jaspers service, reached as the account. Until the
// Terminal is signed in with Jaspers, the panel says so; after, this never shows again.

export function Setup({ setup }: { setup: SetupState | undefined }): ReactElement {
  const connections = useData('connections') as Record<string, { error: string | null }> | undefined
  const error = connections?.[SERVER]?.error ?? null
  const status = setup?.status ?? 'starting'
  return (
    <>
      <div className="ag-bar">
        <span className="ag-title">Research agents</span>
      </div>
      <div className="ag-form">
        <div className="ag-step">
          <div className="ag-label">
            <span className="ag-muted">□</span> Sign in with Jaspers
          </div>
          <div className="ag-step-body">
            {status === 'needs-sign-in' ? (
              'The research store is a Jaspers service: sign in with Jaspers in Settings to use the agents.'
            ) : status === 'error' ? (
              <span className="ag-error">The research store could not be reached{error ? `: ${error}` : '.'}</span>
            ) : (
              'Reaching the research store…'
            )}
          </div>
        </div>
      </div>
    </>
  )
}