// src/pages/Home.tsx
import { Navigate, Route, Routes } from 'react-router-dom';
import Login from '../views/home/auth/Login';
import Register from '../views/home/auth/Register';
import Menu from '../views/home/menu/Menu';
import { useAppDispatch, useAppSelector } from '../redux/hooks';
import { useEffect } from 'react';
import { fetchWhoAmI } from '../redux/slices/auth';
import Missions from '../views/home/missions/Missions';
import Articles from '../views/home/articles/Articles';
import Groups from '../views/home/groups/Groups';
import Contests from '../views/home/contests/Contests';
import Group from '../views/home/group/Group';
import Contest from '../views/home/contest/Contest';
import Account from '../views/home/account/Account';
import ProtectedRoute from '../components/router/ProtectedRoute';
import { MissionsRightPanel } from '../views/home/rightpanel/Missions';
import { ArticlesRightPanel } from '../views/home/rightpanel/Articles';
import { GroupRightPanel } from '../views/home/rightpanel/group/Group';
import GroupInvite from '../views/home/groupinviter/GroupInvite';

const Home = () => {
    const jwt = useAppSelector((state) => state.auth.jwt);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(fetchWhoAmI());
    }, [jwt]);

    return (
        <div className="w-full bg-liquid-background grid grid-cols-[250px,1fr,250px] divide-x-[1px] divide-liquid-lighter">
            <div className="min-h-screen">
                <Menu />
            </div>
            <div className="h-screen">
                <Routes>
                    <Route element={<ProtectedRoute />}>
                        <Route path="account/*" element={<Account />} />
                        <Route
                            path="group-invite/*"
                            element={<GroupInvite />}
                        />
                        <Route path="group/:groupId/*" element={<Group />} />
                        <Route path="groups/*" element={<Groups />} />
                    </Route>

                    <Route path="login" element={<Login />} />
                    <Route path="register" element={<Register />} />
                    <Route path="missions/*" element={<Missions />} />
                    <Route path="articles/*" element={<Articles />} />
                    <Route path="contests/*" element={<Contests />} />
                    <Route path="contest/:contestId/*" element={<Contest />} />
                    <Route
                        path="*"
                        element={<Navigate to="/home/account" replace />}
                    />
                </Routes>
            </div>
            {
                <Routes>
                    <Route path="articles/*" element={<ArticlesRightPanel />} />
                    <Route path="missions/*" element={<MissionsRightPanel />} />
                    <Route
                        path="group/:groupId/*"
                        element={<GroupRightPanel />}
                    />
                </Routes>
            }
        </div>
    );
};

export default Home;