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

export default function Save({ attributes }) {
    const {
        blockId,
        eventStyle = 'fun',
        subHeading, heading, description,
        primaryBtnText, primaryBtnUrl,
        secondaryBtnText, secondaryBtnUrl,
        imageUrl,
        showDecorations,
        sectionBgColor, cardBgColor,
        subHeadingColor, headingColor, descColor,
        primaryBtnBg, primaryBtnTextColor, primaryBtnHoverBg, primaryBtnHoverText,
        secondaryBtnBg, secondaryBtnTextColor, secondaryBtnHoverBg, secondaryBtnHoverText,
        decoration1Color, decoration2Color, borderRadius
    } = attributes;

    const uniqueClass = `awt-events-cta-${blockId}`;

    // Generate Scoped CSS for Hover States
    const hoverCss = `
        .${uniqueClass} .btn-primary:hover {
            background-color: ${primaryBtnHoverBg} !important;
            color: ${primaryBtnHoverText} !important;
        }
        .${uniqueClass} .btn-secondary:hover {
            background-color: ${secondaryBtnHoverBg} !important;
            color: ${secondaryBtnHoverText} !important;
        }
    `;

    const isFun = eventStyle === 'fun';
    const isElegant = eventStyle === 'elegant';

    // Container Classes
    const containerClasses = isFun
        ? "p-8 md:p-16 text-center md:text-left relative overflow-hidden shadow-2xl transition-all duration-300"
        : "p-8 md:p-16 text-center md:text-left bg-gray-800 rounded-xl shadow-2xl border border-gray-700 relative overflow-hidden";

    // Text Classes
    const subHeadingClasses = isFun
        ? "font-bold uppercase tracking-wider mb-2 block"
        : "text-gray-400 font-bold uppercase tracking-widest text-xs mb-4 block";

    // Force gray-400 for sub-heading in Elegant mode if no custom color is set
    const subHeadingStyle = isElegant && !subHeadingColor ? { color: '#9ca3af' } : { color: subHeadingColor };

    const headingClasses = isFun
        ? "text-3xl md:text-5xl font-black mb-6"
        : "text-3xl md:text-5xl font-serif font-bold text-white mb-6";

    const descClasses = isFun
        ? "text-lg mb-8 leading-relaxed"
        : "text-lg text-gray-300 mb-8 leading-relaxed";

    // Button Classes
    const primaryBtnClasses = isFun
        ? "btn-fun btn-primary"
        : "px-8 py-3 rounded font-medium bg-white text-gray-900 hover:bg-gray-200 transition-colors inline-block";

    const secondaryBtnClasses = isFun
        ? "btn-fun btn-secondary bg-transparent border-2 border-white hover:bg-white hover:text-navy"
        : "px-8 py-3 rounded font-medium border border-gray-500 text-white hover:bg-gray-700 transition-colors inline-block";

    // Image Classes
    const imageWrapperClasses = isFun
        ? "hidden md:block"
        : "hidden md:block w-full max-w-sm aspect-square bg-gray-700 rounded-lg overflow-hidden shadow-lg mx-auto";

    const imageClasses = isFun
        ? "rounded-xl shadow-lg transform rotate-3 border-4 border-white/20"
        : "object-cover w-full h-full";

    return (
        <section
            {...useBlockProps.save({
                className: `awt-child-author-events-cta ${uniqueClass} py-24`,
                style: { backgroundColor: sectionBgColor }
            })}
        >
            <style>{hoverCss}</style>

            <div className="awt-container mx-auto px-6">
                <div
                    className={containerClasses}
                    style={{
                        backgroundColor: cardBgColor,
                        borderRadius: `${borderRadius}px`
                    }}
                >
                    {showDecorations && isFun && (
                        <>
                            <div
                                className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-16 -mt-16"
                                style={decoration1Color ? { backgroundColor: decoration1Color, opacity: 0.05 } : {}}
                            ></div>
                            <div
                                className="absolute bottom-0 left-0 w-40 h-40 bg-yellow-sun/10 rounded-full -ml-10 -mb-10"
                                style={decoration2Color ? { backgroundColor: decoration2Color, opacity: 0.1 } : {}}
                            ></div>
                        </>
                    )}

                    <div className="relative z-10 grid md:grid-cols-2 gap-12 items-center">
                        <div>
                            <RichText.Content
                                tagName="span"
                                className={subHeadingClasses}
                                value={subHeading}
                                style={subHeadingStyle}
                            />
                            <RichText.Content
                                tagName="h2"
                                className={headingClasses}
                                value={heading}
                                style={{ color: headingColor }}
                            />
                            <RichText.Content
                                tagName="p"
                                className={descClasses}
                                value={description}
                                style={{ color: descColor }}
                            />
                            <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                                <a
                                    href={primaryBtnUrl}
                                    className={primaryBtnClasses}
                                    style={{ backgroundColor: primaryBtnBg, color: primaryBtnTextColor }}
                                >
                                    <RichText.Content value={primaryBtnText} />
                                </a>
                                <a
                                    href={secondaryBtnUrl}
                                    className={secondaryBtnClasses}
                                    style={{
                                        backgroundColor: secondaryBtnBg,
                                        color: secondaryBtnTextColor,
                                        borderColor: secondaryBtnTextColor || (isElegant ? '#6b7280' : 'white')
                                    }}
                                >
                                    <RichText.Content value={secondaryBtnText} />
                                </a>
                            </div>
                        </div>
                        <div className={imageWrapperClasses}>
                            {imageUrl && (
                                <img
                                    src={imageUrl}
                                    alt="Event"
                                    className={imageClasses}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
