
wp.blocks.registerBlockType('termin-kalender/kalender-block', {
    apiVersion: 3,
    title: 'Termin-Kalender',
    description: wp.i18n.__('Simple Frontend calendar. Much more options in Termin-Kalender PRO.', 'termin-kalender'),
    icon: {
        src: 'calendar',
        foreground: '#FF3C00'
    },
    category: 'widgets',
    supports: {
        inserter: true,
        __experimentalLayout: true
    },
    attributes: {
        show_time: {
            type: 'string',
            default: 'start_end'
        },
        // ter_kal_CHANGE: Add attribute to store hidden categories
        hidden_categories: {
            type: 'array',
            default: []
        },
        hide_category_buttons: {
            type: 'boolean',
            default: false
        }
    },
    example: {
        innerBlocks: [
            {
                name: 'core/image',
                attributes: {
                    url: terminKalenderData.TER_KAL_PLUGIN_URL + 'assets/termin-kalender-calendar.png',
                    alt: wp.i18n.__('Preview image for Termin-Kalender', 'termin-kalender')
                    //alt: 'Preview image for Termin-Kalender',
                }
            }
        ],
    },
edit: function(props) {
    const {
        attributes: { show_time, hidden_categories, hide_category_buttons },
        setAttributes
    } = props;// ter_kal_CHANGE: WP7 compatibility - removed wp.editor fallback (deprecated)

    const { InspectorControls, useBlockProps } = wp.blockEditor; // ter_kal_CHANGE: add useBlockProps for apiVersion 3 selection/toolbar
    const { PanelBody, SelectControl, CheckboxControl } = wp.components;

    // ter_kal_CHANGE: Get categories from localized data
    const categories = terminKalenderData.TERMIN_KALENDER_KATEGORIEN || [];

    // ter_kal_CHANGE: Provide proper block wrapper props to restore toolbar/selection in apiVersion 3
    const ter_kal_blockProps = useBlockProps({
        className: 'ter_kal-kalender-block-editor', // ter_kal_CHANGE: new class (prefixed)
        style: { border: '5px solid #ddd', borderRadius: '1rem', padding: '1rem' }
    });

    //console.log(terminKalenderData); // ter_kal_CHANGE: keep log separate so it doesn't comment-out return

    return wp.element.createElement(
        wp.element.Fragment,
        null,

        // ter_kal_CHANGE: Inspector Controls sidebar
        wp.element.createElement(
            InspectorControls,
            null,
            wp.element.createElement(
                PanelBody,
                {
                    title: wp.i18n.__('Calendar Settings', 'termin-kalender'),
                    initialOpen: true
                },
                wp.element.createElement(SelectControl, {
                    label: wp.i18n.__('Time Display', 'termin-kalender'),
                    value: show_time,
                    __next40pxDefaultSize: true,
                    __nextHasNoMarginBottom: true,
                    options: [
                        { label: wp.i18n.__('Start and End', 'termin-kalender'), value: 'start_end' },
                        { label: wp.i18n.__('Start Only', 'termin-kalender'), value: 'start' },
                        { label: wp.i18n.__('Hide Time', 'termin-kalender'), value: 'hide' } // ter_kal_CHANGE: align value with other control ("hide" not "none")
                    ],
                    onChange: function(newValue) {
                        setAttributes({ show_time: newValue });
                    }
                })
            ),

            // ter_kal_CHANGE: Add category visibility panel
            wp.element.createElement(
                PanelBody,
                {
                    title: wp.i18n.__('Category Visibility', 'termin-kalender'),
                    initialOpen: true
                },
                categories.length === 0
                    ? wp.element.createElement(
                        'p',
                        { style: { fontStyle: 'italic', color: '#666' } },
                        wp.i18n.__('No categories available. Create categories first.', 'termin-kalender')
                    )
                    : categories.map(function(cat) {
                        return wp.element.createElement(CheckboxControl, {
                            key: cat.label,
                            label: cat.label,
                            __next40pxDefaultSize: true,
                            __nextHasNoMarginBottom: true,
                            help: wp.i18n.__('Hide this category', 'termin-kalender'),
                            checked: hidden_categories.includes(cat.label),
                            onChange: function(isChecked) {
                                const newHiddenCategories = isChecked
                                    ? [...hidden_categories, cat.label]
                                    : hidden_categories.filter(function(label) {
                                        return label !== cat.label;
                                    });
                                setAttributes({ hidden_categories: newHiddenCategories });
                            }
                        });
                    })
            ),

            wp.element.createElement('hr', { style: { margin: '16px 0' } }),
            wp.element.createElement(CheckboxControl, {
                label: wp.i18n.__('Completely hide selected category buttons', 'termin-kalender'),
                __next40pxDefaultSize: true,
                __nextHasNoMarginBottom: true,
                checked: hide_category_buttons,
                onChange: (value) => setAttributes({ hide_category_buttons: value })
            })
        ),

        // ter_kal_CHANGE: Wrap actual block UI in a single selectable root element (blockProps)
        wp.element.createElement(
            'div',
            ter_kal_blockProps,
            wp.element.createElement('span', { className: 'block-icon', style: { color: '#FF3C00' } },
                wp.element.createElement('i', { className: 'dashicons dashicons-calendar' })
            ),
            wp.element.createElement('p', null, 'Termin-Kalender'),
            wp.element.createElement('p', null, wp.i18n.__('Simple Frontend calendar. Much more options in Termin-Kalender PRO.', 'termin-kalender')),
            wp.element.createElement('hr', null),

            wp.element.createElement(SelectControl, {
                key: 'time-display-select',
                __next40pxDefaultSize: true,
                __nextHasNoMarginBottom: true,
                label: wp.i18n.__('Time display', 'termin-kalender'),
                value: show_time,
                options: [
                    { label: wp.i18n.__('Start & End', 'termin-kalender'), value: 'start_end' },
                    { label: wp.i18n.__('Start only', 'termin-kalender'), value: 'start' },
                    { label: wp.i18n.__('Hide', 'termin-kalender'), value: 'hide' }
                ],
                onChange: value => setAttributes({ show_time: value })
            }),

            // Preview image
            wp.element.createElement('img', {
                src: terminKalenderData.TER_KAL_PLUGIN_URL + 'assets/termin-kalender-calendar.png',
                alt: wp.i18n.__('Preview image for Termin-Kalender', 'termin-kalender'),
                style: { maxWidth: '100%', height: 'auto' }
            })
        )
    );
},

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