import './style.css';
import { InspectorControls, MediaUpload, MediaUploadCheck, useBlockProps } from '@wordpress/block-editor';
import {
    PanelBody,
    SelectControl,
    ToggleControl,
    TextControl,
    TextareaControl,
    RangeControl,
    Button
} from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { useEffect } from '@wordpress/element';

export default function Edit({ attributes, setAttributes }) {
    const {
        sign = 'aries',
        horoscopeStyle = 'poetic',
        language = 'en',
        suppressHeading = false,
        suppressPromotionalContent = false,
        heroImageUrl = '',
        heroImageAlt = '',
        heroImageDisplayMode = 'background',
        heroImageAlignment = 'center',
        heroImageTextWrap = 'none',
        heroImageOverlayOpacity = 50,
        heroImageOverlayColor = 'black',
        heroImageMaxWidth = '40%',
        // Section visibility
        showHeroSection = true,
        showGuidanceSection = true,
        showAdviceSection = true,
        showConclusionSection = true,
        // Planet visibility
        showMoonItem = true,
        showSunItem = true,
        showMarsItem = true,
        showMercuryItem = true,
        showJupiterItem = true,
        showVenusItem = true,
        showSaturnItem = true,
        showNeptuneItem = true,
        showUranusItem = true,
        showPlutoItem = true,
        // CTA 1
        cta1Enabled = false,
        cta1HeaderText = '',
        cta1HeaderLevel = 'h3',
        cta1Text = '',
        cta1ImageUrl = '',
        cta1ImageAlt = '',
        cta1Url = '',
        cta1LinkType = 'button',
        cta1LinkText = '',
        cta1ImageClickable = false,
        cta1ElementId = '',
        cta1Alignment = 'center',
        // CTA 2
        cta2Enabled = false,
        cta2HeaderText = '',
        cta2HeaderLevel = 'h3',
        cta2Text = '',
        cta2ImageUrl = '',
        cta2ImageAlt = '',
        cta2Url = '',
        cta2LinkType = 'button',
        cta2LinkText = '',
        cta2ImageClickable = false,
        cta2ElementId = '',
        cta2Alignment = 'center',
        // CTA 3
        cta3Enabled = false,
        cta3HeaderText = '',
        cta3HeaderLevel = 'h3',
        cta3Text = '',
        cta3ImageUrl = '',
        cta3ImageAlt = '',
        cta3Url = '',
        cta3LinkType = 'button',
        cta3LinkText = '',
        cta3ImageClickable = false,
        cta3ElementId = '',
        cta3Alignment = 'center',
    } = attributes;

    // Get premium status from localized data (undefined in free version)
    const isPremium = window.ezhpBlockData?.isPremium || false;

    const signs = [
        { label: 'Aries', value: 'aries' },
        { label: 'Taurus', value: 'taurus' },
        { label: 'Gemini', value: 'gemini' },
        { label: 'Cancer', value: 'cancer' },
        { label: 'Leo', value: 'leo' },
        { label: 'Virgo', value: 'virgo' },
        { label: 'Libra', value: 'libra' },
        { label: 'Scorpio', value: 'scorpio' },
        { label: 'Sagittarius', value: 'sagittarius' },
        { label: 'Capricorn', value: 'capricorn' },
        { label: 'Aquarius', value: 'aquarius' },
        { label: 'Pisces', value: 'pisces' },
    ];

    const linkTypeOptions = [
        { label: 'Button', value: 'button' },
        { label: 'Text Link', value: 'text' },
        { label: 'Image Only', value: 'image' },
    ];

    const headerLevelOptions = [
        { label: 'H2', value: 'h2' },
        { label: 'H3', value: 'h3' },
        { label: 'H4', value: 'h4' },
    ];

    const alignmentOptions = [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
    ];

    const blockProps = useBlockProps({
        className: 'ez-horoscope-block',
        style: { border: '1px solid #ddd', padding: '10px', borderRadius: '6px' },
    });

    const premiumNoticeStyle = {
        padding: '8px 12px',
        backgroundColor: '#e7f3ff',
        borderLeft: '4px solid #0073aa',
        margin: '0 0 12px 0',
        fontSize: '12px'
    };

    const sectionDividerStyle = {
        borderTop: '1px solid #ddd',
        marginTop: '16px',
        paddingTop: '16px',
    };

    const sectionLabelStyle = {
        fontSize: '11px',
        fontWeight: '600',
        textTransform: 'uppercase',
        color: '#757575',
        marginBottom: '12px',
    };

    useEffect(() => {
        if (heroImageDisplayMode !== "background" || !heroImageUrl) return;

        const interval = setInterval(() => {
            const hero = document.querySelector(".ez-hero");
            const placeholder = document.querySelector(".ez-editor-bg-preview");
            if (!hero || !placeholder) return;

            if (hero.querySelector(".ez-editor-overlay")) return;

            const overlay = document.createElement("div");
            overlay.className = "ez-editor-overlay";
            overlay.style.position = "absolute";
            overlay.style.inset = "0";
            overlay.style.backgroundImage = `url(${heroImageUrl})`;
            overlay.style.backgroundSize = "cover";
            overlay.style.backgroundPosition = placeholder.dataset.overlayAlign;
            overlay.style.opacity = (placeholder.dataset.overlayOpacity ?? 50) / 100;
            overlay.style.pointerEvents = "none";
            overlay.style.zIndex = 1;
            overlay.style.mixBlendMode = "normal";

            hero.style.position = "relative";
            hero.prepend(overlay);

        }, 200);

        return () => clearInterval(interval);

    }, [
        heroImageUrl,
        heroImageDisplayMode,
        heroImageAlignment,
        heroImageOverlayOpacity,
        heroImageOverlayColor,
    ]);

    return (
        <>
            <InspectorControls>
                {/* Horoscope Settings */}
                <PanelBody title="Horoscope Settings" initialOpen={true}>
                    <SelectControl
                        label="Zodiac Sign"
                        value={sign}
                        options={signs}
                        onChange={(value) => setAttributes({ sign: value })}
                    />
                    <TextControl
                        label="Language"
                        value={attributes.language || 'en'}
                        onChange={(value) => setAttributes({ language: value })}
                    />
                    {isPremium && (
                        <SelectControl
                            label="Horoscope Style"
                            value={horoscopeStyle}
                            options={[
                                { label: 'Poetic (Walter Mercado)', value: 'poetic' },
                                { label: 'Professional (Methodological)', value: 'professional' },
                            ]}
                            onChange={(value) => setAttributes({ horoscopeStyle: value })}
                            help={
                                horoscopeStyle === 'poetic'
                                    ? 'Dramatic, mystical, emotionally uplifting.'
                                    : 'Sober, precise, grounded in astrological methodology.'
                            }
                        />
                    )}
                    <ToggleControl
                        label="Hide Horoscope Heading (H1)"
                        checked={suppressHeading}
                        onChange={(value) => setAttributes({ suppressHeading: !!value })}
                    />
                    <ToggleControl
                        label="Hide Promotional Content"
                        checked={suppressPromotionalContent}
                        onChange={(value) => setAttributes({ suppressPromotionalContent: !!value })}
                        help="Only available for premium subscribers."
                    />
                </PanelBody>

                {/* Section Visibility */}
                <PanelBody title="Section Visibility" initialOpen={false}>
                    <p style={{ fontSize: '12px', color: '#757575', marginBottom: '16px' }}>
                        Toggle which sections of the horoscope to display.
                    </p>

                    <div style={sectionLabelStyle}>Main Sections</div>

                    <ToggleControl
                        label="Show Hero Section"
                        checked={showHeroSection}
                        onChange={(value) => setAttributes({ showHeroSection: value })}
                        help="The introductory section with title and overview."
                    />
                    <ToggleControl
                        label="Show Guidance Section"
                        checked={showGuidanceSection}
                        onChange={(value) => setAttributes({ showGuidanceSection: value })}
                        help="Celestial Guidance For Your Day."
                    />
                    <ToggleControl
                        label="Show Advice Section"
                        checked={showAdviceSection}
                        onChange={(value) => setAttributes({ showAdviceSection: value })}
                        help="Today's Cosmic Advice with exercises."
                    />
                    <ToggleControl
                        label="Show Conclusion Section"
                        checked={showConclusionSection}
                        onChange={(value) => setAttributes({ showConclusionSection: value })}
                        help="Cosmic Reflection summary."
                    />

                    <div style={sectionDividerStyle}>
                        <div style={sectionLabelStyle}>Planetary Influences</div>
                    </div>

                    <ToggleControl
                        label="Show Moon"
                        checked={showMoonItem}
                        onChange={(value) => setAttributes({ showMoonItem: value })}
                    />
                    <ToggleControl
                        label="Show Sun"
                        checked={showSunItem}
                        onChange={(value) => setAttributes({ showSunItem: value })}
                    />
                    <ToggleControl
                        label="Show Mars"
                        checked={showMarsItem}
                        onChange={(value) => setAttributes({ showMarsItem: value })}
                    />
                    <ToggleControl
                        label="Show Mercury"
                        checked={showMercuryItem}
                        onChange={(value) => setAttributes({ showMercuryItem: value })}
                    />
                    <ToggleControl
                        label="Show Jupiter"
                        checked={showJupiterItem}
                        onChange={(value) => setAttributes({ showJupiterItem: value })}
                    />
                    <ToggleControl
                        label="Show Venus"
                        checked={showVenusItem}
                        onChange={(value) => setAttributes({ showVenusItem: value })}
                    />
                    <ToggleControl
                        label="Show Saturn"
                        checked={showSaturnItem}
                        onChange={(value) => setAttributes({ showSaturnItem: value })}
                    />
                    <ToggleControl
                        label="Show Neptune"
                        checked={showNeptuneItem}
                        onChange={(value) => setAttributes({ showNeptuneItem: value })}
                    />
                    <ToggleControl
                        label="Show Uranus"
                        checked={showUranusItem}
                        onChange={(value) => setAttributes({ showUranusItem: value })}
                    />
                    <ToggleControl
                        label="Show Pluto"
                        checked={showPlutoItem}
                        onChange={(value) => setAttributes({ showPlutoItem: value })}
                    />
                </PanelBody>

                {/* Hero Image Settings */}
                <PanelBody title="Hero Image Settings" initialOpen={false}>
                    <MediaUploadCheck>
                        <MediaUpload
                            onSelect={(media) =>
                                setAttributes({
                                    heroImageUrl: media.url,
                                    heroImageAlt: media.alt || '',
                                })
                            }
                            allowedTypes={['image']}
                            render={({ open }) => (
                                <div style={{ marginBottom: '10px' }}>
                                    {heroImageUrl ? (
                                        <>
                                            <img
                                                src={heroImageUrl}
                                                alt={heroImageAlt}
                                                style={{
                                                    maxWidth: '100%',
                                                    borderRadius: '4px',
                                                    marginBottom: '5px',
                                                }}
                                            />
                                            <Button
                                                isDestructive
                                                variant="secondary"
                                                onClick={() =>
                                                    setAttributes({
                                                        heroImageUrl: '',
                                                        heroImageAlt: '',
                                                    })
                                                }
                                            >
                                                Remove Image
                                            </Button>
                                        </>
                                    ) : (
                                        <Button variant="primary" onClick={open}>
                                            Select Hero Image
                                        </Button>
                                    )}
                                </div>
                            )}
                        />
                    </MediaUploadCheck>

                    <TextControl
                        label="Alt Text"
                        value={heroImageAlt}
                        onChange={(value) => setAttributes({ heroImageAlt: value })}
                    />

                    <SelectControl
                        label="Display Mode"
                        value={heroImageDisplayMode}
                        options={[
                            { label: 'Background', value: 'background' },
                            { label: 'Inline', value: 'inline' },
                        ]}
                        onChange={(value) => setAttributes({ heroImageDisplayMode: value })}
                    />

                    <SelectControl
                        label="Alignment"
                        value={heroImageAlignment}
                        options={[
                            { label: 'Center', value: 'center' },
                            { label: 'Left', value: 'left' },
                            { label: 'Right', value: 'right' },
                        ]}
                        onChange={(value) => setAttributes({ heroImageAlignment: value })}
                    />

                    {heroImageDisplayMode === 'inline' && (
                        <SelectControl
                            label="Text Wrapping"
                            value={heroImageTextWrap}
                            options={[
                                { label: 'None', value: 'none' },
                                { label: 'Wrap Left', value: 'left' },
                                { label: 'Wrap Right', value: 'right' },
                            ]}
                            onChange={(value) => setAttributes({ heroImageTextWrap: value })}
                        />
                    )}

                    <RangeControl
                        label="Overlay Opacity (%)"
                        value={heroImageOverlayOpacity ?? 50}
                        onChange={(value) => setAttributes({ heroImageOverlayOpacity: value })}
                        min={0}
                        max={100}
                        step={5}
                        help="Adjust darkness of the overlay. 0% = transparent, 100% = black."
                    />

                    <SelectControl
                        label="Overlay Color"
                        value={heroImageOverlayColor}
                        options={[
                            { label: 'Black (dark)', value: 'black' },
                            { label: 'White (light)', value: 'white' },
                        ]}
                        onChange={(value) => setAttributes({ heroImageOverlayColor: value })}
                        help="Choose dark or light tint depending on your image brightness."
                    />

                    <RangeControl
                        label="Max Image Width (%)"
                        value={parseInt(heroImageMaxWidth.replace('%', '')) || 40}
                        onChange={(value) => setAttributes({ heroImageMaxWidth: value + '%' })}
                        min={10}
                        max={100}
                        step={5}
                    />
                </PanelBody>

                {/* CTA 1 - After Enneagram */}
                <PanelBody title="CTA 1 - After Enneagram (Premium)" initialOpen={false}>
                    <p style={premiumNoticeStyle}>
                        Requires a premium subscription
                    </p>

                    <ToggleControl
                        label="Enable CTA"
                        checked={cta1Enabled}
                        onChange={(value) => setAttributes({ cta1Enabled: value })}
                        help="Replace the placeholder with your custom call to action."
                    />

                    {cta1Enabled && (
                        <>
                            <TextControl
                                label="CTA Header"
                                value={cta1HeaderText}
                                onChange={(value) => setAttributes({ cta1HeaderText: value })}
                                placeholder="Your Special Offer"
                            />

                            <SelectControl
                                label="Header Level"
                                value={cta1HeaderLevel}
                                options={headerLevelOptions}
                                onChange={(value) => setAttributes({ cta1HeaderLevel: value })}
                            />

                            <TextareaControl
                                label="CTA Text"
                                value={cta1Text}
                                onChange={(value) => setAttributes({ cta1Text: value })}
                                help="Introductory text for your offer (not clickable)."
                                placeholder="Discover your deeper cosmic insights today!"
                            />

                            <div style={{ marginBottom: '16px' }}>
                                <p style={{ marginBottom: '5px', fontWeight: '500' }}>CTA Image (optional)</p>
                                <MediaUploadCheck>
                                    <MediaUpload
                                        onSelect={(media) => setAttributes({
                                            cta1ImageUrl: media.url,
                                            cta1ImageAlt: media.alt || ''
                                        })}
                                        allowedTypes={['image']}
                                        render={({ open }) => (
                                            <div>
                                                {cta1ImageUrl ? (
                                                    <>
                                                        <img
                                                            src={cta1ImageUrl}
                                                            alt={cta1ImageAlt}
                                                            style={{
                                                                maxWidth: '100%',
                                                                borderRadius: '4px',
                                                                marginBottom: '8px',
                                                                display: 'block',
                                                            }}
                                                        />
                                                        <Button
                                                            isDestructive
                                                            variant="secondary"
                                                            isSmall
                                                            onClick={() => setAttributes({
                                                                cta1ImageUrl: '',
                                                                cta1ImageAlt: ''
                                                            })}
                                                        >
                                                            Remove Image
                                                        </Button>
                                                    </>
                                                ) : (
                                                    <Button variant="secondary" onClick={open}>
                                                        Select CTA Image
                                                    </Button>
                                                )}
                                            </div>
                                        )}
                                    />
                                </MediaUploadCheck>
                            </div>

                            {cta1ImageUrl && (
                                <TextControl
                                    label="Image Alt Text"
                                    value={cta1ImageAlt}
                                    onChange={(value) => setAttributes({ cta1ImageAlt: value })}
                                />
                            )}

                            <TextControl
                                label="CTA URL"
                                value={cta1Url}
                                onChange={(value) => setAttributes({ cta1Url: value })}
                                placeholder="https://example.com/affiliate-link"
                                type="url"
                            />

                            <SelectControl
                                label="Link Type"
                                value={cta1LinkType}
                                options={linkTypeOptions}
                                onChange={(value) => setAttributes({ cta1LinkType: value })}
                                help={
                                    cta1LinkType === 'button' ? 'Displays a styled button.' :
                                    cta1LinkType === 'text' ? 'Displays a text link.' :
                                    'Makes the image itself clickable (no button/text link).'
                                }
                            />

                            {(cta1LinkType === 'button' || cta1LinkType === 'text') && (
                                <TextControl
                                    label={cta1LinkType === 'button' ? 'Button Text' : 'Link Text'}
                                    value={cta1LinkText}
                                    onChange={(value) => setAttributes({ cta1LinkText: value })}
                                    placeholder={cta1LinkType === 'button' ? 'Get Your Reading Now!' : 'Click here to learn more'}
                                />
                            )}

                            {cta1ImageUrl && cta1LinkType !== 'image' && (
                                <ToggleControl
                                    label="Make Image Clickable"
                                    checked={cta1ImageClickable}
                                    onChange={(value) => setAttributes({ cta1ImageClickable: value })}
                                    help="Also wrap the image in a link."
                                />
                            )}

                            <TextControl
                                label="Element ID (for CSS)"
                                value={cta1ElementId}
                                onChange={(value) => setAttributes({ cta1ElementId: value })}
                                placeholder="cta-1-custom"
                                help="Custom ID for styling with CSS."
                            />

                            <SelectControl
                                label="Alignment"
                                value={cta1Alignment}
                                options={alignmentOptions}
                                onChange={(value) => setAttributes({ cta1Alignment: value })}
                            />
                        </>
                    )}
                </PanelBody>

                {/* CTA 2 - After Guidance */}
                <PanelBody title="CTA 2 - After Guidance (Premium)" initialOpen={false}>
                    <p style={premiumNoticeStyle}>
                        Requires a premium subscription
                    </p>

                    <ToggleControl
                        label="Enable CTA"
                        checked={cta2Enabled}
                        onChange={(value) => setAttributes({ cta2Enabled: value })}
                        help="Replace the placeholder with your custom call to action."
                    />

                    {cta2Enabled && (
                        <>
                            <TextControl
                                label="CTA Header"
                                value={cta2HeaderText}
                                onChange={(value) => setAttributes({ cta2HeaderText: value })}
                                placeholder="Your Special Offer"
                            />

                            <SelectControl
                                label="Header Level"
                                value={cta2HeaderLevel}
                                options={headerLevelOptions}
                                onChange={(value) => setAttributes({ cta2HeaderLevel: value })}
                            />

                            <TextareaControl
                                label="CTA Text"
                                value={cta2Text}
                                onChange={(value) => setAttributes({ cta2Text: value })}
                                help="Introductory text for your offer (not clickable)."
                                placeholder="Discover your deeper cosmic insights today!"
                            />

                            <div style={{ marginBottom: '16px' }}>
                                <p style={{ marginBottom: '5px', fontWeight: '500' }}>CTA Image (optional)</p>
                                <MediaUploadCheck>
                                    <MediaUpload
                                        onSelect={(media) => setAttributes({
                                            cta2ImageUrl: media.url,
                                            cta2ImageAlt: media.alt || ''
                                        })}
                                        allowedTypes={['image']}
                                        render={({ open }) => (
                                            <div>
                                                {cta2ImageUrl ? (
                                                    <>
                                                        <img
                                                            src={cta2ImageUrl}
                                                            alt={cta2ImageAlt}
                                                            style={{
                                                                maxWidth: '100%',
                                                                borderRadius: '4px',
                                                                marginBottom: '8px',
                                                                display: 'block',
                                                            }}
                                                        />
                                                        <Button
                                                            isDestructive
                                                            variant="secondary"
                                                            isSmall
                                                            onClick={() => setAttributes({
                                                                cta2ImageUrl: '',
                                                                cta2ImageAlt: ''
                                                            })}
                                                        >
                                                            Remove Image
                                                        </Button>
                                                    </>
                                                ) : (
                                                    <Button variant="secondary" onClick={open}>
                                                        Select CTA Image
                                                    </Button>
                                                )}
                                            </div>
                                        )}
                                    />
                                </MediaUploadCheck>
                            </div>

                            {cta2ImageUrl && (
                                <TextControl
                                    label="Image Alt Text"
                                    value={cta2ImageAlt}
                                    onChange={(value) => setAttributes({ cta2ImageAlt: value })}
                                />
                            )}

                            <TextControl
                                label="CTA URL"
                                value={cta2Url}
                                onChange={(value) => setAttributes({ cta2Url: value })}
                                placeholder="https://example.com/affiliate-link"
                                type="url"
                            />

                            <SelectControl
                                label="Link Type"
                                value={cta2LinkType}
                                options={linkTypeOptions}
                                onChange={(value) => setAttributes({ cta2LinkType: value })}
                                help={
                                    cta2LinkType === 'button' ? 'Displays a styled button.' :
                                    cta2LinkType === 'text' ? 'Displays a text link.' :
                                    'Makes the image itself clickable (no button/text link).'
                                }
                            />

                            {(cta2LinkType === 'button' || cta2LinkType === 'text') && (
                                <TextControl
                                    label={cta2LinkType === 'button' ? 'Button Text' : 'Link Text'}
                                    value={cta2LinkText}
                                    onChange={(value) => setAttributes({ cta2LinkText: value })}
                                    placeholder={cta2LinkType === 'button' ? 'Get Your Reading Now!' : 'Click here to learn more'}
                                />
                            )}

                            {cta2ImageUrl && cta2LinkType !== 'image' && (
                                <ToggleControl
                                    label="Make Image Clickable"
                                    checked={cta2ImageClickable}
                                    onChange={(value) => setAttributes({ cta2ImageClickable: value })}
                                    help="Also wrap the image in a link."
                                />
                            )}

                            <TextControl
                                label="Element ID (for CSS)"
                                value={cta2ElementId}
                                onChange={(value) => setAttributes({ cta2ElementId: value })}
                                placeholder="cta-2-custom"
                                help="Custom ID for styling with CSS."
                            />

                            <SelectControl
                                label="Alignment"
                                value={cta2Alignment}
                                options={alignmentOptions}
                                onChange={(value) => setAttributes({ cta2Alignment: value })}
                            />
                        </>
                    )}
                </PanelBody>

                {/* CTA 3 - After Advice */}
                <PanelBody title="CTA 3 - After Advice (Premium)" initialOpen={false}>
                    <p style={premiumNoticeStyle}>
                        Requires a premium subscription
                    </p>

                    <ToggleControl
                        label="Enable CTA"
                        checked={cta3Enabled}
                        onChange={(value) => setAttributes({ cta3Enabled: value })}
                        help="Replace the placeholder with your custom call to action."
                    />

                    {cta3Enabled && (
                        <>
                            <TextControl
                                label="CTA Header"
                                value={cta3HeaderText}
                                onChange={(value) => setAttributes({ cta3HeaderText: value })}
                                placeholder="Your Special Offer"
                            />

                            <SelectControl
                                label="Header Level"
                                value={cta3HeaderLevel}
                                options={headerLevelOptions}
                                onChange={(value) => setAttributes({ cta3HeaderLevel: value })}
                            />

                            <TextareaControl
                                label="CTA Text"
                                value={cta3Text}
                                onChange={(value) => setAttributes({ cta3Text: value })}
                                help="Introductory text for your offer (not clickable)."
                                placeholder="Discover your deeper cosmic insights today!"
                            />

                            <div style={{ marginBottom: '16px' }}>
                                <p style={{ marginBottom: '5px', fontWeight: '500' }}>CTA Image (optional)</p>
                                <MediaUploadCheck>
                                    <MediaUpload
                                        onSelect={(media) => setAttributes({
                                            cta3ImageUrl: media.url,
                                            cta3ImageAlt: media.alt || ''
                                        })}
                                        allowedTypes={['image']}
                                        render={({ open }) => (
                                            <div>
                                                {cta3ImageUrl ? (
                                                    <>
                                                        <img
                                                            src={cta3ImageUrl}
                                                            alt={cta3ImageAlt}
                                                            style={{
                                                                maxWidth: '100%',
                                                                borderRadius: '4px',
                                                                marginBottom: '8px',
                                                                display: 'block',
                                                            }}
                                                        />
                                                        <Button
                                                            isDestructive
                                                            variant="secondary"
                                                            isSmall
                                                            onClick={() => setAttributes({
                                                                cta3ImageUrl: '',
                                                                cta3ImageAlt: ''
                                                            })}
                                                        >
                                                            Remove Image
                                                        </Button>
                                                    </>
                                                ) : (
                                                    <Button variant="secondary" onClick={open}>
                                                        Select CTA Image
                                                    </Button>
                                                )}
                                            </div>
                                        )}
                                    />
                                </MediaUploadCheck>
                            </div>

                            {cta3ImageUrl && (
                                <TextControl
                                    label="Image Alt Text"
                                    value={cta3ImageAlt}
                                    onChange={(value) => setAttributes({ cta3ImageAlt: value })}
                                />
                            )}

                            <TextControl
                                label="CTA URL"
                                value={cta3Url}
                                onChange={(value) => setAttributes({ cta3Url: value })}
                                placeholder="https://example.com/affiliate-link"
                                type="url"
                            />

                            <SelectControl
                                label="Link Type"
                                value={cta3LinkType}
                                options={linkTypeOptions}
                                onChange={(value) => setAttributes({ cta3LinkType: value })}
                                help={
                                    cta3LinkType === 'button' ? 'Displays a styled button.' :
                                    cta3LinkType === 'text' ? 'Displays a text link.' :
                                    'Makes the image itself clickable (no button/text link).'
                                }
                            />

                            {(cta3LinkType === 'button' || cta3LinkType === 'text') && (
                                <TextControl
                                    label={cta3LinkType === 'button' ? 'Button Text' : 'Link Text'}
                                    value={cta3LinkText}
                                    onChange={(value) => setAttributes({ cta3LinkText: value })}
                                    placeholder={cta3LinkType === 'button' ? 'Get Your Reading Now!' : 'Click here to learn more'}
                                />
                            )}

                            {cta3ImageUrl && cta3LinkType !== 'image' && (
                                <ToggleControl
                                    label="Make Image Clickable"
                                    checked={cta3ImageClickable}
                                    onChange={(value) => setAttributes({ cta3ImageClickable: value })}
                                    help="Also wrap the image in a link."
                                />
                            )}

                            <TextControl
                                label="Element ID (for CSS)"
                                value={cta3ElementId}
                                onChange={(value) => setAttributes({ cta3ElementId: value })}
                                placeholder="cta-3-custom"
                                help="Custom ID for styling with CSS."
                            />

                            <SelectControl
                                label="Alignment"
                                value={cta3Alignment}
                                options={alignmentOptions}
                                onChange={(value) => setAttributes({ cta3Alignment: value })}
                            />
                        </>
                    )}
                </PanelBody>

            </InspectorControls>

            <div
                {...blockProps}
                style={{ position: "relative" }}
            >

                {heroImageDisplayMode === "background" && heroImageUrl && (
                    <div className="ez-editor-bg-preview"
                        data-overlay-opacity={heroImageOverlayOpacity}
                        data-overlay-color={heroImageOverlayColor}
                        data-overlay-align={heroImageAlignment}
                        style={{ display: "none" }}
                    ></div>
                )}

                <div style={{ position: "relative", zIndex: 2 }}>
                    <ServerSideRender
                        block="ezhoroscope/daily-horoscope"
                        attributes={attributes}
                        key={[
                            attributes.sign,
                            attributes.horoscopeStyle,
                            attributes.language,
                            attributes.heroImageUrl,
                            attributes.heroImageDisplayMode,
                            attributes.heroImageAlignment,
                            attributes.heroImageTextWrap,
                            attributes.heroImageOverlayOpacity,
                            attributes.heroImageOverlayColor,
                            attributes.heroImageMaxWidth,
                            attributes.suppressPromotionalContent,
                            attributes.showHeroSection,
                            attributes.showGuidanceSection,
                            attributes.showAdviceSection,
                            attributes.showConclusionSection,
                            attributes.showMoonItem,
                            attributes.showSunItem,
                            attributes.showMarsItem,
                            attributes.showMercuryItem,
                            attributes.showJupiterItem,
                            attributes.showVenusItem,
                            attributes.showSaturnItem,
                            attributes.showNeptuneItem,
                            attributes.showUranusItem,
                            attributes.showPlutoItem,
                        ].join('-')}
                    />
                </div>

            </div>

        </>
    );
}