import '@/styles/globals.css';
import '@/assets/css/inicio.css';
import '@/assets/css/menu.css';
import '@/assets/css/acta.css';
import '@/assets/css/login.css';
import '@/assets/css/footer.css';
import '@/assets/css/nosotros.css';
import '@/styles/material-icons.css';

// Material Icons
import '@/styles/material-icons.css';
import '@/assets/css/Dashboard/MenuApp.css';
import '@/assets/css/Dashboard/Home.css';
import '@/assets/css/Dashboard/Importar.css';
import '@/assets/css/Dashboard/dropdown.css';
import '@/assets/css/Dashboard/Cards.css';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import dynamic from 'next/dynamic';
import React, { useEffect, useState, useMemo } from 'react';
import { useRouter } from 'next/router';
import CookieBanner from '@/components/CookieBanner';
import CookieFloatingButton from '@/components/CookieFloatingButton';
import useAnalytics from '@/hooks/useAnalytics';
import SEOHead from '@/components/SEO/SEOHead';
import { getPageSEO } from '@/config/seoConfig';
import { SpeedInsights } from "@vercel/speed-insights/next"
import { Analytics } from "@vercel/analytics/next"
import AnalyticsProvider from '@/components/AnalyticsProvider';
import GoBotWidget from '@/components/GoBotWidget';

const ClientSideRouter = dynamic(
    () => import('@/hooks/ClientSideRouter'),
    { ssr: false }
);


function MyApp({ Component, pageProps }) {
    const router = useRouter();
    const [darkMode, setDarkMode] = useState(false);
    const [isLoadingRoute, setIsLoadingRoute] = useState(false)

    useAnalytics();

    // Efecto para cargar el estado inicial del modo oscuro desde localStorage
    useEffect(() => {
        const savedDarkMode = localStorage.getItem('darkMode') === 'true';
        // Aplicar la clase dark al documento
        if (savedDarkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        // Usar setTimeout para evitar el llamado directo a setState
        setTimeout(() => {
            setDarkMode(savedDarkMode);
        }, 0);
    }, []);

    // Función para toggle del modo oscuro
    const toggleDarkMode = () => {
        const newDarkMode = !darkMode;
        setDarkMode(newDarkMode);
        localStorage.setItem('darkMode', newDarkMode.toString());
        if (newDarkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    };

    useEffect(() => {
        const handleStart = () => setIsLoadingRoute(true);
        const handleComplete = () => setIsLoadingRoute(false);

        router.events.on('routeChangeStart', handleStart);
        router.events.on('routeChangeComplete', handleComplete);
        router.events.on('routeChangeError', handleComplete);

        return () => {
            router.events.off('routeChangeStart', handleStart);
            router.events.off('routeChangeComplete', handleComplete);
            router.events.off('routeChangeError', handleComplete);
        };
    }, [router]);



    // Memoizar la configuración SEO
    const pageSEO = useMemo(() => {
        return getPageSEO(router.pathname);
    }, [router.pathname]);

    return (
        <AnalyticsProvider>
            <SEOHead
                title={pageSEO.title}
                description={pageSEO.description}
                keywords={pageSEO.keywords}
                image={pageSEO.image}
                noindex={pageSEO.noindex}
                structuredData={pageSEO.structuredData}
            />

            <ClientSideRouter>
                <Component
                    {...pageProps}
                    darkMode={darkMode}
                    onToggleDarkMode={toggleDarkMode}
                />
                <GoBotWidget />
                <CookieBanner />
                <CookieFloatingButton />
            </ClientSideRouter>
            <SpeedInsights />
            <Analytics />
        </AnalyticsProvider>
    );
}

export default MyApp;