// App.tsx
import {BrowserRouter as Router, Routes, Route, Link, Navigate, Outlet, useNavigate} from 'react-router-dom';
import {MainPage} from "./pages/MainPage.tsx";
import {SurveyPage} from "./pages/SurveyPage.tsx";
import {DashboardPage} from "./pages/DashboardPage.tsx";
import { SurveyResultPage } from './pages/SurveyResultPage.tsx';
import { ProfessionPage } from './pages/ProfessionPage.tsx';
import React, {useEffect} from "react";
import {LoginPage} from "./pages/LoginPage.tsx";
import {UserProvider} from "./utils/users/UserProvider.tsx";
import {useUser} from "./utils/users/UseUser.ts";


export default function App() {
    return (
        <UserProvider>
            <Router>
                <Routes>

                    <Route path="/login/" element={<LoginPage />} />


                    <Route path="/dashboard/*" element={<DashboardLayout />}>
                        <Route index element={<DashboardPage />} />
                    </Route>


                    <Route path="/" element={<MainLayout />}>
                        <Route index element={<MainPage />} />
                        <Route path="/surveys/results/:scoreVariableId/" element={<SurveyResultPage />} />
                        <Route path="/surveys/professions/:professionId/" element={<ProfessionPage />} />
                        <Route path="/surveys/:surveyId/" element={<SurveyPage />} />
                    </Route>

                    <Route path="*" element={<Navigate to="/" />} />
                </Routes>
            </Router>
        </UserProvider>
    );
}


export function DashboardLayout() {
    const { user } = useUser();
    const navigate = useNavigate();

    useEffect(() => {
        if (!user) {
            navigate("/login/")
        }
    }, [navigate, user]);
    
    if (!user){
        return null;
    }

    return (
        <>
            <div className="header">
                <h1 className="logo">Pro-Fi</h1>
            </div>
            <div className="content">
                <Outlet />
            </div>
        </>
    );
}


function MainLayout() {
    return (
        <>
            <div className="header">
                <Link to="/dashboard" className="menu-button">☰</Link>
                <h1 className="logo">Pro-Fi Test</h1>
            </div>
            <div className="content">
                <Outlet />
            </div>
        </>
    );
}