-- baud/ui client behaviors. This file is ALL of the client logic: there is
-- no JavaScript in this project. Components opt in via _="install X".
-- Load this file with <script type="text/hyperscript" src=…> placed BEFORE
-- the _hyperscript library tag so the behaviors exist when elements install.

-- Panes: apply the grid template from data-panes / data-panes-rows.
-- htmx-swapped panes self-init via hyperscript's built-in htmx:load hook.
behavior Panes
  init
    if @data-panes-rows
      set my *grid-template-rows to @data-panes-rows
    end
    if @data-panes
      set my *grid-template-columns to @data-panes
    end
  end
end

-- Resizable: opt-in drag-resize on server-rendered .split-gutter cells.
-- Recomputes the parent grid template in px while dragging; persists it to
-- localStorage keyed by data-panes-id (and restores it on init — install
-- Panes BEFORE Resizable so the persisted template wins).
behavior Resizable
  init
    if @data-panes-id
      set saved to localStorage.getItem('baud-panes:' + @data-panes-id)
      if saved
        if @data-panes-rows
          set my *grid-template-rows to saved
        else
          set my *grid-template-columns to saved
        end
      end
    end
    -- honest "listener attached" signal: pointerdown before this class
    -- appears would be lost (DOM events do not queue for future listeners)
    add .resizable-ready to me
  end
  on pointerdown(target, clientX, clientY)
    if not target.matches('.split-gutter') then exit end
    halt the event
    set isRows to (@data-panes-rows is not null)
    set kids to Array.from(my.children)
    set sizes to []
    repeat for kid in kids
      if isRows
        append kid.getBoundingClientRect().height to sizes
      else
        append kid.getBoundingClientRect().width to sizes
      end
    end
    set iPrev to kids.indexOf(target.previousElementSibling)
    set iNext to kids.indexOf(target.nextElementSibling)
    set a to sizes[iPrev]
    set b to sizes[iNext]
    set startPos to clientX
    if isRows then set startPos to clientY end
    set tpl to ''
    -- .drag lands immediately before the listen loop so tests (and styling)
    -- can treat it as "the drag loop is about to receive events".
    add .drag to target
    repeat until event pointerup from document
      wait for pointermove(clientX, clientY) or pointerup(clientX, clientY) from document
      if it.type is 'pointermove'
        set pos to clientX
        if isRows then set pos to clientY end
        set delta to pos - startPos
        set na to Math.max(0, a + delta)
        set nb to Math.max(0, b - delta)
        set tpl to ''
        repeat for kid in kids index i
          if kid.matches('.split-gutter')
            set tpl to tpl + ' 7px'
          else if i is iPrev
            set tpl to tpl + ' ' + na + 'px'
          else if i is iNext
            set tpl to tpl + ' ' + nb + 'px'
          else
            set tpl to tpl + ' ' + sizes[i] + 'px'
          end
        end
        set tpl to tpl.trim()
        if isRows
          set my *grid-template-rows to tpl
        else
          set my *grid-template-columns to tpl
        end
      end
    end
    remove .drag from target
    if @data-panes-id and tpl is not ''
      call localStorage.setItem('baud-panes:' + @data-panes-id, tpl)
    end
  end
end

-- Tabs: ARIA tabs widget, installed on the [role=tablist] strip. ←/→ rove
-- focus across the [role=tab] buttons (wrapping, roving tabindex); ↵/Space
-- activate natively because tabs are real <button>s, so activation is the
-- click handler: swap is-active + aria-selected, and with data-tabs-local
-- also swap the pre-rendered [role=tabpanel] panes via the hidden attribute
-- (htmx strips instead hx-get their pane into the shared target panel).
behavior Tabs
  on keydown[key == 'ArrowRight' or key == 'ArrowLeft']
    set tabs to Array.from(my.querySelectorAll('[role="tab"]'))
    set i to tabs.indexOf(event.target)
    if i is -1 then exit end
    halt the event
    if event.key is 'ArrowRight'
      set j to ((i + 1) mod (tabs.length))
    else
      set j to (((i - 1) + (tabs.length)) mod (tabs.length))
    end
    repeat for tb in tabs
      set tb's @tabindex to '-1'
    end
    set focusTab to tabs[j]
    set focusTab's @tabindex to '0'
    call focusTab.focus()
  end
  on keydown[key == 'Home' or key == 'End']
    set tabs to Array.from(my.querySelectorAll('[role="tab"]'))
    if tabs.indexOf(event.target) is -1 then exit end
    halt the event
    set j to 0
    if event.key is 'End'
      set j to (tabs.length) - 1
    end
    repeat for tb in tabs
      set tb's @tabindex to '-1'
    end
    set focusTab to tabs[j]
    set focusTab's @tabindex to '0'
    call focusTab.focus()
  end
  on click
    set tab to event.target.closest('[role="tab"]')
    if tab is null then exit end
    repeat for tb in Array.from(my.querySelectorAll('[role="tab"]'))
      if tb is tab
        add .is-active to tb
        set tb's @aria-selected to 'true'
        set tb's @tabindex to '0'
      else
        remove .is-active from tb
        set tb's @aria-selected to 'false'
        set tb's @tabindex to '-1'
      end
      if @data-tabs-local
        set panel to document.getElementById(tb.getAttribute('aria-controls'))
        if panel is not null
          if tb is tab
            remove @hidden from panel
          else
            add @hidden to panel
          end
        end
      end
    end
  end
