import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const {
        heading,
        description,
        disclaimer,
        buttonText,
        buttonUrl,
        useShortcode,
        customShortcode,
        sectionBgColor,
        sectionPadding,
        headingColor,
        textColor,
        inputBgColor,
        btnBgColor,
        btnTextColor,
        btnHoverBgColor,
        btnHoverTextColor,
        blockId,
        signupStyle
    } = attributes;

    // EXACT same conditional class rendering as edit.js
    const isFun = signupStyle === 'fun';
    const isElegant = signupStyle === 'elegant';

    const containerClass = sectionBgColor || sectionPadding !== null
        ? ''
        : (isElegant ? 'bg-gray-900 py-24' : 'bg-coral-pop py-24');

    const headingClass = headingColor
        ? (isElegant ? 'text-3xl md:text-4xl font-serif font-bold mb-4 text-center' : 'text-4xl md:text-5xl font-black text-center mb-4')
        : (isElegant ? 'text-3xl md:text-4xl font-serif font-bold mb-4 text-center text-white' : 'section-heading');

    const descClass = textColor
        ? 'text-center text-lg mb-8 max-w-2xl mx-auto'
        : (isElegant
            ? 'text-center text-lg text-gray-300 max-w-2xl mx-auto mb-10 font-light'
            : 'text-center text-lg mb-8 text-white/90 max-w-2xl mx-auto');

    const disclaimerClass = textColor
        ? 'text-center text-sm mt-4'
        : (isElegant
            ? 'text-center text-xs mt-6 text-gray-500'
            : 'text-center text-sm text-white/70 mt-4');

    const inputClass = inputBgColor
        ? 'flex-1 px-6 py-4 rounded-full text-lg'
        : (isElegant
            ? 'flex-1 px-6 py-4 rounded bg-white/10 border border-white/20 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-white transition-all'
            : 'flex-1 px-6 py-4 rounded-full text-lg bg-white text-navy');

    const btnClass = btnBgColor
        ? 'btn-signup px-8 py-4 rounded-full font-bold text-lg transition-all duration-300'
        : (isElegant
            ? 'btn-signup px-8 py-4 rounded bg-white text-gray-900 font-bold hover:bg-gray-200 transition-colors flex-shrink-0'
            : 'btn-fun btn-yellow btn-signup px-8 py-4 rounded-full font-bold text-lg transition-all duration-300');

    // Dynamic hover styles
    const hoverStyles = `
        .block-${blockId} .btn-signup:hover {
            ${btnHoverBgColor ? `background-color: ${btnHoverBgColor} !important;` : ''}
            ${btnHoverTextColor ? `color: ${btnHoverTextColor} !important;` : ''}
        }
    `;

    const blockProps = useBlockProps.save({
        className: `alignfull block-${blockId} awt-child-author-signup ${containerClass}`,
        style: {
            backgroundColor: sectionBgColor || undefined,
            paddingTop: sectionPadding !== null ? `${sectionPadding}px` : undefined,
            paddingBottom: sectionPadding !== null ? `${sectionPadding}px` : undefined,
        }
    });

    return (
        <section {...blockProps} id="signup">
            {/* Dynamic Hover Styles */}
            {(btnHoverBgColor || btnHoverTextColor) && (
                <style dangerouslySetInnerHTML={{ __html: hoverStyles }} />
            )}

            <div className="awt-container mx-auto px-6">
                <RichText.Content
                    tagName="h2"
                    className={headingClass}
                    value={heading}
                    style={{ color: headingColor || undefined }}
                />

                <RichText.Content
                    tagName="p"
                    className={descClass}
                    value={description}
                    style={{ color: textColor || undefined }}
                />

                {/* Form Render Logic */}
                {useShortcode ? (
                    <div className="shortcode-render max-w-2xl mx-auto mb-4">
                        {/* WordPress will parse and render the shortcode on frontend */}
                        <div dangerouslySetInnerHTML={{ __html: customShortcode }} />
                    </div>
                ) : (
                    <div className="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto items-center">
                        <input
                            type="email"
                            placeholder="your.email@example.com"
                            className={inputClass}
                            style={{ backgroundColor: inputBgColor || undefined }}
                            aria-label="Email address"
                        />
                        <a
                            href={buttonUrl}
                            className={btnClass}
                            style={{
                                backgroundColor: btnBgColor || undefined,
                                color: btnTextColor || undefined,
                                textDecoration: 'none',
                                display: 'inline-block',
                            }}
                        >
                            {buttonText}
                        </a>
                    </div>
                )}

                <RichText.Content
                    tagName="p"
                    className={disclaimerClass}
                    value={disclaimer}
                    style={{ color: textColor || undefined }}
                />
            </div>
        </section>
    );
}
