import { useEffect, useRef } from '@wordpress/element';
import { Check } from 'lucide-react';
import { __ } from '@wordpress/i18n';
import { Card } from '@admin/components/Card';
import { PrimaryButton } from '@admin/components/PrimaryButton';

const ALL_ACCESS_FEATURES = [
	__( 'Advanced Ads Pro', 'advanced-ads' ),
	__( 'Tracking', 'advanced-ads' ),
	__( 'Responsive, AMP and Mobile ads', 'advanced-ads' ),
	__( 'Google Ad Manager Integration', 'advanced-ads' ),
	__( 'Sticky Ads', 'advanced-ads' ),
	__( 'PopUp Ads', 'advanced-ads' ),
	__( 'Selling Ads', 'advanced-ads' ),
	__( 'Ad Slider', 'advanced-ads' ),
];

function PitchCard( { icon, title, subtitle, features, note, cta, ctaUrl } ) {
	return (
		<Card className="flex flex-col p-8 mb-0">
			<div className="mb-4 flex items-start gap-2">
				<span
					aria-hidden="true"
					className="mt-0.5 text-base leading-none"
				>
					{ icon }
				</span>
				<div>
					<h3 className="m-0 text-lg font-semibold text-gray-900">
						{ title }
					</h3>
					{ subtitle && (
						<p className="m-0 mt-0.5 text-sm font-normal text-gray-500">
							{ subtitle }
						</p>
					) }
				</div>
			</div>
			<ul className="m-0 mb-8 flex-1 list-none space-y-5 p-0">
				{ features.map( ( feature ) => (
					<li
						key={ feature }
						className="flex items-start gap-3 text-base text-gray-700"
					>
						<span className="mt-1 flex size-4 shrink-0 items-center justify-center rounded-full bg-primary">
							<Check
								className="size-2.5 text-white"
								strokeWidth={ 3 }
							/>
						</span>
						{ feature }
					</li>
				) ) }
			</ul>
			{ note && <p className="mb-4 text-sm text-gray-500">{ note }</p> }
			<PrimaryButton
				href={ ctaUrl }
				target="_blank"
				size="lg"
				variant="green"
			>
				{ cta }
			</PrimaryButton>
		</Card>
	);
}

/**
 * The upsell "pitch" — an add-on-specific feature card plus the shared All Access card — surfaced as a dialog on top of the (blurred) PreviewFields. A plain in-flow dialog rather than @wordpress/components' Modal, so it stays confined to the settings content area (its nearest `relative` ancestor) instead of covering the whole viewport, header and sidebar included.
 *
 * @param {Object}   props
 * @param {string}   props.modalTitle      Accessible label for the dialog (e.g. "Pro").
 * @param {string}   props.pitchTitle      Short pitch headline for the feature card.
 * @param {string}   [props.pitchSubtitle] Optional muted subheading under the pitch headline.
 * @param {string[]} props.features        Feature bullets for the add-on-specific card.
 * @param {string}   props.ctaUrl          Add-on's own "See all features and pricing" link.
 * @param {string}   [props.allAccessUrl]  If set, also renders the shared All Access card.
 */
export function UpsellModal( {
	modalTitle,
	pitchTitle,
	pitchSubtitle,
	features,
	ctaUrl,
	allAccessUrl,
} ) {
	const dialogRef = useRef( null );

	useEffect( () => {
		dialogRef.current?.focus();
	}, [] );

	return (
		<div
			ref={ dialogRef }
			role="dialog"
			aria-modal="true"
			aria-label={ modalTitle }
			tabIndex={ -1 }
			className="relative w-full max-w-3xl rounded border-2 border-primary bg-white p-8 shadow-xl outline-none"
		>
			<div
				className="grid gap-6"
				style={ {
					gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
				} }
			>
				<PitchCard
					icon="🚀"
					title={ pitchTitle }
					subtitle={ pitchSubtitle }
					features={ features }
					cta={ __( 'See all features and pricing', 'advanced-ads' ) }
					ctaUrl={ ctaUrl }
				/>
				{ allAccessUrl && (
					<PitchCard
						icon="💎"
						title={ __( 'All Access', 'advanced-ads' ) }
						subtitle={ __(
							'With all available add-ons',
							'advanced-ads'
						) }
						features={ ALL_ACCESS_FEATURES }
						note={ __(
							'Risk free with 30-day Money-Back guarantee',
							'advanced-ads'
						) }
						cta={ __( 'Get All Access', 'advanced-ads' ) }
						ctaUrl={ allAccessUrl }
					/>
				) }
			</div>
		</div>
	);
}