;; SX docs utility components

(defcomp ~doc-placeholder (&key id)
  (div :id id
    (div :class "bg-stone-100 rounded p-4 mt-3"
      (p :class "text-stone-400 italic text-sm"
        "Trigger the demo to see the actual content."))))

(defcomp ~doc-oob-code (&key target-id text)
  (div :id target-id :sx-swap-oob "innerHTML"
    (div :class "not-prose bg-stone-100 rounded p-4 mt-3"
      (pre :class "text-sm whitespace-pre-wrap break-words"
        (code text)))))

(defcomp ~doc-attr-table (&key title rows)
  (div :class "space-y-3"
    (h3 :class "text-xl font-semibold text-stone-700" title)
    (div :class "overflow-x-auto rounded border border-stone-200"
      (table :class "w-full text-left text-sm"
        (thead (tr :class "border-b border-stone-200 bg-stone-100"
          (th :class "px-3 py-2 font-medium text-stone-600" "Attribute")
          (th :class "px-3 py-2 font-medium text-stone-600" "Description")
          (th :class "px-3 py-2 font-medium text-stone-600 text-center w-20" "In sx?")))
        (tbody rows)))))

(defcomp ~doc-headers-table (&key title rows)
  (div :class "space-y-3"
    (h3 :class "text-xl font-semibold text-stone-700" title)
    (div :class "overflow-x-auto rounded border border-stone-200"
      (table :class "w-full text-left text-sm"
        (thead (tr :class "border-b border-stone-200 bg-stone-100"
          (th :class "px-3 py-2 font-medium text-stone-600" "Header")
          (th :class "px-3 py-2 font-medium text-stone-600" "Value")
          (th :class "px-3 py-2 font-medium text-stone-600" "Description")))
        (tbody rows)))))

(defcomp ~doc-headers-row (&key name value description href)
  (tr :class "border-b border-stone-100"
    (td :class "px-3 py-2 font-mono text-sm whitespace-nowrap"
      (if href
        (a :href href
           :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
           :sx-swap "outerHTML" :sx-push-url "true"
           :class "text-violet-700 hover:text-violet-900 underline" name)
        (span :class "text-violet-700" name)))
    (td :class "px-3 py-2 font-mono text-sm text-stone-500" value)
    (td :class "px-3 py-2 text-stone-700 text-sm" description)))

(defcomp ~doc-two-col-row (&key name description href)
  (tr :class "border-b border-stone-100"
    (td :class "px-3 py-2 font-mono text-sm whitespace-nowrap"
      (if href
        (a :href href
           :sx-get href :sx-target "#main-panel" :sx-select "#main-panel"
           :sx-swap "outerHTML" :sx-push-url "true"
           :class "text-violet-700 hover:text-violet-900 underline" name)
        (span :class "text-violet-700" name)))
    (td :class "px-3 py-2 text-stone-700 text-sm" description)))

(defcomp ~doc-two-col-table (&key title intro col1 col2 rows)
  (div :class "space-y-3"
    (when title (h3 :class "text-xl font-semibold text-stone-700" title))
    (when intro (p :class "text-stone-600 mb-6" intro))
    (div :class "overflow-x-auto rounded border border-stone-200"
      (table :class "w-full text-left text-sm"
        (thead (tr :class "border-b border-stone-200 bg-stone-100"
          (th :class "px-3 py-2 font-medium text-stone-600" (or col1 "Name"))
          (th :class "px-3 py-2 font-medium text-stone-600" (or col2 "Description"))))
        (tbody rows)))))

(defcomp ~sx-docs-label ()
  (span :class "font-mono" "(<sx>)"))

(defcomp ~doc-clear-cache-btn ()
  (button :onclick "localStorage.removeItem('sx-components-hash');localStorage.removeItem('sx-components-src');var e=Sx.getEnv();Object.keys(e).forEach(function(k){if(k.charAt(0)==='~')delete e[k]});var b=this;b.textContent='Cleared!';setTimeout(function(){b.textContent='Clear component cache'},2000)"
    :class "text-xs text-stone-400 hover:text-stone-600 border border-stone-200 rounded px-2 py-1 transition-colors"
    "Clear component cache"))

;; ---------------------------------------------------------------------------
;; Data-driven table builders — replace Python sx_call() composition
;; ---------------------------------------------------------------------------

;; Build attr table from a list of {name, desc, exists, href} dicts.
;; Replaces _attr_table_sx() in utils.py.
(defcomp ~doc-attr-table-from-data (&key title attrs)
  (~doc-attr-table :title title
    :rows (<> (map (fn (a)
      (~doc-attr-row
        :attr (get a "name")
        :description (get a "desc")
        :exists (get a "exists")
        :href (get a "href")))
      attrs))))

;; Build headers table from a list of {name, value, desc} dicts.
;; Replaces _headers_table_sx() in utils.py.
(defcomp ~doc-headers-table-from-data (&key title headers)
  (~doc-headers-table :title title
    :rows (<> (map (fn (h)
      (~doc-headers-row
        :name (get h "name")
        :value (get h "value")
        :description (get h "desc")
        :href (get h "href")))
      headers))))

;; Build two-col table from a list of {name, desc} dicts.
;; Replaces the _reference_events_sx / _reference_js_api_sx builders.
(defcomp ~doc-two-col-table-from-data (&key title intro col1 col2 items)
  (~doc-two-col-table :title title :intro intro :col1 col1 :col2 col2
    :rows (<> (map (fn (item)
      (~doc-two-col-row
        :name (get item "name")
        :description (get item "desc")
        :href (get item "href")))
      items))))

;; Build all primitives category tables from a {category: [prim, ...]} dict.
;; Replaces _primitives_section_sx() in utils.py.
(defcomp ~doc-primitives-tables (&key primitives)
  (<> (map (fn (cat)
    (~doc-primitives-table
      :category cat
      :primitives (get primitives cat)))
    (keys primitives))))

;; Build all special form category sections from a {category: [form, ...]} dict.
(defcomp ~doc-special-forms-tables (&key forms)
  (<> (map (fn (cat)
    (~doc-special-forms-category
      :category cat
      :forms (get forms cat)))
    (keys forms))))

(defcomp ~doc-special-forms-category (&key category forms)
  (div :class "space-y-4"
    (h3 :class "text-xl font-semibold text-stone-800 border-b border-stone-200 pb-2" category)
    (div :class "space-y-4"
      (map (fn (f)
        (~doc-special-form-card
          :name (get f "name")
          :syntax (get f "syntax")
          :doc (get f "doc")
          :tail-position (get f "tail-position")
          :example (get f "example")))
        forms))))

(defcomp ~doc-special-form-card (&key name syntax doc tail-position example)
  (div :class "not-prose border border-stone-200 rounded-lg p-4 space-y-3"
    (div :class "flex items-baseline gap-3"
      (code :class "text-lg font-bold text-violet-700" name)
      (when (not (= tail-position "none"))
        (span :class "text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700" "TCO")))
    (when (not (= syntax ""))
      (pre :class "bg-stone-100 rounded px-3 py-2 text-sm font-mono text-stone-700 overflow-x-auto"
        syntax))
    (p :class "text-stone-600 text-sm whitespace-pre-line" doc)
    (when (not (= tail-position ""))
      (p :class "text-xs text-stone-500"
        (span :class "font-semibold" "Tail position: ") tail-position))
    (when (not (= example ""))
      (~doc-code :code (highlight example "lisp")))))