import { useQuery } from '@tanstack/react-query'
import { Route, Routes } from 'react-router-dom'
import { getAuthStatus } from './api/client'
import Connect from './pages/Connect'
import Feed from './pages/Feed'
import Channels from './pages/Channels'
import ChannelVideos from './pages/ChannelVideos'
import VideoPage from './pages/VideoPage'
import Categories from './pages/Categories'
import './App.css'

function App() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['auth-status'],
    queryFn: getAuthStatus,
  })

  if (isLoading) {
    return (
      <div className="app">
        <p>Загрузка...</p>
      </div>
    )
  }

  if (isError) {
    return (
      <div className="app">
        <p className="error">Backend недоступен</p>
      </div>
    )
  }

  if (!data?.authenticated) {
    return (
      <div className="app">
        <Connect />
      </div>
    )
  }

  return (
    <div className="app">
      <Routes>
        <Route path="/" element={<Feed />} />
        <Route path="/channels" element={<Channels />} />
        <Route path="/channels/:channelId/videos" element={<ChannelVideos />} />
        <Route path="/video/:youtubeVideoId" element={<VideoPage />} />
        <Route path="/categories" element={<Categories />} />
      </Routes>
    </div>
  )
}

export default App