import { ref } from 'vue'

const _src = ref(null)

// History integration: opening the lightbox pushes a history entry, so the
// mobile back gesture closes the modal instead of walking the session
// history. Closing removes that entry again, keeping the gesture history
// unchanged for the app itself.

function _onPopState() {
  // Back gesture / browser back while the lightbox is open → close it.
  // The entry that backs out IS our pushed entry — don't back() again.
  if (_src.value) _src.value = null
}

if (typeof window !== 'undefined') {
  window.addEventListener('popstate', _onPopState)
}

export function useLightbox() {
  function open(src) {
    // Don't stack a second entry if a reload left our stale one on top.
    if (!history.state?.lightbox) history.pushState({ lightbox: true }, '')
    _src.value = src
  }

  function close() {
    if (!_src.value) return
    _src.value = null
    // Remove the pushed entry so the next gesture doesn't hit a stale
    // lightbox record. The popstate handler sees src=null and no-ops.
    if (history.state?.lightbox) history.back()
  }

  return { src: _src, open, close }
}