/**
 * Sidebar Component
 *
 * @package Advanced_Customer_Account
 */

import { useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Menu items configuration.
 */
const defaultMenuItems = [
    {
        id: 'dashboard',
        label: __( 'Dashboard', 'advanced-customer-account' ),
        icon: 'dashboard',
    },
    {
        id: 'orders',
        label: __( 'Orders', 'advanced-customer-account' ),
        icon: 'cart',
    },
    {
        id: 'downloads',
        label: __( 'Downloads', 'advanced-customer-account' ),
        icon: 'download',
    },
    {
        id: 'addresses',
        label: __( 'Addresses', 'advanced-customer-account' ),
        icon: 'location',
    },
    {
        id: 'profile',
        label: __( 'Account Details', 'advanced-customer-account' ),
        icon: 'admin-users',
    },
];

/**
 * Icon component using WordPress dashicons.
 *
 * @param {Object} props      Component props.
 * @param {string} props.name Icon name.
 * @return {JSX.Element} Icon element.
 */
const Icon = ( { name } ) => {
    return <span className={ `dashicons dashicons-${ name }` } aria-hidden="true" />;
};

/**
 * Sidebar component.
 *
 * @param {Object}   props             Component props.
 * @param {string}   props.currentRoute Current route.
 * @param {Function} props.navigate    Navigate function.
 * @param {boolean}  props.isOpen      Is sidebar open (mobile).
 * @param {Function} props.onClose     Close sidebar handler.
 * @return {JSX.Element} Sidebar component.
 */
const Sidebar = ( { currentRoute, navigate, isOpen, onClose } ) => {
    const userData = useSelect(
        ( select ) => select( 'aca/dashboard' ).getUserData(),
        []
    );

    // Close sidebar on escape key
    useEffect( () => {
        const handleEscape = ( event ) => {
            if ( event.key === 'Escape' && isOpen ) {
                onClose();
            }
        };

        document.addEventListener( 'keydown', handleEscape );
        return () => document.removeEventListener( 'keydown', handleEscape );
    }, [ isOpen, onClose ] );

    // Handle menu item click
    const handleMenuClick = ( route ) => {
        navigate( route );
        onClose();
    };

    // Check if route is active
    const isActive = ( route ) => {
        if ( route === 'orders' ) {
            return currentRoute.startsWith( 'orders' );
        }
        return currentRoute === route;
    };

    const sidebarClasses = classnames( 'aca-sidebar', {
        'aca-sidebar--open': isOpen,
    } );

    return (
        <>
            { /* Overlay for mobile */ }
            { isOpen && (
                <div
                    className="aca-sidebar__overlay"
                    onClick={ onClose }
                    aria-hidden="true"
                />
            ) }

            <aside className={ sidebarClasses }>
                { /* User info */ }
                <div className="aca-sidebar__user">
                    <div className="aca-sidebar__avatar">
                        { userData?.avatar ? (
                            <img
                                src={ userData.avatar }
                                alt={ userData.display_name || '' }
                                className="aca-sidebar__avatar-img"
                            />
                        ) : (
                            <span className="aca-sidebar__avatar-placeholder">
                                { userData?.display_name?.charAt( 0 ).toUpperCase() || 'U' }
                            </span>
                        ) }
                    </div>
                    <div className="aca-sidebar__user-info">
                        <span className="aca-sidebar__user-name">
                            { userData?.display_name || __( 'Welcome', 'advanced-customer-account' ) }
                        </span>
                        <span className="aca-sidebar__user-email">
                            { userData?.email || '' }
                        </span>
                    </div>
                </div>

                { /* Navigation */ }
                <nav className="aca-sidebar__nav" role="navigation" aria-label={ __( 'Account navigation', 'advanced-customer-account' ) }>
                    <ul className="aca-sidebar__menu">
                        { defaultMenuItems.map( ( item ) => (
                            <li key={ item.id } className="aca-sidebar__menu-item">
                                <button
                                    type="button"
                                    className={ classnames( 'aca-sidebar__menu-link', {
                                        'aca-sidebar__menu-link--active': isActive( item.id ),
                                    } ) }
                                    onClick={ () => handleMenuClick( item.id ) }
                                    aria-current={ isActive( item.id ) ? 'page' : undefined }
                                >
                                    <Icon name={ item.icon } />
                                    <span className="aca-sidebar__menu-text">{ item.label }</span>
                                </button>
                            </li>
                        ) ) }
                    </ul>
                </nav>

                { /* Logout link */ }
                <div className="aca-sidebar__footer">
                    <a
                        href={ window.acaSettings?.logoutUrl || '/my-account/customer-logout/' }
                        className="aca-sidebar__logout"
                    >
                        <Icon name="exit" />
                        <span>{ __( 'Logout', 'advanced-customer-account' ) }</span>
                    </a>
                </div>
            </aside>
        </>
    );
};

export default Sidebar;