import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { SOCIAL_ICONS, PLATFORM_OPTIONS } from './icons';

export default function Edit({ attributes, setAttributes, context }) {
    const { platform, url, customLabel, socialsStyle, parentIconColor } = attributes;

    // Sync context to attributes
    useEffect(() => {
        if (context['awt/socialsStyle'] && context['awt/socialsStyle'] !== socialsStyle) {
            setAttributes({ socialsStyle: context['awt/socialsStyle'] });
        }
        if (context['awt/iconColor'] !== parentIconColor) { // Allow empty string sync
            setAttributes({ parentIconColor: context['awt/iconColor'] || '' });
        }
    }, [context['awt/socialsStyle'], context['awt/iconColor'], socialsStyle, parentIconColor, setAttributes]);

    const iconData = SOCIAL_ICONS[platform] || SOCIAL_ICONS.instagram;
    const label = customLabel || iconData.label;

    const isElegant = socialsStyle === 'elegant';

    // Define structure classes (layout, size, transition)
    const structureClass = isElegant
        ? 'transition-all duration-300 hover:scale-110 w-10 h-10'
        : 'transition-all duration-300 hover:scale-110 w-12 h-12';

    // Define color classes (text color, hover color) - default Tailwind classes
    const colorClass = isElegant
        ? 'text-slate-500 hover:text-slate-900'
        : 'text-navy/60 hover:text-navy';

    // If custom parentIconColor is set, DO NOT apply the default color classes.
    // This allows the inline style to work without fighting specificity (or just cleaner DOM).
    const finalClassName = parentIconColor
        ? `${structureClass} cursor-pointer`
        : `${structureClass} ${colorClass} cursor-pointer`;

    const blockProps = useBlockProps({
        className: finalClassName,
        title: label,
        style: {
            color: parentIconColor || undefined
        }
    });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Icon Settings', 'author-website-templates')} initialOpen={true}>
                    <SelectControl
                        label={__('Select Platform', 'author-website-templates')}
                        value={platform}
                        options={PLATFORM_OPTIONS}
                        onChange={(value) => setAttributes({ platform: value })}
                    />

                    <TextControl
                        label={__('Profile URL', 'author-website-templates')}
                        value={url}
                        onChange={(value) => setAttributes({ url: value })}
                        placeholder="https://..."
                        type="url"
                    />

                    <TextControl
                        label={__('Custom Label (optional)', 'author-website-templates')}
                        value={customLabel}
                        onChange={(value) => setAttributes({ customLabel: value })}
                        help={__('Override default platform name for accessibility', 'author-website-templates')}
                    />
                </PanelBody>
            </InspectorControls>

            <div {...blockProps}>
                <svg className="w-full h-full" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d={iconData.path} />
                </svg>
            </div>
        </>
    );
}
