import { atom, useAtom } from "jotai";
import { atomWithStorage } from "jotai/utils";
import { useEffect } from "react";
import { lazy } from "react";
import { DengiCaching } from "./trash/dengiCashingSystem";
import { ifstyle } from "./trash/helpers";
import { LoginPage } from "./pages/LoginPage";
import { DX4App } from "./pages/DX4AppPage";
export const API_BASE_URL = "http://192.168.3.10:8321/api.php";

const classIDAtom = atomWithStorage("class-id", "");
const adminAtom = atomWithStorage("admin-id", "");

const pickmeModeAtom = atomWithStorage("pickmeMode", false);

const EditorPage = lazy(() => import("./pages/editor"));
const TestPage = lazy(() => import("./pages/test"));


const dengi_cash = new DengiCaching();

// KATAMAZ DENGI ROUTER 4 PRO MAX ULTIMATE
// 💀💀
// PROS - vrode raboatat,
//        too simple, lightweight, stupidly fast
//             (beacause you basicly download entire site, lol)
// CONS - shit
function firstPathSegment(path) {
  const m = path.match(/^\/?([^/]+)/);
  return m ? m[1] : "";
}
const secondPathSegment = (p) => p.replace(/^\/?[^/]+/, "").replace(/^\/+/, "");

const routeAtom = atom("/");
const basePageProps = {
  // atoms
  classIDAtom,
  adminAtom,
  routeAtom,

  // fucntions
  setsetRoute,
  secondPathSegment,
  ifstyle,

  // constants
  API_BASE_URL,

  // caching
  dengi_cash,

  // etc
  pickmeModeAtom, // <3
};
const pages = {
  "/": <LoginPage {...basePageProps} />,
  "/app": <DX4App {...basePageProps} />,
  "/exit": <ExitPage {...basePageProps} />,
  "/editor": <EditorPage {...basePageProps} />,
  "/test": <TestPage />,
};

let changeAnchor = true;
let defaultAnchor = document.location.hash.substring(1);

// lol 💀
function setsetRoute(setRoute, path) {
  changeAnchor = true;
  setRoute(path);
  document.location.hash = path;
}

export default function DX4() {
  const [route, _setRoute] = useAtom(routeAtom);
  useEffect(() => {
    if (
      document.location.hash &&
      document.location.hash.substring(1) !== route
    ) {
      _setRoute(document.location.hash.substring(1));
    }
    window.addEventListener("load", () => {
      if (defaultAnchor == "" || defaultAnchor == "/") {
        document.location.hash = defaultAnchor;
      }
    });
  }, [route, _setRoute]);
  window.addEventListener("hashchange", () => {
    if (document.location.hash == "") {
      document.location.hash = "/";
    }
    if (changeAnchor) {
      changeAnchor = false;
      return;
    }
    _setRoute(document.location.hash.substring(1));
  });
  const page = Object.entries(pages).find(
    ([key]) => firstPathSegment(key) == firstPathSegment(route)
  );
  return (
    (page ? page[1] : false) || <ERROR404 /> || <div>some shit happened</div>
  );
}

export function ERROR404() {
  const route = useAtom(routeAtom)[0];
  return (
    <div className="flex items-center justify-center min-h-screen flex-col gap-10">
      <div className="text-6xl font-black bg-gradient-to-r from-red-400 to-pink-300 bg-clip-text text-transparent">
        404((((
      </div>
      <div>{route}</div>
    </div>
  );
}
export function ExitPage() {
  const [_userId, setUserId] = useAtom(classIDAtom);
  const setRoute = useAtom(routeAtom)[1];
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <button
        className="w-20 h-20 bg-red-500 rounded-full text-white"
        onClick={() => {
          setUserId("");
          setsetRoute(setRoute, "/");
        }}
      >
        viyti
      </button>
    </div>
  );
}