import { useEffect, useState } from 'react';

const STORAGE_KEY = 'sidebar-collapsed';

/** Сворачивание на десктопе и открытие мобильного меню — независимые состояния. */
export function useSidebar() {
    const [collapsed, setCollapsed] = useState(() => (
        typeof window !== 'undefined' && localStorage.getItem(STORAGE_KEY) === 'true'
    ));
    const [mobileOpen, setMobileOpen] = useState(false);

    useEffect(() => {
        const media = window.matchMedia('(max-width: 768px)');
        const close = () => setMobileOpen(false);
        media.addEventListener('change', close);
        return () => media.removeEventListener('change', close);
    }, []);

    useEffect(() => {
        if (!mobileOpen) return undefined;
        const close = event => {
            if (event.key === 'Escape') setMobileOpen(false);
        };
        document.addEventListener('keydown', close);
        return () => document.removeEventListener('keydown', close);
    }, [mobileOpen]);

    function toggleSidebar() {
        if (window.matchMedia('(max-width: 768px)').matches) {
            setMobileOpen(current => !current);
        } else {
            setCollapsed(current => {
                localStorage.setItem(STORAGE_KEY, String(!current));
                return !current;
            });
        }
    }

    return { collapsed, mobileOpen, toggleSidebar, closeSidebar: () => setMobileOpen(false) };
}