import React, { useEffect, useState } from "react";
import {toggleBigBlackCursor} from "../effects/big-black-cursor";
import {toggleBigWhiteCursor} from "../effects/big-white-cursor";
import {toggleFocusTunnel} from "../effects/focus-tunnel";
import {toggleHighlightLinks} from "../effects/highlighted-links";
import {useWidget} from "../context/WidgetContext";
import { t } from "../translations";
import { isOptionEnabled } from "../config/widget-config";
import { setupOptionIcons, addOptionIcon } from "../utils/option-icons.jsx";
import { getStorageValue } from "../storage";
import { getDeviceType } from "../utils/position";

export default function NavigationFocusModule() {

    const {isLinksHighlighted, setLinksHighlighted} = useWidget();
    const {isBigBlackCursorEnabled, setBigBlackCursorEnabled} = useWidget();
    const {isBigWhiteCursorEnabled, setBigWhiteCursorEnabled} = useWidget();
    const {cursorStyleEl, setCursorStyleEl} = useWidget();
    const {isFocusTunnelActive, setFocusTunnelActive} = useWidget();
    const {focusTunnelContainer, setFocusTunnelContainer} = useWidget();
    const {currentLanguage, isXLMode} = useWidget();

    const [deviceType, setDeviceType] = useState(() => getDeviceType());
    const isMobileOrTablet = deviceType === 'mobile' || deviceType === 'tablet';

    // Set up option icons with hover states
    useEffect(() => {
        setupOptionIcons();
    }, [isXLMode]);

    // Update device type on resize
    useEffect(() => {
        const handleResize = () => {
            setDeviceType(getDeviceType());
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return (
        <div className="wideaccess-widget-group">
            <div className="wideaccess-widget-group-title">{t('navigationFocus', currentLanguage)}</div>

            {isXLMode ? (
                <>
                    {/* XL Mode: All paired options first (columns 1 & 2), then singles */}
                    {/* Row 1: Big Black Cursor, Big White Cursor - Hidden on mobile/tablet */}
                    {!isMobileOrTablet && isOptionEnabled('bigBlackCursor') && (
                        <button className={`option ${isBigBlackCursorEnabled ? 'active' : ''}`} onClick={() => {
                            toggleBigBlackCursor(isBigBlackCursorEnabled, setBigBlackCursorEnabled, setBigWhiteCursorEnabled, cursorStyleEl, setCursorStyleEl);
                        }}>
                            {addOptionIcon('black-big-cursor')}
                            {t('bigBlackCursor', currentLanguage)}
                        </button>
                    )}
                    {!isMobileOrTablet && isOptionEnabled('bigWhiteCursor') && (
                        <button className={`option ${isBigWhiteCursorEnabled ? 'active' : ''}`} onClick={() => {
                            toggleBigWhiteCursor(isBigWhiteCursorEnabled, setBigWhiteCursorEnabled, setBigBlackCursorEnabled, cursorStyleEl, setCursorStyleEl);
                        }}>
                            {addOptionIcon('white-big-cursor')}
                            {t('bigWhiteCursor', currentLanguage)}
                        </button>
                    )}

                    {/* Singles (after all pairs): Highlight, Focus Tunnel */}
                    {isOptionEnabled('highlightLinks') && (
                        <button className={`option ${isLinksHighlighted ? 'active' : ''}`} onClick={() => {
                            toggleHighlightLinks(isLinksHighlighted, setLinksHighlighted);
                        }}>
                            {addOptionIcon('highlight-links')}
                            {t('highlightLinks', currentLanguage)}
                        </button>
                    )}
                    {isOptionEnabled('focusTunnel') && (
                        <button className={`option ${isFocusTunnelActive ? 'active' : ''}`} onClick={() => {
                            let lastMouseY = window.innerHeight / 2; // fallback default
                            toggleFocusTunnel(lastMouseY, isFocusTunnelActive, setFocusTunnelActive, focusTunnelContainer, setFocusTunnelContainer);
                        }}>
                            {addOptionIcon('focus-tunnel')}
                            {t('focusTunnel', currentLanguage)}
                        </button>
                    )}
                </>
            ) : (
                <>
                    {(() => {
                        const enabled = (id) => isOptionEnabled(id);
                        const availablePairs = [
                            // Exclude cursor options on mobile/tablet
                            ...(!isMobileOrTablet ? [['bigBlackCursor','bigWhiteCursor']] : [])
                        ].filter(([a,b]) => enabled(a) && enabled(b));
                        const singlesQueue = [
                            'highlightLinks','focusTunnel'
                        ].filter(enabled);

                        const renderButton = (id) => {
                            switch (id) {
                                case 'bigBlackCursor':
                                    // Hide on mobile/tablet
                                    if (isMobileOrTablet) return null;
                                    return (
                                        <button key={id} className={`option ${isBigBlackCursorEnabled ? 'active' : ''}`} onClick={() => {
                                            toggleBigBlackCursor(isBigBlackCursorEnabled, setBigBlackCursorEnabled, setBigWhiteCursorEnabled, cursorStyleEl, setCursorStyleEl);
                                        }}>{addOptionIcon('black-big-cursor')}{t('bigBlackCursor', currentLanguage)}</button>
                                    );
                                case 'bigWhiteCursor':
                                    // Hide on mobile/tablet
                                    if (isMobileOrTablet) return null;
                                    return (
                                        <button key={id} className={`option ${isBigWhiteCursorEnabled ? 'active' : ''}`} onClick={() => {
                                            toggleBigWhiteCursor(isBigWhiteCursorEnabled, setBigWhiteCursorEnabled, setBigBlackCursorEnabled, cursorStyleEl, setCursorStyleEl);
                                        }}>{addOptionIcon('white-big-cursor')}{t('bigWhiteCursor', currentLanguage)}</button>
                                    );
                                case 'highlightLinks':
                                    return (
                                        <button key={id} className={`option ${isLinksHighlighted ? 'active' : ''}`} onClick={() => {
                                            toggleHighlightLinks(isLinksHighlighted, setLinksHighlighted);
                                        }}>{addOptionIcon('highlight-links')}{t('highlightLinks', currentLanguage)}</button>
                                    );
                                case 'focusTunnel':
                                    return (
                                        <button key={id} className={`option ${isFocusTunnelActive ? 'active' : ''}`} onClick={() => {
                                            let lastMouseY = window.innerHeight / 2;
                                            toggleFocusTunnel(lastMouseY, isFocusTunnelActive, setFocusTunnelActive, focusTunnelContainer, setFocusTunnelContainer);
                                        }}>{addOptionIcon('focus-tunnel')}{t('focusTunnel', currentLanguage)}</button>
                                    );
                                default:
                                    return null;
                            }
                        };

                        const orderedIds = [];
                        availablePairs.forEach(pair => {
                            orderedIds.push(pair[0], pair[1]);
                            if (singlesQueue.length) orderedIds.push(singlesQueue.shift());
                        });
                        while (singlesQueue.length) orderedIds.push(singlesQueue.shift());

                        return orderedIds.map(renderButton);
                    })()}
                </>
            )}
        </div>
    );
}