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

export default function save({ attributes }) {
    const {
        blockId,
        heading,
        description,
        buttonText,
        formShortcode,
        sectionBgColor,
        textColor,
        buttonBgColor,
        buttonTextColor,
        sectionPadding
    } = attributes;

    // Use sectionBgColor check to decide if we keep default class
    const containerClass = sectionBgColor ? '' : 'bg-white';
    const textClass = textColor ? '' : 'text-navy';
    const buttonClass = buttonBgColor ? 'btn-fun' : 'btn-fun bg-yellow-sun';

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

    const headingStyles = { color: textColor || undefined };
    const textStyles = { color: textColor || undefined };
    const buttonStyles = {
        backgroundColor: buttonBgColor || undefined,
        color: buttonTextColor || undefined,
        borderColor: buttonBgColor || undefined
    };

    return (
        <section {...blockProps}>
            <div className="awt-container container mx-auto px-6">
                <RichText.Content
                    tagName="h2"
                    className="section-heading"
                    value={heading}
                    style={headingStyles}
                />

                <RichText.Content
                    tagName="p"
                    className={`text-lg ${textClass}/80 text-center max-w-2xl mx-auto mb-12`}
                    value={description}
                    style={{ ...textStyles, opacity: 0.8 }}
                />

                {formShortcode ? (
                    <div className="awt-contact-shortcode-wrapper">
                        {formShortcode}
                    </div>
                ) : (
                    <form action="#" method="POST" className="max-w-3xl mx-auto">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label htmlFor="name" className={`block mb-2 font-bold ${textClass}`} style={textStyles}>Your Name</label>
                                <input type="text" id="name" name="name" placeholder="Like 'Leo the Lion'"
                                    className="w-full p-4 rounded-lg bg-cream border-2 border-transparent text-navy placeholder:text-navy/50 focus:outline-none focus:ring-2 focus:ring-blue-sky transition-all"
                                />
                            </div>
                            <div>
                                <label htmlFor="email-contact" className={`block mb-2 font-bold ${textClass}`} style={textStyles}>Your Email</label>
                                <input type="email" id="email-contact" name="email" placeholder="your-email@example.com"
                                    className="w-full p-4 rounded-lg bg-cream border-2 border-transparent text-navy placeholder:text-navy/50 focus:outline-none focus:ring-2 focus:ring-blue-sky transition-all"
                                    required
                                />
                            </div>
                        </div>

                        <div className="mb-6">
                            <label htmlFor="subject" className={`block mb-2 font-bold ${textClass}`} style={textStyles}>What's this about?</label>
                            <select id="subject" name="subject"
                                className="w-full p-4 rounded-lg bg-cream border-2 border-transparent text-navy focus:outline-none focus:ring-2 focus:ring-blue-sky transition-all appearance-none"
                            >
                                <option>A School Visit</option>
                                <option>A Question About a Book</option>
                                <option>Sharing a Drawing!</option>
                                <option>Just Saying Hello!</option>
                            </select>
                        </div>

                        <div className="mb-8">
                            <label htmlFor="message" className={`block mb-2 font-bold ${textClass}`} style={textStyles}>Your Message</label>
                            <textarea id="message" name="message" rows="6" placeholder="Tell me all about it..."
                                className="w-full p-4 rounded-lg bg-cream border-2 border-transparent text-navy placeholder:text-navy/50 focus:outline-none focus:ring-2 focus:ring-blue-sky transition-all"
                            ></textarea>
                        </div>

                        <div className="text-center">
                            <button type="submit" className={`px-8 py-3 rounded-full font-extrabold font-sans uppercase tracking-wide text-navy shadow-lg transition-all duration-300 ease-in-out ${buttonClass}`} style={buttonStyles}>
                                <RichText.Content value={buttonText} />
                            </button>
                        </div>
                    </form>
                )}
            </div>
        </section>
    );
}
