import { useEffect, useState } from 'react';

/**
 * 订阅 body 的宽高，在 window resize 时更新。
 * @returns 当前 body 的 { width, height }（clientWidth/clientHeight）
 */
export const useScreenSize = () => {
    const [screenSize, setScreenSize] = useState<{ width: number; height: number }>({
        width: 0,
        height: 0,
    });

    useEffect(() => {
        const handleResize = () => {
            const body = document.getElementsByTagName('body')[0];
            setScreenSize({ width: body?.clientWidth ?? 0, height: body?.clientHeight ?? 0 });
        };
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return screenSize;
};

/**
 * 订阅 ref 对应 DOM 元素的尺寸，使用 ResizeObserver 在尺寸变化时更新。
 * @param ref 目标元素的 RefObject
 * @returns 当前元素的 { width, height }（contentRect）
 */
export const useRefSize = <T extends HTMLElement = HTMLDivElement>(ref: React.RefObject<T>) => {
    const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });

    useEffect(() => {
        const element = ref.current;
        if (!element) return;

        setSize({
            width: element.clientWidth,
            height: element.clientHeight,
        });

        const resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
                const { width, height } = entry.contentRect;
                setSize({ width, height });
            }
        });

        resizeObserver.observe(element);

        return () => {
            resizeObserver.disconnect();
        };
    }, [ref]);

    return size;
};

/**
 * 响应式断点检测，与 Tailwind CSS 断点完全对齐（mobile-first / min-width）。
 *
 * 语义别名（推荐日常使用）：
 * - isPhone:   宽度 < 640px  — 仅手机竖屏
 * - isMobile:  宽度 < 1024px — 手机 + 平板（对应 Tailwind lg: 以下）
 * - isDesktop: 宽度 >= 1024px — 桌面端（对应 Tailwind lg: 及以上）
 *
 * 原始断点（需要精细控制时使用）：
 * - sm / md / lg / xl — 分别对应 Tailwind 同名断点的 min-width 是否满足
 */
export function useResponsive() {
    const { width } = useScreenSize();

    const sm = width >= 640;
    const md = width >= 768;
    const lg = width >= 1024;
    const xl = width >= 1280;

    return {
        sm,
        md,
        lg,
        xl,
        isPhone: width > 0 && !sm,
        isMobile: width > 0 && !lg,
        isDesktop: lg,
    };
}
