/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Composant : Modale d'envoi Info riverains (Client B2B)
 * =========================================================================
 */

const { useState } = React;

window.pano_ClientNewsletterModal = ({ managingPanneau, onClose, showToast }) => {
    const {
        MailIcon, UsersIcon, SendIcon, AlertTriangleIcon, LoaderIcon, CheckCircleIcon
    } = window.pano_getIcons();
    
    const Modal = window.pano_Modal || (() => null);
    const Button = window.pano_Button || (() => null);
    const FormInput = window.pano_FormInput || (() => null);
    const FormTextarea = window.pano_FormTextarea || (() => null);

    const [isSending, setIsSending] = useState(false);
    const [isSent, setIsSent] = useState(false);
    const [newsletterData, setNewsletterData] = useState({
        subject: '',
        message: ''
    });

    const subscriberCount = managingPanneau?.newsletterSubscribers || 0;

    const handleSendNewsletter = async (e) => {
        e.preventDefault();
        
        if (!newsletterData.subject.trim() || !newsletterData.message.trim()) {
            showToast("Veuillez remplir tous les champs.", "error");
            return;
        }

        const d = await window.pano_apiFetch('newsletter/send', {
            body: {
                panneau_id: managingPanneau.id,
                subject: newsletterData.subject,
                message: newsletterData.message
            },
            setLoading: setIsSending,
            successMessage: "Information envoyée avec succès !"
        });

        if (d) {
            setIsSent(true);
            setTimeout(() => {
                onClose();
            }, 3000);
        }
    };

    return (
        <Modal title="Info riverains" type="info" onClose={onClose} preventClose={isSending} zIndex="z-[300]">
            <div className="space-y-6">
                
                <div className="bg-blue-50 border border-blue-200 p-4 rounded-xl flex items-center justify-between shadow-sm">
                    <div>
                        <h4 className="font-black text-blue-900 text-sm flex items-center gap-2">
                            <UsersIcon size={16} /> Riverains abonnés
                        </h4>
                        <p className="text-xs text-blue-800 mt-1">
                            Personnes souhaitant être tenues informées de l'avancée de ce chantier.
                        </p>
                    </div>
                    <div className="text-2xl font-black text-blue-600 bg-white px-4 py-2 rounded-lg shadow-sm border border-blue-100">
                        {subscriberCount}
                    </div>
                </div>

                {isSent ? (
                    <div className="py-8 text-center animate-in zoom-in-95 duration-300">
                        <div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                            <CheckCircleIcon size={40} />
                        </div>
                        <h3 className="text-2xl font-black text-slate-800 mb-2">Message envoyé !</h3>
                        <p className="text-slate-600 font-medium">Votre actualité a bien été transmise aux {subscriberCount} abonné(s).</p>
                    </div>
                ) : subscriberCount === 0 ? (
                    <div className="py-12 text-center text-slate-500 border border-slate-200 border-dashed rounded-2xl bg-slate-50">
                        <MailIcon size={48} className="mx-auto mb-4 opacity-50" />
                        <h3 className="text-lg font-black text-slate-700 mb-2">Aucun abonné pour le moment</h3>
                        <p className="text-sm font-medium px-6">
                            Les riverains peuvent s'inscrire directement depuis la page publique de votre panneau en scannant le QR Code.
                        </p>
                    </div>
                ) : (
                    <form onSubmit={handleSendNewsletter} className="space-y-5 animate-in fade-in">
                        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-4">
                            <h4 className="font-bold text-slate-800 text-sm border-b border-slate-100 pb-2">Rédiger votre message</h4>
                            
                            {FormInput && (
                                <FormInput 
                                    label="Objet du message" 
                                    value={newsletterData.subject} 
                                    onChange={e => setNewsletterData({...newsletterData, subject: e.target.value})} 
                                    placeholder="Ex: Fermeture temporaire de la rue..."
                                    required 
                                    disabled={isSending}
                                />
                            )}
                            
                            {FormTextarea && (
                                <FormTextarea 
                                    label="Contenu du message" 
                                    value={newsletterData.message} 
                                    onChange={e => setNewsletterData({...newsletterData, message: e.target.value})} 
                                    placeholder="Bonjour, nous vous informons que les travaux de terrassement débuteront ce lundi..."
                                    rows={6}
                                    required 
                                    disabled={isSending}
                                    hint="Un lien de désinscription sera automatiquement ajouté en bas de cet e-mail pour respecter le RGPD."
                                />
                            )}
                        </div>

                        <div className="bg-amber-50 p-4 border border-amber-200 rounded-xl text-amber-800 text-xs font-medium flex items-start gap-3">
                            <AlertTriangleIcon size={16} className="shrink-0 mt-0.5" />
                            <p>
                                Ce message sera envoyé par e-mail à tous les riverains inscrits à ce jour ({subscriberCount} personne{subscriberCount > 1 ? 's' : ''}). Veillez à relire votre message avant envoi.
                            </p>
                        </div>

                        <div className="flex gap-3 pt-2">
                            <Button variant="secondary" type="button" onClick={onClose} disabled={isSending} className="flex-1 py-3 justify-center">
                                Annuler
                            </Button>
                            <Button variant="primary" type="submit" disabled={isSending || !newsletterData.subject.trim() || !newsletterData.message.trim()} icon={isSending ? LoaderIcon : SendIcon} className="flex-[2] py-3 uppercase tracking-widest justify-center shadow-md">
                                {isSending ? 'Envoi en cours...' : 'Envoyer l\'information'}
                            </Button>
                        </div>
                    </form>
                )}
            </div>
        </Modal>
    );
};

/* EOF ========== [_react/_clients_modals_newsletter.jsx] */