// ECO-PANNEAU.FR - _react/clients/_clients_modals_newsletter.jsx

const { useState } = React;

window.pano_ClientNewsletterModal = ({ managingPanneau, myClientData, onClose, showToast }) => {
    
    // ZÉRO-DETTE : Utilisation de notre Hook abstrait !
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // 1. - Composants et Icônes
    const {
        MailIcon, UsersIcon, SendIcon, AlertTriangleIcon, LoaderIcon, CheckCircleIcon
    } = window.pano_getIcons();
    
    const { Modal, Button, FormInput, FormTextarea, AlertBox } = window.pano_getComponents();

    // 2. - États locaux
    const [isSending, setIsSending] = useState(false);
    const [isSent, setIsSent] = useState(false);
    const [moderationPrompt, setModerationPrompt] = useState(false);
    
    const [newsletterData, setNewsletterData] = useState({
        subject: '',
        message: ''
    });

    // 3. - Calcul des droits (UID et Email Hash)
    const isOwner = managingPanneau.client_uid === myClientData.id;
    const isMe = (uid) => uid === myClientData.id || uid === myClientData.email_hash;
    const myCollab = !isOwner ? managingPanneau.collaborators?.find(c => isMe(c.uid)) : null;
    
    const canEdit = isOwner || myCollab?.rights?.can_edit;

    if (!canEdit) {
        return (
            <Modal title="Information aux riverains" type="error" onClose={onClose}>
                <p className="text-center text-slate-500 py-8 break-words">Vous n'avez pas les droits nécessaires pour envoyer une information aux riverains.</p>
            </Modal>
        );
    }

    const subscriberCount = managingPanneau?.newsletterSubscribers || 0;

    // 4. - Actions métier
    const handleSendNewsletter = async (e, requestModeration = false) => {
        if (e) e.preventDefault();
        
        if (!newsletterData.subject.trim() || !newsletterData.message.trim()) {
            showToast("Veuillez remplir tous les champs.", "error");
            return;
        }

        const d = await safeFetch('newsletter/send', {
            body: {
                panneau_id: managingPanneau.id,
                subject: newsletterData.subject,
                message: newsletterData.message,
                request_moderation: requestModeration
            },
            setLoading: setIsSending
        });

        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit

        if (d && d.data) {
            if (d.data.requires_moderation) {
                setModerationPrompt(true);
            } else if (d.data.moderation_submitted) {
                showToast(d.message || "Demande de modération transmise.", "success");
                setModerationPrompt(false);
                setIsSent(true);
                setTimeout(() => { if (isMounted.current) onClose(); }, 3000);
            } else {
                showToast(d.message || "Information envoyée avec succès !", "success");
                setIsSent(true);
                setTimeout(() => { if (isMounted.current) onClose(); }, 3000);
            }
        } else if (d) {
            showToast(d.message || "Information envoyée avec succès !", "success");
            setIsSent(true);
            setTimeout(() => { if (isMounted.current) onClose(); }, 3000);
        }
    };

    // 5. - Rendu UI : Avertissement de modération
    if (moderationPrompt) {
        return (
            <Modal 
                title="Modération requise" 
                type="warning" 
                onClose={() => setModerationPrompt(false)} 
                actions={(close) => (
                    <>
                        <Button variant="secondary" onClick={close} className="flex-1 py-3 justify-center text-xs">Modifier le message</Button>
                        <Button variant="warningSolid" onClick={() => handleSendNewsletter(null, true)} disabled={isSending} icon={isSending ? LoaderIcon : null} className="flex-[2] py-3 justify-center shadow-md text-xs text-center">Demander une modération</Button>
                    </>
                )}
            >
                <div className="space-y-6 text-center py-6 px-4 min-w-0">
                    {AlertTriangleIcon && <AlertTriangleIcon size={48} className="mx-auto text-amber-500 mb-4" />}
                    <h3 className="text-xl font-black text-slate-800 break-words">Termes non autorisés détectés</h3>
                    <p className="text-slate-600 font-medium leading-relaxed break-words">
                        Votre message contient des termes non autorisés et a été bloqué par notre filtre de modération. <br/><br/>
                        <strong>Souhaitez-vous demander une modération humaine ?</strong>
                    </p>
                </div>
            </Modal>
        );
    }

    // 6. - Rendu UI Principal
    return (
        <Modal 
            title={`Info riverains : ${managingPanneau.name}`} 
            type="info" 
            onClose={onClose} 
            preventClose={isSending} 
            actions={(!isSent && subscriberCount > 0) ? (close) => (
                <>
                    <Button variant="secondary" type="button" onClick={close} disabled={isSending} className="flex-1 py-3 justify-center text-xs">Annuler</Button>
                    <Button variant="primary" type="submit" form="newsletter-form" disabled={isSending || !newsletterData.subject.trim() || !newsletterData.message.trim()} icon={isSending ? LoaderIcon : SendIcon} className="flex-[2] py-3 uppercase tracking-widest justify-center shadow-md text-xs text-center">
                        {isSending ? 'Traitement...' : 'Envoyer l\'information'}
                    </Button>
                </>
            ) : null}
        >
            <div className="space-y-6 min-w-0 w-full overflow-x-hidden">
                
                <div className="bg-blue-50 border border-blue-200 p-4 rounded-xl flex items-center justify-between shadow-sm min-w-0">
                    <div className="min-w-0 pr-2">
                        <h4 className="font-black text-blue-900 text-sm flex items-center gap-2 break-words leading-tight">
                            {UsersIcon && <UsersIcon size={16} className="shrink-0" />} Riverains abonnés
                        </h4>
                        <p className="text-xs text-blue-800 mt-1 break-words leading-tight">
                            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 shrink-0">
                        {subscriberCount}
                    </div>
                </div>

                {isSent ? (
                    <div className="py-8 text-center animate-in zoom-in-95 duration-300 min-w-0">
                        <div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6 shrink-0">
                            {CheckCircleIcon && <CheckCircleIcon size={40} />}
                        </div>
                        <h3 className="text-2xl font-black text-slate-800 mb-2 break-words">Message envoyé !</h3>
                        <p className="text-slate-600 font-medium break-words">Votre actualité a bien été transmise {window.pano_formatPlural(subscriberCount, "à 1 abonné", `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 min-w-0">
                        {MailIcon && <MailIcon size={48} className="mx-auto mb-4 opacity-50 shrink-0" />}
                        <h3 className="text-lg font-black text-slate-700 mb-2 break-words">Aucun abonné pour le moment</h3>
                        <p className="text-sm font-medium px-2 sm:px-6 break-words leading-relaxed">
                            Les riverains peuvent s'inscrire directement depuis la page publique de votre panneau en scannant le QR Code.
                        </p>
                    </div>
                ) : (
                    <form id="newsletter-form" onSubmit={(e) => handleSendNewsletter(e, false)} className="space-y-5 animate-in fade-in min-w-0">
                        
                        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm space-y-4 min-w-0">
                            <h4 className="font-bold text-slate-800 text-sm border-b border-slate-100 pb-4 break-words">Rédiger votre message</h4>
                            
                            <div className="space-y-4 animate-in fade-in zoom-in-95 duration-200 min-w-0">
                                {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}
                                        className="min-w-0"
                                    />
                                )}
                                
                                {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."
                                        className="min-w-0"
                                    />
                                )}
                            </div>
                        </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 min-w-0">
                            {AlertTriangleIcon && <AlertTriangleIcon size={16} className="shrink-0 mt-0.5" />}
                            <p className="break-words leading-relaxed">
                                Ce message sera envoyé par e-mail {window.pano_formatPlural(subscriberCount, "à l'unique riverain inscrit à ce jour", `à tous les riverains inscrits à ce jour (${subscriberCount} personnes)`)}. Les filtres de modération s'appliquent à ce contenu.
                            </p>
                        </div>
                    </form>
                )}
            </div>
        </Modal>
    );
};

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