/**
 * Upgrade Page component.
 *
 * @package Schema_AI
 */

import { __ } from '@wordpress/i18n';
import { useUserContext } from '../context/UserContext';
import PricingTable from './Upgrade/PricingTable';
import FeatureComparison from './Upgrade/FeatureComparison';

const adminUrl = window.schemaAiData?.adminUrl || '';

function UpgradePage() {
	const { plan } = useUserContext();
	const isPaid = plan === 'pro' || plan === 'premium';

	return (
		<div className="schema-ai-upgrade-page">
			{ /* Header */ }
			<div className="schema-ai-header">
				<div className="schema-ai-header-left">
					<h1 className="schema-ai-header-title">{ __( 'Upgrade Schema AI', 'schema-ai' ) }</h1>
				</div>
				<div className="schema-ai-header-right">
					<a href={ adminUrl + 'admin.php?page=schema-ai' } className="button button-secondary">
						{ __( 'Back to Dashboard', 'schema-ai' ) }
					</a>
				</div>
			</div>

			{ /* Hero banner */ }
			{ ! isPaid && (
				<div className="schema-ai-upgrade-hero">
					<h2>{ __( 'Unlock the Full Power of Schema AI', 'schema-ai' ) }</h2>
					<p>{ __( 'Get more AI generations, advanced schema types, and powerful automation tools to boost your SEO.', 'schema-ai' ) }</p>
				</div>
			) }

			{ isPaid && (
				<div className="schema-ai-upgrade-current-plan">
					<span className="dashicons dashicons-yes-alt"></span>
					<span>
						{ plan === 'premium'
							? __( 'You\'re on the Premium plan — 1,000 generations/month', 'schema-ai' )
							: __( 'You\'re on the Pro plan — 300 generations/month', 'schema-ai' )
						}
					</span>
					<a href="https://app.schemaai.com/billing" target="_blank" rel="noopener noreferrer" className="button button-small">
						{ __( 'Manage Subscription', 'schema-ai' ) }
					</a>
				</div>
			) }

			{ /* Pricing Table */ }
			<PricingTable />

			{ /* Why Upgrade section */ }
			<div className="schema-ai-card schema-ai-why-upgrade">
				<h2>{ __( 'Why Upgrade?', 'schema-ai' ) }</h2>
				<div className="schema-ai-benefits-grid">
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-performance"></span>
						<h3>{ __( 'More AI Generations', 'schema-ai' ) }</h3>
						<p>{ __( 'Free gives you 30/month. Pro unlocks 300, and Premium gives you 1,000 generations per month to cover all your content.', 'schema-ai' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-editor-code"></span>
						<h3>{ __( 'All 827+ Schema Types', 'schema-ai' ) }</h3>
						<p>{ __( 'Go beyond basic Article and FAQ schemas. Access every schema.org type including Product, Recipe, Event, Course, and more.', 'schema-ai' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-superhero"></span>
						<h3>{ __( 'Advanced AI Models', 'schema-ai' ) }</h3>
						<p>{ __( 'All plans are powered by GPT-4o Mini for fast, accurate schema markup generation.', 'schema-ai' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-update"></span>
						<h3>{ __( 'Bulk Operations', 'schema-ai' ) }</h3>
						<p>{ __( 'Generate schemas for 100+ posts at once. Perfect for large sites that need comprehensive structured data coverage.', 'schema-ai' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-chart-bar"></span>
						<h3>{ __( 'Analytics Dashboard', 'schema-ai' ) }</h3>
						<p>{ __( 'Track rich results performance, monitor validation errors, and see CTR improvements from your schema markup.', 'schema-ai' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-admin-multisite"></span>
						<h3>{ __( 'Multi-Site Support', 'schema-ai' ) }</h3>
						<p>{ __( 'Manage schema markup across multiple WordPress sites from a single account with Premium.', 'schema-ai' ) }</p>
					</div>
				</div>
			</div>

			{ /* Feature Comparison */ }
			<div className="schema-ai-card">
				<h2>{ __( 'Full Feature Comparison', 'schema-ai' ) }</h2>
				<FeatureComparison />
			</div>

			{ /* CTA */ }
			{ ! isPaid && (
				<div className="schema-ai-upgrade-cta">
					<h2>{ __( 'Ready to get more from Schema AI?', 'schema-ai' ) }</h2>
					<p>{ __( 'Start with Pro at just $9.99/month — cancel anytime.', 'schema-ai' ) }</p>
					<a href="https://app.schemaai.com/pricing" target="_blank" rel="noopener noreferrer" className="button button-primary button-hero">
						{ __( 'View Plans & Upgrade', 'schema-ai' ) }
					</a>
				</div>
			) }
		</div>
	);
}

export default UpgradePage;