/**
 * External dependencies.
 */
import { __ } from '@wordpress/i18n';
import { Button, Icon, Flex, FlexItem } from '@wordpress/components';
import { 
    starFilled, 
    shield, 
    backup, 
    info, 
    list
} from '@wordpress/icons';
import { useRollbackContext } from '@wp-rollback/shared-core/context/RollbackContext';

/**
 * PremiumRollbackInlineUpsell component provides an inline upsell experience within the rollback view
 *
 * @return {JSX.Element} The premium rollback inline upsell component
 */
const PremiumRollbackInlineUpsell = () => {
    const { handleCancel } = useRollbackContext();

    const handleUpgrade = () => {
        window.open('https://wprollback.com/pricing/?utm_source=free-plugin&utm_medium=rollback-upsell&utm_campaign=premium-rollback', '_blank');
    };

    const features = [
        {
            icon: backup,
            title: __('Premium Plugin & Theme Rollbacks', 'wp-rollback'),
            description: __('Roll back any premium plugin or theme from any marketplace - not just WordPress.org.', 'wp-rollback')
        },
        {
            icon: shield,
            title: __('Version Preservation', 'wp-rollback'),
            description: __('For premium assets, creates a zip archive of the current version and stores the archive.', 'wp-rollback')
        },
        {
            icon: info,
            title: __('Rollback Notes & Documentation', 'wp-rollback'),
            description: __('Add detailed notes to each rollback for better team coordination and change tracking.', 'wp-rollback')
        },
        {
            icon: list,
            title: __('Advanced Activity Logging', 'wp-rollback'),
            description: __('Complete audit trail of all rollbacks with timestamps, user tracking, and detailed logs.', 'wp-rollback')
        }
    ];

    return (
        <>
            <div className="wpr-premium-features">
                <h3>{ __('Why Upgrade to WP Rollback Pro?', 'wp-rollback') }</h3>
                <div className="wpr-premium-features-grid">
                    {features.map((feature, index) => (
                        <div key={index} className="wpr-premium-feature-card">
                            <div className="wpr-premium-feature-card-body">
                                <Flex align="flex-start" gap={8} justify="flex-start">
                                    <FlexItem>
                                        <div className="wpr-premium-feature-icon">
                                            <Icon icon={feature.icon} size={20} />
                                        </div>
                                    </FlexItem>
                                    <FlexItem>
                                        <h4 className="wpr-premium-feature-title">
                                            {feature.title}
                                        </h4>
                                        <p className="wpr-premium-feature-description">
                                            {feature.description}
                                        </p>
                                    </FlexItem>
                                </Flex>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="wpr-premium-guarantee">
                <div className="wpr-premium-guarantee-card">
                    <div className="wpr-premium-guarantee-card-body">
                        <Flex align="center" gap={4}>
                            <FlexItem>
                                <Icon icon={shield} size={24} />
                            </FlexItem>
                            <FlexItem>
                                <h4>{ __('30-Day Money-Back Guarantee', 'wp-rollback') }</h4>
                                <p>
                                    { __('Try WP Rollback Pro risk-free. If you\'re not completely satisfied, get your money back within 30 days.', 'wp-rollback') }
                                </p>
                            </FlexItem>
                        </Flex>
                    </div>
                </div>
            </div>

            <div className="wpr-premium-actions">
                <Button
                    variant="primary"
                    size="large"
                    icon={<Icon icon={starFilled} />}
                    onClick={handleUpgrade}
                    className="wpr-premium-cta"
                >
                    { __('Upgrade to WP Rollback Pro', 'wp-rollback') }
                </Button>
                <Button
                    variant="secondary"
                    size="large"
                    onClick={handleCancel}
                >
                    { __('Go Back', 'wp-rollback') }
                </Button>
                <Button
                    variant="link"
                    href="https://wprollback.com/features/?utm_source=free-plugin&utm_medium=rollback-upsell&utm_campaign=premium-rollback"
                    target="_blank"
                >
                    { __('Learn More About Pro Features', 'wp-rollback') }
                </Button>
            </div>
        </>
    );
};

export default PremiumRollbackInlineUpsell;