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

export default function save({ attributes }) {
    const {
        heading,
        authorImageUrl,
        buttonText,
        buttonUrl,
        sectionBgColor,
        sectionPadding,
        headingColor,
        textColor,
        btnBgColor,
        btnTextColor,
        btnHoverBgColor,
        btnHoverTextColor,
        imageStyle,
        showButton,
        blockId,
        aboutStyle,
    } = attributes;

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

    // Grid Layout & Spans
    const gridClass = isElegant
        ? 'grid md:grid-cols-5 gap-16 items-center'
        : 'grid md:grid-cols-2 gap-12 items-center';

    const imageColClass = isElegant
        ? 'md:col-span-2 flex justify-center order-2 md:order-1'
        : 'order-2 md:order-1';

    const textColClass = isElegant
        ? 'md:col-span-3 order-1 md:order-2'
        : 'order-1 md:order-2';

    const containerClass = sectionBgColor || sectionPadding !== null
        ? ''
        : (isElegant ? 'bg-gray-50' : 'bg-yellow-sun/20 py-24');

    const headingClass = headingColor
        ? (isElegant ? 'text-4xl font-serif font-bold text-brand-dark mb-6' : 'text-4xl font-black text-navy mb-6')
        : (isElegant ? 'text-4xl font-serif font-bold text-brand-dark mb-6' : 'text-4xl font-black text-navy mb-6');

    const bioClass = textColor
        ? (isElegant ? 'text-lg space-y-4 leading-relaxed' : 'text-lg mb-4 leading-relaxed')
        : (isElegant ? 'text-lg text-brand-gray space-y-4 leading-relaxed' : 'text-lg text-navy/80 mb-4 leading-relaxed');

    // Image Style Logic
    let finalImageStyle;
    if (isElegant) {
        finalImageStyle = imageStyle === 'portrait'
            ? 'rounded-lg shadow-xl aspect-[4/5] object-cover w-full max-w-sm border border-gray-100'
            : 'rounded-full overflow-hidden w-64 h-64 md:w-80 md:h-80 shadow-lg border-4 border-white object-cover';
    } else {
        finalImageStyle = imageStyle === 'portrait'
            ? 'rounded-lg shadow-xl aspect-[4/5] object-cover w-full max-w-sm transform -rotate-2 hover:rotate-2 transition-transform duration-300'
            : 'rounded-full shadow-xl aspect-square object-cover w-full max-w-sm';
    }

    const btnClass = btnBgColor
        ? (isElegant ? 'px-8 py-3 rounded font-medium border border-gray-800 text-gray-900 transition-colors inline-block' : 'btn-fun btn-white')
        : (isElegant ? 'px-8 py-3 rounded font-medium bg-white border border-gray-800 text-gray-900 hover:bg-gray-50 transition-colors inline-block' : 'btn-fun btn-white');
    // Dynamic hover styles
    const hoverStyles = `
        .block-${blockId} .btn-about:hover {
            ${btnHoverBgColor ? `background-color: ${btnHoverBgColor} !important;` : ''}
            ${btnHoverTextColor ? `color: ${btnHoverTextColor} !important;` : ''}
        }
    `;

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

    const innerBlocksProps = useInnerBlocksProps.save({
        className: `about-bio-content ${bioClass}`
    });

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

            <div className="awt-container mx-auto px-6">
                <div className={gridClass}>
                    {/* Left Column - Author Image */}
                    <div className={imageColClass}>
                        <figure className="about-section-image-container">
                            {authorImageUrl && (
                                <img
                                    src={authorImageUrl}
                                    alt="Author photo"
                                    className={finalImageStyle}
                                />
                            )}
                        </figure>
                    </div>

                    {/* Right Column - Bio Text */}
                    <div className={textColClass}>
                        <RichText.Content
                            tagName="h2"
                            className={headingClass}
                            value={heading}
                            style={{ color: headingColor || undefined }}
                        />

                        <div {...innerBlocksProps} style={{ color: textColor || undefined }} />

                        {showButton && (
                            <div className="mt-8">
                                <a
                                    href={buttonUrl}
                                    className={btnClass}
                                    style={{
                                        backgroundColor: btnBgColor || undefined,
                                        color: btnTextColor || undefined,
                                        textDecoration: 'none',
                                    }}
                                >
                                    {buttonText}
                                </a>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}
