import {
    createElement, //keep this createElement even we dont use it directly. bundler need it to bundle at run time
    Fragment, //keep this Fragment even we dont use it directly. bundler need it to bundle at run time
} from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import Item from "./Item";
import { save_settings } from "../common/functions";
import show_notification from "./notification";
import { useState, useEffect } from "@wordpress/element";
import ProPopup from "./ProPopup";

const Extensions = () => {

    // Free & Pro localized data
    const proStatus = etafe_local.proStatus;
    const freeExtensions = etafe_local.freeExtensions;
    const proExtensions  = etafe_local.proExtensions;

    const [showProPopup, setShowProPopup] = useState(false);

    // Merge all extensions into one object + add type
    const extensions = {
        ...Object.fromEntries(
            Object.entries(freeExtensions).map(([key, value]) => [
                key,
                { ...value, type: 'free' }
            ])
        ),
        ...Object.fromEntries(
            Object.entries(proExtensions).map(([key, value]) => [
                key,
                { ...value, type: 'pro' }
            ])
        )
    };

    const isProLocked = (id) => {
        return extensions[id]?.type === 'pro' && !proStatus;
    };

    useEffect(() => {
        if (proStatus) return;

        const lockedProExtensions = Object.keys(extensions).filter(
            (id) => extensions[id].type === 'pro'
        );

        setInactiveExtensions((prev) => {
            const merged = new Set([...prev, ...lockedProExtensions]);
            return Array.from(merged);
        });
    }, [proStatus]);

    // All extension IDs
    const extensionsArray = Object.keys(extensions);

    // Filter state
    const [filterType, setFilterType] = useState('');

    // Search state
    const [search, setSearch] = useState('');
    
    // Loading state
    const [loading, setLoading] = useState(false);

    // Filter extensions by title
    const filterExtensions = (ids) => {
        return ids.filter((id) => {
            const extension = extensions[id];
            const matchesSearch = extension.title.toLowerCase().includes(search);
            const matchesType  = filterType ? extension.type === filterType : true;
            return matchesSearch && matchesType;
        });
    };

    // Disabled extensions state
    const [inactiveExtensions, setInactiveExtensions] = useState(etafe_local.inactiveExtensions);
    const [saveButtonEnable, setSaveButtonEnable] = useState(false);

    // Toggle single extension
    const handleChange = (key) => {
        if (isProLocked(key)) {
            setShowProPopup(true);
            return;
        }

        setInactiveExtensions((prev) =>
            prev.includes(key)
                ? prev.filter(item => item !== key)
                : [...prev, key]
        );

        setSaveButtonEnable(true);
    };

    // Visible extensions
    const visibleExtensions = filterExtensions(extensionsArray);

    // Bulk actions
    const disableAll = () => {
        setInactiveExtensions((prev) => {
            const merged = new Set([...prev, ...visibleExtensions]);
            return Array.from(merged);
        });
        setSaveButtonEnable(true);
    };
    const enableAll = () => {
        setInactiveExtensions((prev) =>
            prev.filter(
                (id) =>
                    !visibleExtensions.includes(id) ||
                    isProLocked(id)
            )
        );
        setSaveButtonEnable(true);
    };

    // Button states
    const isEnableActive = visibleExtensions.some(
        (id) =>
            inactiveExtensions.includes(id) &&
            !isProLocked(id)
    );

    const isDisableActive = visibleExtensions.some(
        (id) =>
            !inactiveExtensions.includes(id) &&
            !isProLocked(id)
    );

    const isSetButtonEnable = () => {
        const arr1 = [...etafe_local.inactiveExtensions].sort();
        const arr2 = [...inactiveExtensions].sort();
   
        return JSON.stringify(arr1) == JSON.stringify(arr2);
    };

    // Save handler
    const save = async () => {
        if (loading) return;

        setLoading(true);

        try {
            await save_settings({
                type: 'extension',
                inactive_items: inactiveExtensions
            });

            show_notification({message: __('Settings saved successfully.', 'elentix-addons-for-elementor')})

            setSaveButtonEnable(false);
            etafe_local.inactiveExtensions = [...inactiveExtensions];
        } catch (error) {
            show_notification({message: __('Failed to save settings. Please try again.', 'elentix-addons-for-elementor'), type: 'error'})
        } finally {
            setLoading(false);
        }
    };

    // Unsave state check & prevent
    useEffect(() => {
        const handleBeforeUnload = (e) => {
            if (!saveButtonEnable) return;

            e.preventDefault();
            e.returnValue = '';
        };

        window.addEventListener('beforeunload', handleBeforeUnload);

        return () => {
            window.removeEventListener('beforeunload', handleBeforeUnload);
        };
    }, [saveButtonEnable]);

    
    return (
        <>
            {showProPopup && (
                <ProPopup
                    onClose={() => setShowProPopup(false)}
                />
            )}
            <div class="etafe-controls">
                <div className="control-wrapper">
                    <div className="search-wrapper">
                        <input
                            type="text"
                            class="etafe-search-input"
                            placeholder={__('Search extension...', 'elentix-addons-for-elementor')}
                            value={search}
                            onChange={(e) => setSearch(e.target.value.toLowerCase())}
                        />
                    </div>
                    <div class="select-option-wrapper">
                        <select
                            name="select"
                            id="select-option"
                            class="form-select"
                            value={filterType}
                            onChange={(e) => setFilterType(e.target.value)}
                        >
                            <option value="">{__('All Extensions', 'elentix-addons-for-elementor')}</option>
                            <option value="free">{__('Free Extensions', 'elentix-addons-for-elementor')}</option>
                            <option value="pro">{__('Pro Extensions', 'elentix-addons-for-elementor')}</option>
                        </select>
                    </div>
                </div>
                <div className="action-btn-wrapper">
                    <button
                        type="button"
                        class="etafe-btn-enable"
                        disabled={!isEnableActive}
                        onClick={enableAll}>
                        {__('Enable All', 'elentix-addons-for-elementor')}
                    </button>
                    <button
                        type="button"
                        class="etafe-btn-disable"
                        disabled={!isDisableActive}
                        onClick={disableAll}>
                        {__('Disable All', 'elentix-addons-for-elementor')}
                    </button>
                    <button
                        type="button"
                        class="etafe-btn-save"
                        disabled={isSetButtonEnable() || loading}
                        onClick={save}>
                        {__('Save Changes', 'elentix-addons-for-elementor')}
                    </button>
                </div>
            </div>

            <div className="etafe-section">
                <div className="etafe-items-grid">
                    {filterExtensions(extensionsArray).length > 0
                        ? filterExtensions(extensionsArray).map((id) => {
                            const isActive = !inactiveExtensions.includes(id);

                            return (
                                <Item
                                    key={id}
                                    itemKey={id}
                                    name={extensions[id].title}
                                    docLink={extensions[id].docLink}
                                    liveLink={extensions[id].liveLink}
                                    badge={extensions[id].type === 'free' ? __('Free', 'elentix-addons-for-elementor') : __('Pro', 'elentix-addons-for-elementor')}
                                    class_name={[
                                        extensions[id].type === 'pro' ? 'pro-item' : '',
                                        isActive ? 'active' : ''
                                    ].join(' ').trim()}
                                    onChange={handleChange}
                                    checked={!inactiveExtensions.includes(id)}
                                    disabled={isProLocked(id)}
                                />
                            )
                        })
                        : <p className="etafe-no-results">{__('No items found matching your search.', 'elentix-addons-for-elementor')}</p>
                    }
                </div>
            </div>
        </>
    );
}
export default Extensions;