end

-- MenuDismiss: close (drop the open state of) the element on outside click
-- or Escape.
behavior MenuDismiss
  on click from elsewhere remove .open from me end
  on keyup[key == 'Escape'] from window remove .open from me end
end

-- PaletteKey: cmd/ctrl-K announces the command palette (palette UI is a
-- later wave; it listens for baud:palette on body).
behavior PaletteKey
  on keydown[(metaKey or ctrlKey) and key == 'k'] from window
    halt the event
    send baud:palette to document.body
  end
end

-- TagInput: key=value chips with hidden form inputs and a filtered
-- suggestion menu. Purely-local UI: Enter adds a chip from the input text,
-- Backspace on an empty input pops the last chip, ✕ removes its chip, and
-- typing filters the data-tag menu items (already-added tags are hidden).
-- Chips made here mirror baud/taginput.templ's tagChip exactly — each one
-- carries an <input type=hidden> named by my @data-name so forms keep
-- submitting correctly. The menu shows while I have .open (and the menu is
-- not .empty); pair with MenuDismiss for outside-click/Esc dismissal.
behavior TagInput
  on focusin[target.matches('.tags-input')]
    add .open to me
    send baud:tagsFilter to me
  end
  on input[target.matches('.tags-input')]
    add .open to me
    send baud:tagsFilter to me
  end
  on keydown[key == 'Enter' and target.matches('.tags-input')]
    halt the event
    set q to event.target.value.trim()
    if q is not ''
      send baud:tagsAdd(tag: q) to me
    end
  end
  on keydown[key == 'Backspace' and target.matches('.tags-input')]
    if event.target.value is ''
      set chip to the last <.tag-chip/> in me
      if chip is not null
        remove chip
        send baud:tagsFilter to me
      end
    end
  end
  on click(target)
    if target.matches('.x-btn')
      remove the closest <.tag-chip/> to target
      send baud:tagsFilter to me
    else
      set item to target.closest('.menu-item')
      if item is not null
        send baud:tagsAdd(tag: item.getAttribute('data-tag')) to me
      end
      add .open to me
      call (the first <.tags-input/> in me).focus()
    end
  end
  on baud:tagsAdd(tag)
    set inp to the first <.tags-input/> in me
    set inp.value to ''
    repeat for h in <input[type=hidden]/> in me
      if h.value is tag
        send baud:tagsFilter to me
        exit
      end
    end
    make a <span.tag-chip/> called chip
    if tag.includes('=')
      set key to tag.split('=')[0]
      make a <span.tag-k/> called keyEl
      set keyEl.textContent to key + '='
      put keyEl at the end of chip
      make a <span.tag-v/> called valEl
      set valEl.textContent to tag.slice(key.length + 1)
      put valEl at the end of chip
    else
      make a <span.tag-v/> called valEl
      set valEl.textContent to tag
      put valEl at the end of chip
    end
    make a <button.x-btn/> called xb
    call xb.setAttribute('type', 'button')
    call xb.setAttribute('aria-label', 'remove ' + tag)
    set xb.textContent to '✕'
    put xb at the end of chip
    make an <input/> called hid
    call hid.setAttribute('type', 'hidden')
    call hid.setAttribute('name', @data-name)
    call hid.setAttribute('value', tag)
    put hid at the end of chip
    put chip before inp
    send baud:tagsFilter to me
  end
  on baud:tagsFilter
    set menu to the first <.tags-menu/> in me
    if menu is null then exit end
    set q to (the first <.tags-input/> in me).value.toLowerCase()
    set shown to 0
    repeat for item in <.menu-item/> in me
      set tag to item.getAttribute('data-tag')
      set dup to false
      repeat for h in <input[type=hidden]/> in me
        if h.value is tag
          set dup to true
        end
      end
      if dup or (q is not '' and not tag.toLowerCase().includes(q))
        set item.hidden to true
      else
        set item.hidden to false
        increment shown
      end
    end
    if shown is 0
      add .empty to menu
    else
      remove .empty from menu
    end
  end
