/**
 * External Dependencies
 */
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import { 
    __experimentalToolsPanel as ToolsPanel,
    __experimentalToolsPanelItem as ToolsPanelItem,
    __experimentalVStack as VStack,
    ToggleControl,
    RangeControl,
    Notice,
    SelectControl,
    Button,
    Flex,
    FlexItem
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useState } from '@wordpress/element';

const BLOCK_NAME = 'spectra/slider';

// Note: Slides per view options filter removed as we now use RangeControl instead of SelectControl

/**
 * Filter to replace the free version's slides per view control content with pro version.
 */
addFilter(
    'spectra.slider.slidesPerViewControl',
    'spectra-pro/slider/pro-slides-per-view-control',
    ( _originalControl, props ) => {
        const { 
            attributes: { slidesPerView },
            setAttributes
        } = props;

        return (
            <RangeControl
                label={ __(
                    'Slides Per View',
                    'spectra-pro'
                ) }
                value={ parseFloat( slidesPerView || 1 ) }
                onChange={ ( value ) => {
                    setAttributes( { slidesPerView: value.toString() } );
                } }
                min={ 1 }
                max={ 10 }
                step={ 0.1 }
                allowReset={ false }
                resetFallbackValue={ 1 }
            />
        );
    }
);

/**
 * Add custom attributes to the slider block.
 *
 * @param {Object} settings The settings object.
 * @param {string} name     The name of the block.
 * @return {Object}         The modified settings object.
 */
const addSliderAttributes = ( settings, name ) => name !== BLOCK_NAME 
    ? settings 
    : {
        ...settings,
        attributes: {
            ...settings.attributes,
            hashNavigation: {
                type: 'boolean',
                default: false
            },
            customNavigation: {
                type: 'boolean',
                default: false
            },
            transitionEffect: {
                type: 'string',
                default: 'slide'
            }
        }
    };
// adding attributes to the slider block.
addFilter(
    'blocks.registerBlockType',
    'spectra-pro/slider/hash-navigation-attributes',
    addSliderAttributes
);

/**
 * Higher-order component to add hash navigation controls.
 *
 * @param {Object} BlockEdit The BlockEdit component.
 * @return {Object}         The enhanced component.
 */
