import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';
import React from 'react';
import LayoutHerramienta from '@/views/herramientas/LayoutHerramienta';
import { getHerramientaBySlug, getHerramientasActivas } from '@/data/herramientasData';
import CompMenuprincipal from '@/views/landing/menu';
import CompFooter from '@/views/landing/footer';

const componenteMap = {
    'acta-constitucion': dynamic(() => import('@/views/herramientas/componentes/acta_constitucion')),
    'liquidador-ganancia-ocasional': dynamic(() => import('@/views/herramientas/componentes/liquidador-ganancia-ocasional')),
    'liquidador-laboral': dynamic(() => import('@/views/herramientas/componentes/LiquidadorLaboral')),
};
export default function HerramientaDinamica({ darkMode, onToggleDarkMode, herramientaSlug, herramientaInfo }) {
    const router = useRouter();
    const ComponenteHerramienta = componenteMap[herramientaSlug];

    if (!router.isReady) {
        return <div>Cargando...</div>;
    }

    if (!herramientaInfo) {
        return <div>Herramienta no encontrada</div>;
    }

    if (!ComponenteHerramienta) {
        return <div>Herramienta no disponible</div>;
    }

    return (
        <>
            <CompMenuprincipal
                darkMode={darkMode}
                onToggleDarkMode={onToggleDarkMode}
            />
            <LayoutHerramienta herramienta={herramientaInfo} darkMode={darkMode}>
                <ComponenteHerramienta darkMode={darkMode} />
            </LayoutHerramienta>
            <CompFooter darkMode={darkMode} />
        </>
    );
}

export async function getStaticPaths() {
    const herramientasActivas = getHerramientasActivas();
    const paths = herramientasActivas.map(herramienta => ({
        params: {
            categoria: herramienta.categoria,
            herramienta: herramienta.slug
        }
    }));

    return {
        paths,
        fallback: 'blocking'
    };
}

export async function getStaticProps({ params }) {
    const herramientaInfo = getHerramientaBySlug(params.herramienta);

    if (!herramientaInfo || herramientaInfo.categoria !== params.categoria) {
        return {
            notFound: true
        };
    }

    const { componente, ...herramientaData } = herramientaInfo;

    return {
        props: {
            herramientaSlug: params.herramienta,
            herramientaInfo: herramientaData
        },
        revalidate: 3600
    };
}