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

export default function save({ attributes }) {
    const {
        blockId,
        badgeText,
        title,
        description,
        contactDetails,
        submitButtonText,
        useShortcode,
        customShortcode,
        sectionBgColor,
        formBgColor,
        accentColor,
        primaryColor,
        textColor
    } = attributes;

    // Dynamic Styles for scoped class
    const dynamicStyles = `
        .block-${blockId} {
            background-color: ${sectionBgColor};
        }
        .block-${blockId} .awt-accent {
            color: ${accentColor};
        }
        .block-${blockId} .awt-primary {
            color: ${primaryColor};
        }
        .block-${blockId} .awt-text {
            color: ${textColor};
        }
        .block-${blockId} .bg-paper {
            background-color: ${formBgColor};
        }
        .block-${blockId} .awt-btn {
            background-color: ${primaryColor};
        }
        .block-${blockId} .awt-btn:hover {
            background-color: ${accentColor};
        }
    `;

    return (
        <section {...useBlockProps.save({ className: `block-${blockId} py-24`, style: { backgroundColor: sectionBgColor } })}>
            <style>{dynamicStyles}</style>
            <div className="awt-container">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
                    {/* Left Column */}
                    <div>
                        {badgeText && (
                            <span
                                className={`font-bold text-xs uppercase tracking-widest block mb-2 ${accentColor ? '' : 'text-accent'}`}
                                style={{ color: accentColor }}
                            >
                                {badgeText}
                            </span>
                        )}
                        {title && (
                            <h2
                                className={`text-4xl font-serif font-bold mt-2 mb-6 ${primaryColor ? '' : 'text-primary'}`}
                                style={{ color: primaryColor }}
                            >
                                {title}
                            </h2>
                        )}
                        {description && (
                            <p
                                className={`mb-8 leading-relaxed ${textColor ? '' : 'text-secondary'}`}
                                style={{ color: textColor }}
                            >
                                {description}
                            </p>
                        )}

                        {contactDetails && contactDetails.length > 0 && (
                            <div className="space-y-6">
                                {contactDetails.map((item, index) => (
                                    <div key={index} className="flex items-start gap-4">
                                        <div
                                            className={`w-10 h-10 rounded flex items-center justify-center relative overflow-hidden ${formBgColor ? '' : 'bg-paper'} ${accentColor ? '' : 'text-accent'}`}
                                            style={{ backgroundColor: formBgColor, color: accentColor }}
                                        >
                                            {item.iconUrl ? (
                                                <img
                                                    src={item.iconUrl}
                                                    alt={item.title}
                                                    className="w-5 h-5 object-contain"
                                                />
                                            ) : (
                                                <span
                                                    className="w-5 h-5 flex items-center justify-center"
                                                    dangerouslySetInnerHTML={{ __html: item.svgContent }}
                                                />
                                            )}
                                        </div>
                                        <div>
                                            <h4
                                                className={`font-bold ${primaryColor ? '' : 'text-primary'}`}
                                                style={{ color: primaryColor }}
                                            >
                                                {item.title}
                                            </h4>
                                            <p
                                                className={`text-sm ${textColor ? '' : 'text-secondary'}`}
                                                style={{ color: textColor }}
                                            >
                                                {item.text}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Right Column - Form */}
                    {useShortcode ? (
                        <div dangerouslySetInnerHTML={{ __html: customShortcode }} />
                    ) : (
                        <form
                            className={`p-8 rounded-2xl border border-gray-100 shadow-sm ${formBgColor ? '' : 'bg-paper'}`}
                            style={{ backgroundColor: formBgColor }}
                        >
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label
                                        className={`block text-xs font-bold uppercase mb-2 ${primaryColor ? '' : 'text-primary'}`}
                                        style={{ color: primaryColor }}
                                    >
                                        Name
                                    </label>
                                    <input type="text"
                                        className="w-full px-4 py-3 rounded bg-white border border-gray-200 focus:outline-none focus:border-accent"
                                        placeholder="Your Name" />
                                </div>
                                <div>
                                    <label
                                        className={`block text-xs font-bold uppercase mb-2 ${primaryColor ? '' : 'text-primary'}`}
                                        style={{ color: primaryColor }}
                                    >
                                        Email
                                    </label>
                                    <input type="email"
                                        className="w-full px-4 py-3 rounded bg-white border border-gray-200 focus:outline-none focus:border-accent"
                                        placeholder="Your Email" />
                                </div>
                            </div>
                            <div className="mb-6">
                                <label
                                    className={`block text-xs font-bold uppercase mb-2 ${primaryColor ? '' : 'text-primary'}`}
                                    style={{ color: primaryColor }}
                                >
                                    Subject
                                </label>
                                <input type="text"
                                    className="w-full px-4 py-3 rounded bg-white border border-gray-200 focus:outline-none focus:border-accent"
                                    placeholder="Speaking / General Inquiry" />
                            </div>
                            <div className="mb-6">
                                <label
                                    className={`block text-xs font-bold uppercase mb-2 ${primaryColor ? '' : 'text-primary'}`}
                                    style={{ color: primaryColor }}
                                >
                                    Message
                                </label>
                                <textarea rows="4"
                                    className="w-full px-4 py-3 rounded bg-white border border-gray-200 focus:outline-none focus:border-accent"
                                    placeholder="How can we help?"></textarea>
                            </div>
                            <button
                                className={`w-full py-4 text-white font-bold rounded transition ${primaryColor ? 'awt-btn' : 'bg-primary'} ${accentColor ? 'awt-btn-hover' : 'hover:bg-accent'}`}
                                style={{ backgroundColor: primaryColor }}
                            >
                                {submitButtonText}
                            </button>
                        </form>
                    )}
                </div>
            </div>
        </section>
    );
}

