/**
 * Pricing Table component.
 *
 * @package Schema_AI
 */

import { Card, CardBody, Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useUserContext } from '../../context/UserContext';

function PricingTable() {
	const { plan } = useUserContext();

	const plans = [
		{
			name: __( 'Free', 'schema-ai' ),
			price: '$0',
			period: __( 'forever', 'schema-ai' ),
			features: [
				__( '30 AI generations/month', 'schema-ai' ),
				__( 'All 827+ schema types', 'schema-ai' ),
				__( 'Visual editor', 'schema-ai' ),
				__( 'Basic validation', 'schema-ai' ),
				__( 'Google Rich Results test', 'schema-ai' ),
				__( 'Single site', 'schema-ai' ),
			],
			key: 'free',
		},
		{
			name: __( 'Pro', 'schema-ai' ),
			price: '$9.99',
			period: __( '/month', 'schema-ai' ),
			highlight: false,
			features: [
				__( '300 AI generations/month', 'schema-ai' ),
				__( 'Everything in Free', 'schema-ai' ),
				__( 'Powered by GPT-4o Mini', 'schema-ai' ),
				__( 'Custom schema builder', 'schema-ai' ),
				__( 'Priority email support', 'schema-ai' ),
				__( 'Schema templates library', 'schema-ai' ),
			],
			key: 'pro',
		},
		{
			name: __( 'Premium', 'schema-ai' ),
			price: '$29',
			period: __( '/month', 'schema-ai' ),
			highlight: true,
			features: [
				__( '1,000 AI generations/month', 'schema-ai' ),
				__( 'Everything in Pro', 'schema-ai' ),
				__( 'Bulk operations', 'schema-ai' ),
				__( 'Automation rules', 'schema-ai' ),
				__( 'Analytics dashboard', 'schema-ai' ),
				__( 'Multi-site support', 'schema-ai' ),
				__( 'Dedicated support', 'schema-ai' ),
			],
			key: 'premium',
		},
	];

	return (
		<div className="schema-ai-pricing-table">
			<div className="schema-ai-pricing-grid">
				{ plans.map( ( p ) => (
					<Card
						key={ p.key }
						className={ `schema-ai-pricing-card ${ plan === p.key ? 'schema-ai-pricing-current' : '' } ${ p.highlight ? 'schema-ai-pricing-highlight' : '' }` }
					>
						<CardBody>
							{ p.highlight && <span className="schema-ai-pricing-popular">{ __( 'Most Popular', 'schema-ai' ) }</span> }
							<h3>{ p.name }</h3>
							<div className="schema-ai-pricing-price">
								<span className="schema-ai-price-amount">{ p.price }</span>
								<span className="schema-ai-price-period">{ p.period }</span>
							</div>
							<ul className="schema-ai-pricing-features">
								{ p.features.map( ( f, i ) => (
									<li key={ i }>
										<span className="dashicons dashicons-yes"></span>
										{ f }
									</li>
								) ) }
							</ul>
							{ plan === p.key ? (
								<Button variant="secondary" disabled className="schema-ai-pricing-btn">
									{ __( 'Current Plan', 'schema-ai' ) }
								</Button>
							) : p.key === 'free' ? null : (
								<Button variant="primary" href="https://app.schemaai.com/pricing" className="schema-ai-pricing-btn">
									{ __( 'Upgrade Now', 'schema-ai' ) }
								</Button>
							) }
						</CardBody>
					</Card>
				) ) }
			</div>
		</div>
	);
}

export default PricingTable;