;; SX docs — example and demo components

(defcomp ~example-card (&key title description &rest children)
  (div :class "border border-stone-200 rounded-lg overflow-hidden"
    (div :class "bg-stone-50 px-4 py-3 border-b border-stone-200"
      (h3 :class "font-semibold text-stone-800" title)
      (when description
        (p :class "text-sm text-stone-500 mt-1" description)))
    (div :class "p-4" children)))

(defcomp ~example-demo (&key &rest children)
  (div :class "border border-dashed border-stone-300 rounded p-4 bg-white" children))

(defcomp ~example-source (&key code)
  (div :class "bg-stone-900 rounded p-4 mt-3 overflow-x-auto"
    (pre :class "text-sm"
      (code :class "language-lisp" code))))

;; --- Click to load demo ---

(defcomp ~click-to-load-demo ()
  (div :class "space-y-4"
    (div :id "click-result" :class "p-4 rounded bg-stone-50 text-stone-500 text-center"
      "Click the button to load content.")
    (button
      :sx-get "/examples/api/click"
      :sx-target "#click-result"
      :sx-swap "innerHTML"
      :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors"
      "Load content")))

(defcomp ~click-result ()
  (div :class "space-y-2"
    (p :class "text-stone-800 font-medium" "Content loaded!")
    (p :class "text-stone-500 text-sm" "This was fetched from the server via sx-get and swapped into the target div.")))

;; --- Form submission demo ---

(defcomp ~form-demo ()
  (div :class "space-y-4"
    (form
      :sx-post "/examples/api/form"
      :sx-target "#form-result"
      :sx-swap "innerHTML"
      :class "space-y-3"
      (div
        (label :class "block text-sm font-medium text-stone-700 mb-1" "Name")
        (input :type "text" :name "name" :placeholder "Enter a name"
          :class "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"))
      (button :type "submit"
        :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
        "Submit"))
    (div :id "form-result" :class "p-3 rounded bg-stone-50 text-stone-500 text-sm text-center"
      "Submit the form to see the result.")))

(defcomp ~form-result (&key name)
  (div :class "text-stone-800"
    (p (str "Hello, " (if (empty? name) "stranger" name) "!"))
    (p :class "text-sm text-stone-500 mt-1" "Submitted via sx-post. The form data was sent as a POST request.")))

;; --- Polling demo ---

(defcomp ~polling-demo ()
  (div :class "space-y-4"
    (div :id "poll-target"
         :sx-get "/examples/api/poll"
         :sx-trigger "load, every 2s"
         :sx-swap "innerHTML"
         :class "p-4 rounded border border-stone-200 bg-white text-center font-mono"
      "Loading...")))

(defcomp ~poll-result (&key time count)
  (div
    (p :class "text-stone-800 font-medium" (str "Server time: " time))
    (p :class "text-stone-500 text-sm mt-1" (str "Poll count: " count))
    (div :class "mt-2 flex justify-center"
      (div :class "flex gap-1"
        (map (fn (i)
          (div :class (str "w-2 h-2 rounded-full "
                       (if (<= i count) "bg-violet-500" "bg-stone-200"))))
          (list 1 2 3 4 5 6 7 8 9 10))))))

;; --- Delete row demo ---

(defcomp ~delete-demo (&key items)
  (div
    (table :class "w-full text-left text-sm"
      (thead
        (tr :class "border-b border-stone-200"
          (th :class "px-3 py-2 font-medium text-stone-600" "Item")
          (th :class "px-3 py-2 font-medium text-stone-600 w-20" "")))
      (tbody :id "delete-rows"
        (map (fn (item)
          (~delete-row :id (nth 0 item) :name (nth 1 item)))
          items)))))

(defcomp ~delete-row (&key id name)
  (tr :id (str "row-" id) :class "border-b border-stone-100 transition-all"
    (td :class "px-3 py-2 text-stone-700" name)
    (td :class "px-3 py-2"
      (button
        :sx-delete (str "/examples/api/delete/" id)
        :sx-target (str "#row-" id)
        :sx-swap "outerHTML"
        :sx-confirm "Delete this item?"
        :class "text-rose-500 hover:text-rose-700 text-sm"
        "delete"))))

;; --- Inline edit demo ---

(defcomp ~inline-edit-demo ()
  (div :id "edit-target" :class "space-y-3"
    (~inline-view :value "Click edit to change this text")))

(defcomp ~inline-view (&key value)
  (div :class "flex items-center justify-between p-3 rounded border border-stone-200"
    (span :class "text-stone-800" value)
    (button
      :sx-get (str "/examples/api/edit?value=" value)
      :sx-target "#edit-target"
      :sx-swap "innerHTML"
      :class "text-sm text-violet-600 hover:text-violet-800"
      "edit")))

(defcomp ~inline-edit-form (&key value)
  (form
    :sx-post "/examples/api/edit"
    :sx-target "#edit-target"
    :sx-swap "innerHTML"
    :class "flex items-center gap-2 p-3 rounded border border-violet-300 bg-violet-50"
    (input :type "text" :name "value" :value value
      :class "flex-1 px-3 py-1.5 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
    (button :type "submit"
      :class "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
      "save")
    (button :type "button"
      :sx-get (str "/examples/api/edit/cancel?value=" value)
      :sx-target "#edit-target"
      :sx-swap "innerHTML"
      :class "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300"
      "cancel")))

;; --- OOB swap demo ---

(defcomp ~oob-demo ()
  (div :class "space-y-4"
    (div :class "grid grid-cols-2 gap-4"
      (div :id "oob-box-a" :class "p-4 rounded border border-stone-200 bg-white text-center"
        (p :class "text-stone-500" "Box A")
        (p :class "text-sm text-stone-400" "Waiting..."))
      (div :id "oob-box-b" :class "p-4 rounded border border-stone-200 bg-white text-center"
        (p :class "text-stone-500" "Box B")
        (p :class "text-sm text-stone-400" "Waiting...")))
    (button
      :sx-get "/examples/api/oob"
      :sx-target "#oob-box-a"
      :sx-swap "innerHTML"
      :class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
      "Update both boxes")))