import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { IMaskInput } from 'react-imask';
import axios from 'axios';

export default function Registration(props) {
    const [formData, setFormData] = useState({
        prenom: 'Malick',
        nom: 'Tounkara',
        telephone: '770000088',
        email: 'testregister@mail.com',
        password: 'password',
        confirmPassword: 'password',
        region: 'Dakar',
        ville: 'Dakar',
        adresse: 'Castor',
        agreeTerms: false
    });

    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [serverError, setServerError] = useState(null);
    const [showPassword, setShowPassword] = useState(false);
    const [isSuccess, setIsSuccess] = useState(false);

    useEffect(() => {
        if (isSuccess) {
            window.scrollTo({ top: 0, behavior: 'smooth' });

            const authHeader = document.querySelector('.auth-header');
            if (authHeader) {
                authHeader.style.display = 'none';
            }

            const wrapper = document.querySelector('.react-registration-wrapper');
            if (wrapper) {
                let sibling = wrapper.nextElementSibling;
                while (sibling) {
                    sibling.style.display = 'none';
                    sibling = sibling.nextElementSibling;
                }
            }
        }
    }, [isSuccess]);

    // Modals state
    const [showTermsModal, setShowTermsModal] = useState(false);
    const [showPrivacyModal, setShowPrivacyModal] = useState(false);

    const CITY_TO_REGION = {
        'Dakar': 'Dakar', 'Guédiawaye': 'Dakar', 'Pikine': 'Dakar', 'Rufisque': 'Dakar', 'Bargny': 'Dakar', 'Keur Massar': 'Dakar', 'Sébikotane': 'Dakar', 'Diamniadio': 'Dakar',
        'Thiès': 'Thiès', 'Tivaouane': 'Thiès', 'Mbour': 'Thiès', 'Joal-Fadiouth': 'Thiès', 'Ngaparou': 'Thiès', 'Saly': 'Thiès', 'Popenguine': 'Thiès', 'Pout': 'Thiès',
        'Saint-Louis': 'Saint-Louis', 'Richard-Toll': 'Saint-Louis', 'Dagana': 'Saint-Louis', 'Podor': 'Saint-Louis',
        'Louga': 'Louga', 'Kébémer': 'Louga', 'Linguère': 'Louga',
        'Diourbel': 'Diourbel', 'Mbacké': 'Diourbel', 'Bambey': 'Diourbel',
        'Kaolack': 'Kaolack', 'Nioro du Rip': 'Kaolack', 'Guinguinéo': 'Kaolack',
        'Fatick': 'Fatick', 'Foundiougne': 'Fatick', 'Gossas': 'Fatick',
        'Kaffrine': 'Kaffrine', 'Birkilane': 'Kaffrine', 'Koungheul': 'Kaffrine', 'Malem Hodar': 'Kaffrine',
        'Kolda': 'Kolda', 'Velingara': 'Kolda', 'Medina Yoro Foulah': 'Kolda',
        'Sédhiou': 'Sédhiou', 'Bounkiling': 'Sédhiou', 'Goudomp': 'Sédhiou',
        'Ziguinchor': 'Ziguinchor', 'Bignona': 'Ziguinchor', 'Oussouye': 'Ziguinchor',
        'Tambacounda': 'Tambacounda', 'Bakel': 'Tambacounda', 'Goudiry': 'Tambacounda', 'Koumpentoum': 'Tambacounda',
        'Kédougou': 'Kédougou', 'Salémata': 'Kédougou', 'Saraya': 'Kédougou',
        'Matam': 'Matam', 'Kanel': 'Matam', 'Ranérou': 'Matam'
    };

    const validateField = (name, value, currentData) => {
        let error = '';
        switch (name) {
            case 'prenom':
                if (!value) error = 'Le prénom est requis';
                else if (value.length < 2) error = 'Le prénom doit contenir au moins 2 caractères';
                break;
            case 'nom':
                if (!value) error = 'Le nom est requis';
                else if (value.length < 2) error = 'Le nom doit contenir au moins 2 caractères';
                break;
            case 'telephone':
                const phoneValue = value.replace(/[\s-]/g, '');
                const phoneRegex = /^\+221(7[05678]|30|33)\d{7}$/;
                if (!value || phoneValue === '+2217') {
                    error = 'Le téléphone est requis';
                } else if (!phoneRegex.test(phoneValue)) {
                    error = 'Format invalide (ex: +221 77 123 45 67)';
                }
                break;
            case 'email':
                if (!value) error = "L'email est requis";
                else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) error = 'Email invalide';
                break;
            case 'password':
                if (!value) error = 'Le mot de passe est requis';
                else if (value.length < 4) error = 'Le mot de passe doit contenir au moins 4 caractères';
                break;
            case 'confirmPassword':
                if (!value) error = 'Veuillez confirmer le mot de passe';
                else if (value !== currentData.password) error = 'Les mots de passe ne correspondent pas';
                break;
            case 'agreeTerms':
                if (!value) error = 'Vous devez accepter les conditions';
                break;
            case 'ville':
                if (!value) error = 'La ville est requise';
                break;
            case 'adresse':
                if (!value) error = "L'adresse est requise";
                break;
            default:
                break;
        }
        return error;
    };

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        const finalValue = type === 'checkbox' ? checked : value;

        let newFormData = { ...formData, [name]: finalValue };

        // Auto-assign region based on city selection
        if (name === 'ville') {
            const correspondingRegion = CITY_TO_REGION[finalValue] || '';
            newFormData = { ...newFormData, region: correspondingRegion };
        }

        setFormData(newFormData);

        const error = validateField(name, finalValue, newFormData);
        setErrors(prev => ({
            ...prev,
            [name]: error,
            ...(name === 'ville' ? { region: '' } : {}) // Clear region error when ville is selected
        }));
    };
    
    const handleSubmit = async (e) => {
        e.preventDefault();

        const newErrors = {};
        Object.keys(formData).forEach(key => {
            if (key === 'region' && formData.ville) return; // Skip region validation if ville is present (auto-filled)
            const error = validateField(key, formData[key], formData);
            if (error) newErrors[key] = error;
        });

        if (Object.keys(newErrors).length > 0) {
            setErrors(newErrors);
            setTimeout(() => {
                const firstError = document.querySelector('.is-invalid, .alert-danger');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }, 100);
            return;
        }

        setIsSubmitting(true);
        setServerError(null);

        // Récupération du jeton reCAPTCHA
        let recaptchaToken = null;
        try {
            if (typeof window.grecaptcha !== 'undefined') {
                await new Promise(resolve => window.grecaptcha.ready(resolve));
                recaptchaToken = await window.grecaptcha.execute(window.RECAPTCHA_SITE_KEY, { action: 'registration' });
            }
        } catch (recapError) {
            console.error('reCAPTCHA Error:', recapError);
        }

        const payloadData = { 
            ...formData, 
            telephone: formData.telephone.replace(/[\s]/g, ''),
            recaptcha_token: recaptchaToken 
        };

        try {
            const response = await axios.post(props.submitUrl || '/api-register', payloadData, {
                headers: {
                    'Content-Type': 'application/json',
                }
            });

            setIsSuccess(true);
        } catch (error) {
            if (error.response && error.response.data) {
                const data = error.response.data;
                if (data.errors) {
                    setErrors(prev => ({ ...prev, ...data.errors }));
                } else {
                    setServerError(data.error || 'Une erreur est survenue lors de l\'inscription.');
                }
            } else {
                setServerError('Erreur de connexion au serveur.');
            }

            setTimeout(() => {
                const firstError = document.querySelector('.is-invalid, .alert-danger');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                } else {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            }, 100);
        } finally {
            setIsSubmitting(false);
        }
    };

    if (isSuccess) {
        return (
            <div className="text-center py-5">
                <div className="mb-4 d-flex justify-content-center">
                    <div className="rounded-circle d-flex align-items-center justify-content-center" style={{ width: '80px', height: '80px', backgroundColor: 'rgba(46, 204, 113, 0.1)' }}>
                        <i className="fas fa-envelope-open-text" style={{ fontSize: '2.5rem', color: '#2ecc71' }}></i>
                    </div>
                </div>
                <h3 className="font-weight-bold mb-3" style={{ color: 'var(--gris-fonce)' }}>Vérifiez votre boîte mail !</h3>
                <p className="text-muted mb-4" style={{ fontSize: '1.1rem', lineHeight: '1.6' }}>
                    Votre compte a été créé avec succès. Un lien de confirmation vous a été envoyé à l'adresse <strong>{formData.email}</strong>.<br/>
                    Veuillez cliquer sur ce lien pour activer votre compte.
                </p>
                <div className="alert alert-warning d-inline-block text-left mb-4" style={{ borderRadius: '12px', fontSize: '0.95rem' }}>
                    <i className="fas fa-envelope mr-2" style={{ color: '#d35400' }}></i>
                    <strong>Attention :</strong> Pensez à vérifier votre dossier <strong>Spams</strong> ou <strong>Courrier indésirable</strong>.
                </div>
                <div>
                    <a href="/login" className="btn btn-primary px-4 py-2 font-weight-bold" style={{ borderRadius: '12px', backgroundColor: 'var(--vert-senegal)', borderColor: 'var(--vert-senegal)' }}>
                        Aller à la page de connexion
                    </a>
                </div>
            </div>
        );
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                {serverError && (
                    <div className="alert alert-danger d-flex align-items-center mb-4" style={{ borderRadius: '12px' }}>
                        <i className="fas fa-exclamation-triangle mr-3" style={{ fontSize: '1.2rem' }}></i>
                        <div>{serverError}</div>
                    </div>
                )}

                <div className="alert alert-info py-2 px-3 mb-4 d-flex align-items-center" style={{ borderRadius: '10px', background: 'rgba(52, 152, 219, 0.05)', border: '1px solid rgba(52, 152, 219, 0.1)' }}>
                    <i className="fas fa-info-circle text-primary mr-2 small"></i>
                    <span className="small font-weight-bold text-muted">Tous les champs ci-dessous sont obligatoires.</span>
                </div>

                <div className="row">
                    <div className="col-md-6 mb-4">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Prénom</label>
                            <input
                                type="text"
                                name="prenom"
                                value={formData.prenom}
                                onChange={handleChange}
                                placeholder="Ex: Mamadou"
                                className={`form-control form-control-custom ${errors.prenom ? 'is-invalid' : ''}`}
                            />
                            {errors.prenom && <div className="invalid-feedback d-block font-weight-bold">{errors.prenom}</div>}
                        </div>
                    </div>

                    <div className="col-md-6 mb-4">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Nom</label>
                            <input
                                type="text"
                                name="nom"
                                value={formData.nom}
                                onChange={handleChange}
                                placeholder="Ex: Diémé"
                                className={`form-control form-control-custom ${errors.nom ? 'is-invalid' : ''}`}
                            />
                            {errors.nom && <div className="invalid-feedback d-block font-weight-bold">{errors.nom}</div>}
                        </div>
                    </div>
                </div>

                <div className="form-group mb-4">
                    <label className="font-weight-bold text-muted small text-uppercase mb-2">Téléphone</label>
                    <IMaskInput
                        mask="+221 #0 000 00 00"
                        definitions={{
                            '#': /[7]/,
                        }}
                        lazy={false}
                        name="telephone"
                        value={formData.telephone}
                        unmask={false}
                        onAccept={(value, mask) => {
                            handleChange({
                                target: {
                                    name: 'telephone',
                                    value: value
                                }
                            });
                        }}
                        placeholder="+221 7X XXX XX XX"
                        className={`form-control form-control-custom ${errors.telephone ? 'is-invalid' : ''}`}
                    />
                    {errors.telephone && <div className="invalid-feedback d-block font-weight-bold">{errors.telephone}</div>}
                </div>

                <div className="form-group mb-4">
                    <label className="font-weight-bold text-muted small text-uppercase mb-2">Adresse Email</label>
                    <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        placeholder="votre@email.com"
                        className={`form-control form-control-custom ${errors.email ? 'is-invalid' : ''}`}
                    />
                    {errors.email && <div className="invalid-feedback d-block font-weight-bold">{errors.email}</div>}
                </div>
                
                <div className="row">
                    <div className="col-md-6 mb-4">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Ville (Sénégal)</label>
                            <select
                                name="ville"
                                value={formData.ville}
                                onChange={handleChange}
                                className={`form-control form-control-custom ${errors.ville ? 'is-invalid' : ''}`}
                            >
                                <option value="">Choisir votre ville de résidence</option>
                                {['Dakar', 'Guédiawaye', 'Pikine', 'Rufisque', 'Bargny', 'Keur Massar', 'Sébikotane', 'Diamniadio', 'Thiès', 'Tivaouane', 'Mbour', 'Joal-Fadiouth', 'Ngaparou', 'Saly', 'Popenguine', 'Pout', 'Saint-Louis', 'Richard-Toll', 'Dagana', 'Podor', 'Louga', 'Kébémer', 'Linguère', 'Diourbel', 'Mbacké', 'Bambey', 'Kaolack', 'Nioro du Rip', 'Guinguinéo', 'Fatick', 'Foundiougne', 'Gossas', 'Kaffrine', 'Birkilane', 'Koungheul', 'Malem Hodar', 'Kolda', 'Velingara', 'Medina Yoro Foulah', 'Sédhiou', 'Bounkiling', 'Goudomp', 'Ziguinchor', 'Bignona', 'Oussouye', 'Tambacounda', 'Bakel', 'Goudiry', 'Koumpentoum', 'Kédougou', 'Salémata', 'Saraya', 'Matam', 'Kanel', 'Ranérou'].map(ville => (
                                    <option key={ville} value={ville}>{ville}</option>
                                ))}
                            </select>
                            {errors.ville && <div className="invalid-feedback d-block font-weight-bold">{errors.ville}</div>}
                        </div>
                    </div>

                    <div className="col-md-6 mb-4">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Adresse</label>
                            <input
                                type="text"
                                name="adresse"
                                value={formData.adresse}
                                onChange={handleChange}
                                placeholder="Ex: Parcelles Assainies Unité 22"
                                className={`form-control form-control-custom ${errors.adresse ? 'is-invalid' : ''}`}
                            />
                            {errors.adresse && <div className="invalid-feedback d-block font-weight-bold">{errors.adresse}</div>}
                        </div>
                    </div>
                </div>

                <div className="row mb-4">
                    <div className="col-md-6 mb-4 mb-md-0">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Mot de passe</label>
                            <div className="custom-input-group">
                                <input
                                    type={showPassword ? "text" : "password"}
                                    name="password"
                                    value={formData.password}
                                    onChange={handleChange}
                                    placeholder="••••••••"
                                    className={`form-control form-control-custom pr-5 ${errors.password ? 'is-invalid' : ''}`}
                                />
                                <i
                                    className={`fas ${showPassword ? 'fa-eye-slash' : 'fa-eye'} input-icon`}
                                    onClick={() => setShowPassword(!showPassword)}
                                ></i>
                            </div>
                            {errors.password && <div className="invalid-feedback d-block font-weight-bold">{errors.password}</div>}
                        </div>
                    </div>

                    <div className="col-md-6">
                        <div className="form-group mb-0">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Confirmation</label>
                            <div className="custom-input-group">
                                <input
                                    type={showPassword ? "text" : "password"}
                                    name="confirmPassword"
                                    value={formData.confirmPassword}
                                    onChange={handleChange}
                                    placeholder="••••••••"
                                    className={`form-control form-control-custom pr-5 ${errors.confirmPassword ? 'is-invalid' : ''}`}
                                />
                                <i
                                    className={`fas ${showPassword ? 'fa-eye-slash' : 'fa-eye'} input-icon`}
                                    onClick={() => setShowPassword(!showPassword)}
                                ></i>
                            </div>
                            {errors.confirmPassword && <div className="invalid-feedback d-block font-weight-bold">{errors.confirmPassword}</div>}
                        </div>
                    </div>
                </div>

                <div className="custom-control custom-checkbox mb-4" style={{ paddingLeft: '1.5rem' }}>
                    <input
                        type="checkbox"
                        className={`custom-control-input ${errors.agreeTerms ? 'is-invalid' : ''}`}
                        id="agreeTerms"
                        name="agreeTerms"
                        checked={formData.agreeTerms}
                        onChange={handleChange}
                    />
                    <label className="custom-control-label text-muted" htmlFor="agreeTerms" style={{ fontSize: '0.9rem', paddingTop: '2px', lineHeight: '1.5' }}>
                        J'accepte les{' '}
                        <button type="button" onClick={() => setShowTermsModal(true)} className="btn btn-link p-0 small font-weight-bold text-decoration-none" style={{ color: 'var(--vert-senegal)' }}>
                            Conditions d'utilisation
                        </button>
                        {' '}et la{' '}
                        <button type="button" onClick={() => setShowPrivacyModal(true)} className="btn btn-link p-0 small font-weight-bold text-decoration-none" style={{ color: 'var(--vert-senegal)' }}>
                            Politique de confidentialité
                        </button>
                        {' '}de Objets Trouvés Sénégal.
                    </label>
                    {errors.agreeTerms && <div className="invalid-feedback d-block font-weight-bold mt-1">{errors.agreeTerms}</div>}
                </div>

                {serverError && (
                    <div className="alert alert-danger d-flex align-items-center mb-4" style={{ borderRadius: '12px' }}>
                        <i className="fas fa-exclamation-triangle mr-3" style={{ fontSize: '1.2rem' }}></i>
                        <div>{serverError}</div>
                    </div>
                )}

                <button
                    type="submit"
                    disabled={isSubmitting}
                    className="btn btn-auth btn-block d-flex justify-content-center align-items-center mb-2"
                >
                    {isSubmitting ? (
                        <><span className="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Création en cours...</>
                    ) : (
                        <>Créer mon compte <i className="fas fa-user-plus ml-2"></i></>
                    )}
                </button>
            </form>

            <div className="text-center position-relative my-4">
                <hr className="mb-0" style={{ borderTop: '1px solid #e9ecef' }} />
                <span className="px-3 bg-white text-muted small position-absolute"
                    style={{ top: '-10px', left: '50%', transform: 'translateX(-50%)' }}>Ou continuez avec</span>
            </div>

            <div className="d-flex justify-content-center">
                <a href={props.googleUrl || '/connect/google'}
                    className="btn social-login-btn flex-fill d-flex align-items-center justify-content-center text-decoration-none">
                    <img src="https://www.google.com/favicon.ico" alt="Google"
                        style={{ width: '18px', marginRight: '8px' }} /> Google
                </a>
            </div>

            {/* Terms Modal */}
            {showTermsModal && createPortal(
                <>
                    <div className="modal-backdrop fade show" style={{ zIndex: 1040 }}></div>
                    <div className="modal fade show d-block" tabIndex="-1" role="dialog" style={{ zIndex: 1050, backgroundColor: 'rgba(0,0,0,0.5)' }}>
                        <div className="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
                            <div className="modal-content border-0" style={{ borderRadius: '24px' }}>
                                <div className="modal-header border-bottom-0 pt-4 px-4 px-md-5">
                                    <h4 className="modal-title font-weight-bold h3" style={{ color: 'var(--gris-fonce)' }}>Conditions d'Utilisation</h4>
                                    <button type="button" className="close" onClick={() => setShowTermsModal(false)} aria-label="Close" style={{ fontSize: '2rem', padding: '1rem' }}>
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div className="modal-body py-2 px-4 px-md-5">
                                    <div className="text-muted" style={{ lineHeight: '1.8', fontSize: '1rem' }}>
                                        <p><strong>1. Acceptation des conditions :</strong> L'accès et l'utilisation de la plateforme "Objets Trouvés Sénégal" impliquent votre pleine acceptation de ces Conditions d'Utilisation.</p>
                                        <p><strong>2. Objectif du service :</strong> Notre plateforme facilite la mise en relation entre les personnes ayant trouvé ou perdu des objets, ou documents d'identité sur le territoire national, en particulier au Sénégal.</p>
                                        <p><strong>3. Responsabilité de l'utilisateur :</strong> L'utilisateur s'engage à publier des annonces authentiques concernant les objets perdus ou trouvés. Sous aucun prétexte, cette plateforme ne doit être utilisée pour extorquer, tromper ou monnayer sa bonne foi.</p>
                                        <p><strong>4. Suspension du compte :</strong> Nous nous réservons le droit de suspendre ou supprimer tout compte en cas de comportement abusif, frauduleux ou en contradiction totale avec les valeurs du service et de la communauté.</p>
                                    </div>
                                </div>
                                <div className="modal-footer border-top-0 pb-4 px-4 px-md-5">
                                    <button type="button" className="btn btn-secondary px-4 py-2 font-weight-bold" style={{ borderRadius: '12px' }} onClick={() => setShowTermsModal(false)}>Fermer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </>,
                document.body
            )}

            {/* Privacy Policy Modal */}
            {showPrivacyModal && createPortal(
                <>
                    <div className="modal-backdrop fade show" style={{ zIndex: 1040 }}></div>
                    <div className="modal fade show d-block" tabIndex="-1" role="dialog" style={{ zIndex: 1050, backgroundColor: 'rgba(0,0,0,0.5)' }}>
                        <div className="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
                            <div className="modal-content border-0" style={{ borderRadius: '24px' }}>
                                <div className="modal-header border-bottom-0 pt-4 px-4 px-md-5">
                                    <h4 className="modal-title font-weight-bold h3" style={{ color: 'var(--gris-fonce)' }}>Politique de Confidentialité</h4>
                                    <button type="button" className="close" onClick={() => setShowPrivacyModal(false)} aria-label="Close" style={{ fontSize: '2rem', padding: '1rem' }}>
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div className="modal-body py-2 px-4 px-md-5">
                                    <div className="text-muted" style={{ lineHeight: '1.8', fontSize: '1rem' }}>
                                        <p><strong>1. Collecte des données :</strong> Nous récoltons uniquement les informations minimales utiles au fonctionnement de la plateforme (Nom, Prénom, Email, et Téléphone).</p>
                                        <p><strong>2. Utilisation et finalité :</strong> Votre numéro de téléphone et votre e-mail seront utilisés exclusivement pour assurer la mise en relation entre "trouveurs" et "perdants". Nous ne partagerons ni ne revendrons vos données personnelles pour des fins publicitaires illégitimes.</p>
                                        <p><strong>3. Protection des données :</strong> Les mots de passe sont hachés de manière sécurisée en base de données. L'hébergement de votre compte est sujet à des normes strictes de cybersécurité pour protéger toutes vos informations partagées avec la plateforme Objets Trouvés Sénégal.</p>
                                        <p><strong>4. Vos droits :</strong> Conformément à la réglementation sénégalaise relative à la protection des données (CDP), vous avez le plein droit d'accès, rectification et suppression de vos données de notre fichier à tout moment sur simple demande.</p>
                                    </div>
                                </div>
                                <div className="modal-footer border-top-0 pb-4 px-4 px-md-5">
                                    <button type="button" className="btn btn-secondary px-4 py-2 font-weight-bold" style={{ borderRadius: '12px' }} onClick={() => setShowPrivacyModal(false)}>Fermer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </>,
                document.body
            )}
        </>
    );
}