'use client';

import { useState, useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useDispatch, useSelector } from 'react-redux';
import TopBar from '../../components/nav/TopBar';
import SideBar from '@/components/SideBar';
import { sidebarNavItems } from '@/constant/sidebar-nav';
import {
	fetchAuthData,
	isAdminSelector,
	isAuthenticatedSelector,
	isLoadingSelector,
} from '@/store/authSlice';
import { AppDispatch } from '@/store/app';
import Preloader from '@/components/landing/Preloader';

export default function DashboardLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	const router = useRouter();
	const pathname = usePathname();
	const dispatch = useDispatch<AppDispatch>();
	const isAuthenticated = useSelector(isAuthenticatedSelector);
	const isAdmin = useSelector(isAdminSelector);
	const isLoading = useSelector(isLoadingSelector);
	const [sidebarOpen, setSidebarOpen] = useState(true);

	// Handle sidebar responsiveness
	useEffect(() => {
		const handleResize = () => setSidebarOpen(window.innerWidth >= 1024);
		handleResize();
		window.addEventListener('resize', handleResize);
		return () => window.removeEventListener('resize', handleResize);
	}, []);

	// Redirect logic & session fetch
	useEffect(() => {
		if (!isLoading && !isAuthenticated) {
			router.replace('/auth/login');
		} else if (isLoading) {
			dispatch(fetchAuthData());
		}
	}, [isAuthenticated, isLoading, router, dispatch]);

	// Filter navigation links based on admin role
	const filteredNavItems = sidebarNavItems.filter(
		(item) => !item.isAdminOnly || (item.isAdminOnly && isAdmin)
	);

	// Redirect if user is not admin and trying to access admin-only route
	useEffect(() => {
		if (!isLoading && isAuthenticated && !isAdmin && pathname) {
			const matchedItem = sidebarNavItems.find(
				(item) => item.href === pathname && item.isAdminOnly
			);
			if (matchedItem) {
				router.replace('/admin/dashboard');
			}
		}
	}, [isLoading, isAuthenticated, isAdmin, pathname, router]);

	if (isLoading || !isAuthenticated) {
		return <Preloader />;
	}

	return (
		<div className="h-screen flex flex-col bg-background text-foreground overflow-hidden">
			<TopBar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
			<div className="flex-1 flex overflow-hidden">
				<SideBar
					isOpen={sidebarOpen}
					onToggle={() => setSidebarOpen(!sidebarOpen)}
					navigation={filteredNavItems}
				/>
				<main className="flex-1 bg-background p-1 sm:p-6 transition-all overflow-hidden">
					<div className="mx-auto max-w-7xl scrollbar-hide h-full overflow-y-auto">
						{children}
					</div>
				</main>
			</div>
		</div>
	);
}