import { __, _n, sprintf } from '@wordpress/i18n';
import {
	Outlet,
	Link,
	useMatchRoute,
	useLocation,
	useNavigate,
} from '@tanstack/react-router';
import {
	Badge,
	Topbar,
	Sidebar,
	Accordion,
	HamburgerMenu,
	Button,
	Skeleton,
} from '@bsf/force-ui';
import { Info, Megaphone, ChartNoAxesColumnIncreasing } from 'lucide-react';
import '@Global/style.scss';
import withSuspense from '@AdminComponents/hoc/with-suspense';
import SidebarSkeleton from '../sidebar-skeleton';
import { cn } from '@Functions/utils';
import useWhatsNewRSS from '../../../../lib/useWhatsNewRSS';
import {
	renderToString,
	Suspense,
	lazy,
	useLayoutEffect,
	Fragment,
	useMemo,
	useEffect,
} from '@wordpress/element';
import GlobalSearch from '@AdminComponents/global-search';
import ConfirmationDialog from '@AdminComponents/confirmation-dialog';
import { useSuspenseSiteSeoAnalysis } from '@/apps/admin-dashboard/site-seo-checks/site-seo-checks-main';
import { getSeverityColor } from '@GlobalComponents/seo-checks';
import Logo from '@AdminComponents/logo';
import { Tooltip } from '@AdminComponents/tooltip';
import '@AdminStore/store';

const { version } = surerank_globals;

const TanStackRouterDevtools =
	process.env.NODE_ENV === 'production'
		? () => null // Render nothing in production
		: lazy( () =>
				// Lazy load in development
				import( '@tanstack/router-devtools' ).then( ( res ) => ( {
					default: res.TanStackRouterDevtools,
				} ) )
		  );

const NavLink = ( { path, children } ) => {
	const matchRoute = useMatchRoute();
	const isActive = matchRoute( { to: path } );

	return (
		<Link
			to={ path }
			className={ cn(
				'flex items-center justify-start gap-2.5 py-2 pl-2.5 pr-2 text-text-secondary [&_svg]:text-icon-secondary hover:bg-background-secondary rounded-md text-base font-normal no-underline cursor-pointer focus:outline-none focus:shadow-none transition ease-in-out duration-150 [&_svg]:size-5',
				isActive &&
					'bg-background-secondary text-text-primary [&_svg]:text-brand-800'
			) }
			role="menuitem"
			tabIndex={ 0 }
		>
			{ children }
		</Link>
	);
};

const SiteSeoAnalysisBadge = () => {
	const [ { report } ] = useSuspenseSiteSeoAnalysis();

	// Check counts of error, warning and success
	const counts = useMemo(
		() =>
			Object.values( report ).reduce(
				( acc, curr ) => {
					//if ignore is true, then it is ignored
					if ( curr.ignore ) {
						acc.ignored++;
					} else {
						acc[ curr.status ]++;
					}
					return acc;
				},
				{ error: 0, warning: 0, success: 0, ignored: 0 }
			),
		[ report ]
	);

	const selectedType =
		( counts.error && 'error' ) ||
		( counts.warning && 'warning' ) ||
		'success';

	const getLabel = ( type ) => {
		if ( type === 'error' ) {
			return sprintf(
				// translators: %1$s is the number of issues detected, %2$s is the word "Issue".
				'%1$s %2$s Detected',
				counts.error,
				_n( 'Issue', 'Issues', counts.error, 'surerank' )
			);
		}
		if ( type === 'warning' ) {
			return __( 'Needs Improvement', 'surerank' );
		}
		return __( 'SEO is Optimized', 'surerank' );
	};

	const isDashboard = () => {
		const url = new URL( window.location.href );
		const page = url.searchParams.get( 'page' );
		return page === 'surerank';
	};

	// Add/update the badge in the WP sidebar.
	useEffect( () => {
		// WP sidebar element.
		const sidebarMenu = document.querySelector(
			'#toplevel_page_surerank > a > div.wp-menu-name'
		);
		if ( ! sidebarMenu ) {
			return;
		}

		// Check if the badge is already added.
		const notificationBadge = sidebarMenu.querySelector( '.awaiting-mod' );
		if ( notificationBadge ) {
			notificationBadge.className =
				counts.error > 0 ? 'awaiting-mod' : '';
			notificationBadge.textContent =
				counts.error > 0 ? counts.error : '';
			return;
		}

		// Add space after the menu name if not already present.
		if ( ! sidebarMenu.textContent.endsWith( ' ' ) ) {
			sidebarMenu.textContent += ' ';
		}

		// Create and add the badge.
		const badge = document.createElement( 'span' );
		badge.className = counts.error > 0 ? 'awaiting-mod' : '';
		badge.textContent = counts.error > 0 ? counts.error : '';
		sidebarMenu.appendChild( badge );
	}, [ counts ] );

	return (
		<Link
			className="no-underline hover:no-underline focus:no-underline focus:[box-shadow:none]"
			to={
				isDashboard()
					? '/site-seo-analysis'
					: `${ surerank_globals.wp_dashboard_url }?page=surerank#/site-seo-analysis`
			}
		>
			<Badge
				icon={ <ChartNoAxesColumnIncreasing /> }
				label={ getLabel( selectedType ) }
				variant={ getSeverityColor( selectedType ) }
			/>
		</Link>
	);
};

