// WidgetContext.jsx
import { createContext, useContext, useState, useEffect } from "react";
import {
    BIG_BLACK_CURSOR_PREF, BIG_WHITE_CURSOR_PREF,
    HIDE_IMAGES_PREF,
    HIGH_CONTRAST_PREF,
    HIGH_SATURATION_PREF, HIGHLIGHT_LINKS_PREF,
    LOW_SATURATION_PREF,
    MONOCHROME_PREF,
    READABLE_FONT_PREF,
    TEXT_LINE_HEIGHT_PREF,
    TEXT_ALIGNMENT_PREF,
    TEXT_SIZE_PREF,
    TEXT_SPACING_PREF,
    LANGUAGE_PREF,
    WIDGET_POSITION_PREF,
    XL_MODE, FOCUS_TUNNEL_PREF
} from "../constants";
import { getBrowserLanguage, translations } from "../translations";
import { initializeStorage, getStorageValue, setStorageValue } from "../storage";
import { getWidgetPanelSide } from "../utils/position";

const WidgetContext = createContext();

export function WidgetProvider({ children }) {
    const [currentFontSizeMultiplier, setCurrentFontSizeMultiplier] = useState(1);
    const [currentSpacing, setCurrentSpacing] = useState(0);
    const [currentLineHeight, setCurrentLineHeight] = useState(1);
    const [lastMouseY, setLastMouseY] = useState(window.innerHeight / 2);
    const [readableFont, setReadableFont] = useState(false);
    const [isMonochromeMode, setMonochromeMode] = useState(false);
    const [isLowSaturationMode, setLowSaturationMode] = useState(false);
    const [isHighSaturationMode, setHighSaturationMode] = useState(false);
    const [isHighContrastMode, setHighContrastMode] = useState(false);
    const [svgFilterElement, setSvgFilterElement] = useState(null);
    const [isMediaHidden, setMediaHidden] = useState(false);
    const [originalMediaStyles, setOriginalMediaStyles] = useState(new Map());
    const [isLinksHighlighted, setLinksHighlighted] = useState(false);
    const [isBigBlackCursorEnabled, setBigBlackCursorEnabled] = useState(false);
    const [isBigWhiteCursorEnabled, setBigWhiteCursorEnabled] = useState(false);
    const [cursorStyleEl, setCursorStyleEl] = useState(null);
    const [isFocusTunnelActive, setFocusTunnelActive] = useState(false);
    const [focusTunnelContainer, setFocusTunnelContainer] = useState(null);
    const [textAlignment, setTextAlignment] = useState(() => {
        return getStorageValue(TEXT_ALIGNMENT_PREF, 'none');
    });
    const [currentLanguage, setCurrentLanguage] = useState(() => {
        // Priority order:
        // 1. User's stored preference (if they explicitly changed it)
        // 2. WordPress default language setting
        // 3. Browser language

        const storedLanguage = getStorageValue(LANGUAGE_PREF, null);
        const wpLanguage = window.WPWidgetConfig?.defaultLanguage;

        // If user has a stored preference, use it (they explicitly changed the language)
        if (storedLanguage) {
            return storedLanguage;
        }

        // Otherwise, use WordPress default if available and valid
        if (wpLanguage && translations[wpLanguage]) {
            return wpLanguage;
        }

        // Final fallback to browser language
        const browserLang = getBrowserLanguage();
        return browserLang;
    });
    const [widgetPosition, setWidgetPosition] = useState(() => {

        // Priority order:
        // 1. User's stored preference (if they explicitly changed it)
        // 2. WordPress default position setting based on current device
        // 3. Fallback to 'right'

        const storedPosition = getStorageValue(WIDGET_POSITION_PREF, null);

        if (storedPosition) {
            return storedPosition;
        }

        // Get default position from WP settings based on current device
        const wpDefaultSide = getWidgetPanelSide();

        return wpDefaultSide;
    });
    const [isXLMode, setXLMode] = useState(() => {
        // Auto-enable XL mode for screens 430px or smaller
        if (window.innerWidth <= 430) {
            return true;
        }
        const stored = getStorageValue(XL_MODE)
        return stored === 'true';
    });
    
    // Auto-enable XL mode on resize for small screens
    useEffect(() => {
        const handleResize = () => {
            if (window.innerWidth <= 430) {
                setXLMode(true);
            }
        };
        
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);


    useEffect(() => {
        // Initialize storage and migrate old data if needed
        initializeStorage();

        // Load all values from the new storage system
        setCurrentFontSizeMultiplier(getStorageValue(TEXT_SIZE_PREF, 1));
        setCurrentSpacing(getStorageValue(TEXT_SPACING_PREF, 0));
        setCurrentLineHeight(getStorageValue(TEXT_LINE_HEIGHT_PREF, 1));
        setReadableFont(getStorageValue(READABLE_FONT_PREF, false));
        setMonochromeMode(getStorageValue(MONOCHROME_PREF, false));
        setLowSaturationMode(getStorageValue(LOW_SATURATION_PREF, false));
        setHighSaturationMode(getStorageValue(HIGH_SATURATION_PREF, false));
        setHighContrastMode(getStorageValue(HIGH_CONTRAST_PREF, false));
        setMediaHidden(getStorageValue(HIDE_IMAGES_PREF, false));
        setLinksHighlighted(getStorageValue(HIGHLIGHT_LINKS_PREF, false));
        setBigBlackCursorEnabled(getStorageValue(BIG_BLACK_CURSOR_PREF, false));
        setBigWhiteCursorEnabled(getStorageValue(BIG_WHITE_CURSOR_PREF, false));
        setTextAlignment(getStorageValue(TEXT_ALIGNMENT_PREF, 'none'));
        setFocusTunnelActive(getStorageValue(FOCUS_TUNNEL_PREF, false));
    }, []);


    // Save to storage when values change
    useEffect(() => {
        setStorageValue(TEXT_SIZE_PREF, currentFontSizeMultiplier);
    }, [currentFontSizeMultiplier]);

    useEffect(() => {
        setStorageValue(TEXT_SPACING_PREF, currentSpacing);
    }, [currentSpacing]);

    useEffect(() => {
        setStorageValue(TEXT_LINE_HEIGHT_PREF, currentLineHeight);
    }, [currentLineHeight]);

    useEffect(() => {
        setStorageValue(READABLE_FONT_PREF, readableFont);
    }, [readableFont]);

    useEffect(() => {
        setStorageValue(MONOCHROME_PREF, isMonochromeMode);
    }, [isMonochromeMode]);

    useEffect(() => {
        setStorageValue(LOW_SATURATION_PREF, isLowSaturationMode);
    }, [isLowSaturationMode]);

    useEffect(() => {
        setStorageValue(HIGH_SATURATION_PREF, isHighSaturationMode);
    }, [isHighSaturationMode]);

    useEffect(() => {
        setStorageValue(HIGH_CONTRAST_PREF, isHighContrastMode);
    }, [isHighContrastMode]);

    useEffect(() => {
        setStorageValue(HIDE_IMAGES_PREF, isMediaHidden);
    }, [isMediaHidden]);

    useEffect(() => {
        setStorageValue(HIGHLIGHT_LINKS_PREF, isLinksHighlighted);
    }, [isLinksHighlighted]);

    useEffect(() => {
        setStorageValue(BIG_BLACK_CURSOR_PREF, isBigBlackCursorEnabled);
    }, [isBigBlackCursorEnabled]);

    useEffect(() => {
        setStorageValue(BIG_WHITE_CURSOR_PREF, isBigWhiteCursorEnabled);
    }, [isBigWhiteCursorEnabled]);


    useEffect(() => {
        setStorageValue(TEXT_ALIGNMENT_PREF, textAlignment);
    }, [textAlignment]);


    useEffect(() => {
        setStorageValue(FOCUS_TUNNEL_PREF, isFocusTunnelActive);
    }, [isFocusTunnelActive]);

    // Persist language to unified storage
    useEffect(() => {
        if (currentLanguage) {
            setStorageValue(LANGUAGE_PREF, currentLanguage);
        }
    }, [currentLanguage]);

    useEffect(() => {
        setStorageValue(WIDGET_POSITION_PREF, widgetPosition);
    }, [widgetPosition]);


    return (
        <WidgetContext.Provider
            value={{
                currentFontSizeMultiplier,
                setCurrentFontSizeMultiplier,
                currentSpacing,
                setCurrentSpacing,
                currentLineHeight,
                setCurrentLineHeight,
                lastMouseY,
                setLastMouseY,
                readableFont,
                setReadableFont,
                isMonochromeMode,
                setMonochromeMode,
                isLowSaturationMode,
                setLowSaturationMode,
                isHighSaturationMode,
                setHighSaturationMode,
                isHighContrastMode,
                setHighContrastMode,
                svgFilterElement,
                setSvgFilterElement,
                isMediaHidden,
                setMediaHidden,
                originalMediaStyles,
                setOriginalMediaStyles,
                isLinksHighlighted,
                setLinksHighlighted,
                isBigBlackCursorEnabled,
                setBigBlackCursorEnabled,
                isBigWhiteCursorEnabled,
                setBigWhiteCursorEnabled,
                cursorStyleEl,
                setCursorStyleEl,
                isFocusTunnelActive,
                setFocusTunnelActive,
                focusTunnelContainer,
                setFocusTunnelContainer,
                textAlignment,
                setTextAlignment,
                currentLanguage,
                setCurrentLanguage,
                widgetPosition,
                setWidgetPosition,
                isXLMode,
                setXLMode
            }}
        >
            {children}
        </WidgetContext.Provider>
    );
}

export function useWidget() {
    return useContext(WidgetContext);
}