/**
 * Dashboard Page Component
 *
 * @package Advanced_Customer_Account
 */

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

// Components
import { Card, LoadingSpinner, EmptyState, Notice } from '../components/Common';
import StatsWidget from '../components/Dashboard/StatsWidget';
import RecentOrdersWidget from '../components/Dashboard/RecentOrdersWidget';
import ProfileCompletenessWidget from '../components/Dashboard/ProfileCompletenessWidget';

/**
 * Dashboard page component.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.navigate Navigate function.
 * @return {JSX.Element} Dashboard page.
 */
const Dashboard = ( { navigate } ) => {
    const { fetchDashboard } = useDispatch( 'aca/dashboard' );

    const { userData, stats, recentOrders, profileCompleteness, isLoading, error } = useSelect(
        ( select ) => {
            const dashboardStore = select( 'aca/dashboard' );
            return {
                userData: dashboardStore.getUserData(),
                stats: dashboardStore.getStats(),
                recentOrders: dashboardStore.getRecentOrders(),
                profileCompleteness: dashboardStore.getProfileCompleteness(),
                isLoading: dashboardStore.isLoading(),
                error: dashboardStore.getError(),
            };
        },
        []
    );

    // Fetch dashboard data on mount
    useEffect( () => {
        fetchDashboard();
    }, [ fetchDashboard ] );

    if ( isLoading && ! userData ) {
        return <LoadingSpinner fullPage message={ __( 'Loading dashboard...', 'advanced-customer-account' ) } />;
    }

    return (
        <div className="aca-dashboard">
            { error && (
                <Notice
                    type="error"
                    message={ error }
                    className="aca-dashboard__notice"
                />
            ) }

            { /* Welcome section */ }
            <div className="aca-dashboard__welcome">
                <h2 className="aca-dashboard__greeting">
                    { __( 'Welcome back', 'advanced-customer-account' ) }
                    { userData?.display_name && `, ${ userData.display_name }` }!
                </h2>
                <p className="aca-dashboard__subtitle">
                    { __( 'Here\'s what\'s happening with your account.', 'advanced-customer-account' ) }
                </p>
            </div>

            { /* Stats widgets */ }
            <StatsWidget stats={ stats } isLoading={ isLoading } />

            { /* Main content grid */ }
            <div className="aca-dashboard__grid">
                { /* Recent orders */ }
                <div className="aca-dashboard__main">
                    <RecentOrdersWidget
                        orders={ recentOrders }
                        navigate={ navigate }
                        isLoading={ isLoading }
                    />
                </div>

                { /* Sidebar widgets */ }
                <div className="aca-dashboard__sidebar">
                    <ProfileCompletenessWidget
                        percentage={ profileCompleteness }
                        navigate={ navigate }
                    />
                </div>
            </div>
        </div>
    );
};

export default Dashboard;