/**
 * 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 AI Schema Gen', 'ai-schema-gen' ) }</h1>
				</div>
				<div className="schema-ai-header-right">
					<a href={ adminUrl + 'admin.php?page=ai-schema-gen' } className="button button-secondary">
						{ __( 'Back to Dashboard', 'ai-schema-gen' ) }
					</a>
				</div>
			</div>

			{ /* Hero banner */ }
			{ ! isPaid && (
				<div className="schema-ai-upgrade-hero">
					<h2>{ __( 'Unlock the Full Power of AI Schema Gen', 'ai-schema-gen' ) }</h2>
					<p>{ __( 'More AI generations, competitor analysis, content gap insights, and agency tools — all in one plugin.', 'ai-schema-gen' ) }</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', 'ai-schema-gen' )
							: __( 'You\'re on the Pro plan — 300 generations/month', 'ai-schema-gen' )
						}
					</span>
					<a href="https://aischemagen.com/billing" target="_blank" rel="noopener noreferrer" className="button button-small">
						{ __( 'Manage Subscription', 'ai-schema-gen' ) }
					</a>
				</div>
			) }

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

			{ /* Why Upgrade section */ }
			<div className="schema-ai-card schema-ai-why-upgrade">
				<h2>{ __( 'Why Upgrade?', 'ai-schema-gen' ) }</h2>
				<div className="schema-ai-benefits-grid">
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-performance"></span>
						<h3>{ __( 'More AI Generations', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'Free gives you 30/month. Pro unlocks 300 for your own site, and Premium gives you 1,000/month to handle all your client work.', 'ai-schema-gen' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-search"></span>
						<h3>{ __( 'Competitor Analysis', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'See exactly what schema types your competitors are using. Free includes 10 analyses/month. Pro gives you 100, Premium is unlimited.', 'ai-schema-gen' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-update"></span>
						<h3>{ __( 'Bulk Generation', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'Generate schemas for your entire site at once. Pro unlocks bulk generation so you get full coverage without doing it page by page.', 'ai-schema-gen' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-chart-bar"></span>
						<h3>{ __( 'Content Gap Analysis', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'Discover schema types your competitors use that you don\'t — and close the gap before it costs you rich results in Google.', 'ai-schema-gen' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-admin-multisite"></span>
						<h3>{ __( 'Multi-Site & Team (Premium)', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'Manage up to 5 client sites and 3 team members from one account. Need more? Add extra sites or seats for just $5 each.', 'ai-schema-gen' ) }</p>
					</div>
					<div className="schema-ai-benefit">
						<span className="dashicons dashicons-sos"></span>
						<h3>{ __( 'Priority Support', 'ai-schema-gen' ) }</h3>
						<p>{ __( 'Pro users get priority email support. Premium users get dedicated support — a real person who knows your account.', 'ai-schema-gen' ) }</p>
					</div>
				</div>
			</div>

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

			{ /* CTA */ }
			{ ! isPaid && (
				<div className="schema-ai-upgrade-cta">
					<h2>{ __( 'Ready to get more from AI Schema Gen?', 'ai-schema-gen' ) }</h2>
					<p>{ __( 'Pro starts at $9.99/month for your own site. Need agency tools? Premium is $29/month — save 2 months with a yearly plan.', 'ai-schema-gen' ) }</p>
					<a href="https://aischemagen.com/pricing" target="_blank" rel="noopener noreferrer" className="button button-primary button-hero">
						{ __( 'View Plans & Upgrade', 'ai-schema-gen' ) }
					</a>
				</div>
			) }
		</div>
	);
}

export default UpgradePage;