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

export default function save({ attributes }) {
    const {
        title,
        heroStyle,
        description,
        heroImageUrl,
        authorImageUrl,
        titleColor,
        descColor,
        sectionPadding,
        sectionBgColor,
        hideCurve,
        curveColor,
        btn1Text,
        btn1Url,
        btn1BgColor,
        btn1TextColor,
        btn1HoverBgColor,
        btn1HoverTextColor,
        btn2Text,
        btn2Url,
        btn2BgColor,
        btn2TextColor,
        btn2HoverBgColor,
        btn2HoverTextColor,
        blockId,
    } = attributes;

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

    let containerClass = 'relative overflow-hidden w-full';

    // Apply defaults if no custom overrides
    if (!sectionBgColor && sectionPadding === null) {
        containerClass += isElegant ? ' bg-slate-50 pt-24 pb-32' : ' bg-blue-sky bg-opacity-10 pt-24 pb-32';
    }

    let titleClass = titleColor
        ? 'text-5xl lg:text-7xl font-black mb-6 leading-tight'
        : 'text-5xl lg:text-7xl font-black text-navy mb-6 leading-tight';

    if (isElegant) {
        titleClass = titleColor
            ? 'text-5xl md:text-7xl font-serif font-bold mb-6 leading-tight'
            : 'text-5xl md:text-7xl font-serif font-bold text-slate-800 mb-6 leading-tight';
    }

    let descClass = descColor
        ? 'text-xl mb-10 max-w-lg mx-auto md:mx-0'
        : 'text-xl text-navy/80 mb-10 max-w-lg mx-auto md:mx-0';

    if (isElegant) {
        descClass = descColor
            ? 'text-xl mb-10 max-w-lg mx-auto md:mx-0 font-light leading-relaxed'
            : 'text-xl text-slate-500 mb-10 max-w-lg mx-auto md:mx-0 font-light leading-relaxed';
    }

    let btn1Class = btn1BgColor
        ? 'btn-fun btn-1'
        : 'btn-fun btn-yellow btn-1';

    if (isElegant) {
        btn1Class = btn1BgColor
            ? 'px-8 py-3 rounded font-medium transition-all duration-300 ease-in-out border border-transparent shadow-sm hover:shadow-md btn-1'
            : 'px-8 py-3 rounded font-medium transition-all duration-300 ease-in-out border border-transparent bg-slate-900 text-white shadow-sm hover:shadow-md btn-1';
    }

    let btn2Class = btn2BgColor
        ? 'btn-fun btn-2'
        : 'btn-fun btn-white btn-2';

    if (isElegant) {
        btn2Class = btn2BgColor
            ? 'px-8 py-3 rounded font-medium transition-all duration-300 ease-in-out border border-transparent btn-2'
            : 'px-8 py-3 rounded font-medium transition-all duration-300 ease-in-out border border-current hover:bg-slate-50 btn-2';
    }

    // Dynamic hover styles (same as edit.js)
    const hoverStyles = `
		.block-${blockId} .btn-1:hover {
			${btn1HoverBgColor ? `background-color: ${btn1HoverBgColor} !important;` : ''}
			${btn1HoverTextColor ? `color: ${btn1HoverTextColor} !important;` : ''}
		}
		.block-${blockId} .btn-2:hover {
			${btn2HoverBgColor ? `background-color: ${btn2HoverBgColor} !important;` : ''}
			${btn2HoverTextColor ? `color: ${btn2HoverTextColor} !important;` : ''}
		}
	`;

    const blockProps = useBlockProps.save({
        className: `${containerClass} block-${blockId}`,
        style: {
            backgroundColor: sectionBgColor || (isElegant ? '#f8fafc' : undefined),
            paddingTop: sectionPadding !== null ? `${sectionPadding}px` : undefined,
            paddingBottom: sectionPadding !== null ? `${sectionPadding}px` : undefined,
        }
    });

    return (
        <section {...blockProps} id="hero">
            {/* Dynamic Hover Styles */}
            <style dangerouslySetInnerHTML={{ __html: hoverStyles }} />

            {/* SVG Wave Divider - Conditional (Fun Mode Only) */}
            {(!hideCurve && isFun) && (
                <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-none z-0 pointer-events-none">
                    <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" className="w-full h-auto block">
                        <path d="M0 100H1440V0C1192.5 49.497 919.5 74.497 720 74.497C520.5 74.497 247.5 49.497 0 0V100Z" fill={curveColor} />
                    </svg>
                </div>
            )}

            <div className="awt-container mx-auto px-6 grid md:grid-cols-2 gap-8 items-center relative z-10">
                {/* Left Column - Text Content */}
                <div className="text-center md:text-left">
                    <RichText.Content
                        tagName="h1"
                        className={titleClass}
                        value={title}
                        style={{ color: titleColor || (isElegant ? '#1e293b' : undefined) }}
                    />

                    <RichText.Content
                        tagName="p"
                        className={descClass}
                        value={description}
                        style={{ color: descColor || (isElegant ? '#64748b' : undefined) }}
                    />

                    <div className="flex flex-col sm:flex-row md:space-y-3 lg:space-y-0 flex-wrap md:items-left md:flex-col lg:flex-row gap-4 justify-center md:justify-start">
                        <div className="btn-wrapper md:mb-4 lg:mb-0">
                            <a
                                className={btn1Class}
                                href={btn1Url}
                                style={{
                                    backgroundColor: btn1BgColor || (isElegant ? '#0f172a' : undefined),
                                    color: btn1TextColor || (isElegant ? '#ffffff' : undefined),
                                }}
                            >
                                {btn1Text}
                            </a>
                        </div>
                        <div className="btn-wrapper">
                            <a
                                className={btn2Class}
                                href={btn2Url}
                                style={{
                                    backgroundColor: btn2BgColor || undefined,
                                    color: btn2TextColor || (isElegant ? '#0f172a' : undefined),
                                    borderColor: (!btn2BgColor && isElegant) ? '#0f172a' : undefined
                                }}
                            >
                                {btn2Text}
                            </a>
                        </div>
                    </div>
                </div>

                {/* Right Column - Images */}
                <div className="flex items-center justify-center">
                    <div className="relative">
                        {/* Main Hero Image */}
                        {isElegant ? (
                            <div className="relative w-full max-w-md">
                                <div className="absolute inset-0 transform translate-x-4 translate-y-4 z-0 rounded-lg" style={{ backgroundColor: 'rgba(15, 23, 42, 0.1)' }}></div>
                                <figure className="relative z-10 w-full aspect-[4/5] bg-gray-200 rounded-lg overflow-hidden shadow-xl">
                                    <img src={heroImageUrl} alt="Hero" className="w-full h-full object-cover" />
                                </figure>
                            </div>
                        ) : (
                            <figure className="rounded-lg shadow-xl w-full max-w-lg transform rotate-2">
                                <img src={heroImageUrl} alt="An illustration of the book's main characters" />
                            </figure>
                        )}

                        {/* Author Circle Image (Fun Mode Only) */}
                        {isFun && (
                            <figure className="absolute -bottom-12 -right-12 w-32 h-32 md:w-40 md:h-40 rounded-full border-8 border-white shadow-2xl transform -rotate-6 overflow-hidden">
                                <img src={authorImageUrl} alt="A friendly photo of the author" className="w-full h-full object-cover" />
                            </figure>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}
