const STORAGE_KEY = 'helpdesk.sidebar.width';
const MIN_WIDTH = 220;
const MAX_WIDTH = 420;

function initialiseShell() {
    const shell = document.querySelector('[data-hd-shell]');
    const sidebar = document.querySelector('[data-hd-sidebar]');
    const resizer = document.querySelector('[data-hd-sidebar-resizer]');
    if (!shell || !sidebar) return;

    const stored = Number(localStorage.getItem(STORAGE_KEY));
    if (Number.isFinite(stored) && stored >= MIN_WIDTH && stored <= MAX_WIDTH) {
        document.documentElement.style.setProperty('--hd-sidebar-width', `${stored}px`);
    }

    document.querySelectorAll('[data-hd-sidebar-toggle]').forEach((button) => {
        if (button.dataset.hdBound === '1') return;
        button.dataset.hdBound = '1';
        button.addEventListener('click', () => document.body.classList.toggle('hd-sidebar-open'));
    });

    sidebar.querySelectorAll('a').forEach((link) => {
        link.addEventListener('click', () => document.body.classList.remove('hd-sidebar-open'));
    });

    if (!resizer || resizer.dataset.hdBound === '1') return;
    resizer.dataset.hdBound = '1';

    resizer.addEventListener('pointerdown', (event) => {
        if (window.matchMedia('(max-width: 1023px)').matches) return;
        event.preventDefault();
        resizer.setPointerCapture(event.pointerId);
        document.body.classList.add('hd-sidebar-resizing');

        const move = (moveEvent) => {
            const width = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, moveEvent.clientX));
            document.documentElement.style.setProperty('--hd-sidebar-width', `${width}px`);
        };
        const finish = (upEvent) => {
            const value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--hd-sidebar-width'), 10);
            if (Number.isFinite(value)) localStorage.setItem(STORAGE_KEY, String(value));
            document.body.classList.remove('hd-sidebar-resizing');
            resizer.releasePointerCapture?.(upEvent.pointerId);
            resizer.removeEventListener('pointermove', move);
            resizer.removeEventListener('pointerup', finish);
            resizer.removeEventListener('pointercancel', finish);
        };
        resizer.addEventListener('pointermove', move);
        resizer.addEventListener('pointerup', finish);
        resizer.addEventListener('pointercancel', finish);
    });
}

document.addEventListener('DOMContentLoaded', initialiseShell);
document.addEventListener('livewire:navigated', initialiseShell);
initialiseShell();