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

export default function save({ attributes }) {
    const {
        bookCoverUrl,
        badgeText,
        bookTitle,
        bookDesc,
        quoteText,
        quoteAuthor,
        btnText,
        btnUrl,
        sectionBgColor,
        sectionPadding,
        badgeColor,
        titleColor,
        btnBgColor,
        btnTextColor,
        btnHoverBgColor,
        btnHoverTextColor,
        blockId,
        featuredStyle,
    } = attributes;

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

    const containerClass = sectionBgColor || sectionPadding !== null
        ? ''
        : 'py-24';

    // Container Grid Gap Class
    const gridGapClass = isElegant ? 'gap-16' : 'gap-12';

    // Image Styles
    const imageClass = isElegant
        ? 'rounded shadow-2xl w-full max-w-sm hover:scale-[1.02] transition-transform duration-500'
        : 'rounded-lg shadow-2xl max-w-sm w-full transition-transform duration-300 hover:scale-105 transform -rotate-2';

    const imgContainerClass = isElegant
        ? 'flex justify-center md:justify-end'
        : 'flex justify-center';

    // Badge Styles
    let badgeClass = badgeColor
        ? 'font-bold uppercase tracking-wider'
        : 'font-bold text-coral-pop uppercase tracking-wider';

    if (isElegant) {
        badgeClass = badgeColor
            ? 'block mb-2 text-xs uppercase tracking-widest font-bold'
            : 'block mb-2 text-xs uppercase tracking-widest font-bold text-gray-500';
    }

    // Title Styles
    let titleClass = titleColor
        ? 'text-4xl font-black mt-2 mb-6'
        : 'text-4xl font-black text-navy mt-2 mb-6';

    if (isElegant) {
        titleClass = titleColor
            ? 'text-4xl font-serif font-bold mt-2 mb-6'
            : 'text-4xl font-serif font-bold text-slate-800 mt-2 mb-6';
    }

    // Description Styles
    let descClass = 'text-lg text-navy/80 mb-6';
    if (isElegant) {
        descClass = 'text-lg text-gray-500 leading-relaxed mb-6';
    }

    // Quote Styles
    let quoteClass = 'border-l-4 border-yellow-sun pl-6 italic text-navy/70 my-8 text-lg';
    let quoteAuthorClass = 'block not-italic font-bold text-navy mt-2';

    if (isElegant) {
        quoteClass = 'border-l-4 border-slate-900 pl-6 italic text-gray-500 my-8 text-lg font-serif';
        quoteAuthorClass = 'block not-italic font-bold text-xs uppercase tracking-wide text-gray-500 mt-4';
    }

    // Button Styles
    let btnClass = btnBgColor
        ? 'btn-fun btn-order'
        : 'btn-fun btn-yellow btn-order';

    if (isElegant) {
        btnClass = btnBgColor
            ? 'px-8 py-3 rounded font-medium transition-all duration-300 ease-in-out border border-transparent shadow-sm hover:shadow-md btn-order'
            : '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-order';
    }

    // Dynamic hover styles (same as edit.js)
    const hoverStyles = `
        .block-${blockId} .btn-order:hover {
            ${btnHoverBgColor ? `background-color: ${btnHoverBgColor} !important;` : ''}
            ${btnHoverTextColor ? `color: ${btnHoverTextColor} !important;` : ''}
        }
    `;

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

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

            <div className={`awt-container mx-auto px-6 grid md:grid-cols-2 ${gridGapClass} items-center`}>
                {/* Left Column - Book Cover */}
                <div className={imgContainerClass}>
                    <figure className={imageClass}>
                        <img src={bookCoverUrl} alt="The book cover for Featured Book" />
                    </figure>
                </div>

                {/* Right Column - Content */}
                <div>
                    <RichText.Content
                        tagName="span"
                        className={badgeClass}
                        value={badgeText}
                        style={{ color: badgeColor || undefined }}
                    />

                    <RichText.Content
                        tagName="h2"
                        className={titleClass}
                        value={bookTitle}
                        style={{ color: titleColor || undefined }}
                    />

                    <RichText.Content
                        tagName="p"
                        className={descClass}
                        value={bookDesc}
                    />

                    <blockquote className={quoteClass}>
                        <RichText.Content
                            tagName="p"
                            value={quoteText}
                        />
                        <RichText.Content
                            tagName="cite"
                            className={quoteAuthorClass}
                            value={quoteAuthor}
                        />
                    </blockquote>

                    <div className="buttons flex gap-4">
                        <a
                            className={btnClass}
                            href={btnUrl}
                            style={{
                                backgroundColor: btnBgColor || (isElegant ? '#0f172a' : undefined),
                                color: btnTextColor || (isElegant ? '#ffffff' : undefined),
                            }}
                        >
                            {btnText}
                        </a>
                    </div>
                </div>
            </div>
        </section>
    );
}
