import { Route, Routes } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { Shell } from './shell/Shell'
import { Dashboard } from './screens/Dashboard'
import { Tasks } from './screens/Tasks'
import { TaskDetail } from './screens/TaskDetail'
import { Terminal } from './screens/Terminal'
import { Decisions } from './screens/Decisions'
import { Workers } from './screens/Workers'
import { Projects } from './screens/Projects'
import { Review } from './screens/Review'
import { Settings } from './screens/Settings'
import { api } from './api/client'
import type { Account } from './api/types'

/** The operator console. Auth stays in main.tsx; this is only what an
 *  authenticated operator sees. */
export function Console({
  account,
  onLogout,
  onCredentialsChanged,
}: {
  account: Account
  onLogout: () => void
  onCredentialsChanged: (username: string) => void
}) {
  const overview = useQuery({
    queryKey: ['overview'],
    queryFn: api.overview,
    refetchInterval: 5000,
  })

  return (
    <Routes>
      {/* No revision in the top bar yet. The overview carries worker builds,
          not the coordinator's, and labelling a worker build as the
          coordinator's would be a lie in the one place an operator trusts. */}
      <Route element={<Shell live={!overview.isError} />}>
        <Route index element={<Dashboard />} />
        <Route path="tasks" element={<Tasks />} />
        <Route path="tasks/:id" element={<TaskDetail />} />
        <Route path="tasks/:id/terminal" element={<Terminal />} />
        <Route path="decisions" element={<Decisions />} />
        <Route path="workers" element={<Workers />} />
        <Route path="projects" element={<Projects />} />
        <Route path="review" element={<Review />} />
        <Route
          path="settings"
          element={
            <Settings
              account={account}
              onLogout={onLogout}
              onCredentialsChanged={onCredentialsChanged}
            />
          }
        />
      </Route>
    </Routes>
  )
}