const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, SelectControl, ToggleControl } = wp.components;
const { __, sprintf } = wp.i18n;

const LINE_CLASS_PREFIX = 'gb-line-effect-';
const MARQUEE_CLASS = 'gb-marquee-infinite-scroll';
const MARQUEE_SPEED_ATTR = 'frblMarqueeSpeed';
const GB_BLOCK = 'generateblocks/text';
const NATIVE_BLOCKS = [ 'core/paragraph', 'core/heading' ];
const ALL_MARQUEE_BLOCKS = [ GB_BLOCK, ...NATIVE_BLOCKS ];

// Marquee speed presets
const MARQUEE_SPEEDS = {
    fast: 10,    // 10 seconds - fast
    medium: 20,  // 20 seconds - medium
    slow: 40     // 40 seconds - slow
};

// Register marquee speed attribute for all supported blocks
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'frontblocks/add-marquee-attribute',
    ( settings, name ) => {
        if ( ALL_MARQUEE_BLOCKS.includes( name ) ) {
            settings.attributes = Object.assign( settings.attributes || {}, {
                [MARQUEE_SPEED_ATTR]: {
                    type: 'string',
                    default: '',
                },
            } );
        }
        return settings;
    }
);

const withHeadlineLineControl = createHigherOrderComponent( ( BlockEdit ) => {
   return ( props ) => {
      if ( ! ALL_MARQUEE_BLOCKS.includes( props.name ) ) {
         return <BlockEdit { ...props } />;
      }

      const { attributes, setAttributes } = props;
      const existingClasses = attributes.className || '';
      const htmlAttributes = attributes.htmlAttributes || {};
      const marqueeSpeed = attributes[MARQUEE_SPEED_ATTR] || 'medium';
      const isGBBlock = props.name === GB_BLOCK;

      const cleanExistingLineClasses = ( classes ) => {
         return classes
            .split(' ')
            .filter(cls => !cls.startsWith(LINE_CLASS_PREFIX))
            .join(' ')
            .replace( /\s{2,}/g, ' ' )
            .trim();
      };

      const cleanMarqueeClass = ( classes ) => {
         return classes
            .split(' ')
            .filter(cls => cls !== MARQUEE_CLASS)
            .join(' ')
            .replace( /\s{2,}/g, ' ' )
            .trim();
      };

      let currentLineStyle = 'none';
      if ( isGBBlock ) {
         if ( existingClasses.includes( LINE_CLASS_PREFIX + 'vertical' ) ) {
            currentLineStyle = 'vertical';
         } else if ( existingClasses.includes( LINE_CLASS_PREFIX + 'horizontal' ) ) {
            currentLineStyle = 'horizontal';
         }
      }

      const isMarqueeEnabled = existingClasses.includes(MARQUEE_CLASS);

      const setLineStyle = ( newStyle ) => {
         let newClasses = cleanExistingLineClasses(existingClasses);

         if ( newStyle !== 'none' ) {
               const classToAdd = LINE_CLASS_PREFIX + newStyle;
               newClasses = ( newClasses + ' ' + classToAdd ).trim();
            }

         // Preserve marquee class if enabled
         if ( isMarqueeEnabled ) {
            newClasses = ( newClasses + ' ' + MARQUEE_CLASS ).trim();
         }

         setAttributes( { className: newClasses } );
      };

      const setMarqueeEnabled = ( enabled ) => {
         let newClasses = cleanMarqueeClass(existingClasses);
         const newAttributes = { className: newClasses };

         if ( enabled ) {
            newClasses = ( newClasses + ' ' + MARQUEE_CLASS ).trim();
            newAttributes.className = newClasses;
            const currentSpeed = attributes[MARQUEE_SPEED_ATTR] || 'medium';
            newAttributes[MARQUEE_SPEED_ATTR] = currentSpeed;

            // GB blocks store speed in htmlAttributes for direct rendering.
            if ( isGBBlock ) {
               const updatedHtmlAttributes = { ...htmlAttributes };
               updatedHtmlAttributes['data-marquee-speed'] = MARQUEE_SPEEDS[currentSpeed] || MARQUEE_SPEEDS.medium;
               newAttributes.htmlAttributes = updatedHtmlAttributes;
            }
         } else {
            newAttributes[MARQUEE_SPEED_ATTR] = '';

            if ( isGBBlock ) {
               const updatedHtmlAttributes = { ...htmlAttributes };
               delete updatedHtmlAttributes['data-marquee-speed'];
               newAttributes.htmlAttributes = updatedHtmlAttributes;
            }
         }

         setAttributes( newAttributes );
      };

      const setMarqueeSpeed = ( speedPreset ) => {
         const speedValue = MARQUEE_SPEEDS[speedPreset] || MARQUEE_SPEEDS.medium;
         const newAttributes = { [MARQUEE_SPEED_ATTR]: speedPreset };

         if ( isGBBlock ) {
            const updatedHtmlAttributes = { ...htmlAttributes };
            updatedHtmlAttributes['data-marquee-speed'] = speedValue;
            newAttributes.htmlAttributes = updatedHtmlAttributes;
         }

         setAttributes( newAttributes );

         // Update marquee wrapper directly for immediate preview
         setTimeout(function() {
            const blockElement = document.querySelector('[data-block="' + props.clientId + '"]');
            if (blockElement) {
               const marqueeElement = blockElement.querySelector('.gb-marquee-infinite-scroll');
               if (marqueeElement) {
                  const wrapper = marqueeElement.querySelector('.gb-marquee-wrapper');
                  if (wrapper && typeof wrapper.updateMarqueeSpeed === 'function') {
                     wrapper.updateMarqueeSpeed(speedValue);
                  } else if (wrapper) {
                     // Fallback: update directly
                     wrapper.setAttribute('data-marquee-speed', speedValue);
                     wrapper.style.setProperty('--marquee-speed', speedValue + 's');
                     // Force animation update
                     const currentAnimation = wrapper.style.animation;
                     if (currentAnimation) {
                        const match = currentAnimation.match(/marquee-scroll-[\w-]+/);
                        if (match) {
                           const styleId = match[0].replace('marquee-scroll-', '');
                           wrapper.style.animation = 'marquee-scroll-' + styleId + ' ' + speedValue + 's linear infinite';
                           wrapper.style.animationDuration = speedValue + 's';
                        }
                     }
                  }
               }
            }
         }, 50);
      };


      return (
         <Fragment>
            <BlockEdit { ...props } />

            <InspectorControls>
               <PanelBody
                  title={ __( 'FrontBlocks - Visual Effects', 'frontblocks' ) }
                  initialOpen={ false }
               >
                  <p style={{ marginTop: 0, marginBottom: '10px' }}>
                     <small>{ __( 'FrontBlocks visual effect settings.', 'frontblocks' ) }</small>
                  </p>

                  { isGBBlock && (
                     <SelectControl
                        label={ __( 'Decorative Line Style', 'frontblocks' ) }
                        value={ currentLineStyle }
                        options={[
                           { label: __( 'None', 'frontblocks' ), value: 'none' },
                           { label: __( 'Vertical Line (Right)', 'frontblocks' ), value: 'vertical' },
                           { label: __( 'Horizontal Line (Right)', 'frontblocks' ), value: 'horizontal' },
                        ]}
                        onChange={ setLineStyle }
                        help={
                              currentLineStyle === 'none' ?
                              __( 'Select a line style to add a decorative element.', 'frontblocks' ) :
                              sprintf(
                                 __( 'Current style: %s.', 'frontblocks' ),
                                 currentLineStyle.charAt(0).toUpperCase() + currentLineStyle.slice(1)
                              )
                        }
                     />
                  )}

                  <ToggleControl
                     label={ __( 'Infinite Scrolling Marquee', 'frontblocks' ) }
                     checked={ isMarqueeEnabled }
                     onChange={ setMarqueeEnabled }
                     help={
                        isMarqueeEnabled ?
                        __( 'Marquee effect is active. Text will scroll infinitely.', 'frontblocks' ) :
                        __( 'Enable infinite scrolling marquee effect for the text.', 'frontblocks' )
                     }
                  />

                  { isMarqueeEnabled && (
                     <SelectControl
                        label={ __( 'Marquee Speed', 'frontblocks' ) }
                        value={ marqueeSpeed }
                        onChange={ setMarqueeSpeed }
                        options={[
                           { label: __( 'Fast', 'frontblocks' ), value: 'fast' },
                           { label: __( 'Medium', 'frontblocks' ), value: 'medium' },
                           { label: __( 'Slow', 'frontblocks' ), value: 'slow' },
                        ]}
                        help={ __( 'Select the scrolling speed for the marquee effect.', 'frontblocks' ) }
                     />
                  )}
               </PanelBody>

            </InspectorControls>
         </Fragment>
      );
   };
}, 'withHeadlineLineControl' );

wp.hooks.addFilter(
    'editor.BlockEdit',
    'frontblocks/headline-line-control',
    withHeadlineLineControl
);