import { BrowserRouter as Router, Routes, Route, Outlet, useLocation, useNavigate } from "react-router-dom";
import {useEffect, useState } from "react";

import { ToastContainer } from "react-toastify";
import {
  argbFromHex,
  themeFromSourceColor,
  applyTheme,
} from "@material/material-color-utilities";

import { AuthProvider } from "./auth/auth-provider"
import ping from "./auth/ping";
import useAuth from "./auth/auth";

import Login from "./pages/login/login"
import Register from "./pages/register/register"

import Home from "./pages/home/home"
import Dashboard from "./pages/dashboard/dashboard"
import Users from "./pages/users/users";
import Groups from "./pages/groups/groups";
import Feeds from "./pages/feeds/feeds";
import Pictures from "./pages/pictures/pictures";

import Account from "./pages/acccount/account";
import Settings from "./pages/settings/settings"


const PrivateRoute = () => {
  const { token, loading } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [checked, setChecked] = useState(false);
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    const checkAuth = async () => {
      if (!token) {
        setIsValid(false);
        setChecked(true);
        return;
      }
      const result = await ping(token);
      setIsValid(result);
      setChecked(true);
    };
    if (!loading) {
      checkAuth();
    }
  }, [token, loading]);

  if (loading || !checked) {
    return <div>Checking server availability...</div>;
  }

  if (!isValid) {
    navigate(`/login?to=${location.pathname}`);
  }
  else {
    return <Outlet />
  }
}


function App() {
  const theme = themeFromSourceColor(argbFromHex("ffddaf"));
  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  applyTheme(theme, { target: document.body, dark: systemDark });
  return (
    <AuthProvider>
    <>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick={false}
        rtl={false}
        theme={systemDark ? "light" : "dark"}
      />
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />

          <Route element={<PrivateRoute />}>
            <Route path="/" element={<Home />} />
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/users" element={<Users />} />
            <Route path="/groups" element={<Groups />} />
            <Route path="/feeds" element={<Feeds />} />
            <Route path="/pictures" element={<Pictures />} />

            <Route path="/account" element={<Account />} />
            <Route path="/settings" element={<Settings />} />
          </Route>

          <Route path="*" element={<h1 className="not-found">404 [#]<br/>Not Found</h1>} />
        </Routes>
      </Router>
    </>
    </AuthProvider>
  );
}

export default App;