;; GraphQL: variables — live variable substitution
(defcomp
  ()
  (~docs/page
    :title "GraphQL · Variables"
    (p
      (~tw :tokens "text-lg text-gray-600 mb-6")
      "Variable references become "
      (code "(gql-var name)")
      " nodes. "
      "At execution, the executor walks the AST and substitutes bound values. "
      "The demo accepts an SX dict literal in the "
      (code "variables")
      " form field.")
    (~docs/section
      :title "Scalar variable"
      :id "scalar"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "One typed variable, used in a field argument. "
        "Change the dict on the right and click Run — the resolver receives the new value.")
      (~docs/code
        :src "query ByAuthor($author: Int!) {\n  posts(authorId: $author) {\n    title\n    body\n  }\n}\n\n# Variables (SX dict literal):\n# {:author 2}")
      (form
        (~tw :tokens "space-y-3")
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#var-scalar-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "query ByAuthor($author: Int!) { posts(authorId: $author) { title body } }")
        (label
          (~tw :tokens "block text-sm font-medium text-gray-700")
          "Variables")
        (textarea
          :name "variables"
          :rows "2"
          (~tw
            :tokens "w-full font-mono text-sm p-3 border border-gray-300 rounded-lg")
          "{:author 2}")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "var-scalar-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Result will appear here.")))
    (~docs/section
      :title "Default value"
      :id "default"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Leave the variables empty and the parser default kicks in — "
        "executed against the seed, "
        (code "id: 1")
        " resolves to Alice.")
      (~docs/code
        :src "query GetUser($id: ID = 1) {\n  user(id: $id) { name role }\n}")
      (form
        (~tw :tokens "space-y-3")
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#var-default-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "query GetUser($id: ID = 1) { user(id: $id) { name role } }")
        (label
          (~tw :tokens "block text-sm font-medium text-gray-700")
          "Variables (leave blank for default)")
        (textarea
          :name "variables"
          :rows "2"
          (~tw
            :tokens "w-full font-mono text-sm p-3 border border-gray-300 rounded-lg")
          "")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "var-default-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Result will appear here.")))
    (~docs/section
      :title "Pure SX"
      :id "parse"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "The variables payload is parsed with the same SX reader the rest of the language uses:")
      (~docs/code
        :src "(define gql-parse-vars\n  (fn (source)\n    (if (or (nil? source) (empty? source))\n      {}\n      (let ((parsed (parse source)))\n        (if (dict? parsed) parsed {})))))"))))
