// Single snippet that includes everything
add_action('wp_enqueue_scripts', function() {
    // Add React and ReactDOM
    wp_enqueue_script('react', 'https://unpkg.com/react@18/umd/react.production.min.js', [], '18.0.0', true);
    wp_enqueue_script('react-dom', 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js', ['react'], '18.0.0', true);
    wp_enqueue_script('babel', 'https://unpkg.com/babel-standalone@6/babel.min.js', ['react', 'react-dom'], '6.0.0', true);
    
    // Add Poppins font
    wp_enqueue_style('poppins', 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
    
    // Add the styles
    wp_add_inline_style('your-theme-style', '
        .email-validator {
            width: 100%;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-family: "Poppins", sans-serif;
            box-sizing: border-box;
            position: relative;
        }
        
        .input-group {
            display: flex;
            gap: 8px;
            margin-bottom: 1.5rem;
        }
        
        .input-group input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            font-size: 16px;
            font-family: "Poppins", sans-serif;
            transition: border-color 0.2s;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #0d2451;
        }
        
        .validate-btn {
            padding: 12px 24px;
            background: #0d2451;
            color: white;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
            font-family: "Poppins", sans-serif;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .validate-btn:hover { background: #163272; }
        .validate-btn:disabled { 
            background: #94a3b8;
            cursor: not-allowed;
        }
        
        .result {
            margin-top: 1.5rem;
            padding: 1.5rem;
        }
        
        .status-1 { background: #fee2e2; }
        .status-2 { background: #fef2f2; }
        .status-3 { background: #fff1f2; }
        .status-4 { background: #fdf4ff; }
        .status-5 { background: #ecfdf5; }
        .status-6 { background: #fee2e2; }
        .status-7 { background: #fef3c7; }
        .status-8 { background: #fff7ed; }
        
        .result-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            font-size: 14px;
            font-weight: 500;
            margin-left: 8px;
        }
        
        .safe-to-send {
            background: #dcfce7;
            color: #166534;
        }
        
        .not-safe {
            background: #fee2e2;
            color: #991b1b;
        }
        
        .maybe-safe {
            background: #fff7ed;
            color: #9a3412;
        }
        
        .result-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }
        
        .detail-item {
            background: white;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .detail-label {
            color: #64748b;
            font-size: 14px;
            margin-bottom: 4px;
        }
        
        .detail-value {
            font-weight: 500;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .main-spinner {
            width: 20px;
            height: 20px;
            border: 3px solid #e2e8f0;
            border-top: 3px solid #0d2451;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @media (max-width: 640px) {
            .email-validator {
                padding: 1rem;
            }
            
            .input-group {
                flex-direction: column;
            }
            
            .validate-btn {
                width: 100%;
            }
        }
    ');
});

add_shortcode('react_email_validator', function() {
    ob_start();
    ?>
    <div id="email-validator-root"></div>
    <script type="text/babel">
        const EMAIL_CODES = {
            '1': { text: 'Syntax Error', desc: 'Not an email.', safe: false },
            '2': { text: 'Spam Trap', desc: 'Spam-trap by ESPs.', safe: false },
            '3': { text: 'Disposable', desc: 'A temporary, disposable address.', safe: false },
            '4': { text: 'Accept-All', desc: 'Domain-wide setting.', safe: true },
            '5': { text: 'Deliverable', desc: 'Verified as real address.', safe: true },
            '6': { text: 'Invalid', desc: 'Verified as invalid (Bounce).', safe: false },
            '7': { text: 'Unknown', desc: 'The server cannot be reached.', safe: false },
            '8': { text: 'Role', desc: 'Role accounts such as info, support, etc.', safe: 'maybe' }
        };

        const EmailValidator = () => {
            const [email, setEmail] = React.useState('');
            const [loading, setLoading] = React.useState(false);
            const [result, setResult] = React.useState(null);
            const [error, setError] = React.useState(null);

            const validateEmail = async () => {
                if (!email.trim()) {
                    setError('Please enter an email address');
                    setResult(null);
                    return;
                }

                setLoading(true);
                setError(null);
                setResult(null);

                try {
                    const response = await fetch(
                        `url?user_input_email=${encodeURIComponent(email.trim())}`,
                        {
                            headers: {
                                'X-Auth-Key': ''
                            }
                        }
                    );

                    const data = await response.json();

                    if (data.success) {
                        setResult(data.result);
                    } else {
                        setError(data.message || 'Validation failed');
                    }
                } catch (err) {
                    setError('An error occurred while validating the email');
                } finally {
                    setLoading(false);
                }
            };

            const getSafetyBadge = (code) => {
                const codeInfo = EMAIL_CODES[code];
                if (codeInfo.safe === true) {
                    return { class: 'safe-to-send', text: 'Safe to Send' };
                } else if (codeInfo.safe === false) {
                    return { class: 'not-safe', text: 'Not Safe to Send' };
                }
                return { class: 'maybe-safe', text: 'Use with Caution' };
            };

            const handleKeyPress = (e) => {
                if (e.key === 'Enter') {
                    validateEmail();
                }
            };

            return (
                <div className="email-validator">
                    <div className="input-group">
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            onKeyPress={handleKeyPress}
                            placeholder="Enter email address"
                            aria-label="Email address"
                        />
                        <button
                            className="validate-btn"
                            onClick={validateEmail}
                            disabled={loading}
                        >
                            {loading ? (
                                <div className="main-spinner" />
                            ) : (
                                'Validate'
                            )}
                        </button>
                    </div>

                    {loading && (
                        <div className="loading-overlay">
                            <div className="main-spinner" />
                        </div>
                    )}

                    {(result || error) && (
                        <div className={`result ${result ? `status-${result.code}` : 'status-1'}`}>
                            <div className="result-header">
                                <span>
                                    {error || `${result.result} - ${result.reason}`}
                                </span>
                                {result && (
                                    <span 
                                        className={`status-badge ${getSafetyBadge(result.code).class}`}
                                    >
                                        {getSafetyBadge(result.code).text}
                                    </span>
                                )}
                            </div>
                            {result && (
                                <div className="result-details">
                                    <div className="detail-item">
                                        <div className="detail-label">Email</div>
                                        <div className="detail-value">{result.email}</div>
                                    </div>
                                    <div className="detail-item">
                                        <div className="detail-label">Description</div>
                                        <div className="detail-value">
                                            {EMAIL_CODES[result.code].desc}
                                        </div>
                                    </div>
                                    <div className="detail-item">
                                        <div className="detail-label">Send Transactional</div>
                                        <div className="detail-value">
                                            {result.send_transactional ? 'Yes' : 'No'}
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            );
        };

        // Initialize the component
        ReactDOM.render(
            <EmailValidator />,
            document.getElementById('email-validator-root')
        );
    </script>
    <?php
    return ob_get_clean();
});