import { InspectorControls, useBlockProps, InnerBlocks, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody, RangeControl, ToggleControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

// Sidebar Template matching blog.html structure
const SIDEBAR_TEMPLATE = [
    // Search Widget
    [
        'core/group',
        {
            className: 'bg-white p-6 rounded-xl shadow-lg',
        },
        [
            ['core/search', {
                label: __('Search', 'author-website-templates'),
                buttonText: __('Search', 'author-website-templates'),
                placeholder: __('Search posts...', 'author-website-templates'),
            }],
        ],
    ],

    // About Me Widget
    [
        'core/group',
        {
            className: 'bg-white p-6 rounded-xl shadow-lg text-center',
        },
        [
            ['core/image', {
                url: '',
                alt: __('Author Photo', 'author-website-templates'),
                className: 'w-24 h-24 rounded-full mx-auto mb-4',
            }],
            ['core/heading', {
                level: 3,
                content: __("That's Me!", 'author-website-templates'),
                className: 'text-2xl font-black text-navy text-center mb-3',
            }],
            ['core/paragraph', {
                content: __('Hi! I\'m an author who loves writing magical stories for children. Join me on exciting adventures!', 'author-website-templates'),
                className: 'text-navy/80 text-center mb-4',
            }],
            ['core/paragraph', {
                content: __('More About Me →', 'author-website-templates'),
                className: 'font-bold text-blue-sky text-sm hover:underline',
            }],
        ],
    ],

    // Topics Widget
    [
        'core/group',
        {
            className: 'bg-white p-6 rounded-xl shadow-lg',
        },
        [
            ['core/heading', {
                level: 3,
                content: __('Topics I Write About', 'author-website-templates'),
                className: 'text-2xl font-black text-navy mb-4 text-center',
            }],
            ['core/paragraph', {
                content: __('🎨 Activities & Crafts<br>📚 Book News <br>👨‍👩‍👧 For Parents<br>🏫 School Visits', 'author-website-templates'),
                className: 'space-y-2',
            }],
        ],
    ],

    // Featured Book Promo
    [
        'core/group',
        {
            className: 'bg-yellow-sun/20 p-6 rounded-xl shadow-lg text-center',
        },
        [
            ['core/heading', {
                level: 3,
                content: __('My Latest Book', 'author-website-templates'),
                className: 'text-2xl font-black text-navy mb-4',
            }],
            ['core/image', {
                url: '',
                alt: __('Book Cover', 'author-website-templates'),
                className: 'rounded-lg shadow-md max-w-[200px] mx-auto mb-6 transform -rotate-2 transition-all hover:rotate-2',
            }],
            ['core/paragraph', {
                content: __('Get your copy of my newest adventure story!', 'author-website-templates'),
                className: 'text-navy/80 mb-4',
            }],
            ['core/buttons', {}, [
                ['core/button', {
                    text: __('Order Your Copy Now!', 'author-website-templates'),
                    style: {
                        color: {
                            text: '#264653 ',
                            background: '#ffd166'
                        },
                        spacing: {
                            padding: {
                                top: '12px',
                                bottom: '12px',
                                left: '24px',
                                right: '24px'
                            }
                        },
                        border: {
                            radius: '10px'
                        },
                        typography: {
                            fontSize: '16px',
                            fontWeight: '600'
                        }
                    }
                }],
            ]],
        ],
    ],
];

export default function Edit({ attributes, setAttributes }) {
    const { postsToShow, showImage, showExcerpt, readMoreText } = attributes;
    const blockProps = useBlockProps();

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Blog List Settings', 'author-website-templates')}>
                    <RangeControl
                        label={__('Posts to Show', 'author-website-templates')}
                        value={postsToShow}
                        onChange={(value) => setAttributes({ postsToShow: value })}
                        min={1}
                        max={20}
                        help={__('Number of posts to display', 'author-website-templates')}
                    />
                    <ToggleControl
                        label={__('Show Featured Image', 'author-website-templates')}
                        checked={showImage}
                        onChange={(value) => setAttributes({ showImage: value })}
                    />
                    <ToggleControl
                        label={__('Show Excerpt', 'author-website-templates')}
                        checked={showExcerpt}
                        onChange={(value) => setAttributes({ showExcerpt: value })}
                    />
                    <TextControl
                        label={__('Read More Text', 'author-website-templates')}
                        value={readMoreText}
                        onChange={(value) => setAttributes({ readMoreText: value })}
                        help={__('Customize the read more button text', 'author-website-templates')}
                    />
                </PanelBody>

                <PanelColorSettings
                    title={__('Color Settings', 'author-website-templates')}
                    colorSettings={[
                        {
                            value: attributes.sectionBgColor,
                            onChange: (value) => setAttributes({ sectionBgColor: value }),
                            label: __('Section Background Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.categoryColor,
                            onChange: (value) => setAttributes({ categoryColor: value }),
                            label: __('Category Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.titleHoverColor,
                            onChange: (value) => setAttributes({ titleHoverColor: value }),
                            label: __('Title Hover Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.readMoreColor,
                            onChange: (value) => setAttributes({ readMoreColor: value }),
                            label: __('Read More Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.paginationBgColor,
                            onChange: (value) => setAttributes({ paginationBgColor: value }),
                            label: __('Pagination Background Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.paginationTextColor,
                            onChange: (value) => setAttributes({ paginationTextColor: value }),
                            label: __('Pagination Text Color', 'author-website-templates'),
                        },
                        {
                            value: attributes.paginationHoverBgColor,
                            onChange: (value) => setAttributes({ paginationHoverBgColor: value }),
                            label: __('Pagination Hover Background', 'author-website-templates'),
                        },
                        {
                            value: attributes.paginationHoverTextColor,
                            onChange: (value) => setAttributes({ paginationHoverTextColor: value }),
                            label: __('Pagination Hover Text', 'author-website-templates'),
                        },
                    ]}
                />
            </InspectorControls>

            <div {...blockProps}>
                <div style={{
                    display: 'grid',
                    gridTemplateColumns: '1fr',
                    gap: '2rem',
                }}>
                    {/* Main Content - Posts Loop Preview */}
                    <div style={{
                        gridColumn: '1 / -1',
                        padding: '1rem',
                        background: '#f9fafb',
                        borderRadius: '8px',
                    }}>
                        <h3 style={{ marginBottom: '1rem', fontWeight: 'bold' }}>
                            {__('Blog Posts Preview', 'author-website-templates')}
                        </h3>
                        <ServerSideRender
                            block="awt/child-author-blog-list"
                            attributes={attributes}
                        />
                    </div>

                    {/* Sidebar - InnerBlocks Area */}
                    <div style={{
                        gridColumn: '1 / -1',
                        padding: '1rem',
                        background: '#eff6ff',
                        borderRadius: '8px',
                        border: '2px dashed #3b82f6',
                    }}>
                        <h3 style={{ marginBottom: '1rem', fontWeight: 'bold', color: '#1e40af' }}>
                            {__('Sidebar Widgets (Editable)', 'author-website-templates')}
                        </h3>
                        <InnerBlocks
                            template={SIDEBAR_TEMPLATE}
                            templateLock={false}
                        />
                    </div>
                </div>
            </div>
        </>
    );
}
