/**
 * BismillahCSS-UI /FUTURISTIC/
 * Design Intelligence Primitives
 */

/**
 * Tracks mouse position on an element for spotlight/glow effects.
 * Usage: bSpotlight(element)
 */
export function bSpotlight(el: HTMLElement) {
    el.addEventListener('mousemove', (e: MouseEvent) => {
        const { left, top } = el.getBoundingClientRect();
        const x = e.clientX - left;
        const y = e.clientY - top;
        el.style.setProperty('--mouse-x', `${x}px`);
        el.style.setProperty('--mouse-y', `${y}px`);
    });
}

/**
 * Handle floating navbar shrink/move on scroll.
 */
export function bFloatingNav(el: HTMLElement, threshold = 50) {
    window.addEventListener('scroll', () => {
        if (window.scrollY > threshold) {
            el.classList.add('scrolled');
        } else {
            el.classList.remove('scrolled');
        }
    });
}

/**
 * Progressive text reveal trigger.
 */
export function bTextReveal(el: HTMLElement) {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                el.classList.add('active');
            }
        });
    }, { threshold: 0.2 });
    observer.observe(el);
}

/**
 * Magnetic element effect.
 */
export function bMagnetic(el: HTMLElement, strength = 0.5) {
    el.addEventListener('mousemove', (e: MouseEvent) => {
        const { left, top, width, height } = el.getBoundingClientRect();
        const centerX = left + width / 2;
        const centerY = top + height / 2;
        const deltaX = (e.clientX - centerX) * strength;
        const deltaY = (e.clientY - centerY) * strength;
        el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
    });

    el.addEventListener('mouseleave', () => {
        el.style.transform = `translate(0px, 0px)`;
    });
}

/**
 * Tracks mouse position for glare reflection.
 */
export function bGlare(el: HTMLElement) {
    el.addEventListener('mousemove', (e: MouseEvent) => {
        const { left, top, width, height } = el.getBoundingClientRect();
        const x = ((e.clientX - left) / width) * 100;
        const y = ((e.clientY - top) / height) * 100;
        el.style.setProperty('--glare-x', `${x}%`);
        el.style.setProperty('--glare-y', `${y}%`);
    });
}

/**
 * Tracks mouse for circular text reveal effects.
 */
export function bReveal(el: HTMLElement) {
    el.addEventListener('mousemove', (e: MouseEvent) => {
        const { left, top, width, height } = el.getBoundingClientRect();
        const x = ((e.clientX - left) / width) * 100;
        const y = ((e.clientY - top) / height) * 100;
        el.style.setProperty('--reveal-x', `${x}%`);
        el.style.setProperty('--reveal-y', `${y}%`);
    });
}

/**
 * Autocomplete functionality.
 */
export function bAutocomplete(el: HTMLElement) {
    el.classList.add('b-autocomplete-futu');
    const input = el.querySelector('input');
    if (input) {
        input.style.width = '100%';
        input.style.background = 'rgba(255,255,255,0.02)';
        input.style.border = '1px solid rgba(255,255,255,0.1)';
        input.style.padding = '12px';
        input.style.borderRadius = '8px';
        input.style.color = '#fff';
    }
}

/**
 * Button functionality.
 */
export function bButton(el: HTMLElement) {
    el.classList.add('b-btn-futu');
    el.style.padding = '12px 24px';
    el.style.borderRadius = '8px';
    el.style.cursor = 'pointer';
    el.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
    el.style.background = 'rgba(255,255,255,0.05)';
    el.style.color = '#fff';
    el.style.fontWeight = '600';

    el.addEventListener('mouseenter', () => {
        el.style.background = 'rgba(255,255,255,0.1)';
        el.style.borderColor = '#00f2ff';
        el.style.boxShadow = '0 0 15px rgba(0,242,255,0.2)';
    });
    el.addEventListener('mouseleave', () => {
        el.style.background = 'rgba(255,255,255,0.05)';
        el.style.borderColor = 'rgba(255,255,255,0.1)';
        el.style.boxShadow = 'none';
    });
}

/**
 * Button Group functionality.
 */
export function bButtonGroup(el: HTMLElement) {
    el.style.display = 'inline-flex';
    el.style.gap = '1px';
    el.style.borderRadius = '8px';
    el.style.overflow = 'hidden';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
}

/**
 * Checkbox functionality.
 */