const SubmenuAccordion = ( { label, icon: Icon, submenu } ) => {
	const navigate = useNavigate();

	return (
		<Accordion defaultValue="item1" iconType="arrow" type="simple">
			<Accordion.Item value="item1">
				<Accordion.Trigger
					iconType="arrow"
					collapsible={ false }
					className="p-2 pl-2.5 text-base font-normal [&_svg]:text-icon-secondary hover:bg-background-primary rounded-md no-underline cursor-pointer focus:outline-none focus:shadow-none transition ease-in-out duration-150 [&_svg]:size-5 [&_div]:font-normal [&_div]:text-text-primary"
					aria-label={ `${ label } submenu` }
					onClick={ ( event ) => {
						event.preventDefault();
						event.stopPropagation();

						if ( submenu?.length <= 0 || ! submenu[ 0 ]?.path ) {
							return;
						}

						// Redirect to the first item in the submenu.
						navigate( {
							to: submenu[ 0 ].path,
						} );
					} }
				>
					{ Icon && <Icon className="size-4" /> }
					{ label }
				</Accordion.Trigger>
				<Accordion.Content className="p-2 [&>div]:pb-0">
					<div
						className="border-l border-solid border-r-0 border-t-0 border-b-0 border-border-subtle pl-2 ml-1 space-y-0.5"
						role="menu"
					>
						{ submenu.map(
							( { path, label: subLabel, icon: SubIcon } ) => (
								<NavLink key={ path } path={ path }>
									{ SubIcon && (
										<SubIcon className="size-4" />
									) }
									{ subLabel }
								</NavLink>
							)
						) }
					</div>
				</Accordion.Content>
			</Accordion.Item>
		</Accordion>
	);
};

const SidebarSection = ( { section, links } ) => {
	if ( ! links?.length ) {
		return null;
	}

	return (
		<Sidebar.Item
			key={ section }
			arrow
			heading={ section }
			open={ true }
			className="space-y-0.5"
		>
			{ links.map( ( { path, label, icon: Icon, submenu } ) =>
				submenu ? (
					<SubmenuAccordion
						key={ path || label }
						label={ label }
						icon={ Icon }
						submenu={ submenu }
					/>
				) : (
					<NavLink key={ path } path={ path }>
						{ Icon && <Icon className="size-4" /> }
						{ label }
					</NavLink>
				)
			) }
		</Sidebar.Item>
	);
};

const SidebarNavigation = ( { navLinks = [] } ) => {
	return (
		<div className="h-full w-full">
			<Sidebar borderOn className="!h-full w-full p-4">
				<Sidebar.Body>
					<Sidebar.Item
						role="navigation"
						aria-label="Main Navigation"
					>
						{ navLinks.map(
							( { section, links, path } ) =>
								! path &&
								links?.length > 0 && (
									<SidebarSection
										key={ section }
										section={ section }
										links={ links }
									/>
								)
						) }
					</Sidebar.Item>
				</Sidebar.Body>
			</Sidebar>
		</div>
	);
};

