import { onMounted, onUnmounted, ref } from 'vue'

export type BreakpointKey = 'base' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'

// Breakpoints from tokens.css (in ascending order)
const breakpoints: { key: Exclude<BreakpointKey, 'base'>; min: number }[] = [
  { key: '2xs', min: 320 },
  { key: 'xs', min: 360 },
  { key: 'sm', min: 480 },
  { key: 'md', min: 588 },
  { key: 'lg', min: 824 },
  { key: 'xl', min: 920 },
  { key: '2xl', min: 964 },
  { key: '3xl', min: 1068 },
  { key: '4xl', min: 1268 },
  { key: '5xl', min: 1436 },
]

/**
 * Composable that tracks the current Tailwind viewport breakpoint.
 * Updates reactively on window resize.
 *
 * @returns {Object} An object containing:
 * - `currentBreakpoint`: The active breakpoint key (e.g., 'base', 'sm', 'md', 'lg'). Returns 'base' when below the smallest breakpoint (320px).
 * - `windowWidth`: The current window width in pixels
 * - `breakpoints`: The list of all breakpoints with their min-width values
 */
export function useViewportBreakpoint() {
  const currentBreakpoint = ref<BreakpointKey>('base')
  const windowWidth = ref(0)

  const updateBreakpoint = () => {
    if (typeof window === 'undefined') return

    windowWidth.value = window.innerWidth

    // Find the largest breakpoint that the current width satisfies
    // Returns 'base' when below the smallest breakpoint (default Tailwind styles)
    let activeBreakpoint: BreakpointKey = 'base'
    for (const bp of breakpoints) {
      if (windowWidth.value >= bp.min) {
        activeBreakpoint = bp.key
      }
    }
    currentBreakpoint.value = activeBreakpoint
  }

  onMounted(() => {
    updateBreakpoint()
    window.addEventListener('resize', updateBreakpoint)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateBreakpoint)
  })

  return {
    currentBreakpoint,
    windowWidth,
    breakpoints,
  }
}