end

-- SelectKeys: shared ↑↓ / ↵ / Esc keyboard handling for the enhanced
-- select and the combobox. Installed on the .select root; the element
-- carrying aria-expanded (trigger button or combobox input) keeps focus
-- and points aria-activedescendant at the highlighted (.hl-row) option.
-- Operates on visible options only, so it composes with ComboboxFilter
-- and with server-swapped option lists. MenuDismiss owns dropping .open;
-- the extra handlers here only keep the ARIA state in sync with it.
behavior SelectKeys
  on keydown[key == 'ArrowDown' or key == 'ArrowUp']
    halt the event
    set ctl to me.querySelector('[aria-expanded]')
    if I do not match .open
      add .open to me
      if ctl is not null then call ctl.setAttribute('aria-expanded', 'true') end
    end
    set items to Array.from(me.querySelectorAll('.menu-item:not([hidden])'))
    if items.length is 0 then exit end
    set cur to me.querySelector('.menu-item.hl-row')
    set i to items.indexOf(cur)
    if event.key is 'ArrowDown'
      set i to Math.min(i + 1, items.length - 1)
    else
      set i to Math.max(i - 1, 0)
    end
    if cur is not null then remove .hl-row from cur end
    set nxt to items[i]
    add .hl-row to nxt
    if ctl is not null then call ctl.setAttribute('aria-activedescendant', nxt.id) end
    call nxt.scrollIntoView({block: 'nearest'})
  end
  on keydown[key == 'Enter']
    if I match .open
      set cur to me.querySelector('.menu-item.hl-row:not([hidden])')
      if cur is not null
        halt the event
        call cur.click()
      end
    end
  end
  on keyup[key == 'Escape'] from window
    set ctl to me.querySelector('[aria-expanded]')
    if ctl is not null
      call ctl.setAttribute('aria-expanded', 'false')
      call ctl.removeAttribute('aria-activedescendant')
    end
  end
  on click from elsewhere
    set ctl to me.querySelector('[aria-expanded]')
    if ctl is not null then call ctl.setAttribute('aria-expanded', 'false') end
  end
end

-- SelectPick: delegated option picking for the enhanced select and the
-- combobox. Clicking a .menu-item (or ↵ via SelectKeys) writes data-value
-- into the hidden form input, puts data-label on the trigger (.select-value)
-- or into the combobox input, moves is-active/aria-selected/✓, resets any
-- combobox filtering, and closes the menu with ARIA back in sync.
behavior SelectPick
  on click(target)
    set opt to target.closest('.menu-item')
    if opt is null then exit end
    set hid to me.querySelector('input[type=hidden]')
    if hid is not null then set hid.value to opt.getAttribute('data-value') end
    set inp to me.querySelector('.input')
    if inp is not null then set inp.value to opt.getAttribute('data-label') end
    set lbl to me.querySelector('.select-value')
    if lbl is not null then set lbl.textContent to opt.getAttribute('data-label') end
    repeat for o in Array.from(me.querySelectorAll('.menu-item'))
      remove .hl-row from o
      call o.removeAttribute('hidden')
      set t to o.querySelector('.cb-label')
      if t is not null then set t.textContent to o.getAttribute('data-label') end
      if o is opt
        add .is-active to o
        call o.setAttribute('aria-selected', 'true')
      else
        remove .is-active from o
        call o.setAttribute('aria-selected', 'false')
      end
    end
    remove .open from me
    set ctl to me.querySelector('[aria-expanded]')
    if ctl is not null
      call ctl.setAttribute('aria-expanded', 'false')
      call ctl.removeAttribute('aria-activedescendant')
    end
  end
end

