import React, { useState, useEffect } from 'react'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import { ChannelProvider } from './contexts/ChannelContext'
import LoginScreen from './components/LoginScreen'
import MainInterface from './components/MainInterface'
import LoadingSpinner from './components/LoadingSpinner'

function AppContent() {
  const { isAuthenticated, isLoading } = useAuth()

  if (isLoading) {
    return <LoadingSpinner />
  }

  return isAuthenticated ? <MainInterface /> : <LoginScreen />
}

function App() {
  return (
    <AuthProvider>
      <ChannelProvider>
        <div className="min-h-screen bg-gray-900">
          <AppContent />
        </div>
      </ChannelProvider>
    </AuthProvider>
  )
}

export default App