(function(blocks, element, components, editor, i18n) {
    const { registerBlockType } = blocks;
    const { createElement: el } = element;
    const { PanelBody, SelectControl, TextControl, ToggleControl, RangeControl } = components;
    const { InspectorControls } = editor;
    const { __ } = i18n;
    
    registerBlockType('list2play/servers', {
        edit: function(props) {
            const { attributes, setAttributes } = props;
            
            return el('div', { className: 'list2play-block-editor' },
                el(InspectorControls, {},
                    el(PanelBody, { title: __('Server Settings', 'list2play-servers'), initialOpen: true },
                        el('p', { style: { fontSize: '12px', color: '#666', marginBottom: '15px' } },
                            __('Block displays servers selected in plugin settings.', 'list2play-servers')
                        ),
                        el(TextControl, {
                            label: __('Game Type', 'list2play-servers'),
                            value: attributes.game_type || '',
                            placeholder: __('e.g., cs16, tf2', 'list2play-servers'),
                            onChange: (value) => setAttributes({ game_type: value })
                        }),
                        el(TextControl, {
                            label: __('Country Code', 'list2play-servers'),
                            value: attributes.country || '',
                            placeholder: __('e.g., US, GB, LT', 'list2play-servers'),
                            onChange: (value) => setAttributes({ country: value.toUpperCase() })
                        }),
                        el(SelectControl, {
                            label: __('Status', 'list2play-servers'),
                            value: attributes.status || '',
                            options: [
                                { label: __('All', 'list2play-servers'), value: '' },
                                { label: __('Online Only', 'list2play-servers'), value: 'online' },
                                { label: __('Offline Only', 'list2play-servers'), value: 'offline' },
                            ],
                            onChange: (value) => setAttributes({ status: value })
                        }),
                        el(SelectControl, {
                            label: __('Sort By', 'list2play-servers'),
                            value: attributes.sort || 'votes',
                            options: [
                                { label: __('Votes', 'list2play-servers'), value: 'votes' },
                                { label: __('Activity', 'list2play-servers'), value: 'activity' },
                                { label: __('Newest', 'list2play-servers'), value: 'newest' },
                            ],
                            onChange: (value) => setAttributes({ sort: value })
                        }),
                        el(SelectControl, {
                            label: __('Sort Direction', 'list2play-servers'),
                            value: attributes.direction || 'desc',
                            options: [
                                { label: __('Descending', 'list2play-servers'), value: 'desc' },
                                { label: __('Ascending', 'list2play-servers'), value: 'asc' },
                            ],
                            onChange: (value) => setAttributes({ direction: value })
                        }),
                        el(RangeControl, {
                            label: __('Servers Per Page', 'list2play-servers'),
                            value: attributes.per_page || 20,
                            min: 1,
                            max: 100,
                            onChange: (value) => setAttributes({ per_page: value })
                        })
                    ),
                    el(PanelBody, { title: __('Display Options', 'list2play-servers'), initialOpen: false },
                        el(ToggleControl, {
                            label: __('Show Stats', 'list2play-servers'),
                            checked: attributes.show_stats !== false,
                            onChange: (value) => setAttributes({ show_stats: value })
                        }),
                        el(ToggleControl, {
                            label: __('Show Votes', 'list2play-servers'),
                            checked: attributes.show_votes !== false,
                            onChange: (value) => setAttributes({ show_votes: value })
                        }),
                        el(ToggleControl, {
                            label: __('Show Vote Button', 'list2play-servers'),
                            checked: attributes.show_vote_button !== false,
                            onChange: (value) => setAttributes({ show_vote_button: value })
                        })
                    )
                ),
                el('div', { className: 'list2play-block-preview' },
                    el('p', { className: 'list2play-block-title' }, __('List2Play Servers', 'list2play-servers')),
                    el('div', { className: 'list2play-block-placeholder' },
                        el('p', {}, __('Server list will be displayed here.', 'list2play-servers')),
                        el('p', { style: { fontSize: '12px', color: '#666', marginTop: '10px' } },
                            __('Mode:', 'list2play-servers') + ' ' + (attributes.mode || 'user_servers') + ' | ' +
                            __('Per Page:', 'list2play-servers') + ' ' + (attributes.per_page || 20)
                        )
                    )
                )
            );
        },
        
        save: function() {
            // Server-side rendering, so return null
            return null;
        }
    });
})(
    window.wp.blocks,
    window.wp.element,
    window.wp.components,
    window.wp.blockEditor,
    window.wp.i18n
);

