import { usePage } from '@inertiajs/react';
import { useEffect, useState, useSyncExternalStore } from 'react';

const MOBILE_BREAKPOINT = 768;

const mql =
    typeof window === 'undefined'
        ? undefined
        : window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
    if (!mql) {
        return () => {};
    }

    mql.addEventListener('change', callback);

    return () => {
        mql.removeEventListener('change', callback);
    };
}

function isSmallerThanBreakpoint(): boolean {
    return mql?.matches ?? false;
}

/**
 * Alinea SSR, hidratación y viewport real en Android.
 * Sin esto, el servidor pinta layout de escritorio y el cliente móvil (o al revés)
 * y React falla → pantalla negra tras el login.
 */
export function useIsMobile(): boolean {
    const serverIsMobile = usePage().props.isMobile;
    const [mounted, setMounted] = useState(false);

    const viewportIsMobile = useSyncExternalStore(
        mediaQueryListener,
        isSmallerThanBreakpoint,
        () => serverIsMobile,
    );

    useEffect(() => {
        setMounted(true);
    }, []);

    if (!mounted) {
        return serverIsMobile;
    }

    return viewportIsMobile;
}