import { useBlockProps, RichText, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
import { PanelBody, Notice, Tooltip, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';

// ProLock Component
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, context }) {
    const { icon, text, cardBgColor, cardBorderColor, labelColor, textColor, cardStyle, label } = attributes;
    const isPro = window.awtVars?.isPro || false;

    // Sync context style to local attribute
    const contextStyle = context['awt/factsStyle'] || 'fun';
    useEffect(() => {
        if (cardStyle !== contextStyle) {
            setAttributes({ cardStyle: contextStyle });
        }
    }, [contextStyle, cardStyle, setAttributes]);

    const isFun = cardStyle === 'fun';

    // Conditional Classes
    const wrapperClass = isFun
        ? 'p-6 rounded-lg shadow-md flex items-center space-x-4'
        : 'p-6 rounded flex items-center space-x-6 border transition-colors';

    const iconClass = isFun
        ? 'text-4xl'
        : 'text-3xl text-gray-300 opacity-80';

    const defaultBg = isFun ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.05)';

    const blockProps = useBlockProps({
        className: wrapperClass,
        style: {
            backgroundColor: cardBgColor || defaultBg,
            borderColor: cardBorderColor || (!isFun ? 'rgba(255,255,255,0.1)' : undefined)
        }
    });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Card Content', 'author-website-templates')} initialOpen={true}>
                    {!isFun && (
                        <TextControl
                            label={__('Label', 'author-website-templates')}
                            value={label}
                            onChange={(value) => setAttributes({ label: value })}
                            help={__('Category label (e.g. Writing Habit)', 'author-website-templates')}
                        />
                    )}

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

                    <ProLock isPro={isPro}>
                        <PanelColorSettings
                            title={__('Card Colors', 'author-website-templates')}
                            colorSettings={[
                                {
                                    value: cardBgColor,
                                    onChange: (color) => setAttributes({ cardBgColor: color }),
                                    label: __('Card Background', 'author-website-templates'),
                                },
                                !isFun && {
                                    value: cardBorderColor,
                                    onChange: (color) => setAttributes({ cardBorderColor: color }),
                                    label: __('Border Color', 'author-website-templates'),
                                },
                                !isFun && {
                                    value: labelColor,
                                    onChange: (color) => setAttributes({ labelColor: color }),
                                    label: __('Label Color', 'author-website-templates'),
                                },
                                {
                                    value: textColor,
                                    onChange: (color) => setAttributes({ textColor: color }),
                                    label: __('Text Color', 'author-website-templates'),
                                }
                            ].filter(Boolean)}
                        />
                    </ProLock>
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                {/* Icon (Emoji) */}
                <RichText
                    tagName="span"
                    className={iconClass}
                    value={icon}
                    onChange={(value) => setAttributes({ icon: value })}
                    placeholder="🍕"
                    allowedFormats={[]}
                />

                {/* Content */}
                {isFun ? (
                    <RichText
                        tagName="span"
                        className="flex-1"
                        value={text}
                        onChange={(value) => setAttributes({ text: value })}
                        placeholder={__('Add your fun fact here...', 'author-website-templates')}
                        allowedFormats={[]}
                        style={{ color: textColor || undefined }}
                    />
                ) : (
                    <div>
                        <RichText
                            tagName="span"
                            className="block text-xs font-bold uppercase tracking-widest mb-1"
                            value={label}
                            onChange={(value) => setAttributes({ label: value })}
                            placeholder={__('LABEL', 'author-website-templates')}
                            allowedFormats={[]}
                            style={{ color: labelColor || '#9ca3af' }}
                        />
                        <RichText
                            tagName="span"
                            className="text-lg font-serif"
                            value={text}
                            onChange={(value) => setAttributes({ text: value })}
                            placeholder={__('Add fact details...', 'author-website-templates')}
                            allowedFormats={[]}
                            style={{ color: textColor || '#ffffff' }}
                        />
                    </div>
                )}
            </div>
        </>
    );
}
