import { useAuth } from './hooks/useAuth'
import { useSessions } from './hooks/useSessions'
import { useChat } from './hooks/useChat'
import { LoginPage } from './components/LoginPage'
import { SessionSidebar } from './components/SessionSidebar'
import { ChatPanel } from './components/ChatPanel'
import { RightPanel } from './components/RightPanel'

function App() {
  const { user, loading: authLoading, login, logout } = useAuth()
  const { sessions, activeSessionId, createNew, switchTo, refresh } = useSessions()
  const { messages, isStreaming, sendMessage } = useChat(activeSessionId)

  if (authLoading) {
    return (
      <div className='login-page'>
        <div style={{ color: '#8888aa' }}>Loading...</div>
      </div>
    )
  }

  if (!user) {
    return <LoginPage onLogin={login} />
  }

  return (
    <div className='app-layout'>
      <SessionSidebar
        sessions={sessions}
        activeSessionId={activeSessionId}
        onSelect={(id) => switchTo(id)}
        onCreate={async () => {
          await createNew()
        }}
        onLogout={logout}
      />
      <ChatPanel
        messages={messages}
        isStreaming={isStreaming}
        onSend={sendMessage}
        sessionId={activeSessionId}
      />
      <RightPanel sessionId={activeSessionId} />
    </div>
  )
}

export default App