import { PropsWithChildren, Suspense, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import App from '../../App';
import { IRootState } from '../../store';
import { toggleSidebar } from '../../store/themeConfigSlice';
import Footer from './Footer';
import Header from './Header';
import Sidebar from './Sidebar';
import { useLocation, useMatches } from "react-router-dom";
import { getRouteTitle } from "../../utils/getRouteTitle";
import { authApi } from '../../api/authApi';

const DefaultLayout = ({ children }: PropsWithChildren) => {
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const dispatch = useDispatch();
    const location = useLocation();

    const [showLoader, setShowLoader] = useState(false);
    const [showTopButton, setShowTopButton] = useState(false);
    const [user, setUser] = useState<any>(() => {
        const saved = localStorage.getItem('user');
        return saved ? JSON.parse(saved) : null;
    });
    const [profileLoading, setProfileLoading] = useState(!localStorage.getItem('user'));

    const fetchProfile = async () => {
        try {
            const res = await authApi.getProfile();
            if (res) {
                setUser(res);
                localStorage.setItem('user', JSON.stringify(res));
            }
        } catch (err) {
            console.error('Failed to fetch profile', err);
        } finally {
            setProfileLoading(false);
        }
    };

    const goToTop = () => {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    };
    const onScrollHandler = () => {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            setShowTopButton(true);
        } else {
            setShowTopButton(false);
        }
    };

    useEffect(() => {
        fetchProfile();
    }, []);

    useEffect(() => {
        window.addEventListener('scroll', onScrollHandler);

        const screenLoader = document.getElementsByClassName('screen_loader');
        if (screenLoader?.length) {
            screenLoader[0].classList.add('animate__fadeOut');
            setTimeout(() => {
                setShowLoader(false);
            }, 200);
        }

        return () => {
            window.removeEventListener('scroll', onScrollHandler);
        };
    }, []);

    const routeModuleMap: Record<string, string> = {
        '/dashboard': 'Dashboard',
        '/inventory': 'Inventory',
        '/manage_billing': 'Orders & Billing',
        '/manage_order': 'Orders & Billing',
        '/manage_shipment': 'Shipments',
        '/manage_customer': 'Customers',
        '/users_role': 'User Management',
        '/settings': 'Settings',
    };

    const currentModule = Object.keys(routeModuleMap).find(path => location.pathname.startsWith(path)) 
        ? routeModuleMap[Object.keys(routeModuleMap).find(path => location.pathname.startsWith(path))!] 
        : null;

    const hasAccess = !currentModule || !user || user.role === 'Super Admin' || user.email === 'admin@shas.com' || !!user.permissions?.[currentModule]?.View;

    return (
        <App>
            {/* BEGIN MAIN CONTAINER */}
            <div className="relative">
                {/* sidebar menu overlay */}
                <div className={`${(!themeConfig.sidebar && 'hidden') || ''} fixed inset-0 bg-[black]/60 z-50 lg:hidden`} onClick={() => dispatch(toggleSidebar())}></div>
                {/* screen loader */}
                {(showLoader || profileLoading) && (
                    <div className="fixed inset-0 bg-[#fafafa] dark:bg-[#060818] z-[60] grid place-content-center screen_loader">
                        <div className="relative w-20 h-20">
                            <div className="absolute inset-0 rounded-full border-4 border-dashed border-gray-200 border-t-[#8B3E1F] animate-spin"></div>
                        </div>
                    </div>
                )}

                <div className={`${themeConfig.navbar} main-container text-black dark:text-surface-dark min-h-screen`}>
                    {/* BEGIN SIDEBAR */}
                    <Sidebar user={user} />
                    {/* END SIDEBAR */}

                    <div className="main-content flex flex-col min-h-screen">
                        {/* BEGIN TOP NAVBAR */}
                        <Header user={user} onRefreshUser={fetchProfile} />
                        {/* END TOP NAVBAR */}

                        {/* BEGIN CONTENT AREA */}
                        <Suspense
                            fallback={
                                <div className="flex items-center justify-center min-h-[50vh]">
                                    <div className="w-8 h-8 rounded-full border-3 border-slate-200 border-t-[#8B3E1F] animate-spin" />
                                </div>
                            }
                        >
                            <div className={`${themeConfig.animation} p-6 animate__animated`}>
                                {user && !hasAccess ? (
                                    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center p-6 bg-[#FBF6ED] rounded-2xl border border-[#ECE2D2] shadow-sm">
                                        <div className="w-16 h-16 bg-[#7A2E1D]/10 text-[#7A2E1D] rounded-full flex items-center justify-center mb-4">
                                            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m0-6v2m0-6a9 9 0 110 18 9 9 0 010-18zm0 0h.01" />
                                            </svg>
                                        </div>
                                        <h3 className="text-xl font-bold text-[#3B2F28] mb-2">Access Denied</h3>
                                        <p className="text-sm text-[#9C8C7C] max-w-sm">You do not have permission to access the "{currentModule}" module. Please contact your administrator.</p>
                                    </div>
                                ) : (
                                    children
                                )}
                            </div>
                        </Suspense>
                        {/* END CONTENT AREA */}

                        {/* BEGIN FOOTER */}
                        <Footer />
                    </div>
                </div>
            </div>
        </App>
    );
};

export default DefaultLayout;