import { Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { RootState } from './store';
import { useAgentOrchestrator } from './hooks/useAgentOrchestrator';
import Navbar from './components/Navbar';
import Landing from './pages/Landing';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import ProjectPage from './pages/ProjectPage';
import VideoCreate from './pages/VideoCreate';
import Preview from './pages/Preview';
import Privacy from './pages/Privacy';
import Terms from './pages/Terms';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
    const { token } = useSelector((state: RootState) => state.auth);
    if (!token) return <Navigate to="/login" replace />;
    return <>{children}</>;
}

export default function App() {
    // Listen to operations coming from the AI Agent connecting to our MCP Host
    useAgentOrchestrator();

    return (
        <div className="min-h-screen bg-dark-900">
            <Navbar />
            <Routes>
                <Route path="/" element={<Landing />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="/privacy" element={<Privacy />} />
                <Route path="/terms" element={<Terms />} />
                <Route path="/dashboard" element={
                    <ProtectedRoute><Dashboard /></ProtectedRoute>
                } />
                <Route path="/project/:id" element={
                    <ProtectedRoute><ProjectPage /></ProtectedRoute>
                } />
                <Route path="/project/:projectId/create" element={
                    <ProtectedRoute><VideoCreate /></ProtectedRoute>
                } />
                <Route path="/video/:id/preview" element={
                    <ProtectedRoute><Preview /></ProtectedRoute>
                } />
            </Routes>
        </div>
    );
}