import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useEffect } from 'react';

// Import global CSS reset first
import './index.css';

import Login from './pages/Login';
import Register from './pages/Register';

import { AuthProvider } from './providers/auth/AuthProvider';
import { ProtectedRoute } from './providers/auth/ProtectedRoute';
import { LanguageProvider } from './providers/language/LanguageContext';
import { WorkflowSelectionProvider } from './contexts/WorkflowSelectionContext';
import { FileProvider } from './contexts/FileContext';
import Home from './pages/Home/Home';

function App() {
    // Load saved theme preference and set app name on app mount
    useEffect(() => {
        // Set app name globally using configuration
        import('../config/config').then(({ getAppName }) => {
            const appName = getAppName();
            document.title = appName;
        });
        
        // Load saved theme preference
        const savedTheme = localStorage.getItem('theme');
        const prefersDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
        
        if (prefersDark) {
            document.documentElement.classList.add('dark-theme');
            document.documentElement.classList.remove('light-theme');
        } else {
            document.documentElement.classList.add('light-theme');
            document.documentElement.classList.remove('dark-theme');
        }
        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    }, []);
    return (
        <LanguageProvider>
            <AuthProvider>
                <FileProvider>
                    <WorkflowSelectionProvider>
                        <Router>
                        <Routes>
                            {/* Public route */}
                            <Route path="/login" element={<Login />} />
                            <Route path="/register" element={<Register />} />
                            <Route path="/" element={
                                <ProtectedRoute>
                                    <Home />
                                </ProtectedRoute>
                            }>
                                {/* All page routing is now handled by the Page Loader in Home.tsx */}
                                <Route path="*" element={null} />
                            </Route>
                        </Routes>
                        </Router>
                    </WorkflowSelectionProvider>
                </FileProvider>
            </AuthProvider>
        </LanguageProvider>
    );
}

export default App;