/**
 * Navigation Component
 *
 * Sidebar navigation menu with dynamic module routes
 *
 * @package Everyone_Accessibility_Suite
 */

import { NavLink } from 'react-router-dom';
import { __ } from '@wordpress/i18n';
import useAdminRoutes from '../hooks/use-admin-routes';

function Navigation() {
	const { i18n } = window.evasAdmin || {};

	// Subscribed rather than read from the global, so enabling a module on the
	// Components screen adds its entry without a page reload.
	const routes = useAdminRoutes();

	// Base menu items
	const baseMenuItems = [
		{
			path: '/dashboard',
			label: i18n?.dashboard || __( 'Dashboard', 'everyone-accessibility-suite' ),
			icon: 'dashicons-dashboard',
			description: __( 'Overview and statistics', 'everyone-accessibility-suite' ),
		},
		{
			path: '/accessibility',
			label: i18n?.accessibility || __( 'Accessibility Panel', 'everyone-accessibility-suite' ),
			icon: 'dashicons-universal-access',
			description: __( 'Panel settings and features', 'everyone-accessibility-suite' ),
		},
	];

	// Module settings menu items from registered routes
	const moduleMenuItems = routes.map((route) => ({
		path: route.path,
		label: route.menu_title || route.title,
		icon: route.icon || 'dashicons-admin-generic',
		description: route.description || '',
		module: route.module,
	}));

	// Components at the end
	const componentsItem = {
		path: '/components',
		label: i18n?.components || __( 'Components', 'everyone-accessibility-suite' ),
		icon: 'dashicons-admin-plugins',
		description: __( 'Manage plugin modules', 'everyone-accessibility-suite' ),
	};

	// Combine all menu items
	const allMenuItems = [...baseMenuItems, ...moduleMenuItems, componentsItem];

	return (
		<nav className="evas-admin-navigation">
			<ul className="evas-admin-navigation__menu">
				{allMenuItems.map((item) => (
					<li key={item.path} className="evas-admin-navigation__item">
						<NavLink
							to={item.path}
							className={({ isActive }) =>
								`evas-admin-navigation__link ${isActive ? 'is-active' : ''}`
							}
							title={item.description}
						>
							<span className={`dashicons ${item.icon}`}></span>
							<div className="evas-admin-navigation__content">
								<span className="evas-admin-navigation__label">{item.label}</span>
								{item.description && (
									<span className="evas-admin-navigation__description">{item.description}</span>
								)}
							</div>
						</NavLink>
					</li>
				))}
			</ul>
		</nav>
	);
}

export default Navigation;