/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Interface Client - Onglets : Dashboard, Messagerie et Facturation
 * =========================================================================
 */

// =========================================================================
// FACTORISATION : LOGIQUE MÉTIER DES MESSAGES CLIENT
// =========================================================================
window.buildClientChatThreads = (interactions, myClientData, visiblePanels, pendingInvites) => {
    const supportThreadId = `SUPPORT_${myClientData.id}`;
    const threadsMap = {
        [supportThreadId]: { id: supportThreadId, title: "Support technique", targetEmail: 'Admin', messages: [], unread: 0, type: 'support' }
    };

    [...visiblePanels, ...pendingInvites].forEach(p => {
        const groupId = `GROUP_${p.id}`;
        threadsMap[groupId] = {
            id: groupId, panneauId: p.id, title: `Équipe du panneau : ${p.name || 'Brouillon'}`,
            targetEmail: 'Groupe', messages: [], unread: 0, type: 'group', panneauData: p
        };
    });

    interactions.forEach(m => {
        if (m.panneauId === supportThreadId) {
            threadsMap[supportThreadId].messages.push(m);
            if (!m.resolved && m.author !== 'Client' && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) {
                threadsMap[supportThreadId].unread++;
            }
        } else if (m.panneauId.startsWith('GROUP_')) {
            if (threadsMap[m.panneauId]) {
                threadsMap[m.panneauId].messages.push(m);
                if (!m.resolved && m.author !== 'Client' && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) {
                    threadsMap[m.panneauId].unread++;
                }
            }
        } else {
            const isInternalMsg = m.authorType === 'Client' || m.authorType === 'Admin';
            const riverainEmail = (!isInternalMsg && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) ? m.author : m.target;
            
            if (riverainEmail && riverainEmail !== 'Groupe') {
                const threadId = `${m.panneauId}_${riverainEmail}`;
                const panneauObj = visiblePanels.find(c => c.id === m.panneauId);
                if (panneauObj) {
                    if (!threadsMap[threadId]) {
                        threadsMap[threadId] = { id: threadId, panneauId: m.panneauId, title: `Riverain : ${panneauObj.name} - ${riverainEmail}`, targetEmail: riverainEmail, messages: [], unread: 0, type: 'riverain' };
                    }
                    threadsMap[threadId].messages.push(m);
                    if (!isInternalMsg && !m.resolved) threadsMap[threadId].unread++;
                }
            }
        }
    });

    return Object.values(threadsMap)
        .filter(t => t.type === 'support' || t.messages.length > 0 || t.type === 'group')
        .sort((a,b) => {
            const dateA = a.messages.length > 0 ? new Date(String(a.messages[a.messages.length - 1].created_at || '').replace(' ', 'T')).getTime() : 0;
            const dateB = b.messages.length > 0 ? new Date(String(b.messages[b.messages.length - 1].created_at || '').replace(' ', 'T')).getTime() : 0;
            return dateB - dateA;
        });
};

// =========================================================================
// 1. ONGLET : TABLEAU DE BORD
// =========================================================================

