import { useRouteNode } from "@real-router/react";
// or
import { useRouteNode } from "@real-router/preact";
// or
import { useRouteNode } from "@real-router/solid";
// or
import { useRouteNode } from "@real-router/vue";
// or
import { useRouteNode } from "@real-router/svelte";

// Angular
import { injectRouteNode } from "@real-router/angular";

function UsersLayout() {
  const { route, previousRoute, navigator } = useRouteNode("users");

  // Component updates only on navigation within users.*
  return (
    <div>
      <h1>Users Section</h1>
      {route ? <Outlet /> : <p>Select a user</p>}
    </div>
  );
}

// At route "home"
const { route } = useRouteNode("users");
// route === undefined (node "users" is inactive)

// At route "users.list"
const { route } = useRouteNode("users");
// route === { name: "users.list", ... } (node is active)

// With useRouteNode("users"):
// - Navigation home → items — NO re-render
// - Navigation items → items.detail — NO re-render

// With useRouteNode("users"):
// - Navigation home → users.list — re-render (node became active)
// - Navigation users.list → users.view — re-render (change within node)
// - Navigation users.view → home — re-render (node became inactive)

import { useRouteNode } from "@real-router/react";

function UsersLayout() {
  const { route, navigator } = useRouteNode("users");

  if (!route) {
    // Node is inactive — can show placeholder or redirect
    return null;
  }

  return (
    <div className="users-layout">
      <nav>
        <button onClick={() => navigator.navigate("users.list")}>List</button>
        <button onClick={() => navigator.navigate("users.create")}>
          Create
        </button>
      </nav>
      <main>{/* Content based on route.name */}</main>
    </div>
  );
}

// Each Layout subscribes only to its node
function AdminLayout() {
  const { route } = useRouteNode("admin");
  // Re-renders only on changes in admin.*
  return <div>{/* ... */}</div>;
}

function SettingsLayout() {
  const { route } = useRouteNode("admin.settings");
  // Re-renders only on changes in admin.settings.*
  return <div>{/* ... */}</div>;
}

function SecuritySettings() {
  const { route } = useRouteNode("admin.settings.security");
  // Re-renders only on changes in admin.settings.security.*
  return <div>{/* ... */}</div>;
}

function UsersSection() {
  const { route, previousRoute } = useRouteNode("users");

  useEffect(() => {
    if (route && !previousRoute?.name?.startsWith("users")) {
      console.log("Entered users section");
      analytics.track("users_section_entered");
    }
  }, [route, previousRoute]);

  useEffect(() => {
    if (!route && previousRoute?.name?.startsWith("users")) {
      console.log("Left users section");
    }
  }, [route, previousRoute]);

  return route ? <UsersContent /> : null;
}

function DynamicNodeSubscription({ section }: { section: string }) {
  const { route } = useRouteNode(section);

  // Hook automatically re-subscribes when section changes
  return (
    <div>
      <p>Watching: {section}</p>
      <p>Active route: {route?.name ?? "none"}</p>
    </div>
  );
}

// Don't use useRouteNode for all routes
function Bad() {
  const { route } = useRouteNode(""); // Equivalent to useRoute
  return <div>{route?.name}</div>;
}

// Use useRoute for global subscription
function Good() {
  const { route } = useRoute();
  return <div>{route?.name}</div>;
}

// Don't check activity manually
function Bad() {
  const { route } = useRoute();
  const isUsersActive = route?.name?.startsWith("users");
  // Component re-renders on ANY navigation
}

// Use useRouteNode for optimization
function Good() {
  const { route } = useRouteNode("users");
  // route will be undefined if node is inactive
  // Component does NOT re-render on navigation outside users
}

// Don't create redundant subscriptions
function Bad() {
  const { route: route1 } = useRouteNode("users");
  const { route: route2 } = useRouteNode("users"); // Duplication!
}

// Use one hook and pass data via props/context
function Good() {
  const { route } = useRouteNode("users");
  return <ChildComponent route={route} />;
}

// Code that will break (import)
import useRouteNode from "react-router5";

// Code after migration
import { useRouteNode } from "@real-router/react";

// Code that will break (activity check)
const { route } = useRouteNode("users");
const isActive = route.name.startsWith("users"); // route was always defined

// Code after migration
const { route } = useRouteNode("users");
const isActive = !!route; // route === undefined when node is inactive
// or
if (route) {
  // node is active
}

// Code that will break (previousRoute)
if (previousRoute !== null) {
  /* ... */
}

// Code after migration
if (previousRoute) {
  /* ... */
}

// New approach — simpler
if (route) {
  // node is active, show content
}