import ContactFormModal from "@ui_kit/ContactForm";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
import dayjs from "dayjs";
import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import { ViewPage } from "./pages/ViewPublicationPage";
import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import Landing from "./pages/Landing/Landing";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import { Result } from "./pages/ResultPage/Result";
import { ResultSettings } from "./pages/ResultPage/ResultSettings";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import Main from "./pages/main";
import EditPage from "./pages/startPage/EditPage";
import { clearAuthToken, getMessageFromFetchError, useUserAccountFetcher, useUserFetcher } from "@frontend/kitui";
import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user";
import { enqueueSnackbar } from "notistack";
import PrivateRoute from "@ui_kit/PrivateRoute";

import { Restore } from "./pages/startPage/Restore";

dayjs.locale("ru");

const routeslink = [
    { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
    { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
    { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
    { path: "/result", page: <Result />, header: true, sidebar: true },
    { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
] as const;

export default function App() {
    const userId = useUserStore((state) => state.userId);
    const location = useLocation();
    const navigate = useNavigate();

    useUserFetcher({
        url: `https://hub.pena.digital/user/${userId}`,
        userId,
        onNewUser: setUser,
        onError: (error) => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) {
                enqueueSnackbar(errorMessage);
                clearUserData();
                clearAuthToken();
            }
        },
    });

    useUserAccountFetcher({
        url: "https://squiz.pena.digital/customer/account",
        userId,
        onNewUserAccount: setUserAccount,
        onError: (error) => {
            const errorMessage = getMessageFromFetchError(error);
            if (errorMessage) {
                enqueueSnackbar(errorMessage);
                clearUserData();
                clearAuthToken();
                navigate("/signin");
            }
        },
    });

    if (location.state?.redirectTo)
        return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;

    return (
        <>
            <ContactFormModal />
            {location.state?.backgroundLocation && (
                <Routes>
                    <Route path="/signin" element={<SigninDialog />} />
                    <Route path="/signup" element={<SignupDialog />} />
                    <Route path="/restore" element={<Restore />} />
                </Routes>
            )}
            <Routes location={location.state?.backgroundLocation || location}>
                <Route path="/" element={<Landing />} />
                <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
                <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
                <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
                <Route element={<PrivateRoute />}>
                    {routeslink.map((e, i) => (
                        <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
                    ))}

                    <Route path="edit" element={<EditPage />} />
                    <Route path="crop" element={<ImageCrop />} />
                    <Route path="/view" element={<ViewPage />} />
                </Route>
            </Routes>
        </>
    );
}