// App.tsx or main routing component
import React, { useEffect, ReactNode } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

import Layout from '@/components/layouts/Layout';
import LayoutLogin from '@/components/layouts/LayoutLogin';
import Home from '@/components/pages/Home';
import Login from '@/components/pages/Login';
import Servers from '@/components/pages/Servers';
import Targets from '@/components/pages/Targets';
import Templates from '@/components/pages/Templates';
import { ColorModeContext } from '@/theme/theme';
import { SetupDataProvider } from '@/context/SetupDataContext';
import { useTitle } from "@/context/TitleContext";

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

interface PageWrapperProps {
    title: string;
    children: ReactNode;
}

const PageWrapper: React.FC<PageWrapperProps> = ({ title, children }) => {
    const { setTitle } = useTitle();

    useEffect(() => {
        setTitle(title); 
    }, [title, setTitle]);

    return <>{children}</>; 
};

const App = () => {
    const [mode, setMode] = React.useState<'light' | 'dark'>('light');

    const colorMode = React.useMemo(
        () => ({
            toggleColorMode: () => {
                setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
            },
        }),
        []
    );

    const theme = React.useMemo(() => createTheme({ palette: { mode } }), [mode]);
    return (
        <ColorModeContext.Provider value={colorMode}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <SetupDataProvider>
                    <Router basename="/">
                        <Routes>
                            <Route path="/" element={<Navigate to="/login" replace />} />
                            <Route
                                path="/home"
                                element={
                                    <PageWrapper title="Dashboard">
                                        <Layout>
                                            <Home />
                                        </Layout>
                                    </PageWrapper>
                                }
                            />
                            <Route
                                path="/servers"
                                element={
                                    <PageWrapper title="Servers">
                                        <Layout>
                                            <Servers />
                                        </Layout>
                                    </PageWrapper>
                                }
                            />
                            <Route
                                path="/targets"
                                element={
                                    <PageWrapper title="Targets">
                                        <Layout>
                                            <Targets />
                                        </Layout>
                                    </PageWrapper>
                                }
                            />
                            <Route
                                path="/templates"
                                element={
                                    <PageWrapper title="Templates">
                                        <Layout>
                                            <Templates />
                                        </Layout>
                                    </PageWrapper>
                                }
                            />
                            <Route
                                path="/login"
                                element={
                                    <LayoutLogin>
                                        <Login />
                                    </LayoutLogin>
                                }
                            />
                        </Routes>
                    </Router>
                </SetupDataProvider>
            </ThemeProvider>
        </ColorModeContext.Provider>
    );
};

export default App;