const SuspenseNavbar = withSuspense( SidebarNavigation, SidebarSkeleton );

const useNavbarLinks = ( navLinks ) => {
	const matchRoute = useMatchRoute();

	const activeSection = navLinks.find( ( { links = [] } ) =>
		links.some( ( { path, submenu = null } ) => {
			if ( submenu ) {
				return submenu.some( ( { path: subPath } ) =>
					matchRoute( { to: subPath } )
				);
			}
			return matchRoute( { to: path } );
		} )
	);

	const reConstructedNavLinks = navLinks.reduce( ( acc, curr ) => {
		acc.push( {
			label: curr.section,
			path: curr.links[ 0 ].path,
			active: curr.sectionId === activeSection?.sectionId,
		} );
		return acc;
	}, [] );

	return {
		activeSection,
		navbarLinks: reConstructedNavLinks,
	};
};

/**
 * Check if the current route should show navbar only
 * @param {Array} routes - All routes configuration
 * @return {boolean} Whether to show navbar only
 */
const useIsNavbarOnly = ( routes ) => {
	const location = useLocation();
	const currentPath = location.pathname;

	// Function to recursively search for route configuration
	const findRouteConfig = ( routesList, path ) => {
		for ( const route of routesList ) {
			// Check if this route matches the current path
			if ( route.path === path ) {
				return route;
			}

			// Check child routes recursively
			if ( route.children ) {
				const childResult = findRouteConfig( route.children, path );
				if ( childResult ) {
					return childResult;
				}
			}
		}
		return null;
	};

	const currentRoute = findRouteConfig( routes, currentPath );
	return currentRoute?.navbarOnly || false;
};