window.ClientDashboardTab = ({ 
    data, 
    myClientData, 
    refreshData, 
    showToast, 
    setActiveTab,
    setManagingPanneau,
    setValidationErrors,
    setModalStep,
    setIsModalOpen,
    setPreviewPanneau
}) => {
    const { useState } = React;
    const [isSaving, setIsSaving] = useState(false);

    // RÉCUPÉRATION SÉCURISÉE DES COMPOSANTS ET ICÔNES
    const PlusIcon = window.PlusIcon || (() => null);
    const AlertTriangleIcon = window.AlertTriangleIcon || (() => null);
    const UsersIcon = window.UsersIcon || (() => null);
    const CheckCircleIcon = window.CheckCircleIcon || (() => null);
    const XIcon = window.XIcon || (() => null);
    const MessageSquareIcon = window.MessageSquareIcon || (() => null);
    const EyeIcon = window.EyeIcon || (() => null);
    const ShieldCheckIcon = window.ShieldCheckIcon || (() => null);
    const EditIcon = window.EditIcon || (() => null);
    const UserCircleIcon = window.UserCircleIcon || (() => null);
    const ActivityIcon = window.ActivityIcon || (() => null);
    
    const StatCard = window.StatCard || (() => null);
    const SimpleBarChart = window.SimpleBarChart || (() => null);
    
    // Fallback robuste avec restauration de la soumission native au clavier
    const Button = window.Button || (({children, onClick, className, disabled, title, icon: Icon, type}) => {
        const handleAction = (e) => {
            if (disabled) return;
            if (onClick) onClick(e);
            if (type === 'submit') {
                const form = e.currentTarget.closest('form');
                if (form && typeof form.requestSubmit === 'function') form.requestSubmit();
            }
        };
        return (
            <div 
                role="button" 
                tabIndex={disabled ? -1 : 0} 
                onClick={handleAction} 
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleAction(e); } }}
                className={`flex items-center justify-center gap-2 cursor-pointer transition ${className || ''} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} 
                title={title}
            >
                {Icon && <Icon size={16} className="shrink-0" />}
                {children}
                {type === 'submit' && <input type="submit" className="hidden" disabled={disabled} tabIndex="-1" />}
            </div>
        );
    });

    // FACTORISATION : Logique d'accès
    const { pendingInvites, visiblePanels } = window.getPanelAccessRights 
        ? window.getPanelAccessRights(data.panneaux || [], myClientData.id) 
        : { pendingInvites:[], visiblePanels:[] };
        
    const activePanneauxCount = visiblePanels.filter(c => c.status === 'Actif').length;
    const draftPanneauxCount = visiblePanels.filter(c => c.status === 'Brouillon').length;

    const isSuspended = myClientData.paymentStatus === 'suspended';
    const purchasesAllowed = data.settings?.allow_new_purchases !== '0';
    
    // FACTORISATION : Décompte des messages
    const totalUnread = window.computeClientUnread 
        ? window.computeClientUnread(data.interactions || [], myClientData, visiblePanels, pendingInvites) 
        : 0;

    const respondToInvite = async (panneauId, action) => {
        const d = await window.apiFetch('panneaux/collaborators/respond', {
            body: { panneau_id: panneauId, action },
            setLoading: setIsSaving,
            successMessage: "Invitation " + (action === 'accept' ? 'acceptée' : 'refusée') + " avec succès."
        });
        if (d) refreshData();
    };

    return (
        <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex flex-col md:flex-row justify-between gap-4 items-start md:items-center">
                <div>
                    {/* Fallback propre : full_name en priorité, sinon name (société), sinon 'Client' */}
                    <h1 className="text-3xl font-black text-slate-800">Bienvenue, {myClientData.full_name || myClientData.name || 'Client'}</h1>
                    <p className="text-slate-500 font-medium">Gérez vos obligations légales BTP en toute simplicité sur <a href="https://eco-panneau.fr" target="_blank" rel="noopener noreferrer" className="text-emerald-600 hover:underline font-bold">eco-panneau.fr</a>.</p>
                </div>
                {!isSuspended && purchasesAllowed && (
                    <Button variant="primary" icon={PlusIcon} className="uppercase tracking-widest px-6 py-3 rounded-xl" onClick={() => { 
                        setManagingPanneau({ name: '', location: '', permitNumber: '', status: 'Brouillon', offerType: 'rental', currentRate: data.prices?.rentalMo ?? 180, physicalPanels: 0, hasNoAds: false, privateDocs: [], shippingAddress: '', client_uid: myClientData.id }); 
                        setValidationErrors([]); 
                        setModalStep('config_full'); 
                        setIsModalOpen(true); 
                    }}>
                        Nouveau panneau
                    </Button>
                )}
            </div>

            {/* Alertes système */}
            {(!purchasesAllowed) && (
                <div className="bg-blue-50 text-blue-800 p-4 rounded-2xl border border-blue-200 shadow-sm flex items-center gap-3">
                    <AlertTriangleIcon size={24} className="shrink-0" />
                    <p className="text-sm font-bold">La création de nouvelles commandes est temporairement suspendue.</p>
                </div>
            )}
            {isSuspended && (
                <div className="bg-red-50 border-2 border-red-200 p-6 rounded-2xl flex items-start gap-4">
                    <AlertTriangleIcon size={32} className="text-red-600 shrink-0"/>
                    <div>
                        <h3 className="font-black text-red-800 text-lg">Facture impayée - compte suspendu</h3>
                        <p className="text-red-700 text-sm mt-1">L'édition de vos panneaux est temporairement bloquée. Veuillez régulariser votre situation dans l'onglet Factures.</p>
                        <Button variant="dangerSolid" className="mt-3 px-4 py-2 rounded-xl" onClick={() => setActiveTab('billing')}>
                            Régulariser maintenant
                        </Button>
                    </div>
                </div>
            )}

            {/* Invitations en attente */}
            {pendingInvites.length > 0 && (
                <div className="mb-8 space-y-4 animate-in slide-in-from-top-4">
                    <h2 className="text-xl font-black text-slate-800 flex items-center gap-2">
                        <UsersIcon size={20} className="text-blue-600" />
                        Invitations en attente
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {pendingInvites.map(p => {
                            const collab = p.collaborators?.find(c => c.uid === myClientData.id);
                            return (
                                <div key={p.id} className="bg-white p-5 rounded-2xl shadow-sm border border-blue-200 flex flex-col gap-3">
                                    <div className="flex items-start gap-3">
                                        <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 bg-blue-100 text-blue-600">
                                            <UsersIcon size={20} />
                                        </div>
                                        <div className="flex-1">
                                            <h3 className="font-black text-blue-900 leading-tight truncate">{p.name}</h3>
                                            <p className="text-xs text-slate-600 mt-1">
                                                Invitation de <strong className="font-bold text-slate-800">{collab?.inviter_name || 'le propriétaire'}</strong> ({collab?.inviter_company || 'Société'})
                                            </p>
                                        </div>
                                    </div>
                                    <div className="flex flex-wrap gap-2 mt-2">
                                        <Button variant="secondary" icon={EyeIcon} onClick={() => setPreviewPanneau(p)} className="flex-1 py-2 rounded-xl">Aperçu</Button>
                                        <Button variant="danger" icon={XIcon} onClick={() => respondToInvite(p.id, 'reject')} disabled={isSaving} className="flex-1 py-2 rounded-xl">Refuser</Button>
                                        <Button variant="primary" icon={CheckCircleIcon} onClick={() => respondToInvite(p.id, 'accept')} disabled={isSaving} className="flex-1 py-2 rounded-xl">Accepter</Button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {StatCard && (
                    <>
                        <StatCard title="Panneaux actifs" value={activePanneauxCount} icon={<ShieldCheckIcon size={24}/>} color="text-emerald-600" bg="bg-emerald-100" onClick={() => setActiveTab('panels')} />
                        <StatCard title="Brouillons" value={draftPanneauxCount} icon={<EditIcon size={24}/>} color="text-slate-600" bg="bg-slate-200" onClick={() => setActiveTab('panels')} />
                        <StatCard title="Scans riverains" value={data.stats?.totalViews || 0} icon={<UserCircleIcon size={24}/>} color="text-blue-600" bg="bg-blue-100" />
                        <StatCard title="Messages" value={totalUnread} icon={<MessageSquareIcon size={24}/>} color="text-amber-600" bg="bg-amber-100" onClick={() => setActiveTab('messages')} />
                    </>
                )}
            </div>

            {data.stats?.history && data.stats.history.length > 0 && SimpleBarChart && (
                <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm mt-6">
                    <h3 className="font-black text-slate-800 mb-6 flex items-center gap-2">
                        <ActivityIcon size={18} className="text-emerald-600"/> 
                        Activité des riverains (30 derniers jours)
                    </h3>
                    <SimpleBarChart data={data.stats.history} />
                </div>
            )}
        </div>
    );
};

// =========================================================================
// 2. ONGLET : MESSAGERIE ET COMMUNICATIONS (DRY)
// =========================================================================

window.ClientMessagesTab = ({ data, myClientData, refreshData }) => {
    const { useState } = React;
    const [mobileChatView, setMobileChatView] = useState(false);

    const ChatBox = window.ChatBox || (() => null);
    const ChatLayout = window.ChatLayout || (({children}) => <div>{children}</div>);

    const { pendingInvites, visiblePanels } = window.getPanelAccessRights 
        ? window.getPanelAccessRights(data.panneaux || [], myClientData.id) 
        : { pendingInvites:[], visiblePanels:[] };
        
    const threads = window.buildClientChatThreads 
        ? window.buildClientChatThreads(data.interactions || [], myClientData, visiblePanels, pendingInvites) 
        : [];

    const requestedChatId = new URLSearchParams(window.location.search).get('chat_id');
    const selectedThreadId = requestedChatId || (threads[0]?.id);
    
    const setChatId = (id) => {
        const u = new URL(window.location);
        u.searchParams.set('chat_id', id);
        window.history.replaceState({}, '', u);
        setMobileChatView(true);
        refreshData();
    };

    const handleBack = () => {
        setMobileChatView(false);
        const u = new URL(window.location);
        u.searchParams.delete('chat_id');
        window.history.replaceState({}, '', u);
    };

    const selectedThread = threads.find(t => t.id === selectedThreadId);

    const handleSendClient = async (text) => {
        if (!selectedThread) return;
        
        const isGroup = selectedThread.type === 'group';
        const targetMail = isGroup ? 'Groupe' : selectedThread.targetEmail;

        const optimisticMsg = {
            id: 'temp_' + Date.now(),
            panneauId: selectedThread.type === 'support' || selectedThread.type === 'group' ? selectedThread.id : selectedThread.panneauId,
            author: myClientData.full_name || myClientData.name || 'Client', 
            target: targetMail,
            detail: text,
            isAlert: 0,
            resolved: 0,
            created_at: new Date().toISOString(),
            authorType: 'Client'
        };
        
        window.dispatchEvent(new CustomEvent('optimistic_message', { detail: optimisticMsg }));

        const payload = {
            panneauId: selectedThread.type === 'support' || selectedThread.type === 'group' ? selectedThread.id : selectedThread.panneauId,
            detail: text,
            author: 'Client',
            targetEmail: targetMail,
            type: isGroup ? 'group' : 'message'
        };

        await window.apiFetch('interactions', { body: payload });
    };

    const forceChatMobile = mobileChatView || !!requestedChatId || threads.length === 1;

    const getThreadTitleClass = (type) => {
        if (type === 'support') return 'font-black text-emerald-700';
        if (type === 'group') return 'font-black text-blue-700';
        return 'font-bold text-slate-800';
    };

    const rightHeaderExtras = selectedThread?.type === 'group' && selectedThread?.panneauData ? (
        <div className="mt-2 text-xs text-slate-500 flex flex-wrap gap-2">
            <span className="bg-slate-100 px-2 py-0.5 rounded-md font-bold border border-slate-200 text-slate-700 shadow-sm">
                {selectedThread.panneauData.owner_full_name || selectedThread.panneauData.owner_company || 'Propriétaire'} ({selectedThread.panneauData.owner_company}) - Propriétaire
            </span>
            {selectedThread.panneauData.collaborators?.filter(c => c.status === 'accepted').map((c, i) => (
                <span key={i} className="bg-white px-2 py-0.5 rounded-md border border-slate-200 shadow-sm">
                    {c.name || c.company} ({c.company})
                </span>
            ))}
        </div>
    ) : null;

    return (
        <ChatLayout
            threads={threads}
            selectedThread={selectedThread}
            onSelectThread={setChatId}
            onBack={handleBack}
            forceChatMobile={forceChatMobile}
            leftTitle="Conversations"
            getThreadTitleClass={getThreadTitleClass}
            rightHeaderExtras={rightHeaderExtras}
        >
            {selectedThread && ChatBox && (
                <ChatBox 
                    messages={selectedThread.messages} 
                    currentUserRole="client" 
                    panneauId={selectedThread.type === 'support' || selectedThread.type === 'group' ? selectedThread.id : selectedThread.panneauId} 
                    refreshData={refreshData} 
                    onSend={handleSendClient}
                    clientName={myClientData.full_name ? `${myClientData.full_name} (${myClientData.name})` : myClientData.name}
                />
            )}
        </ChatLayout>
    );
};

// =========================================================================
// 3. ONGLET : FACTURES ET AVOIRS
// =========================================================================

window.ClientInvoicesTab = ({ data, myClientData, setPromptDialog, refreshData, setActiveTab }) => {
    const { useState } = React;
    const [isSaving, setIsSaving] = useState(false);

    const DownloadIcon = window.DownloadIcon || (() => null);
    const ZapIcon = window.ZapIcon || (() => null);
    const FileTextIcon = window.FileTextIcon || (() => null);
    const AlertTriangleIcon = window.AlertTriangleIcon || (() => null);
    
    // Fallback robuste avec restauration de la soumission native
    const Button = window.Button || (({children, onClick, className, disabled, title, icon: Icon, type}) => {
        const handleAction = (e) => {
            if (disabled) return;
            if (onClick) onClick(e);
            if (type === 'submit') {
                const form = e.currentTarget.closest('form');
                if (form && typeof form.requestSubmit === 'function') form.requestSubmit();
            }
        };
        return (
            <div 
                role="button" 
                tabIndex={disabled ? -1 : 0} 
                onClick={handleAction} 
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleAction(e); } }}
                className={`flex items-center justify-center gap-2 cursor-pointer transition ${className || ''} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} 
                title={title}
            >
                {Icon && <Icon size={16} className="shrink-0" />}
                {children}
                {type === 'submit' && <input type="submit" className="hidden" disabled={disabled} tabIndex="-1" />}
            </div>
        );
    });

    const handleRefundRequest = (inv) => {
        if (!setPromptDialog) return;
        
        setPromptDialog({
            title: "Demande d'analyse ou signalement",
            type: "info",
            message: `Veuillez indiquer le motif de votre demande concernant la facture ${inv.invoiceNumber} d'un montant de ${inv.amount} €. Aucun remboursement n'est jamais accepté sauf après demande explicite et validation stricte par l'administrateur (ex: erreur de facturation prouvée). Un ticket sera ouvert auprès de notre service comptabilité.`,
            placeholder: "Motif de votre demande...",
            confirmText: "Envoyer la demande",
            onConfirm: async (reason) => {
                const payload = {
                    panneauId: `SUPPORT_${myClientData.id}`,
                    detail: `Demande d'analyse concernant la facture ${inv.invoiceNumber} (${inv.amount} €).\nMotif : ${reason}`,
                    author: 'Client',
                    targetEmail: 'Admin',
                    type: 'billing'
                };
                
                const d = await window.apiFetch('interactions', {
                    body: payload,
                    setLoading: setIsSaving,
                    successMessage: "Demande transmise au service comptabilité."
                });

                if (d) {
                    setActiveTab('messages');
                    if (refreshData) refreshData();
                }
            }
        });
    };

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-black text-slate-800">Factures</h1>
                    <p className="text-slate-500 font-medium">Historique comptable et paiements des achats sur <a href="https://eco-panneau.fr" className="text-emerald-600 hover:underline font-bold" target="_blank" rel="noopener noreferrer">eco-panneau.fr</a>.</p>
                </div>
                <Button variant="outline" icon={DownloadIcon} className="px-4 py-2 rounded-xl" onClick={() => window.location.href = window.getFileUrl ? window.getFileUrl('csv_export', 'invoices') : "?api=invoices/export_csv"}>
                    <span className="hidden sm:inline">Exporter en CSV</span>
                </Button>
            </div>

            {myClientData.wallet_balance > 0 && (
                <div className="bg-emerald-50 border border-emerald-200 p-5 rounded-3xl mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between shadow-sm gap-4">
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center shrink-0"><ZapIcon size={24}/></div>
                        <div>
                            <p className="text-sm font-bold text-emerald-900">Solde disponible (Avoir / Crédit)</p>
                            <p className="text-xs text-emerald-700 mt-1 font-medium">Ce montant sera automatiquement déduit de vos prochaines commandes ou de vos factures d'abonnement.</p>
                        </div>
                    </div>
                    <div className="text-3xl font-black text-emerald-600 shrink-0">
                        {myClientData.wallet_balance.toFixed(2)} €
                    </div>
                </div>
            )}
            
            <div className="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
                <div className="flex flex-col">
                    <div className="hidden md:flex items-center bg-slate-50 border-b border-slate-200 text-[10px] uppercase tracking-widest text-slate-500 font-bold shrink-0">
                        <div className="p-4 w-32 shrink-0">Date</div>
                        <div className="p-4 flex-1 min-w-0">Panneau</div>
                        <div className="p-4 flex-1 min-w-0">Détail</div>
                        <div className="p-4 w-32 shrink-0">Montant</div>
                        <div className="p-4 w-32 shrink-0 text-right">Actions</div>
                    </div>
                    
                    <div className="divide-y divide-slate-100">
                        {data.invoices?.map((inv, i) => (
                            <div key={i} className="flex flex-col md:flex-row md:items-center hover:bg-slate-50 transition w-full p-4 md:p-0 gap-2 md:gap-0">
                                <div className="md:p-4 text-sm font-bold text-slate-700 md:w-32 shrink-0 flex items-center justify-between md:block">
                                    <span className="md:hidden text-[10px] uppercase tracking-widest text-slate-400 font-bold">Date</span>
                                    <span>{window.formatDate ? window.formatDate(inv.created_at) : new Date(String(inv.created_at || '').replace(' ', 'T')).toLocaleDateString('fr-FR')}</span>
                                </div>
                                <div className="md:p-4 text-sm text-slate-600 truncate flex-1 min-w-0 flex items-center justify-between md:block" title={inv.panneauName}>
                                    <span className="md:hidden text-[10px] uppercase tracking-widest text-slate-400 font-bold mr-2 shrink-0">Panneau</span>
                                    <span className="truncate text-right md:text-left">{inv.panneauName}</span>
                                </div>
                                <div className="md:p-4 text-sm text-slate-600 flex-1 min-w-0 flex items-center justify-between md:block">
                                    <span className="md:hidden text-[10px] uppercase tracking-widest text-slate-400 font-bold mr-2 shrink-0">Détail</span>
                                    <span className="truncate text-right md:text-left">{inv.type}</span>
                                </div>
                                <div className="md:p-4 text-sm font-black text-slate-800 md:w-32 shrink-0 flex items-center justify-between md:block">
                                    <span className="md:hidden text-[10px] uppercase tracking-widest text-slate-400 font-bold">Montant</span>
                                    <span>{inv.amount} €</span>
                                </div>
                                <div className="md:p-4 text-right md:w-32 shrink-0 flex justify-end gap-2 mt-2 md:mt-0 pt-3 md:pt-0 border-t border-slate-100 md:border-0">
                                    <Button variant="info" icon={AlertTriangleIcon} onClick={() => handleRefundRequest(inv)} disabled={isSaving} title="Demande d'analyse ou signalement" className="p-2 rounded-xl" />
                                    <Button variant="secondary" icon={DownloadIcon} onClick={() => window.location.href = window.getFileUrl ? window.getFileUrl('invoice', inv.invoiceNumber) : `?api=invoices/download&ref=${inv.invoiceNumber}`} title="Télécharger la facture" className="p-2 rounded-xl" />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                {(!data.invoices || data.invoices.length === 0) && (
                    <div className="p-12 text-center text-slate-500 border-t border-slate-200">
                        <FileTextIcon size={48} className="mx-auto mb-4 opacity-50"/>
                        <p className="font-medium">Aucune facture pour le moment.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

/* EOF ========== [_www/_react/_clients_dashboard_messagerie.jsx] */