(defisland
  ()
  (let
    ((messages (signal (list)))
      (_eff
        (effect
          (fn
            ()
            (let
              ((cb (host-callback (fn (e) (swap! messages (fn (old) (append old (host-get (event-detail e) "text"))))))))
              (host-call (dom-document) "addEventListener" "inbox:message" cb)
              (fn
                ()
                (host-call
                  (dom-document)
                  "removeEventListener"
                  "inbox:message"
                  cb)))))))
    (div
      (p
        (~tw :tokens "text-xs font-semibold text-stone-500 mb-2")
        "Event Bridge Demo")
      (p
        (~tw :tokens "text-sm text-stone-600 mb-2")
        "The buttons below simulate server-rendered content dispatching events into the island.")
      (div
        (~tw :tokens "flex gap-2 mb-3")
        (button
          :data-sx-emit "inbox:message"
          :data-sx-emit-detail "{\"text\":\"Hello from the lake!\"}"
          (~tw :tokens "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
          "Send \"Hello\"")
        (button
          :data-sx-emit "inbox:message"
          :data-sx-emit-detail "{\"text\":\"Another message\"}"
          (~tw :tokens "px-3 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700")
          "Send \"Another\"")
        (button
          :on-click (fn (e) (reset! messages (list)))
          (~tw :tokens "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300")
          "Clear"))
      (div
        (~tw :tokens "min-h-12 p-3 rounded bg-stone-100 border border-stone-200")
        (if
          (empty? (deref messages))
          (p (~tw :tokens "text-stone-400 text-sm") "No messages yet.")
          (ul
            (~tw :tokens "space-y-1")
            (map
              (fn
                (msg)
                (li (~tw :tokens "text-sm text-stone-700") (str "→ " msg)))
              (deref messages))))))))
