import React, { useState, useEffect, useCallback } from "react";
import { auth } from "./api.js";
import Landing from "./views/Landing.jsx";
import Register from "./views/Register.jsx";
import Login from "./views/Login.jsx";
import Plans from "./views/Plans.jsx";
import Dashboard from "./views/Dashboard.jsx";

// Minimaler Pfad-Router (kein react-router nötig für 5 Seiten).
function usePath() {
  const [path, setPath] = useState(window.location.pathname);
  useEffect(() => {
    const onPop = () => setPath(window.location.pathname);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  const navigate = useCallback((to) => {
    window.history.pushState({}, "", to);
    setPath(to);
    window.scrollTo(0, 0);
  }, []);
  return [path, navigate];
}

export default function App() {
  const [path, navigate] = usePath();
  const loggedIn = auth.isLoggedIn;

  // Geschützte Seiten ohne Login → Login. Login/Register mit Login → Dashboard.
  useEffect(() => {
    if (path === "/dashboard" && !loggedIn) navigate("/login");
    if ((path === "/login" || path === "/register") && loggedIn) navigate("/dashboard");
  }, [path, loggedIn, navigate]);

  if (path === "/register") return <Register navigate={navigate} />;
  if (path === "/login") return <Login navigate={navigate} />;
  if (path === "/plans") return <Plans navigate={navigate} />;
  if (path === "/dashboard") return <Dashboard navigate={navigate} />;
  return <Landing navigate={navigate} />;
}