/**
 * External dependencies.
 */
import { __ } from '@wordpress/i18n';
import { useParams, useNavigate } from 'react-router-dom';
import { Notice } from '@wordpress/components';
import Loading from '@wp-rollback/shared-core/components/Loading';
import RollbackModal from '@wp-rollback/shared-core/components/modals/RollbackModal';
import RollbackHeader from '@wp-rollback/shared-core/components/Rollbacks/RollbackHeader';
import RollbackActions from '@wp-rollback/shared-core/components/Rollbacks/RollbackActions';
import { RollbackProvider, useRollbackContext } from '@wp-rollback/shared-core/context/RollbackContext';
import VersionsList from '@wp-rollback/shared-core/components/Rollbacks/VersionsList';
import Layout from '../layout/Layout';
import RollbackContent from './RollbackContent';
import PremiumRollbackInlineUpsell from '../components/PremiumRollbackInlineUpsell';

/**
 * Inner component that consumes the context
 *
 * @return {JSX.Element} The rollback page component content
 */
const RollbacksContent = () => {
    const { isLoading, error, rollbackInfo, isPremiumAsset, rollbackVersion, setRollbackVersion, currentVersion } =
        useRollbackContext();

    if ( isLoading ) {
        return (
            <Layout>
                <Loading />
            </Layout>
        );
    }

    // Handle error state
    if ( error || rollbackInfo.message ) {
        return (
            <Layout>
                <div className="wpr-api-error">
                    <h1>{ rollbackInfo.code || __( 'Error', 'wp-rollback' ) }</h1>
                    <p>{ rollbackInfo.message || error }</p>
                </div>
            </Layout>
        );
    }

    // Show premium upsell for premium assets (in free plugin)
    if ( isPremiumAsset ) {
        return (
            <Layout className="wpr-rollback-page wpr-premium-rollback-page">
                { /* Custom header for premium assets */ }
                <div className="wpr-subheader">
                    <h1>{ __( 'Unlock Premium Rollbacks', 'wp-rollback' ) }</h1>
                    <p>
                        { __(
                            'This premium asset requires WP Rollback Pro for safe version rollbacks.',
                            'wp-rollback'
                        ) }
                    </p>
                </div>

                <div className="wpr-rollback-component-wrap">
                    <div className="wpr-premium-upsell">
                        <Notice status="warning" isDismissible={ false } className="wpr-premium-notice">
                            <p>
                                <strong>{ rollbackInfo?.name || slug }</strong>{ ' ' }
                                { __(
                                    'is not available on WordPress.org and requires WP Rollback Pro for version control.',
                                    'wp-rollback'
                                ) }
                            </p>
                        </Notice>

                        { /* Show available versions if they exist - moved higher */ }
                        { rollbackInfo?.versions && Object.keys( rollbackInfo.versions ).length > 0 && (
                            <div className="wpr-available-versions">
                                <h3>{ __( 'Available Versions (Pro Feature)', 'wp-rollback' ) }</h3>
                                <p className="wpr-versions-note">
                                    { __(
                                        'These versions would be available for rollback with WP Rollback Pro:',
                                        'wp-rollback'
                                    ) }
                                </p>
                                <VersionsList
                                    versions={ rollbackInfo.versions }
                                    rollbackVersion={ rollbackVersion }
                                    setRollbackVersion={ setRollbackVersion }
                                    currentVersion={ currentVersion }
                                    disabled={ true }
                                />
                            </div>
                        ) }

                        <PremiumRollbackInlineUpsell />
                    </div>
                </div>
            </Layout>
        );
    }

    // Show normal rollback content for wp.org assets
    return (
        <Layout className="wpr-rollback-page">
            <RollbackHeader />
            <div className="wpr-rollback-component-wrap">
                <RollbackContent />
                <RollbackActions />
            </div>
            <RollbackModal />
        </Layout>
    );
};

/**
 * RollbackPage component handles the rollback process for plugins and themes
 *
 * @return {JSX.Element} The rollback page component
 */
export const Rollbacks = () => {
    const { type, slug } = useParams();
    const navigate = useNavigate();

    // Handle navigation back to home
    const handleCancel = () => {
        navigate( '/' );
    };

    return (
        <RollbackProvider type={ type } slug={ slug } onCancel={ handleCancel }>
            <RollbacksContent />
        </RollbackProvider>
    );
};

export default Rollbacks;