import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
import { OverviewPage } from "./pages/Overview";
import { MatchPage } from "./pages/MatchDetails";
import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";

function Layout(props: ParentProps) {
  return (
    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
      {props.children}
    </div>
  );
}

function App() {
  const [path, setPath] = createSignal(window.location.pathname);

  // Die zentrale Navigations-Funktion
  const navigate = (to) => {
    if (window.location.pathname === to) return;

    // Hier steuerst du die Transition BEVOR die URL oder das Signal angefasst wird
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        window.history.pushState({}, "", to);
        setPath(to);
      });
    } else {
      window.history.pushState({}, "", to);
      setPath(to);
    }
  };

  const handlePopstate = () => {
    if (document.startViewTransition) {
      document.documentElement.classList.add("back-navigation");
      // Der Browser hat die URL bei BACK schon geändert,
      // wir triggern die Transition und updaten das Signal synchron
      const transition = document.startViewTransition(() => {
        setPath(window.location.pathname);
      });
      transition.finished.then(() => {
        document.documentElement.classList.remove("back-navigation");
      });
    } else {
      setPath(window.location.pathname);
    }
  };

  const handleLinks = (e) => {
    const a = e.target.closest("a");
    if (a) {
      const href = a.getAttribute("href");
      if (href.startsWith("/")) {
        e.preventDefault();
        navigate(href);
      }
    }
  };
  // Hier fixen wir das Back-Button-Problem ein für alle Mal sauber!
  onMount(() => {
    window.addEventListener("click", handleLinks);
    window.addEventListener("popstate", handlePopstate);
  });
  onCleanup(() => {
    window.removeEventListener("click", handleLinks);
    window.removeEventListener("popstate", handlePopstate);
  });

  return (
    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
      <Show when={path() === "/"}>
        <OverviewPage />
      </Show>
      <Show when={path().startsWith("/match/")}>
        <MatchPage />
      </Show>
    </div>
  );
}

export default App;