import React from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Navbar } from './components/Navbar';
import { Footer } from './components/Footer';
import { Home } from './pages/Home';
import { Services } from './pages/Services';
import { Products } from './pages/Products';
import { References } from './pages/References';
import { Contact } from './pages/Contact';
import { Login } from './pages/auth/Login';
import { Register } from './pages/auth/Register';
import { ForgotPassword } from './pages/auth/ForgotPassword';
import { ResetPassword } from './pages/auth/ResetPassword';
import { Dashboard } from './pages/Dashboard';
import { Admin } from './pages/Admin';
import { Privacy } from './pages/Privacy';
import { Terms } from './pages/Terms';
import { FAQ } from './pages/FAQ';
import { ProtectedRoute } from './components/ProtectedRoute';
import { AuthProvider } from './context/AuthContext';
import ScrollToTop from './components/ScrollToTop';
import { AnalyticsTracker } from './components/AnalyticsTracker';
import { ProfileCompleter } from './components/ProfileCompleter';
import { CookieBanner } from './components/CookieBanner';

// Demo Pages
import { SweetCraving } from './pages/demos/SweetCraving';
import { BlueWave } from './pages/demos/BlueWave';
import { Steelguard } from './pages/demos/Steelguard';

// Helper component to scroll to top on route change
// TEST COMMENT TO TEST VPS UPLOAD 1
const ScrollToTopHelper = () => {
    return <ScrollToTop />;
};

const App: React.FC = () => {
    return (
        <AuthProvider>
            <Router>
                <div className="min-h-screen bg-white flex flex-col font-sans text-gray-900">
                    <ScrollToTopHelper />
                    <AnalyticsTracker />
                    <ProfileCompleter />
                    <CookieBanner />

                    <Routes>
                        {/* Main Application Routes */}
                        <Route path="/" element={<><Navbar /><main className="flex-grow"><Home /></main><Footer /></>} />
                        <Route path="/services" element={<><Navbar /><main className="flex-grow"><Services /></main><Footer /></>} />
                        <Route path="/products" element={<><Navbar /><main className="flex-grow"><Products /></main><Footer /></>} />
                        <Route path="/references" element={<><Navbar /><main className="flex-grow"><References /></main><Footer /></>} />
                        <Route path="/contact" element={<><Navbar /><main className="flex-grow"><Contact /></main><Footer /></>} />

                        {/* Info Pages */}
                        <Route path="/privacy" element={<><Navbar /><main className="flex-grow"><Privacy /></main><Footer /></>} />
                        <Route path="/terms" element={<><Navbar /><main className="flex-grow"><Terms /></main><Footer /></>} />
                        <Route path="/faq" element={<><Navbar /><main className="flex-grow"><FAQ /></main><Footer /></>} />

                        {/* Auth Routes */}
                        <Route path="/auth/login" element={<><Navbar /><main className="flex-grow"><Login /></main><Footer /></>} />
                        <Route path="/auth/register" element={<><Navbar /><main className="flex-grow"><Register /></main><Footer /></>} />
                        <Route path="/auth/forgot-password" element={<><Navbar /><main className="flex-grow"><ForgotPassword /></main><Footer /></>} />
                        <Route path="/auth/reset-password" element={<><Navbar /><main className="flex-grow"><ResetPassword /></main><Footer /></>} />

                        {/* Protected Routes */}
                        <Route
                            path="/dashboard"
                            element={
                                <ProtectedRoute>
                                    <><Navbar /><main className="flex-grow"><Dashboard /></main><Footer /></>
                                </ProtectedRoute>
                            }
                        />

                        <Route
                            path="/admin"
                            element={
                                <ProtectedRoute>
                                    <><Navbar /><main className="flex-grow"><Admin /></main><Footer /></>
                                </ProtectedRoute>
                            }
                        />

                        {/* Demo Routes - These have their own custom layouts/navbars */}
                        <Route path="/demos/sweetcraving" element={<SweetCraving />} />
                        <Route path="/demos/bluewave" element={<BlueWave />} />
                        <Route path="/demos/steelguard" element={<Steelguard />} />
                    </Routes>

                </div>
            </Router>
        </AuthProvider>
    );
};

export default App;