/**
 * Main App Component
 *
 * @package Advanced_Customer_Account
 */

import { useState, useEffect, useCallback } from '@wordpress/element';
import { SlotFillProvider } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

// Layout components
import Sidebar from './components/Layout/Sidebar';
import Header from './components/Layout/Header';
import MainContent from './components/Layout/MainContent';

// Page components
import Dashboard from './pages/Dashboard';
import Orders from './pages/Orders';
import OrderView from './pages/OrderView';
import Downloads from './pages/Downloads';
import Addresses from './pages/Addresses';
import Profile from './pages/Profile';

// Hooks
import useNavigation from './hooks/useNavigation';

// Common components
import ErrorBoundary from './components/Common/ErrorBoundary';

/**
 * Route configuration.
 */
const routes = {
    dashboard: Dashboard,
    orders: Orders,
    'orders/:id': OrderView,
    downloads: Downloads,
    addresses: Addresses,
    profile: Profile,
};

/**
 * App Component.
 *
 * @param {Object} props              Component props.
 * @param {string} props.initialRoute Initial route from WooCommerce integration.
 * @return {JSX.Element} App component.
 */
const App = ( { initialRoute = 'dashboard' } ) => {
    const { currentRoute, params, navigate } = useNavigation( initialRoute );
    const [ isSidebarOpen, setIsSidebarOpen ] = useState( false );

    // Determine which page component to render
    const getPageComponent = useCallback( () => {
        // Check for parameterized routes first
        if ( currentRoute.startsWith( 'orders/' ) && params.id ) {
            return <OrderView orderId={ params.id } onBack={ () => navigate( 'orders' ) } />;
        }

        // Get component from routes
        const PageComponent = routes[ currentRoute ];

        if ( PageComponent ) {
            return <PageComponent navigate={ navigate } />;
        }

        // Default to dashboard
        return <Dashboard navigate={ navigate } />;
    }, [ currentRoute, params, navigate ] );

    // Close sidebar on route change (mobile)
    useEffect( () => {
        setIsSidebarOpen( false );
    }, [ currentRoute ] );

    // Toggle sidebar
    const toggleSidebar = useCallback( () => {
        setIsSidebarOpen( ( prev ) => ! prev );
    }, [] );

    return (
        <ErrorBoundary>
            <SlotFillProvider>
                <div className="aca-app">
                    <Sidebar
                        currentRoute={ currentRoute }
                        navigate={ navigate }
                        isOpen={ isSidebarOpen }
                        onClose={ () => setIsSidebarOpen( false ) }
                    />
                    <div className="aca-main">
                        <Header
                            onMenuToggle={ toggleSidebar }
                            currentRoute={ currentRoute }
                        />
                        <MainContent>
                            { getPageComponent() }
                        </MainContent>
                    </div>
                </div>
            </SlotFillProvider>
        </ErrorBoundary>
    );
};

export default App;