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

/** 统一断点（与 CSS 媒体查询一致） */
export const BREAKPOINTS = {
  /** 手机竖屏 */
  MOBILE: 768,
  /** 平板 / 小屏 */
  TABLET: 1024,
  /** 桌面 */
  DESKTOP: 1200,
} as const;

export type BreakpointKey = keyof typeof BREAKPOINTS;

/**
 * 响应式断点：根据窗口宽度判断 isMobile / isTablet / isDesktop，
 * 并随 resize 更新。全项目统一使用 768 为移动端分界。
 */
export function useBreakpoints() {
  const width = ref(typeof window !== 'undefined' ? window.innerWidth : 1024);

  const isMobile = ref(width.value < BREAKPOINTS.MOBILE);
  const isTablet = ref(
    width.value >= BREAKPOINTS.MOBILE && width.value < BREAKPOINTS.TABLET
  );
  const isDesktop = ref(width.value >= BREAKPOINTS.TABLET);

  const update = () => {
    if (typeof window === 'undefined') return;
    const w = window.innerWidth;
    width.value = w;
    isMobile.value = w < BREAKPOINTS.MOBILE;
    isTablet.value = w >= BREAKPOINTS.MOBILE && w < BREAKPOINTS.TABLET;
    isDesktop.value = w >= BREAKPOINTS.TABLET;
  };

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

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

  return { width, isMobile, isTablet, isDesktop, BREAKPOINTS };
}
