( function( blocks, element, blockEditor, components, i18n ) {
    var el = element.createElement;
    var __ = i18n.__;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody  = components.PanelBody;
    var SelectControl = components.SelectControl;
    var TextControl   = components.TextControl;
    var ToggleControl = components.ToggleControl;
    var ColorPicker   = components.ColorPicker;

    blocks.registerBlockType( 'ssetu/stopwatch', {
        title: __( 'Simple Stopwatch', 'simple-stopwatch-easy-to-use' ),
        icon: 'clock',
        category: 'widgets',
        attributes: {
            mode:    { type: 'string',  default: 'stopwatch' },
            from:    { type: 'string',  default: '00:05:00' },
            color:   { type: 'string',  default: '#2271b1' },
            size:    { type: 'string',  default: 'large' },
            ms:      { type: 'boolean', default: false },
            sound:   { type: 'boolean', default: false },
            persist: { type: 'boolean', default: false },
        },
        edit: function( props ) {
            var attrs = props.attributes;
            var setAttributes = props.setAttributes;

            return el( element.Fragment, {},
                el( InspectorControls, {},
                    el( PanelBody, { title: __( 'Stopwatch Settings', 'simple-stopwatch-easy-to-use' ) },
                        el( SelectControl, {
                            label: __( 'Mode', 'simple-stopwatch-easy-to-use' ),
                            value: attrs.mode,
                            options: [
                                { label: __( 'Stopwatch (count up)', 'simple-stopwatch-easy-to-use' ), value: 'stopwatch' },
                                { label: __( 'Countdown timer', 'simple-stopwatch-easy-to-use' ), value: 'countdown' },
                            ],
                            onChange: function( value ) { setAttributes( { mode: value } ); },
                        } ),
                        attrs.mode === 'countdown' && el( TextControl, {
                            label: __( 'Countdown from (HH:MM:SS)', 'simple-stopwatch-easy-to-use' ),
                            value: attrs.from,
                            onChange: function( value ) { setAttributes( { from: value } ); },
                        } ),
                        el( SelectControl, {
                            label: __( 'Size', 'simple-stopwatch-easy-to-use' ),
                            value: attrs.size,
                            options: [
                                { label: __( 'Small', 'simple-stopwatch-easy-to-use' ), value: 'small' },
                                { label: __( 'Large', 'simple-stopwatch-easy-to-use' ), value: 'large' },
                            ],
                            onChange: function( value ) { setAttributes( { size: value } ); },
                        } ),
                        el( 'p', {}, __( 'Button Color', 'simple-stopwatch-easy-to-use' ) ),
                        el( ColorPicker, {
                            color: attrs.color,
                            onChange: function( value ) { setAttributes( { color: value } ); },
                            enableAlpha: false,
                        } ),
                        el( ToggleControl, {
                            label: __( 'Show milliseconds', 'simple-stopwatch-easy-to-use' ),
                            checked: attrs.ms,
                            onChange: function( value ) { setAttributes( { ms: value } ); },
                        } ),
                        el( ToggleControl, {
                            label: __( 'Play sound on start/stop', 'simple-stopwatch-easy-to-use' ),
                            checked: attrs.sound,
                            onChange: function( value ) { setAttributes( { sound: value } ); },
                        } ),
                        el( ToggleControl, {
                            label: __( 'Remember time after page reload', 'simple-stopwatch-easy-to-use' ),
                            checked: attrs.persist,
                            onChange: function( value ) { setAttributes( { persist: value } ); },
                        } )
                    )
                ),
                el( 'div', { className: 'ssetu-block-placeholder', style: { padding: '16px', border: '1px dashed #999', borderRadius: '8px', textAlign: 'center' } },
                    el( 'strong', {}, __( 'Simple Stopwatch', 'simple-stopwatch-easy-to-use' ) ),
                    el( 'p', {}, attrs.mode === 'countdown'
                        ? __( 'Countdown timer — preview shown on the live page.', 'simple-stopwatch-easy-to-use' )
                        : __( 'Stopwatch — preview shown on the live page.', 'simple-stopwatch-easy-to-use' ) )
                )
            );
        },
        save: function() {
            return null; // dynamic block — rendered server-side via render_callback
        },
    } );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.i18n );
