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

// ProLock Component (Reused)
const ProLock = ({ isPro, children }) => {
    if (isPro) return children;
    return (
        <div className="pro-lock-wrapper" style={{ position: 'relative', cursor: 'not-allowed' }}>
            <div style={{ opacity: 0.4, pointerEvents: 'none', filter: 'grayscale(100%)' }}>{children}</div>
            <a href="https://rswpthemes.com/author-portfolio-pro-wordpress-theme/" target="_blank" rel="noopener noreferrer" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 10, cursor: 'pointer' }} aria-label="Upgrade to Pro"></a>
        </div>
    );
};

export default function Edit({ attributes, setAttributes, clientId }) {
    const { postsToShow, categories, showLoadMore, loadMoreText, blockId, bookListStyle } = attributes;
    const isPro = window.awtVars?.isPro || false;

    useEffect(() => {
        if (!blockId) {
            setAttributes({ blockId: clientId });
        }
    }, [clientId, blockId, setAttributes]);

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Query Settings', 'author-website-templates')}>
                    <RangeControl
                        label={__('Posts to Show', 'author-website-templates')}
                        value={postsToShow}
                        onChange={(value) => setAttributes({ postsToShow: value })}
                        min={1}
                        max={20}
                    />
                    <TextControl
                        label={__('Categories (Comma Separated IDs)', 'author-website-templates')}
                        value={categories}
                        onChange={(value) => setAttributes({ categories: value })}
                        help={__('Enter specific category IDs to filter (e.g. 5, 9). Leave empty for all.', 'author-website-templates')}
                    />
                </PanelBody>

                <PanelBody title={__('Display Settings', 'author-website-templates')} initialOpen={false}>
                    <ToggleControl
                        label={__('Show Category', 'author-website-templates')}
                        checked={attributes.showCategory}
                        onChange={(value) => setAttributes({ showCategory: value })}
                    />
                    <ToggleControl
                        label={__('Show Description', 'author-website-templates')}
                        checked={attributes.showDescription}
                        onChange={(value) => setAttributes({ showDescription: value })}
                    />
                    {attributes.showDescription && (
                        <SelectControl
                            label={__('Description Source', 'author-website-templates')}
                            value={attributes.descSource}
                            options={[
                                { label: __('Short Description (Meta)', 'author-website-templates'), value: 'excerpt' },
                                { label: __('Full Content (Post Content)', 'author-website-templates'), value: 'full' },
                            ]}
                            onChange={(value) => setAttributes({ descSource: value })}
                        />
                    )}
                    <ToggleControl
                        label={__('Show "Buy Now" Button', 'author-website-templates')}
                        checked={attributes.showBuyBtn}
                        onChange={(value) => setAttributes({ showBuyBtn: value })}
                    />
                    <ToggleControl
                        label={__('Show "View Details" Button', 'author-website-templates')}
                        checked={attributes.showDetailsBtn}
                        onChange={(value) => setAttributes({ showDetailsBtn: value })}
                    />
                    <ToggleControl
                        label={__('Show "Load More" Button', 'author-website-templates')}
                        checked={showLoadMore}
                        onChange={(value) => setAttributes({ showLoadMore: value })}
                    />
                    {showLoadMore && (
                        <TextControl
                            label={__('Button Text', 'author-website-templates')}
                            value={loadMoreText}
                            onChange={(value) => setAttributes({ loadMoreText: value })}
                        />
                    )}
                </PanelBody>

                <PanelBody title={__('Design Settings', 'author-website-templates')} initialOpen={false}>
                    <SelectControl
                        label={__('List Style', 'author-website-templates')}
                        value={bookListStyle}
                        options={[
                            { label: __('Fun (Default)', 'author-website-templates'), value: 'fun' },
                            { label: __('Elegant (List View)', 'author-website-templates'), value: 'elegant' },
                        ]}
                        onChange={(value) => setAttributes({ bookListStyle: value })}
                    />
                </PanelBody>
            </InspectorControls>

            <InspectorControls group="styles">
                <ProLock isPro={isPro}>
                    <PanelColorSettings
                        title={__('Typography Colors', 'author-website-templates')}
                        initialOpen={false}
                        colorSettings={[
                            { label: __('Title Color', 'author-website-templates'), value: attributes.titleColor || '', onChange: (value) => setAttributes({ titleColor: value }) },
                            { label: __('Description Color', 'author-website-templates'), value: attributes.descColor || '', onChange: (value) => setAttributes({ descColor: value }) },
                            { label: __('Category Color', 'author-website-templates'), value: attributes.catColor || '', onChange: (value) => setAttributes({ catColor: value }) },
                        ]}
                    />
                    <PanelColorSettings
                        title={__('Buy Button Colors', 'author-website-templates')}
                        initialOpen={false}
                        colorSettings={[
                            { label: __('Background', 'author-website-templates'), value: attributes.btnBg || '', onChange: (value) => setAttributes({ btnBg: value }) },
                            { label: __('Text', 'author-website-templates'), value: attributes.btnText || '', onChange: (value) => setAttributes({ btnText: value }) },
                            { label: __('Border', 'author-website-templates'), value: attributes.btnBorder || '', onChange: (value) => setAttributes({ btnBorder: value }) },
                            { label: __('Hover Background', 'author-website-templates'), value: attributes.btnHoverBg || '', onChange: (value) => setAttributes({ btnHoverBg: value }) },
                            { label: __('Hover Text', 'author-website-templates'), value: attributes.btnHoverText || '', onChange: (value) => setAttributes({ btnHoverText: value }) },
                            { label: __('Hover Border', 'author-website-templates'), value: attributes.btnHoverBorder || '', onChange: (value) => setAttributes({ btnHoverBorder: value }) },
                        ]}
                    />
                    <PanelColorSettings
                        title={__('View Details Button Colors', 'author-website-templates')}
                        initialOpen={false}
                        colorSettings={[
                            { label: __('Background', 'author-website-templates'), value: attributes.viewBtnBg || '', onChange: (value) => setAttributes({ viewBtnBg: value }) },
                            { label: __('Text', 'author-website-templates'), value: attributes.viewBtnText || '', onChange: (value) => setAttributes({ viewBtnText: value }) },
                            { label: __('Border', 'author-website-templates'), value: attributes.viewBtnBorder || '', onChange: (value) => setAttributes({ viewBtnBorder: value }) },
                            { label: __('Hover Background', 'author-website-templates'), value: attributes.viewBtnHoverBg || '', onChange: (value) => setAttributes({ viewBtnHoverBg: value }) },
                            { label: __('Hover Text', 'author-website-templates'), value: attributes.viewBtnHoverText || '', onChange: (value) => setAttributes({ viewBtnHoverText: value }) },
                            { label: __('Hover Border', 'author-website-templates'), value: attributes.viewBtnHoverBorder || '', onChange: (value) => setAttributes({ viewBtnHoverBorder: value }) },
                        ]}
                    />
                    <PanelColorSettings
                        title={__('Load More Button Colors', 'author-website-templates')}
                        initialOpen={false}
                        colorSettings={[
                            { label: __('Background', 'author-website-templates'), value: attributes.loadMoreBtnBg || '', onChange: (value) => setAttributes({ loadMoreBtnBg: value }) },
                            { label: __('Text', 'author-website-templates'), value: attributes.loadMoreBtnText || '', onChange: (value) => setAttributes({ loadMoreBtnText: value }) },
                            { label: __('Hover Background', 'author-website-templates'), value: attributes.loadMoreBtnHoverBg || '', onChange: (value) => setAttributes({ loadMoreBtnHoverBg: value }) },
                            { label: __('Hover Text', 'author-website-templates'), value: attributes.loadMoreBtnHoverText || '', onChange: (value) => setAttributes({ loadMoreBtnHoverText: value }) },
                        ]}
                    />
                </ProLock>
            </InspectorControls>

            <div {...useBlockProps()}>
                <div
                    className="awt-book-list-preview-wrapper"
                    style={{
                        '--awt-title-color': attributes.titleColor || '',
                        '--awt-desc-color': attributes.descColor || '',
                        '--awt-cat-color': attributes.catColor || '',

                        // Buy Button
                        '--awt-btn-bg': attributes.btnBg || '',
                        '--awt-btn-text': attributes.btnText || '',
                        '--awt-btn-border': attributes.btnBorder || '',
                        '--awt-btn-hover-bg': attributes.btnHoverBg || '',
                        '--awt-btn-hover-text': attributes.btnHoverText || '',
                        '--awt-btn-hover-border': attributes.btnHoverBorder || '',

                        // View Button
                        '--awt-view-btn-bg': attributes.viewBtnBg || '',
                        '--awt-view-btn-text': attributes.viewBtnText || '',
                        '--awt-view-btn-border': attributes.viewBtnBorder || '',
                        '--awt-view-btn-hover-bg': attributes.viewBtnHoverBg || '',
                        '--awt-view-btn-hover-text': attributes.viewBtnHoverText || '',
                        '--awt-view-btn-hover-border': attributes.viewBtnHoverBorder || '',

                        // Load More Button
                        '--awt-loadmore-bg': attributes.loadMoreBtnBg || '',
                        '--awt-loadmore-text': attributes.loadMoreBtnText || '',
                        '--awt-loadmore-hover-bg': attributes.loadMoreBtnHoverBg || '',
                        '--awt-loadmore-hover-text': attributes.loadMoreBtnHoverText || '',
                    }}
                >
                    <ServerSideRender
                        block="awt/child-author-book-list"
                        attributes={attributes}
                    />
                </div>
            </div>
        </>
    );
}