-- ComboboxFilter: client-side type-to-filter for the combobox (server
-- mode does the same round-trip via hx-get instead). Matches the query
-- against label + meta, hides misses, and rebuilds the label as
-- pre / accent-bold .cb-match / post — text nodes only, never markup
-- from option data.
behavior ComboboxFilter
  on input
    set inp to me.querySelector('.input')
    set q to inp.value.trim().toLowerCase()
    add .open to me
    call inp.setAttribute('aria-expanded', 'true')
    call inp.removeAttribute('aria-activedescendant')
    repeat for opt in Array.from(me.querySelectorAll('.menu-item'))
      remove .hl-row from opt
      set label to opt.getAttribute('data-label')
      set extra to opt.getAttribute('data-meta')
      if extra is null then set extra to '' end
      set hay to label + ' ' + extra
      set hay to hay.toLowerCase()
      set low to label.toLowerCase()
      set lbl to opt.querySelector('.cb-label')
      if q is ''
        set lbl.textContent to label
        call opt.removeAttribute('hidden')
      else if hay.indexOf(q) is -1
        set lbl.textContent to label
        call opt.setAttribute('hidden', '')
      else
        call opt.removeAttribute('hidden')
        set i to low.indexOf(q)
        if i is -1
          set lbl.textContent to label
        else
          set lbl.textContent to ''
          call lbl.appendChild(document.createTextNode(label.substring(0, i)))
          make a <span.cb-match/> called hit
          set hit.textContent to label.substring(i, i + q.length)
          call lbl.appendChild(hit)
          call lbl.appendChild(document.createTextNode(label.substring(i + q.length)))
        end
      end
    end
  end
end

