/**
 * 管理画面レイアウト
 *
 * サイドナビゲーション + メインコンテンツのレイアウト。
 * ケイパビリティに基づいてナビ項目をフィルタリング。
 */
import { __ } from '@wordpress/i18n';
import {
	NavigableMenu,
	MenuItem,
} from '@wordpress/components';

const NAV_ITEMS = [
	{ path: '/', label: __( 'Dashboard', 'conferencemanager' ), icon: 'dashboard', cap: 'conf_manager_view_dashboard' },
	{ path: '/setup', label: __( 'Setup', 'conferencemanager' ), icon: 'admin-settings', cap: 'conf_manager_manage_settings' },
	{ path: '/events', label: __( 'Events', 'conferencemanager' ), icon: 'calendar-alt', cap: 'conf_manager_view_events' },
	{ path: '/members', label: __( 'Members', 'conferencemanager' ), icon: 'groups', cap: 'conf_manager_view_members' },
	{ path: '/participants', label: __( 'Participants', 'conferencemanager' ), icon: 'list-view', cap: 'conf_manager_view_registrations' },
	{ path: '/payments', label: __( 'Payments', 'conferencemanager' ), icon: 'money-alt', cap: 'conf_manager_view_payments' },
];

export default function Layout( { children, currentPath, onNavigate } ) {
	const caps = window.confManagerCaps?.caps || {};
	const visibleItems = NAV_ITEMS.filter( ( item ) => caps[ item.cap ] );

	return (
		<div className="conf-manager-admin">
			<div className="conf-manager-admin__header">
				<h1>{ __( 'Conference Manager', 'conferencemanager' ) }</h1>
			</div>
			<div className="conf-manager-admin__body">
				<nav className="conf-manager-admin__nav">
					<NavigableMenu orientation="vertical">
						{ visibleItems.map( ( item ) => (
							<MenuItem
								key={ item.path }
								icon={ item.icon }
								isPressed={ currentPath === item.path }
								onClick={ () => onNavigate( item.path ) }
							>
								{ item.label }
							</MenuItem>
						) ) }
					</NavigableMenu>
				</nav>
				<main className="conf-manager-admin__content">
					{ children }
				</main>
			</div>
		</div>
	);
}