export function bCheckbox(el: HTMLElement) {
    el.classList.add('b-checkbox-futu');
    el.style.width = '20px';
    el.style.height = '20px';
    el.style.border = '2px solid rgba(255,255,255,0.2)';
    el.style.borderRadius = '4px';
    el.style.cursor = 'pointer';
    el.style.transition = '0.3s';
}

/**
 * Floating Action Button functionality.
 */
export function bFloatingActionButton(el: HTMLElement) {
    el.classList.add('b-fab-futu');
    el.style.width = '56px';
    el.style.height = '56px';
    el.style.borderRadius = '50%';
    el.style.background = '#00f2ff';
    el.style.boxShadow = '0 10px 30px rgba(0,242,255,0.3)';
    el.style.display = 'flex';
    el.style.alignItems = 'center';
    el.style.justifyContent = 'center';
    el.style.position = 'fixed';
    el.style.bottom = '32px';
    el.style.right = '32px';
}

/**
 * Text Field functionality.
 */
export function bTextField(el: HTMLElement) {
    el.classList.add('b-input-futu');
    el.style.width = '100%';
    el.style.padding = '14px 20px';
    el.style.background = 'rgba(15, 15, 26, 0.5)';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
    el.style.borderRadius = '12px';
    el.style.color = 'white';
    el.style.outline = 'none';
    el.style.transition = 'all 0.3s ease';

    el.addEventListener('focus', () => {
        el.style.borderColor = '#00f2ff';
        el.style.boxShadow = '0 0 20px rgba(0, 242, 255, 0.2)';
        el.style.background = 'rgba(15, 15, 26, 0.8)';
    });
    el.addEventListener('blur', () => {
        el.style.borderColor = 'rgba(255,255,255,0.1)';
        el.style.boxShadow = 'none';
        el.style.background = 'rgba(15, 15, 26, 0.5)';
    });
}

/**
 * Card functionality.
 */
export function bCard(el: HTMLElement) {
    el.classList.add('b-card-futu');
    el.style.background = 'rgba(20, 20, 25, 0.7)';
    el.style.backdropFilter = 'blur(16px)';
    (el.style as any).webkitBackdropFilter = 'blur(16px)';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
    el.style.borderRadius = '24px';
    el.style.padding = '32px';
    el.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';

    el.addEventListener('mouseenter', () => {
        el.style.transform = 'translateY(-10px)';
        el.style.borderColor = 'rgba(0, 242, 255, 0.3)';
        el.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.4)';
    });
    el.addEventListener('mouseleave', () => {
        el.style.transform = 'translateY(0)';
        el.style.borderColor = 'rgba(255,255,255,0.1)';
        el.style.boxShadow = 'none';
    });
}

/**
 * Alert functionality.
 */
export function bAlert(el: HTMLElement) {
    el.classList.add('b-alert-futu');
    el.style.padding = '16px';
    el.style.borderRadius = '12px';
    el.style.background = 'rgba(0, 242, 255, 0.05)';
    el.style.borderLeft = '4px solid #00f2ff';
    el.style.color = '#fff';
    el.style.display = 'flex';
    el.style.alignItems = 'center';
    el.style.gap = '12px';
}

/**
 * Dialog functionality.
 */
export function bDialog(el: HTMLElement) {
    el.classList.add('b-dialog-futu');
    el.style.position = 'fixed';
    el.style.top = '50%';
    el.style.left = '50%';
    el.style.transform = 'translate(-50%, -50%)';
    el.style.background = 'rgba(10,10,15,0.9)';
    el.style.backdropFilter = 'blur(20px)';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
    el.style.padding = '40px';
    el.style.borderRadius = '24px';
    el.style.zIndex = '2000';
    el.style.boxShadow = '0 30px 60px rgba(0,0,0,0.5)';
}

/**
 * CircularProgress functionality.
 */
export function bCircularProgress(el: HTMLElement) {
    el.classList.add('b-circular-progress');
    el.style.width = '40px';
    el.style.height = '40px';
    el.style.borderRadius = '50%';
    el.style.border = '3px solid rgba(0, 242, 255, 0.1)';
    el.style.borderTopColor = '#00f2ff';
    el.style.animation = 'b-spin 1s linear infinite';

    if (!document.getElementById('b-spin-style')) {
        const style = document.createElement('style');
        style.id = 'b-spin-style';
        style.innerHTML = '@keyframes b-spin { to { transform: rotate(360deg); } }';
        document.head.appendChild(style);
    }
}

