;; GraphQL: mutation — live createPost, likePost
(defcomp
  ()
  (~docs/page
    :title "GraphQL · Mutations"
    (p
      (~tw :tokens "text-lg text-gray-600 mb-6")
      "Mutations reach the resolver with "
      (code "op-type")
      " = "
      (code "'gql-mutation")
      ". The demo resolver returns a synthesized record. "
      "In production SX, mutations map to "
      (code "defaction")
      " via IO suspension.")
    (~docs/section
      :title "createPost"
      :id "create"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Typed variables let the client pass structured input without inlining strings.")
      (~docs/code
        :src "mutation NewPost($title: String!, $body: String!, $authorId: ID!) {\n  createPost(title: $title, body: $body, authorId: $authorId) {\n    id\n    title\n    authorId\n  }\n}")
      (form
        (~tw :tokens "space-y-3")
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#mut-create-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "mutation NewPost($title: String!, $body: String!, $authorId: ID!) { createPost(title: $title, body: $body, authorId: $authorId) { id title authorId } }")
        (label
          (~tw :tokens "block text-sm font-medium text-gray-700")
          "Variables")
        (textarea
          :name "variables"
          :rows "3"
          (~tw
            :tokens "w-full font-mono text-sm p-3 border border-gray-300 rounded-lg")
          "{:title \"Fresh take\" :body \"Bytecode FTW\" :authorId 1}")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run mutation"))
      (div
        :id "mut-create-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Response will appear here.")))
    (~docs/section
      :title "likePost"
      :id "like"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "A minimal mutation with a single argument.")
      (~docs/code :src "mutation { likePost(id: 102) { id liked } }")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#mut-like-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "mutation { likePost(id: 102) { id liked } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "mut-like-out"
        (~tw :tokens "mt-4")
        (span
          (~tw :tokens "text-gray-400 text-sm")
          "Response will appear here.")))))
