import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import ProtectedRoute from './components/ProtectedRoute'
import Layout from './components/Layout'
import Login from './pages/Login'
import Plaza from './pages/Plaza'
import AgentList from './pages/AgentList'
import History from './pages/History'
import AvailableAgents from './pages/AvailableAgents'
import AgentExecute from './pages/AgentExecute'
import AgentApply from './pages/AgentApply'
import ExternalMock from './pages/ExternalMock'
import './App.css'

function AppRoutes() {
  const { authenticated } = useAuth()

  return (
    <Routes>
      <Route 
        path="/login" 
        element={authenticated ? <Navigate to="/" replace /> : <Login />} 
      />
      <Route path="/" element={
        <ProtectedRoute>
          <Layout>
            <Plaza />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/plaza" element={
        <ProtectedRoute>
          <Layout>
            <Plaza />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/agents" element={
        <ProtectedRoute>
          <Layout>
            <AgentList />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/history" element={
        <ProtectedRoute>
          <Layout>
            <History />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/available" element={
        <ProtectedRoute>
          <Layout>
            <AvailableAgents />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/agents/execute/:appId" element={
        <ProtectedRoute>
          <Layout>
            <AgentExecute />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/agents/apply/:appId" element={
        <ProtectedRoute>
          <Layout>
            <AgentApply />
          </Layout>
        </ProtectedRoute>
      } />
      <Route path="/agents/external/:agentProId" element={
        <ProtectedRoute>
          <Layout>
            <ExternalMock />
          </Layout>
        </ProtectedRoute>
      } />
    </Routes>
  )
}

function App() {
  return (
    <AuthProvider>
      <Router
        future={{
          v7_startTransition: true,
          v7_relativeSplatPath: true,
        }}
      >
        <AppRoutes />
      </Router>
    </AuthProvider>
  )
}

export default App
