/**
 * TNC FlipBook 3D — Gutenberg Blocks Bundle (zero-build)
 *
 * All three blocks use server-side rendering (save returns null).
 * This avoids block validation issues and keeps viewer URLs fresh.
 *
 * Blocks:
 *   1. tncfb3d/flipbook-embed      — inline embed (iframe)
 *   2. tncfb3d/flipbook-link       — text link to open flipbook
 *   3. tncfb3d/flipbook-image-link — image link to open flipbook
 */
( function() {
    'use strict';

    var el              = wp.element.createElement;
    var useState        = wp.element.useState;
    var registerBlock   = wp.blocks.registerBlockType;
    var useBlockProps   = wp.blockEditor.useBlockProps;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var BlockControls   = wp.blockEditor.BlockControls;
    var RichText        = wp.blockEditor.RichText;
    var MediaUpload     = wp.blockEditor.MediaUpload;
    var MediaUploadCheck = wp.blockEditor.MediaUploadCheck;
    var PanelBody       = wp.components.PanelBody;
    var SelectControl   = wp.components.SelectControl;
    var TextControl     = wp.components.TextControl;
    var ToggleControl   = wp.components.ToggleControl;
    var Button          = wp.components.Button;
    var ToolbarGroup    = wp.components.ToolbarGroup;
    var ToolbarButton   = wp.components.ToolbarButton;
    var Placeholder     = wp.components.Placeholder;
    var Disabled        = wp.components.Disabled;
    var SandBox         = wp.components.SandBox;
    var __              = wp.i18n.__;
    var data            = window.tncfb3dBlockData || {};
    var flipbooks       = data.flipbooks || [];
    var strings         = data.strings || {};
    var pluginUrl       = data.pluginUrl || '';

    // Brand block icon — official plugin logo (PNG).
    function brandIcon() {
        return el( 'img', {
            src: pluginUrl + 'assets/images/tnc-flipbook-icon-color.png',
            alt: '',
            style: { width: 24, height: 24, objectFit: 'contain' },
        } );
    }
    var iconEmbed     = brandIcon();
    var iconLink      = brandIcon();
    var iconImageLink = brandIcon();

    // Inserter preview — illustrated SVG per block variant.
    function previewImage( file ) {
        return el( 'div', { className: 'tncfb-block-preview-illustration' },
            el( 'img', {
                src: pluginUrl + 'blocks/preview/' + file,
                alt: '',
                style: { width: '100%', height: 'auto', display: 'block' },
            } )
        );
    }
    function previewEmbed()     { return previewImage( 'embed.svg' ); }
    function previewLink()      { return previewImage( 'link.svg' ); }
    function previewImageLink() { return previewImage( 'image-link.svg' ); }

    // Build options array for flipbook selector
    var flipbookOptions = [ { label: strings.selectFlipbook || '— Select a FlipBook —', value: 0 } ];
    flipbooks.forEach( function( fb ) {
        flipbookOptions.push( { label: fb.title || ( 'FlipBook #' + fb.id ), value: fb.id } );
    } );

    var modeOptions = [
        { label: strings.popup  || 'Popup',    value: 'popup' },
        { label: strings.newTab || 'New Tab',   value: 'new_tab' },
        { label: strings.sameTab || 'Same Tab', value: 'same_tab' },
    ];

    var linkStyleOptions = [
        { label: __( 'Text Link', 'tnc-flipbook-3d-lite' ), value: 'text' },
        { label: __( 'Button', 'tnc-flipbook-3d-lite' ),    value: 'button' },
    ];

    // Helper: get flipbook title by ID
    function getFlipbookTitle( id ) {
        for ( var i = 0; i < flipbooks.length; i++ ) {
            if ( flipbooks[ i ].id === id ) return flipbooks[ i ].title;
        }
        return '';
    }

    // Helper: mode label
    function modeLabel( mode ) {
        return mode === 'popup' ? __( 'Popup', 'tnc-flipbook-3d-lite' ) :
               mode === 'new_tab' ? __( 'New Tab', 'tnc-flipbook-3d-lite' ) :
               __( 'Same Tab', 'tnc-flipbook-3d-lite' );
    }

    // ── 1. Embed Block ──────────────────────────────────────────────────────────

    registerBlock( 'tncfb3d/flipbook-embed', {
        title: __( 'TNC FlipBook 3D Embed', 'tnc-flipbook-3d-lite' ),
        icon: iconEmbed,
        category: 'tncfb3d',

        edit: function( props ) {
            var attrs    = props.attributes;
            if ( attrs._isPreview ) { return previewEmbed(); }
            var setAttrs = props.setAttributes;
            var blockProps = useBlockProps( { className: 'tncfb-block-wrap tncfb-embed-block' } );

            if ( ! attrs.flipbookId ) {
                return el( 'div', blockProps,
                    el( Placeholder, {
                        icon: iconEmbed,
                        label: __( 'TNC FlipBook 3D Embed', 'tnc-flipbook-3d-lite' ),
                        instructions: __( 'Select a FlipBook to embed on the page.', 'tnc-flipbook-3d-lite' ),
                        className: 'tncfb-block-placeholder',
                    },
                        flipbooks.length === 0
                            ? el( 'p', null, strings.noFlipbooks || 'No FlipBooks found. Create one first.' )
                            : el( SelectControl, {
                                value: attrs.flipbookId,
                                options: flipbookOptions,
                                onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                            } )
                    )
                );
            }

            var selectedTitle = getFlipbookTitle( attrs.flipbookId );

            return el( 'div', blockProps,
                // Sidebar controls
                el( InspectorControls, null,
                    el( PanelBody, { title: __( 'FlipBook Settings', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                        el( SelectControl, {
                            label: __( 'FlipBook', 'tnc-flipbook-3d-lite' ),
                            value: attrs.flipbookId,
                            options: flipbookOptions,
                            onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Iframe Title', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Accessible title for the iframe. Defaults to the FlipBook post title.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.iframeTitle,
                            onChange: function( val ) { setAttrs( { iframeTitle: val } ); },
                        } )
                    ),
                    el( PanelBody, { title: __( 'Dimensions', 'tnc-flipbook-3d-lite' ), initialOpen: false },
                        el( TextControl, {
                            label: __( 'Width', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 100%, 800px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.width,
                            onChange: function( val ) { setAttrs( { width: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Height', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 600px. Leave empty for adaptive height.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.height,
                            onChange: function( val ) { setAttrs( { height: val } ); },
                        } )
                    ),
                    el( PanelBody, { title: __( 'Viewer Overrides', 'tnc-flipbook-3d-lite' ), initialOpen: false },
                        el( TextControl, {
                            label: __( 'Start Page', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Page number to open on. Leave empty for page 1.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.page,
                            onChange: function( val ) { setAttrs( { page: val } ); },
                        } )
                    ),
                    el( PanelBody, { title: __( 'Full Screen Link', 'tnc-flipbook-3d-lite' ), initialOpen: false },
                        el( ToggleControl, {
                            label: __( 'Show full-screen link', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Render a "View FlipBook" link above or below the embed.', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.fullscreenLink,
                            onChange: function( val ) { setAttrs( { fullscreenLink: val } ); },
                        } ),
                        attrs.fullscreenLink && el( TextControl, {
                            label: __( 'Link Text', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenLinkText,
                            onChange: function( val ) { setAttrs( { fullscreenLinkText: val } ); },
                        } ),
                        attrs.fullscreenLink && el( SelectControl, {
                            label: __( 'Position', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenLinkPosition,
                            options: [
                                { label: __( 'Above embed', 'tnc-flipbook-3d-lite' ), value: 'above' },
                                { label: __( 'Below embed', 'tnc-flipbook-3d-lite' ), value: 'below' },
                            ],
                            onChange: function( val ) { setAttrs( { fullscreenLinkPosition: val } ); },
                        } ),
                        attrs.fullscreenLink && el( SelectControl, {
                            label: __( 'Alignment', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenLinkAlign,
                            options: [
                                { label: __( 'Left', 'tnc-flipbook-3d-lite' ),   value: 'left' },
                                { label: __( 'Center', 'tnc-flipbook-3d-lite' ), value: 'center' },
                                { label: __( 'Right', 'tnc-flipbook-3d-lite' ),  value: 'right' },
                            ],
                            onChange: function( val ) { setAttrs( { fullscreenLinkAlign: val } ); },
                        } ),
                        attrs.fullscreenLink && el( SelectControl, {
                            label: __( 'Open Mode', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenLinkMode,
                            options: modeOptions,
                            onChange: function( val ) { setAttrs( { fullscreenLinkMode: val } ); },
                        } ),
                        attrs.fullscreenLink && el( ToggleControl, {
                            label: __( 'Add rel="nofollow"', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.fullscreenNofollow,
                            onChange: function( val ) { setAttrs( { fullscreenNofollow: val } ); },
                        } ),
                        attrs.fullscreenLink && 'popup' === attrs.fullscreenLinkMode && el( SelectControl, {
                            label: __( 'Popup Theme', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenPopupTheme || 'dark',
                            options: [
                                { label: __( 'Dark', 'tnc-flipbook-3d-lite' ),  value: 'dark' },
                                { label: __( 'Light', 'tnc-flipbook-3d-lite' ), value: 'light' },
                            ],
                            onChange: function( val ) { setAttrs( { fullscreenPopupTheme: val } ); },
                        } ),
                        attrs.fullscreenLink && 'popup' === attrs.fullscreenLinkMode && el( TextControl, {
                            label: __( 'Popup Width', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vw, 800px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenPopupWidth,
                            onChange: function( val ) { setAttrs( { fullscreenPopupWidth: val } ); },
                        } ),
                        attrs.fullscreenLink && 'popup' === attrs.fullscreenLinkMode && el( TextControl, {
                            label: __( 'Popup Height', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vh, 600px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.fullscreenPopupHeight,
                            onChange: function( val ) { setAttrs( { fullscreenPopupHeight: val } ); },
                        } ),
                        attrs.fullscreenLink && 'popup' === attrs.fullscreenLinkMode && el( ToggleControl, {
                            label: __( 'Transparent Background', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.fullscreenTransparent,
                            onChange: function( val ) { setAttrs( { fullscreenTransparent: val } ); },
                        } )
                    )
                ),

                // Toolbar
                el( BlockControls, null,
                    el( ToolbarGroup, null,
                        el( ToolbarButton, {
                            icon: 'update',
                            label: __( 'Change FlipBook', 'tnc-flipbook-3d-lite' ),
                            onClick: function() { setAttrs( { flipbookId: 0 } ); },
                        } )
                    )
                ),

                // Preview card
                el( 'div', { className: 'tncfb-embed-preview' },
                    el( 'div', { className: 'tncfb-embed-card-icon' },
                        el( 'img', { src: ( window.tncfb3dBlockData && window.tncfb3dBlockData.pluginUrl ? window.tncfb3dBlockData.pluginUrl : '' ) + 'assets/images/tnc-flipbook-icon-color.png', alt: '' } )
                    ),
                    el( 'div', { className: 'tncfb-embed-card-title' },
                        selectedTitle || ( 'FlipBook #' + attrs.flipbookId )
                    ),
                    el( 'div', { className: 'tncfb-embed-card-meta' },
                        ( attrs.width || '100%' ) + ' \u00d7 ' + ( attrs.height || 'auto' )
                    )
                )
            );
        },

        save: function() {
            return null;
        },
    } );

    // ── 2. Link Block ───────────────────────────────────────────────────────────

    registerBlock( 'tncfb3d/flipbook-link', {
        title: __( 'TNC FlipBook 3D Link', 'tnc-flipbook-3d-lite' ),
        icon: iconLink,
        category: 'tncfb3d',

        edit: function( props ) {
            var attrs    = props.attributes;
            if ( attrs._isPreview ) { return previewLink(); }
            var setAttrs = props.setAttributes;
            var isButton = 'button' === attrs.linkStyle;

            var className = 'tncfb-block-wrap tncfb-link-block';
            if ( isButton ) className += ' tncfb-style-button';

            var blockProps = useBlockProps( { className: className } );

            if ( ! attrs.flipbookId ) {
                return el( 'div', blockProps,
                    el( Placeholder, {
                        icon: iconLink,
                        label: __( 'TNC FlipBook 3D Link', 'tnc-flipbook-3d-lite' ),
                        instructions: __( 'Select a FlipBook and enter link text.', 'tnc-flipbook-3d-lite' ),
                        className: 'tncfb-block-placeholder',
                    },
                        flipbooks.length === 0
                            ? el( 'p', null, strings.noFlipbooks || 'No FlipBooks found. Create one first.' )
                            : el( SelectControl, {
                                value: attrs.flipbookId,
                                options: flipbookOptions,
                                onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                            } )
                    )
                );
            }

            return el( 'div', blockProps,
                // Sidebar controls
                el( InspectorControls, null,
                    el( PanelBody, { title: __( 'FlipBook', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                        el( SelectControl, {
                            label: __( 'FlipBook', 'tnc-flipbook-3d-lite' ),
                            value: attrs.flipbookId,
                            options: flipbookOptions,
                            onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                        } )
                    ),
                    el( PanelBody, { title: __( 'Link Settings', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                        el( TextControl, {
                            label: __( 'Link Text', 'tnc-flipbook-3d-lite' ),
                            value: attrs.linkText,
                            onChange: function( val ) { setAttrs( { linkText: val } ); },
                        } ),
                        el( SelectControl, {
                            label: __( 'Open Mode', 'tnc-flipbook-3d-lite' ),
                            value: attrs.mode,
                            options: modeOptions,
                            onChange: function( val ) { setAttrs( { mode: val } ); },
                        } ),
                        el( SelectControl, {
                            label: __( 'Link Style', 'tnc-flipbook-3d-lite' ),
                            value: attrs.linkStyle,
                            options: linkStyleOptions,
                            onChange: function( val ) { setAttrs( { linkStyle: val } ); },
                        } ),
                        el( ToggleControl, {
                            label: __( 'Add rel="nofollow"', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.nofollow,
                            onChange: function( val ) { setAttrs( { nofollow: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Start Page', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Page number to open on. Leave empty for page 1.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.page,
                            onChange: function( val ) { setAttrs( { page: val } ); },
                        } ),
                    ),
                    'popup' === attrs.mode && el( PanelBody, { title: __( 'Popup Settings', 'tnc-flipbook-3d-lite' ), initialOpen: false },
                        el( SelectControl, {
                            label: __( 'Popup Theme', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupTheme || 'dark',
                            options: [
                                { label: __( 'Dark', 'tnc-flipbook-3d-lite' ),  value: 'dark' },
                                { label: __( 'Light', 'tnc-flipbook-3d-lite' ), value: 'light' },
                            ],
                            onChange: function( val ) { setAttrs( { popupTheme: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Popup Width', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vw, 800px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupWidth,
                            onChange: function( val ) { setAttrs( { popupWidth: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Popup Height', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vh, 600px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupHeight,
                            onChange: function( val ) { setAttrs( { popupHeight: val } ); },
                        } ),
                        el( ToggleControl, {
                            label: __( 'Transparent Background', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Show the popup overlay behind the page chrome.', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.transparent,
                            onChange: function( val ) { setAttrs( { transparent: val } ); },
                        } )
                    )
                ),

                // Toolbar
                el( BlockControls, null,
                    el( ToolbarGroup, null,
                        el( ToolbarButton, {
                            icon: 'update',
                            label: __( 'Change FlipBook', 'tnc-flipbook-3d-lite' ),
                            onClick: function() { setAttrs( { flipbookId: 0 } ); },
                        } )
                    )
                ),

                // Inline editable link preview
                el( 'div', { className: 'tncfb-link-preview-wrap' },
                    isButton
                        ? el( 'span', { className: 'tncfb-link-button-preview' },
                            el( 'img', { className: 'tncfb-link-icon', src: ( window.tncfb3dBlockData && window.tncfb3dBlockData.pluginUrl ? window.tncfb3dBlockData.pluginUrl : '' ) + 'assets/images/tnc-flipbook-icon-color.png', alt: '' } ),
                            el( RichText, {
                                tagName: 'span',
                                className: 'tncfb-link-button-text',
                                value: attrs.linkText,
                                onChange: function( val ) { setAttrs( { linkText: val } ); },
                                placeholder: __( 'Link text…', 'tnc-flipbook-3d-lite' ),
                                allowedFormats: [ 'core/bold', 'core/italic' ],
                                withoutInteractiveFormatting: true,
                            } )
                          )
                        : el( 'span', { className: 'tncfb-link-text-preview' },
                            el( 'img', { className: 'tncfb-link-icon', src: ( window.tncfb3dBlockData && window.tncfb3dBlockData.pluginUrl ? window.tncfb3dBlockData.pluginUrl : '' ) + 'assets/images/tnc-flipbook-icon-color.png', alt: '' } ),
                            el( RichText, {
                                tagName: 'span',
                                className: 'tncfb-link-text-inner',
                                value: attrs.linkText,
                                onChange: function( val ) { setAttrs( { linkText: val } ); },
                                placeholder: __( 'Link text…', 'tnc-flipbook-3d-lite' ),
                                allowedFormats: [ 'core/bold', 'core/italic' ],
                                withoutInteractiveFormatting: true,
                            } )
                          ),
                    el( 'span', { className: 'tncfb-link-badge' },
                        getFlipbookTitle( attrs.flipbookId ) || ( 'FlipBook #' + attrs.flipbookId ),
                        el( 'span', { className: 'tncfb-link-badge-sep' }, '\u00B7' ),
                        modeLabel( attrs.mode )
                    )
                )
            );
        },

        save: function() {
            return null;
        },
    } );

    // ── 3. Image Link Block ─────────────────────────────────────────────────────

    registerBlock( 'tncfb3d/flipbook-image-link', {
        title: __( 'TNC FlipBook 3D Image Link', 'tnc-flipbook-3d-lite' ),
        icon: iconImageLink,
        category: 'tncfb3d',

        edit: function( props ) {
            var attrs    = props.attributes;
            if ( attrs._isPreview ) { return previewImageLink(); }
            var setAttrs = props.setAttributes;
            var blockProps = useBlockProps( { className: 'tncfb-block-wrap tncfb-image-link-block' } );

            // Step 1: select flipbook
            if ( ! attrs.flipbookId ) {
                return el( 'div', blockProps,
                    el( Placeholder, {
                        icon: iconImageLink,
                        label: __( 'TNC FlipBook 3D Image Link', 'tnc-flipbook-3d-lite' ),
                        instructions: __( 'Select a FlipBook, then choose an image.', 'tnc-flipbook-3d-lite' ),
                        className: 'tncfb-block-placeholder',
                    },
                        flipbooks.length === 0
                            ? el( 'p', null, strings.noFlipbooks || 'No FlipBooks found. Create one first.' )
                            : el( SelectControl, {
                                value: attrs.flipbookId,
                                options: flipbookOptions,
                                onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                            } )
                    )
                );
            }

            // Step 2: select image
            if ( ! attrs.imageUrl ) {
                return el( 'div', blockProps,
                    el( InspectorControls, null,
                        el( PanelBody, { title: __( 'FlipBook', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                            el( SelectControl, {
                                label: __( 'FlipBook', 'tnc-flipbook-3d-lite' ),
                                value: attrs.flipbookId,
                                options: flipbookOptions,
                                onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                            } )
                        )
                    ),
                    el( BlockControls, null,
                        el( ToolbarGroup, null,
                            el( ToolbarButton, {
                                icon: 'update',
                                label: __( 'Change FlipBook', 'tnc-flipbook-3d-lite' ),
                                onClick: function() { setAttrs( { flipbookId: 0 } ); },
                            } )
                        )
                    ),
                    el( Placeholder, {
                        icon: 'format-image',
                        label: __( 'TNC FlipBook 3D Image Link', 'tnc-flipbook-3d-lite' ),
                        instructions: __( 'Choose an image that will link to the FlipBook.', 'tnc-flipbook-3d-lite' ),
                        className: 'tncfb-block-placeholder',
                    },
                        el( MediaUploadCheck, null,
                            el( MediaUpload, {
                                onSelect: function( media ) {
                                    setAttrs( { imageUrl: media.url, imageId: media.id, imageAlt: media.alt || '' } );
                                },
                                allowedTypes: [ 'image' ],
                                value: attrs.imageId,
                                render: function( obj ) {
                                    return el( Button, { onClick: obj.open, variant: 'primary' },
                                        __( 'Select Image', 'tnc-flipbook-3d-lite' )
                                    );
                                },
                            } )
                        )
                    )
                );
            }

            // Step 3: fully configured
            var imgStyle = {};
            if ( attrs.imageWidth ) {
                imgStyle.width = attrs.imageWidth;
                imgStyle.height = 'auto';
            } else {
                imgStyle.maxWidth = '100%';
                imgStyle.height = 'auto';
            }

            return el( 'div', blockProps,
                // Sidebar controls
                el( InspectorControls, null,
                    el( PanelBody, { title: __( 'FlipBook', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                        el( SelectControl, {
                            label: __( 'FlipBook', 'tnc-flipbook-3d-lite' ),
                            value: attrs.flipbookId,
                            options: flipbookOptions,
                            onChange: function( val ) { setAttrs( { flipbookId: parseInt( val, 10 ) } ); },
                        } )
                    ),
                    el( PanelBody, { title: __( 'Image Settings', 'tnc-flipbook-3d-lite' ), initialOpen: true },
                        el( TextControl, {
                            label: __( 'Alt Text', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Describe the image for screen readers.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.imageAlt,
                            onChange: function( val ) { setAttrs( { imageAlt: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Image Width', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 300px, 50%. Leave empty for full width.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.imageWidth,
                            onChange: function( val ) { setAttrs( { imageWidth: val } ); },
                        } ),
                        el( 'div', { style: { marginTop: '12px' } },
                            el( MediaUploadCheck, null,
                                el( MediaUpload, {
                                    onSelect: function( media ) {
                                        setAttrs( { imageUrl: media.url, imageId: media.id, imageAlt: media.alt || '' } );
                                    },
                                    allowedTypes: [ 'image' ],
                                    value: attrs.imageId,
                                    render: function( obj ) {
                                        return el( Button, { onClick: obj.open, variant: 'secondary', isSmall: true },
                                            __( 'Replace Image', 'tnc-flipbook-3d-lite' )
                                        );
                                    },
                                } )
                            ),
                            el( Button, {
                                onClick: function() { setAttrs( { imageUrl: '', imageId: 0, imageAlt: '' } ); },
                                variant: 'tertiary',
                                isSmall: true,
                                isDestructive: true,
                                style: { marginLeft: '8px' },
                            }, __( 'Remove Image', 'tnc-flipbook-3d-lite' ) )
                        )
                    ),
                    el( PanelBody, { title: __( 'Link Settings', 'tnc-flipbook-3d-lite' ), initialOpen: false },
                        el( SelectControl, {
                            label: __( 'Open Mode', 'tnc-flipbook-3d-lite' ),
                            value: attrs.mode,
                            options: modeOptions,
                            onChange: function( val ) { setAttrs( { mode: val } ); },
                        } ),
                        el( TextControl, {
                            label: __( 'Start Page', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Page number to open on. Leave empty for page 1.', 'tnc-flipbook-3d-lite' ),
                            value: attrs.page,
                            onChange: function( val ) { setAttrs( { page: val } ); },
                        } ),
                        el( ToggleControl, {
                            label: __( 'Add rel="nofollow"', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.nofollow,
                            onChange: function( val ) { setAttrs( { nofollow: val } ); },
                        } ),
                        'popup' === attrs.mode && el( SelectControl, {
                            label: __( 'Popup Theme', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupTheme || 'dark',
                            options: [
                                { label: __( 'Dark', 'tnc-flipbook-3d-lite' ),  value: 'dark' },
                                { label: __( 'Light', 'tnc-flipbook-3d-lite' ), value: 'light' },
                            ],
                            onChange: function( val ) { setAttrs( { popupTheme: val } ); },
                        } ),
                        'popup' === attrs.mode && el( TextControl, {
                            label: __( 'Popup Width', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vw, 800px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupWidth,
                            onChange: function( val ) { setAttrs( { popupWidth: val } ); },
                        } ),
                        'popup' === attrs.mode && el( TextControl, {
                            label: __( 'Popup Height', 'tnc-flipbook-3d-lite' ),
                            help: __( 'CSS value, e.g. 90vh, 600px', 'tnc-flipbook-3d-lite' ),
                            value: attrs.popupHeight,
                            onChange: function( val ) { setAttrs( { popupHeight: val } ); },
                        } ),
                        'popup' === attrs.mode && el( ToggleControl, {
                            label: __( 'Transparent Background', 'tnc-flipbook-3d-lite' ),
                            help: __( 'Remove the popup viewer background so the page shows through.', 'tnc-flipbook-3d-lite' ),
                            checked: !! attrs.transparent,
                            onChange: function( val ) { setAttrs( { transparent: val } ); },
                        } )
                    )
                ),

                // Toolbar
                el( BlockControls, null,
                    el( ToolbarGroup, null,
                        el( ToolbarButton, {
                            icon: 'update',
                            label: __( 'Change FlipBook', 'tnc-flipbook-3d-lite' ),
                            onClick: function() { setAttrs( { flipbookId: 0 } ); },
                        } ),
                        el( MediaUploadCheck, null,
                            el( MediaUpload, {
                                onSelect: function( media ) {
                                    setAttrs( { imageUrl: media.url, imageId: media.id, imageAlt: media.alt || '' } );
                                },
                                allowedTypes: [ 'image' ],
                                value: attrs.imageId,
                                render: function( obj ) {
                                    return el( ToolbarButton, {
                                        icon: 'format-image',
                                        label: __( 'Replace Image', 'tnc-flipbook-3d-lite' ),
                                        onClick: obj.open,
                                    } );
                                },
                            } )
                        )
                    )
                ),

                // Image preview with overlay
                el( 'figure', { className: 'tncfb-image-link-figure' },
                    el( 'img', {
                        src: attrs.imageUrl,
                        alt: attrs.imageAlt || '',
                        style: imgStyle,
                    } ),
                    // Overlay with book icon
                    el( 'div', { className: 'tncfb-image-link-overlay' },
                        el( 'img', { src: ( window.tncfb3dBlockData && window.tncfb3dBlockData.pluginUrl ? window.tncfb3dBlockData.pluginUrl : '' ) + 'assets/images/tnc-flipbook-icon-white.png', alt: '' } )
                    ),
                    // Bottom badge
                    el( 'figcaption', { className: 'tncfb-image-link-badge' },
                        el( 'span', { className: 'tncfb-image-link-badge-title' },
                            getFlipbookTitle( attrs.flipbookId ) || ( 'FlipBook #' + attrs.flipbookId )
                        ),
                        el( 'span', { className: 'tncfb-image-link-badge-mode' },
                            modeLabel( attrs.mode )
                        )
                    )
                )
            );
        },

        save: function() {
            return null;
        },
    } );

} )();
