'use client'; import { useAuth } from '@/lib/auth'; import { usePathname, useRouter } from 'next/navigation'; import React, { useEffect, useState } from 'react'; import { Sidebar } from './Sidebar'; import Chatbot from './Chatbot'; import { Loader2, AlertTriangle, RefreshCw, Menu, Newspaper } from 'lucide-react'; import { supabase } from '@/lib/supabase'; export function AppShell({ children }: { children: React.ReactNode }) { const { user, profile, loading } = useAuth(); const pathname = usePathname(); const router = useRouter(); const [loadingTimeout, setLoadingTimeout] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [minLoadingDone, setMinLoadingDone] = useState(false); const [isSystemPaused, setIsSystemPaused] = useState(false); const isLoginPage = pathname === '/login'; const isDebugPage = pathname === '/debug-supabase'; const isPublicPage = isLoginPage || isDebugPage; // Check pause status useEffect(() => { if (!user || isPublicPage) return; const checkPauseStatus = async () => { try { // Determine source table based on role const isClientRole = profile?.role === 'client' && profile?.client_id; if (isClientRole) { const { data } = await supabase.from('client_settings').select('is_paused').eq('client_id', profile.client_id).maybeSingle(); if (data) setIsSystemPaused(!!data.is_paused); } else { // Fallback for admin or special cases const { data } = await supabase.from('settings').select('is_paused').eq('id', 1).maybeSingle(); if (data) setIsSystemPaused(!!data.is_paused); } } catch (e) { console.warn("Failed to fetch pause status:", e); } }; checkPauseStatus(); const interval = setInterval(checkPauseStatus, 30000); // Check every 30s return () => clearInterval(interval); }, [user, profile, isPublicPage]); // Minimum loading duration (3 seconds) to ensure a smooth transition useEffect(() => { const timer = setTimeout(() => { setMinLoadingDone(true); }, 3000); return () => clearTimeout(timer); }, []); // Fermer la sidebar mobile quand on change de page useEffect(() => { setSidebarOpen(false); }, [pathname]); // Persistance de l'état réduit de la sidebar useEffect(() => { const syncState = () => { const saved = localStorage.getItem('sidebar-collapsed') === 'true'; setIsSidebarCollapsed(saved); }; syncState(); if (localStorage.getItem('sidebar-collapsed') === 'true') { document.documentElement.classList.add('sidebar-collapsed'); } else { document.documentElement.classList.remove('sidebar-collapsed'); } window.addEventListener('sidebar-toggled', syncState); return () => window.removeEventListener('sidebar-toggled', syncState); }, [pathname]); // Refresh on pathname change ensures consistency const toggleSidebar = () => { const newValue = !isSidebarCollapsed; setIsSidebarCollapsed(newValue); localStorage.setItem('sidebar-collapsed', String(newValue)); if (newValue) { document.documentElement.classList.add('sidebar-collapsed'); } else { document.documentElement.classList.remove('sidebar-collapsed'); } }; // Timeout fallback: si loading dure plus de 15 secondes, on affiche une erreur useEffect(() => { if (loading) { const timer = setTimeout(() => { setLoadingTimeout(true); }, 15000); return () => clearTimeout(timer); } else { setLoadingTimeout(false); } }, [loading]); useEffect(() => { if (!loading && !user && !isPublicPage) { router.push('/login'); } }, [user, loading, isPublicPage, router]); const [progress, setProgress] = useState(0); const [statusText, setStatusText] = useState("Initialisation..."); const isReallyLoading = loading || !minLoadingDone; useEffect(() => { if (isReallyLoading) { const interval = setInterval(() => { setProgress((prev: number) => { if (prev >= 98) return 98; const inc = Math.random() * 10; const next = prev + inc; if (next > 20 && next < 50) setStatusText("Authentification sécurisée..."); if (next >= 50 && next < 80) setStatusText("Récupération de vos radars..."); if (next >= 80) setStatusText("Préparation de l'interface..."); return next > 98 ? 98 : next; }); }, 300); return () => clearInterval(interval); } else { setStatusText("Prêt !"); setProgress(100); } }, [isReallyLoading]); // Debug page - always accessible if (isDebugPage) { return <>{children}; } // Loading state with timeout fallback if (loading) { if (loadingTimeout) { return (

Connexion lente

La connexion à Supabase prend plus de temps que prévu. Cela peut être dû à un problème réseau.

Page de diagnostic Supabase
); } return (
{statusText} {Math.round(progress)}%

SaaS Veille v3

); } // Login page - no sidebar if (isLoginPage) { return <>{children}; } // Not authenticated - redirect will happen if (!user) { return null; } // Authenticated - show app with sidebar return (
{/* Sidebar (responsive) */} setSidebarOpen(false)} /> {/* Main content */}
{/* Desktop Sidebar Toggle (Burger) — Toujours visible car FIXED */}
{/* Mobile Header avec bouton hamburger */}
< Newspaper size={20} className="theme-accent" /> ARGOS VEILLE
{profile?.email?.charAt(0).toUpperCase() || 'U'}
{/* PAUSE BANNER */} {isSystemPaused && (

Mode Veille Activé : L'agent automatique est actuellement à l'arrêt

)} {/* Page content */}
{children}
{/* Chatbot - Disponible sur toutes les pages */}
); }