/**
 * useResponsiveBreakpoint — 响应式断点 composable
 *
 * 断点（移动优先，与 plan U1 Open Questions 一致）：
 * - isMobile: viewport < 768px
 * - isTablet: 768px ≤ viewport < 1024px
 * - isDesktop: viewport ≥ 1024px
 * - isWide: viewport ≥ 1440px（供宽屏布局可选使用）
 *
 * 消费点：U3 RecordDetailDrawer（isMobile 时全屏覆盖）、
 * U5 ViewConfigPanel（isMobile 时改底部抽屉）。U1 仅暴露 API。
 *
 * 实现：window.matchMedia + change 事件监听，onUnmounted 清理。
 * SSR 安全：未定义 window 时返回全 false 默认值（ ponytail: 不引入
 * 专门的 SSR 检测库，matchMedia 不存在即视为非移动端默认布局）。
 */
import { ref, onMounted, onUnmounted, type Ref } from 'vue'

export interface ResponsiveBreakpoint {
  isMobile: Ref<boolean>
  isTablet: Ref<boolean>
  isDesktop: Ref<boolean>
  isWide: Ref<boolean>
}

const MOBILE_MAX = 767 // < 768
const TABLET_MAX = 1023 // < 1024
const WIDE_MIN = 1440 // ≥ 1440

export function useResponsiveBreakpoint(): ResponsiveBreakpoint {
  const isMobile = ref(false)
  const isTablet = ref(false)
  const isDesktop = ref(false)
  const isWide = ref(false)

  // matchMedia 不支持 change 事件的旧浏览器回退（ponytail: 不做
  // resize 节流兜底——现代浏览器均支持 matchMedia change，避免额外
  // 依赖 lodash/throttle；已知 ceiling: IE11 不可用，本项目目标现代浏览器）
  const mobileMql: MediaQueryList | null =
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia(`(max-width: ${MOBILE_MAX}px)`)
      : null
  const tabletMql: MediaQueryList | null =
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia(`(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`)
      : null
  const wideMql: MediaQueryList | null =
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia(`(min-width: ${WIDE_MIN}px)`)
      : null

  function sync(): void {
    isMobile.value = mobileMql?.matches ?? false
    isTablet.value = tabletMql?.matches ?? false
    isWide.value = wideMql?.matches ?? false
    // desktop = 既非 mobile 也非 tablet（≥ 1024）
    isDesktop.value = !isMobile.value && !isTablet.value
  }

  // sync 是稳定的函数引用，3 个 mql 共用同一 handler（每个 mql 独立 add/remove）。
  onMounted(() => {
    sync()
    mobileMql?.addEventListener('change', sync)
    tabletMql?.addEventListener('change', sync)
    wideMql?.addEventListener('change', sync)
  })

  onUnmounted(() => {
    mobileMql?.removeEventListener('change', sync)
    tabletMql?.removeEventListener('change', sync)
    wideMql?.removeEventListener('change', sync)
  })

  return { isMobile, isTablet, isDesktop, isWide }
}

// ponytail self-check: 断点边界互斥性。运行时调用 sync() 后，
// isMobile/isTablet/isDesktop 三者有且仅有一个为 true（基于互斥的
// matchMedia 查询）。trivial 互斥逻辑，不另立测试文件。