const SidebarLayout = ( {
	navLinks = [],
	routes = [],
	navbarOnly = false,
} ) => {
	const { activeSection, navbarLinks: topNavbarLinks } =
		useNavbarLinks( navLinks );
	const location = useLocation();
	// Check if current route should show navbar only
	const isNavbarOnly = useIsNavbarOnly( routes ) || navbarOnly;

	// Use only the links of the active section
	const filteredNavLinks = activeSection ? [ activeSection ] : [];

	useWhatsNewRSS( {
		uniqueKey: 'surerank',
		rssFeedURL: 'https://surerank.com/whats-new/feed/', // TODO: domain name change to surerank.
		selector: '#surerank_whats_new',
		flyout: {
			title: __( "What's New?", 'surerank' ),
		},
		triggerButton: {
			icon: renderToString(
				<Megaphone
					className="size-4 m-1 text-icon-primary"
					strokeWidth={ 1.5 }
				/>
			),
		},
	} );

	// Manipulate the WP sidebar menu to make active menu item.
	useLayoutEffect( () => {
		const sidebarMenu = document.getElementById( 'toplevel_page_surerank' );
		if ( ! sidebarMenu ) {
			return;
		}

		const menuItems = sidebarMenu.querySelectorAll( 'a' );
		const currentPath = location.pathname.split( '/' )[ 1 ];

		// Remove current class from the currently active item
		const currentActiveItem = sidebarMenu.querySelector( '.current' );
		if ( currentActiveItem ) {
			currentActiveItem.classList.remove( 'current' );
		}
		Array.from( menuItems ).forEach( ( item ) => {
			const itemPath = item.href.split( '#' )[ 1 ]?.split( '/' )[ 1 ];

			if ( currentPath === 'dashboard' ) {
				// If path is 'dashboard', add current to the item with no path (undefined)
				if ( itemPath === undefined ) {
					item.parentElement.classList.add( 'current' );
				}
			}
			// Otherwise, add current to the matching path item
			if ( currentPath !== 'dashboard' && itemPath === currentPath ) {
				item.parentElement.classList.add( 'current' );
			}
		} );

		return () => {
			Array.from( menuItems ).forEach( ( item ) => {
				item.parentElement.classList.remove( 'current' );
			} );
		};
	}, [ location.pathname ] );

	return (
		<Fragment>
			<div className="grid max-[782px]:grid-rows-[64px_calc(100dvh_-_110px)] grid-rows-[64px_calc(100dvh_-_96px)] min-h-full bg-background-secondary">
				{ /* Header */ }
				<Topbar
					className="w-auto min-h-[unset] h-16 shadow-sm p-0 relative z-[99]"
					gap={ 0 }
				>
					<Topbar.Left className="p-5">
						<Topbar.Item className="flex md:hidden">
							<HamburgerMenu className="lg:hidden">
								<HamburgerMenu.Toggle className="size-6" />
								<HamburgerMenu.Options>
									{ topNavbarLinks.map( ( option ) => (
										<HamburgerMenu.Option
											key={ option.label }
											to={ option.path }
											tag={ Link }
											active={ option.active }
										>
											{ option.label }
										</HamburgerMenu.Option>
									) ) }
								</HamburgerMenu.Options>
							</HamburgerMenu>
						</Topbar.Item>
						<Topbar.Item>
							<Logo />
						</Topbar.Item>
					</Topbar.Left>
					<Topbar.Middle align="left" className="h-full">
						<Topbar.Item className="h-full gap-4 hidden md:flex">
							{ topNavbarLinks.map(
								( { path, label, active } ) => (
									<Link
										key={ path }
										to={ path }
										className={ cn(
											'relative content-center no-underline h-full py-0 px-3 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-secondary text-sm font-medium cursor-pointer',
											active && 'text-text-primary'
										) }
									>
										{ label }
										{ active && (
											<span className="absolute bottom-0 left-0 w-full h-px bg-brand-800" />
										) }
									</Link>
								)
							) }
						</Topbar.Item>
					</Topbar.Middle>
					<Topbar.Right className="p-5">
						<Topbar.Item>
							<GlobalSearch navLinks={ navLinks } />
						</Topbar.Item>
						<Topbar.Item>
							<Badge
								label={ `V ${ version }` }
								size="xs"
								variant="neutral"
							/>
						</Topbar.Item>
						<Topbar.Item>
							<Suspense
								fallback={ <Skeleton className="w-36 h-6" /> }
							>
								<SiteSeoAnalysisBadge />
							</Suspense>
						</Topbar.Item>
						<Topbar.Item>
							<Tooltip
								content={ __( 'Knowledge Base', 'surerank' ) }
								placement="bottom"
								arrow
								className="z-[99999]"
							>
								<Button
									size="sm"
									tag="a"
									variant="link"
									className="text-text-primary focus:[box-shadow:none]"
									href={ surerank_globals?.help_link ?? '#' }
									target="_blank"
									rel="noreferrer noopener"
									aria-label={ __(
										'Knowledge Base',
										'surerank'
									) }
									icon={
										<Info
											className="size-4 m-1"
											strokeWidth="1.5"
										/>
									}
								/>
							</Tooltip>
						</Topbar.Item>
						<Topbar.Item>
							<div
								id="surerank_whats_new"
								className="[&>a]:p-0.5 [&>a]:pl-0"
							></div>
						</Topbar.Item>
					</Topbar.Right>
				</Topbar>
				{
					// Sidebar Navigation
					! isNavbarOnly && (
						<div className="w-full h-full grid grid-cols-[290px_1fr]">
							{ ! isNavbarOnly && (
								<SuspenseNavbar navLinks={ filteredNavLinks } />
							) }

							{ /* Main content */ }
							<div className="bg-background-secondary p-5">
								<main className="max-w-[768px] mx-auto">
									<Outlet />
								</main>
							</div>
						</div>
					)
				}
				{
					// Without sidebar navigation
					isNavbarOnly && (
						<div className="w-full h-fit bg-background-secondary">
							<main className="w-full h-full mx-auto relative">
								<Outlet />
							</main>
						</div>
					)
				}
				{ /* TanStack Router Devtools */ }
				{ process.env.NODE_ENV !== 'production' && (
					<Suspense>
						<TanStackRouterDevtools />
					</Suspense>
				) }
			</div>
			<ConfirmationDialog />
		</Fragment>
	);
};

export default SidebarLayout;
