import { h, mount, activateIslands, createSignal } from "@getforma/core";
import { RouterHeader } from "./router-header";

type ShellProps = { count: number; theme: string; themeNext: string };
function RouterLayout(props: { count: number }) {
  const [count, setCount] = createSignal(props.count);
  return (
    <section
      class="native-panel router-persistent"
      aria-labelledby="router-layout-title"
    >
      <p class="native-eyebrow">PERSISTENT LAYOUT ISLAND</p>
      <h2 id="router-layout-title">Keep something here.</h2>
      <div class="native-actions">
        <button
          id="router-layout-increment"
          type="button"
          onClick={() => setCount(count() + 1)}
        >
          Add to layout
        </button>
        <output id="router-layout-count" aria-live="polite">
          {() => count()}
        </output>
      </div>
      <label for="router-layout-note">A note that stays between routes</label>
      <input id="router-layout-note" value="Keep this while navigating" />
      <p>
        Change this note and count, then switch pages. The same layout island
        stays alive; a full document load resets it.
      </p>
    </section>
  );
}
function RouterShell(props: ShellProps) {
  return (
    <div class="native-shell router-shell" data-native-theme={props.theme}>
      <a class="portal-skip" href="#router-main">
        Skip to content
      </a>
      <RouterHeader themeNext={props.themeNext} />
      <main class="native-main" id="router-main">
        <p class="native-eyebrow">SERVER LAB / NATIVE ROUTER</p>
        <p class="native-lede">
          Two real Rust pages. One persistent layout. Each destination starts
          with fresh typed server props.
        </p>
        <RouterLayout count={props.count} />
        <nav class="router-tabs" aria-label="Router demonstration">
          <a id="router-link-overview" href="/lab/router/">
            Overview
          </a>
          <a id="router-link-details" href="/lab/router/details/">
            Details
          </a>
        </nav>
        <div data-forma-outlet="route"></div>
        <section class="native-explainer">
          <h2>Try the document boundary.</h2>
          <p>
            These controls deliberately load a complete document. Ordinary links
            and request forms also work with JavaScript disabled; the counter
            buttons require JavaScript. Nothing is saved or shared with another
            visitor.
          </p>
          <div class="native-source-links">
            <a
              id="router-document-details"
              href="/lab/router/details/?count=12"
              data-no-router=""
            >
              Open Details as a document
            </a>
            <a id="router-reset" href="/lab/router/" data-no-router="">
              Reset the entire demonstration
            </a>
            <a href="/examples/native-router/">
              Download and run the router example
            </a>
            <a href="/lab/router/source/server.rs">
              Read the actual Rust handler
            </a>
            <a href="/lab/router/source/shell.tsx">Read the persistent shell</a>
            <a href="/lab/router/source/navigation.ts">
              Read the client initialization
            </a>
            <a href="/lab/native/no-js/">Compare the zero-JavaScript page</a>
          </div>
        </section>
      </main>
    </div>
  );
}
activateIslands({ RouterLayout });
mount(
  () => RouterShell({ count: 0, theme: "light", themeNext: "dark" }),
  "#app",
);