// A page written in the .wrn language. Route: /hello
//
// SSR:
//   `view` compiles to server-rendered HTML and is returned on the first request.
//
// CSR:
//   `state`, `{expr}`, and `@click` compile to hydrated behavior.
//   The browser hydrates those directives with /__wrnexus/reactive.js.
page Hello {
  layout = "public"

  // Client state seed. Without this block the page is pure SSR.
  state count = 0

  seo {
    title = "Hello from .wrn"
    description = "A WrNexus .wrn page showing SSR data, CSR hydration, cookies, sessions, and localStorage."
    canonical = "/hello"
  }

  // API calls used by this page. `ssrUsers` is bound in the initial render
  // (its endpoint lives in app/api/users/ssr.ts); `csrUsers` is bound after
  // hydration in the browser (app/api/users/csr.ts). Both just call the same
  // users endpoint shape, so the response handling looks the same.
  apis {
    ssrUsers GET /api/users/ssr {
      response {
        const visits = Number(cookies.get("hello_visits") ?? "0") + 1
        cookies.set("hello_visits", String(visits), { sameSite: "Lax" })
        session.set("lastHelloVisit", visits)
        return `${userNames(data.users)} - visit ${visits}`
      }
    }

    csrUsers GET /api/users/csr {
      response {
        const label = localStorage.get("wrnexus.label") ?? "browser"
        session.set("lastClientLabel", label)
        return `${userNames(data.users)} - ${label}`
      }
    }
  }

  functions {
    shared function userNames(users) {
      return users.map((user) => user.name).join(", ")
    }
  }

  view {
    <!-- These elements are rendered on the server first. -->
    <h1>Hello from .wrn</h1>

    <!-- `{count}` and `{count * 2}` update in the browser after hydration. -->
    <p>Hello, WrNexus. Count is {count}, doubled is {count * 2}.</p>

    <div class="data-grid">
      <div class="data-panel">
        <h2>SSR API data</h2>
        <p>This is fetched from app/api before HTML is sent.</p>
        <div class="user-list" api="ssrUsers">Loading SSR users...</div>
      </div>

      <div class="data-panel">
        <h2>CSR API data</h2>
        <p>This is fetched from app/api after hydration.</p>
        <div class="user-list" api="csrUsers">Loading CSR users...</div>
      </div>
    </div>

    <!-- `@click` becomes data-on-click and runs against the client scope. -->
    <div class="my-actions">
      <button @click="count++">Increment</button>
      <button @click="count = 0">Reset</button>
    </div>
  }

  // Page-local CSS is inlined with the server-rendered HTML.
  style {
    h1 {
      color: #2563eb;
    }

    .my-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    .data-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin: 1rem 0;
    }

    .data-panel {
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 1rem;
    }

    .data-panel h2 {
      font-size: 1rem;
      margin: 0 0 0.5rem;
    }

    .user-list {
      font-weight: 700;
      margin-top: 0.5rem;
    }

    .my-actions button {
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 0.45rem 0.7rem;
    }
  }

  realtime hello {
    on message(data) {
      console.log(data)
    }
  }
}