/**
 * Stepper functionality.
 */
export function bStepper(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.justifyContent = 'space-between';
    el.style.padding = '20px';
    el.style.background = 'rgba(255,255,255,0.02)';
    el.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
}

/**
 * Tabs functionality.
 */
export function bTabs(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.gap = '20px';
    el.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
    el.style.padding = '0 10px';
}

/**
 * Tooltip functionality.
 */
export function bTooltip(el: HTMLElement) {
    el.style.cursor = 'help';
    el.addEventListener('mouseenter', () => {
        // Implementation for Tooltip logic
    });
}

/**
 * AccordionActions functionality.
 */
export function bAccordionActions(el: HTMLElement) {
    el.classList.add('b-accordion-actions');
    el.style.display = 'flex';
    el.style.alignItems = 'center';
    el.style.justifyContent = 'flex-end';
    el.style.padding = '8px';
}

/**
 * AlertTitle functionality.
 */
export function bAlertTitle(el: HTMLElement) {
    el.classList.add('b-alert-title');
    el.style.fontWeight = '700';
    el.style.marginBottom = '4px';
    el.style.fontSize = '1.1rem';
}

/**
 * Table functionality.
 */
export function bTable(el: HTMLElement) {
    el.classList.add('b-table-futu');
    el.style.width = '100%';
    el.style.borderCollapse = 'separate';
    el.style.borderSpacing = '0 8px';
}

/**
 * Box functionality.
 */
export function bBox(el: HTMLElement) {
    el.style.display = 'block';
}

/**
 * Container functionality.
 */
export function bContainer(el: HTMLElement) {
    el.style.maxWidth = '1200px';
    el.style.margin = '0 auto';
    el.style.padding = '0 20px';
}

/**
 * Grid functionality.
 */
export function bGrid(el: HTMLElement) {
    el.style.display = 'grid';
    el.style.gap = '16px';
}

/**
 * Stack functionality.
 */
export function bStack(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.flexDirection = 'column';
    el.style.gap = '16px';
}

/**
 * CSS Baseline functionality.
 */
export function bCSSBaseline(el: HTMLElement) {
    document.body.style.margin = '0';
    document.body.style.background = '#0a0a0c';
    document.body.style.color = '#fff';
    document.body.style.fontFamily = 'Inter, sans-serif';
}

/**
 * Avatar functionality.
 */
export function bAvatar(el: HTMLElement) {
    el.style.width = '40px';
    el.style.height = '40px';
    el.style.borderRadius = '50%';
    el.style.overflow = 'hidden';
    el.style.background = '#222';
}

/**
 * Badge functionality.
 */
export function bBadge(el: HTMLElement) {
    el.style.display = 'inline-flex';
    el.style.padding = '2px 6px';
    el.style.borderRadius = '20px';
    el.style.fontSize = '11px';
    el.style.background = '#00f2ff';
    el.style.color = '#000';
}

/**
 * Chip functionality.
 */
export function bChip(el: HTMLElement) {
    el.style.display = 'inline-flex';
    el.style.padding = '6px 12px';
    el.style.borderRadius = '50px';
    el.style.background = 'rgba(255,255,255,0.05)';
    el.style.border = '1px solid rgba(255,255,255,0.1)';
    el.style.fontSize = '0.9rem';
}

/**
 * Divider functionality.
 */
export function bDivider(el: HTMLElement) {
    el.style.height = '1px';
    el.style.background = 'rgba(255,255,255,0.05)';
    el.style.width = '100%';
    el.style.margin = '16px 0';
}

/**
 * Breadcrumbs functionality.
 */
export function bBreadcrumbs(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.gap = '8px';
    el.style.color = 'rgba(255,255,255,0.5)';
}

/**
 * App Bar functionality.
 */
export function bAppBar(el: HTMLElement) {
    el.style.height = '64px';
    el.style.background = 'rgba(15,15,26,0.8)';
    el.style.backdropFilter = 'blur(10px)';
    el.style.display = 'flex';
    el.style.alignItems = 'center';
    el.style.padding = '0 24px';
}

/**
 * Pagination functionality.
 */
export function bPagination(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.gap = '4px';
}

/**
 * Stepper logic bridge.
 */
export function bTimeline(el: HTMLElement) {
    el.style.display = 'flex';
    el.style.flexDirection = 'column';
    el.style.gap = '20px';
}