/**
 * ProfileCompletenessWidget Component
 *
 * @package Advanced_Customer_Account
 */

import { __ } from '@wordpress/i18n';

// Components
import { Card } from '../Common';

/**
 * Profile completeness widget component.
 *
 * @param {Object}   props            Component props.
 * @param {number}   props.percentage Completeness percentage.
 * @param {Function} props.navigate   Navigate function.
 * @return {JSX.Element} ProfileCompletenessWidget component.
 */
const ProfileCompletenessWidget = ( { percentage = 0, navigate } ) => {
    // Determine message based on percentage
    const getMessage = () => {
        if ( percentage >= 100 ) {
            return __( 'Your profile is complete!', 'advanced-customer-account' );
        }
        if ( percentage >= 75 ) {
            return __( 'Almost there! Complete your profile.', 'advanced-customer-account' );
        }
        if ( percentage >= 50 ) {
            return __( 'You\'re halfway there!', 'advanced-customer-account' );
        }
        return __( 'Complete your profile for a better experience.', 'advanced-customer-account' );
    };

    // Handle edit profile click
    const handleEditProfile = () => {
        navigate( 'profile' );
    };

    return (
        <Card
            title={ __( 'Profile Completeness', 'advanced-customer-account' ) }
            className="aca-profile-completeness-widget"
        >
            <div className="aca-profile-completeness">
                <div className="aca-profile-completeness__circle">
                    <svg viewBox="0 0 36 36" className="aca-profile-completeness__svg">
                        { /* Background circle */ }
                        <path
                            className="aca-profile-completeness__bg"
                            d="M18 2.0845
                               a 15.9155 15.9155 0 0 1 0 31.831
                               a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                        { /* Progress circle */ }
                        <path
                            className="aca-profile-completeness__progress"
                            strokeDasharray={ `${ percentage }, 100` }
                            d="M18 2.0845
                               a 15.9155 15.9155 0 0 1 0 31.831
                               a 15.9155 15.9155 0 0 1 0 -31.831"
                        />
                    </svg>
                    <span className="aca-profile-completeness__percentage">
                        { percentage }%
                    </span>
                </div>
                <p className="aca-profile-completeness__message">
                    { getMessage() }
                </p>
                { percentage < 100 && (
                    <button
                        type="button"
                        className="aca-btn aca-btn--secondary aca-btn--full"
                        onClick={ handleEditProfile }
                    >
                        { __( 'Complete Profile', 'advanced-customer-account' ) }
                    </button>
                ) }
            </div>
        </Card>
    );
};

export default ProfileCompletenessWidget;