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

/**
 * ProLock Component - Wrapper for Pro-only controls
 */
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"
            >
                <Tooltip text="🔒 Pro Feature - Click to Upgrade">
                    <div style={{ width: '100%', height: '100%' }} />
                </Tooltip>
            </a>
        </div>
    );
};

export default function Edit({ attributes, setAttributes, clientId }) {
    const {
        heading,
        booksPerPage,
        booksPerRow,
        order,
        orderby,
        excludeBooks,
        sectionBgColor,
        sectionPadding,
        headingColor,
        bookTitleColor,
        cardBgColor,
        blockId,
        galleryStyle,
    } = attributes;

    // Get Pro status from localized variable
    const isPro = window.awtVars?.isPro || false;

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

    const blockProps = useBlockProps();

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Query Settings', 'author-website-templates')} initialOpen={true}>
                    <TextControl
                        label={__('Section Heading', 'author-website-templates')}
                        value={heading}
                        onChange={(value) => setAttributes({ heading: value })}
                        placeholder="My Book Shelf"
                    />

                    <RangeControl
                        label={__('Books Per Page', 'author-website-templates')}
                        value={booksPerPage}
                        onChange={(value) => setAttributes({ booksPerPage: value })}
                        min={1}
                        max={20}
                        step={1}
                        help={__('Number of books to display', 'author-website-templates')}
                    />

                    <RangeControl
                        label={__('Books Per Row', 'author-website-templates')}
                        value={booksPerRow}
                        onChange={(value) => setAttributes({ booksPerRow: value })}
                        min={2}
                        max={5}
                        step={1}
                        help={__('Grid columns on desktop', 'author-website-templates')}
                    />

                    <SelectControl
                        label={__('Order', 'author-website-templates')}
                        value={order}
                        options={[
                            { label: __('Descending', 'author-website-templates'), value: 'DESC' },
                            { label: __('Ascending', 'author-website-templates'), value: 'ASC' },
                        ]}
                        onChange={(value) => setAttributes({ order: value })}
                    />

                    <SelectControl
                        label={__('Order By', 'author-website-templates')}
                        value={orderby}
                        options={[
                            { label: __('Date Published', 'author-website-templates'), value: 'date' },
                            { label: __('Title', 'author-website-templates'), value: 'title' },
                            { label: __('Menu Order', 'author-website-templates'), value: 'menu_order' },
                        ]}
                        onChange={(value) => setAttributes({ orderby: value })}
                    />

                    <TextControl
                        label={__('Exclude Books (IDs)', 'author-website-templates')}
                        value={excludeBooks}
                        onChange={(value) => setAttributes({ excludeBooks: value })}
                        placeholder="1, 5, 12"
                        help={__('Comma-separated book IDs to exclude', 'author-website-templates')}
                    />
                </PanelBody>

                <PanelBody title={__('Design Settings', 'author-website-templates')} initialOpen={false}>
                    <SelectControl
                        label={__('Gallery Style', 'author-website-templates')}
                        value={galleryStyle}
                        options={[
                            { label: __('Fun (Child)', 'author-website-templates'), value: 'fun' },
                            { label: __('Elegant (Author)', 'author-website-templates'), value: 'elegant' },
                        ]}
                        onChange={(value) => setAttributes({ galleryStyle: value })}
                        help={__('Choose between the playful child theme style or the elegant author portfolio style.', 'author-website-templates')}
                    />

                    {!isPro && (
                        <Notice status="warning" isDismissible={false}>
                            {__('🔒 Upgrade to Pro to unlock styling controls', 'author-website-templates')}
                        </Notice>
                    )}

                    <ProLock isPro={isPro}>
                        <PanelColorSettings
                            title={__('Section Colors', 'author-website-templates')}
                            colorSettings={[
                                {
                                    onChange: isPro ? (color) => setAttributes({ sectionBgColor: color }) : undefined,
                                    label: __('Section Background', 'author-website-templates'),
                                    disableCustomColors: !isPro,
                                },
                                {
                                    value: headingColor,
                                    onChange: isPro ? (color) => setAttributes({ headingColor: color }) : undefined,
                                    label: __('Heading Color', 'author-website-templates'),
                                    disableCustomColors: !isPro,
                                },
                            ]}
                        />
                    </ProLock>

                    <ProLock isPro={isPro}>
                        <RangeControl
                            label={__('Section Padding (px)', 'author-website-templates')}
                            value={sectionPadding !== null ? sectionPadding : 96}
                            onChange={isPro ? (value) => setAttributes({ sectionPadding: value }) : undefined}
                            min={0}
                            max={200}
                            step={8}
                            disabled={!isPro}
                            help={isPro ? __('Default: 96px (py-24)', 'author-website-templates') : __('Pro feature', 'author-website-templates')}
                        />
                    </ProLock>

                    <ProLock isPro={isPro}>
                        <PanelColorSettings
                            title={__('Book Card Colors', 'author-website-templates')}
                            colorSettings={[
                                {
                                    value: cardBgColor,
                                    onChange: isPro ? (color) => setAttributes({ cardBgColor: color }) : undefined,
                                    label: __('Card Background', 'author-website-templates'),
                                    disableCustomColors: !isPro,
                                },
                                {
                                    value: bookTitleColor,
                                    onChange: isPro ? (color) => setAttributes({ bookTitleColor: color }) : undefined,
                                    label: __('Book Title Color', 'author-website-templates'),
                                    disableCustomColors: !isPro,
                                },
                            ]}
                        />
                    </ProLock>
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                <ServerSideRender
                    block="awt/child-author-books-gallery"
                    attributes={attributes}
                />
            </div>
        </>
    );
}
