;; ---------------------------------------------------------------------------
;; Main page component — server-rendered content + client island
;; ---------------------------------------------------------------------------
(defcomp (&key
    sf-categories sf-total sf-ms
    ref-sample ref-ms
    attr-result attr-ms
    comp-source comp-ms
    routing-result routing-ms
    server-total-ms
    sf-source
    attr-detail req-attrs attr-keys)

  (div (~tw :tokens "max-w-3xl mx-auto px-4")
    (div (~tw :tokens "mb-8")
      (h2 (~tw :tokens "text-2xl font-bold text-stone-800 mb-2") "Bootstrapped Page Helpers")
      (p (~tw :tokens "text-stone-600 mb-4")
        "These functions are defined once in "
        (code (~tw :tokens "text-violet-700") "page-helpers.sx")
        " and bootstrapped to both Python ("
        (code (~tw :tokens "text-violet-700") "sx_ref.py")
        ") and JavaScript ("
        (code (~tw :tokens "text-violet-700") "sx-browser.js")
        "). The server ran them in Python during this page load. Click the button below to run the identical functions client-side in the browser — same spec, same inputs, same results."))

    ;; Server results
    (div (~tw :tokens "mb-8")
      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
        "Server Results "
        (span (~tw :tokens "text-sm font-normal text-stone-500")
          (str "(Python, " server-total-ms "ms total)")))

      (div (~tw :tokens "grid grid-cols-1 md:grid-cols-2 gap-4")

        (~page-helpers-demo/demo-result-card
          :title "categorize-special-forms"
          :ms sf-ms :theme "stone"
          :desc "Parses special-forms.sx and classifies each form by category (control flow, binding, quoting, etc)."
          (p (~tw :tokens "text-sm mb-1")
            (str sf-total " forms in "
                 (len (keys sf-categories)) " categories"))
          (map (fn (k)
            (div (str k ": " (get sf-categories k))))
            (keys sf-categories)))

        (~page-helpers-demo/demo-result-card
          :title "build-reference-data"
          :ms ref-ms :theme "stone"
          :desc "Takes raw attribute tuples and generates reference table rows with documentation hrefs."
          (p (~tw :tokens "text-sm mb-1")
            (str (len ref-sample) " attributes with detail page links"))
          (map (fn (item)
            (div (str (get item "name") " → "
                     (or (get item "href") "no detail page"))))
            ref-sample))

        (~page-helpers-demo/demo-result-card
          :title "build-attr-detail"
          :ms attr-ms :theme "stone"
          :desc "Builds a detail page data structure for a single attribute (sx-get): title, wire ID, handler status."
          (div (str "title: " (get attr-result "attr-title")))
          (div (str "wire-id: " (or (get attr-result "attr-wire-id") "none")))
          (div (str "has handler: " (if (get attr-result "attr-handler") "yes" "no"))))

        (~page-helpers-demo/demo-result-card
          :title "build-component-source"
          :ms comp-ms :theme "stone"
          :desc "Reconstructs a defcomp source definition from a component metadata dict (name, params, body)."
          (pre (~tw :tokens "bg-stone-50 p-2 rounded overflow-x-auto")
            comp-source))

        (div (~tw :tokens "rounded-lg border border-stone-200 p-4 md:col-span-2")
          (h4 (~tw :tokens "font-semibold text-stone-700 text-sm mb-1")
            "build-routing-analysis "
            (span (~tw :tokens "text-xs text-stone-400") (str routing-ms "ms")))
          (p (~tw :tokens "text-xs text-stone-500 mb-2")
            "Classifies pages as client-routable or server-only based on whether they have data dependencies.")
          (div (~tw :tokens "text-xs text-stone-600")
            (p (~tw :tokens "text-sm mb-1")
              (str (get routing-result "total-pages") " pages: "
                   (get routing-result "client-count") " client-routable, "
                   (get routing-result "server-count") " server-only"))
            (div (~tw :tokens "space-y-0.5")
              (map (fn (pg)
                (div (str (get pg "name") " → " (get pg "mode")
                         (when (not (empty? (get pg "reason")))
                           (str " (" (get pg "reason") ")")))))
                (get routing-result "pages")))))))

    ;; Client execution area — pure SX island, no JavaScript file
    (div (~tw :tokens "mb-8")
      (h3 (~tw :tokens "text-lg font-semibold text-stone-700 mb-3")
        "Client Results "
        (span (~tw :tokens "text-sm font-normal text-stone-500") "(JavaScript, sx-browser.js)"))

      (~page-helpers-demo/demo-client-runner
        :sf-source sf-source
        :attr-detail attr-detail
        :req-attrs req-attrs
        :attr-keys attr-keys))))