const withProSliderControls = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const { 
            name,
            setAttributes,
            attributes: { 
                sliderId,
                hashNavigation = false,
                customNavigation = false,
                transitionEffect = 'slide'
            }
        } = props;
        const [ copiedPrev, setCopiedPrev ] = useState( false );
        const [ copiedNext, setCopiedNext ] = useState( false );

        if ( name !== BLOCK_NAME ) {
            return <BlockEdit { ...props } />;
        }

        const prevClass = `slider-${ sliderId }-prev`;
        const nextClass = `slider-${ sliderId }-next`;

        // Copy previous class to clipboard
        const copyPrevClass = () => {
            navigator.clipboard.writeText( prevClass );
            setCopiedPrev( true );
            setTimeout( () => setCopiedPrev( false ), 2000 );
        };

        // Copy next class to clipboard
        const copyNextClass = () => {
            navigator.clipboard.writeText( nextClass );
            setCopiedNext( true );
            setTimeout( () => setCopiedNext( false ), 2000 );
        };

        // Reset all navigation settings
        const resetAll = () => {
            setAttributes( {
                hashNavigation: false,
                customNavigation: false
            } );
        };

        return (
            <>
                <BlockEdit {...props} />
                <InspectorControls>
                    {/* Pro Navigation Controls */}
                    <ToolsPanel
                        label={ __( 'Navigation', 'spectra-pro' ) }
                        resetAll={ resetAll }
                    >
                        
                        {/* Hash Navigation Tool Panel
                            This tool panel item will require reset when:
                            - Hash navigation is enabled/disabled
                            - When reset, hash navigation returns to default (false)
                        */}
                        <ToolsPanelItem
                            hasValue={ () => !! hashNavigation }
                            label={ __( 'Hash Navigation', 'spectra-pro' ) }
                            onDeselect={ () => setAttributes( { hashNavigation: false } ) }
                            isShownByDefault
                        >
                            <ToggleControl
                                label={ __( 'Enable Hash Navigation', 'spectra-pro' ) }
                                help={ __( 'Navigate to slides using URL hash', 'spectra-pro' ) }
                                checked={ hashNavigation }
                                onChange={ ( value ) => setAttributes( { hashNavigation: value } ) }
                            />
                        </ToolsPanelItem>

                        {/* Custom Navigation Tool Panel
                            This tool panel item will require reset when:
                            - Custom navigation is enabled/disabled
                            - When reset, custom navigation returns to default (false)
                        */}
                            <ToolsPanelItem
                                hasValue={ () => !!customNavigation }
                                label={ __( 'Custom Navigation', 'spectra-pro' ) }
                                onDeselect={ () => setAttributes( { customNavigation: false } ) }
                                isShownByDefault
                            >
                                <ToggleControl
                                    label={ __( 'Enable Custom Navigation', 'spectra-pro' ) }
                                    help={ __( 'Enable custom navigation classes', 'spectra-pro' ) }
                                    checked={ customNavigation }
                                    onChange={ ( value ) => setAttributes( { customNavigation: value } ) }
                                />

                                {customNavigation && (
                                    // Better UI for custom navigation buttons.
                                    <VStack spacing={ 3 }>
                                        <Notice status="info" isDismissible={ false }>
                                            <p style={{ margin: 0 }}>{ __( 'Use these CSS classes for custom navigation buttons:', 'spectra-pro' ) }</p>
                                        </Notice>
                                        
                                        <VStack spacing={ 2 }>
                                            <Flex align="center" gap={ 2 }>
                                                <FlexItem>
                                                    <strong>{ __( 'Previous Button:', 'spectra-pro' ) }</strong>
                                                </FlexItem>
                                            </Flex>
                                            <Flex align="center" gap={ 2 } style={{ backgroundColor: '#f6f7f7', padding: '8px 12px', borderRadius: '4px', border: '1px solid #ddd' }}>
                                                <FlexItem style={{ flex: 1 }}>
                                                    <code style={{ 
                                                        fontSize: '13px', 
                                                        fontFamily: 'Monaco, Consolas, monospace',
                                                        color: '#6E4FFE',
                                                        backgroundColor: 'transparent',
                                                        padding: 0
                                                    }}>
                                                        { prevClass }
                                                    </code>
                                                </FlexItem>
                                                <FlexItem>
                                                    <Button
                                                        size="small"
                                                        variant={ copiedPrev ? 'primary' : 'secondary' }
                                                        onClick={ copyPrevClass }
                                                        style={{ minWidth: '60px' }}
                                                    >
                                                        { copiedPrev ? __( 'Copied!', 'spectra-pro' ) : __( 'Copy', 'spectra-pro' ) }
                                                    </Button>
                                                </FlexItem>
                                            </Flex>

                                            <Flex align="center" gap={ 2 }>
                                                <FlexItem>
                                                    <strong>{ __( 'Next Button:', 'spectra-pro' ) }</strong>
                                                </FlexItem>
                                            </Flex>
                                            <Flex align="center" gap={ 2 } style={{ backgroundColor: '#f6f7f7', padding: '8px 12px', borderRadius: '4px', border: '1px solid #ddd' }}>
                                                <FlexItem style={{ flex: 1 }}>
                                                    <code style={{ 
                                                        fontSize: '13px', 
                                                        fontFamily: 'Monaco, Consolas, monospace',
                                                        color: '#6E4FFE',
                                                        backgroundColor: 'transparent',
                                                        padding: 0
                                                    }}>
                                                        { nextClass }
                                                    </code>
                                                </FlexItem>
                                                <FlexItem>
                                                    <Button
                                                        size="small"
                                                        variant={ copiedNext ? 'primary' : 'secondary' }
                                                        onClick={ copyNextClass }
                                                        style={{ minWidth: '60px' }}
                                                    >
                                                        { copiedNext ? __( 'Copied!', 'spectra-pro' ) : __( 'Copy', 'spectra-pro' ) }
                                                    </Button>
                                                </FlexItem>
                                            </Flex>
                                        </VStack>
                                    </VStack>
                                )}
                            </ToolsPanelItem>
                    </ToolsPanel>
                    {/* Transition Settings Tool Panel
                        This tool panel item will require reset when:
                        - Transition effect is changed
                        - When reset, transition effect returns to default (slide)
                    */}
                    <ToolsPanel
                        label={ __( 'Transitions', 'spectra-pro' ) }
                        resetAll={ () => setAttributes( { transitionEffect: 'slide' } ) }
                    >
                        <ToolsPanelItem
                            hasValue={ () => transitionEffect !== 'slide' }
                            label={ __( 'Transition Effect', 'spectra-pro' ) }
                            onDeselect={ () => setAttributes( { transitionEffect: 'slide' } ) }
                            isShownByDefault
                        >
                            <SelectControl
                                label={ __( 'Transition Effect', 'spectra-pro' ) }
                                value={ transitionEffect }
                                help={ __( 'Select the transition effect for the slider, note this will reflect in the frontend only.', 'spectra-pro' ) }
                                options={ [
                                    { value: 'slide', label: __( 'Slide', 'spectra-pro' ) },
                                    { value: 'fade', label: __( 'Fade', 'spectra-pro' ) },
                                    { value: 'coverflow', label: __( 'Coverflow', 'spectra-pro' ) },
                                    { value: 'flip', label: __( 'Flip', 'spectra-pro' ) },
                                    { value: 'cube', label: __( 'Cube', 'spectra-pro' ) },
                                ] }
                                onChange={ ( value ) => setAttributes( { transitionEffect: value } ) }
                            />
                            { ( 'flip' === transitionEffect || 'cube' === transitionEffect ) && (
                                <Notice 
                                    status="info" 
                                    isDismissible={ false }
                                >
                                    { 
                                    sprintf(
                                        /* translators: %s: transition effect type (e.g., Flip, Cube) */
                                        __( 'Note: Slides per view will be set to 1 when using %s transition effects.', 'spectra-pro' ),
                                        transitionEffect
                                    ) }
                                </Notice>
                            ) }
                        </ToolsPanelItem>
                    </ToolsPanel>
                </InspectorControls>
            </>
        );
    };
}, 'withProSliderControls' );
//adding pro settings to the slider block.
addFilter(
    'editor.BlockEdit',
    'spectra-pro/slider/pro-controls',
    withProSliderControls
);