-- Toast: notification lifecycle, installed on each .toast. Auto-dismisses
-- after @data-toast-ms milliseconds (0 = sticky, never auto-removed; the
-- attribute is data-driven so tests use short honest intervals). The
-- cheap hover pause: mouseenter/mouseleave track a .toast-hover class and
-- the countdown re-arms while it is set, so a toast never vanishes under
-- the pointer. ✕ removes immediately. Server-pushed toasts (htmx OOB
-- swaps into #toasts) self-install via hyperscript's htmx:load hook.
behavior Toast
  init
    set dwell to 4000
    if @data-toast-ms then set dwell to (@data-toast-ms as Int) end
    if dwell > 0
      wait dwell
      repeat while I match .toast-hover
        wait dwell
      end
      remove me
    end
  end
  on mouseenter add .toast-hover to me end
  on mouseleave remove .toast-hover from me end
  on click(target)
    if target.matches('.x-btn') then remove me end
  end
end

-- Overlay: modal/drawer chrome (baud/modal.templ, baud/drawer.templ),
-- installed on the .overlay backdrop root. htmx-injected overlays
-- (hx-target="body" hx-swap="beforeend") self-init on swap via the
-- htmx:load hook: they open immediately and are removed from the DOM on
-- close. Static sheet overlays (.overlay-static) stay in the DOM and
-- toggle .open instead — open one with `send baud:overlayOpen to it`.
-- Opening stashes the focus owner (:opener), force-drops any other
-- overlay (one at a time — no focus games for the loser), and moves
-- focus to the first focusable inside. Esc, backdrop click and any
-- [data-overlay-close] control close and restore :opener focus; Tab is
-- trapped in a cycle over the focusable descendants.
behavior Overlay
  init
    if I do not match .overlay-static
      send baud:overlayOpen to me
    end
    -- honest "listeners attached" signal for tests (cf .resizable-ready)
    add .overlay-ready to me
  end
  on baud:overlayOpen
    repeat for o in Array.from(document.querySelectorAll('.overlay'))
      if o is not me
        if o.matches('.overlay-static')
          remove .open from o
        else
          remove o
        end
      end
    end
    set :opener to document.activeElement
    add .open to me
    set f to me.querySelector('[autofocus]')
    if f is null
      set f to me.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
    end
    if f is not null then call f.focus() end
  end
  on baud:overlayClose
    -- a removed (or already-closed static) overlay must not steal focus
    -- when a window-level Esc fires later
    if me.isConnected is false then exit end
    if I match .overlay-static
      if I do not match .open then exit end
      remove .open from me
    end
    if :opener is not null
      if :opener.isConnected then call :opener.focus() end
    end
    if I do not match .overlay-static then remove me end
  end
  on keyup[key == 'Escape'] from window
    send baud:overlayClose to me
  end
  on click(target)
    if target is me
      send baud:overlayClose to me
    else if target.closest('[data-overlay-close]') is not null
      send baud:overlayClose to me
    end
  end
  on keydown[key == 'Tab']
    set els to Array.from(me.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'))
    if els.length is 0 then halt the event end
    set firstEl to els[0]
    set lastEl to els[els.length - 1]
    if event.shiftKey
      if document.activeElement is firstEl or document.activeElement is me
        halt the event
        call lastEl.focus()
      end
    else
      if document.activeElement is lastEl
        halt the event
        call firstEl.focus()
      end
    end
  end
end

-- Palette: the ⌘K command palette overlay. PaletteKey (on <body>) sends
-- baud:palette; opening remembers the previously focused element, shows
-- the overlay and traps focus in the query input (Tab is swallowed —
-- the input is the only stop). ↑↓ move the .hl highlight over the
-- CURRENT .palette-item list — queried per keystroke, so it survives
-- htmx swaps of the result list — with aria-activedescendant kept in
-- sync on the input; ↵ activates the highlighted row by clicking it
-- (anchor rows navigate; action rows carry an opaque @data-cmd that is
-- dispatched as baud:paletteCmd(cmd) to <body>, never executed — the
-- consumer subscribes to the event); Esc or a backdrop click closes
-- and restores focus to the opener. Reopening
-- clears the query and replays a keyup so the debounced hx-get
-- (keyup changed delay:150ms) refetches the unfiltered list only when
-- a stale filter is showing.
behavior Palette
  on baud:palette from window
    set :opener to document.activeElement
    add .open to me
    set inp to me.querySelector('.palette-input .input')
    set inp.value to ''
    call inp.focus()
    send keyup to inp
    send baud:paletteHl(pos: 0) to me
  end
  on htmx:afterSwap
    send baud:paletteHl(pos: 0) to me
  end
  on baud:paletteHl(pos)
    set inp to me.querySelector('.palette-input .input')
    set rows to Array.from(me.querySelectorAll('.palette-item'))
    repeat for row in rows
      remove .hl from row
      call row.setAttribute('aria-selected', 'false')
    end
    if rows.length is 0
      call inp.removeAttribute('aria-activedescendant')
      exit
    end
    set row to rows[pos]
    add .hl to row
    call row.setAttribute('aria-selected', 'true')
    call inp.setAttribute('aria-activedescendant', row.id)
    call row.scrollIntoView({block: 'nearest'})
  end
  on keydown[key == 'ArrowDown' or key == 'ArrowUp']
    halt the event
    set rows to Array.from(me.querySelectorAll('.palette-item'))
    if rows.length is 0 then exit end
    set i to rows.indexOf(me.querySelector('.palette-item.hl'))
    if event.key is 'ArrowDown'
      set i to Math.min(i + 1, rows.length - 1)
    else
      set i to Math.max(i - 1, 0)
    end
    send baud:paletteHl(pos: i) to me
  end
  on keydown[key == 'Enter']
    set cur to me.querySelector('.palette-item.hl')
    if cur is not null
      halt the event
      call cur.click()
    end
  end
  on keydown[key == 'Tab']
    halt the event
  end
  on keyup[key == 'Escape'] from window
    if I match .open then send baud:paletteClose to me end
  end
  on click(target)
    if target is me
      send baud:paletteClose to me
    else
      set row to target.closest('.palette-item')
      if row is not null
        set cmdId to row.getAttribute('data-cmd')
        if cmdId is not null
          send baud:paletteCmd(cmd: cmdId) to body
        end
        send baud:paletteClose to me
      end
    end
  end
  on baud:paletteClose
    remove .open from me
    set inp to me.querySelector('.palette-input .input')
    call inp.removeAttribute('aria-activedescendant')
    if :opener is not null
      call :opener.focus()
    end
  end
end

-- ParseHealth: parse-health sentinel. KEEP THIS THE LAST BEHAVIOR IN THE
-- FILE — a _hyperscript parse error anywhere above aborts the whole file
-- before this definition exists, so the install on <body> silently
-- no-ops and body[data-hs-ok] never appears. The e2e suite waits for
-- that attribute (TestParseHealthSentinel), turning any parse error in
-- this file into a loud test failure instead of silently dead behaviors.
behavior ParseHealth
  init
    add @data-hs-ok to me
  end
end