"use client"
import { useRef } from "react"

export function useDialogFocus() {
  const target = useRef<HTMLElement | null>(null)
  return {
    onOpenAutoFocus() {
      const active = document.activeElement
      const menuTrigger = document.querySelector<HTMLElement>('[data-slot="dropdown-menu-trigger"][data-state="open"]')
      target.current = menuTrigger ?? (active instanceof HTMLElement ? active : null)
    },
    onCloseAutoFocus(event: Event) {
      event.preventDefault()
      requestAnimationFrame(() => {
        const fallback = document.querySelector<HTMLElement>('[role="dialog"] button, main')
        const next = target.current?.isConnected && target.current !== document.body ? target.current : fallback
        next?.focus()
      })
    },
  }
}