import React from 'react';
import { burst_get_website_url } from '@/utils/lib.js';
import Icon from '@/utils/Icon';
import ButtonInput from '@/components/Inputs/ButtonInput';
import { useABTest } from '@/hooks/useABTest';
import { __, sprintf } from '@wordpress/i18n';
import useLicenseData from '@/hooks/useLicenseData';

interface UpsellCopyProps {
	className?: string;
	type: string;
	compact?: boolean;
}

interface UpsellConfigsProps {
	[key: string]: {
		testID: string;
		upgradePlan: {
			header: string;
			subTitle: string;
			licenseInsufficient: string;
		};
		variations: {
			[key: string]: {
				utm_medium: string;
				title: string;
				description: string;
				bullets: {
					icon: string;
					text: string;
				}[];
			};
		};
	};
}

const upsellConfigs: UpsellConfigsProps = {
	sales: {
		upgradePlan: {
			header: __( 'Unlock Sales Performance', 'burst-statistics' ),
			subTitle: __(
				'Gain valuable insights into your store’s revenue, top products, and sales trends.',
				'burst-statistics'
			),
			licenseInsufficient: __(
				'Your current license does not include the Sales dashboard.',
				'burst-statistics'
			)
		},
		testID: 'sales-upsell-copy-v1',
		variations: {
			B: {
				utm_medium: 'sales-upsell-variation-b',
				title: __(
					'Are your visitors buying, or just browsing?',
					'burst-statistics'
				),
				description: '',
				bullets: [
					{
						icon: 'goals',
						text: __(
							'Uncover checkout drop‑offs',
							'burst-statistics'
						)
					},
					{
						icon: 'goals',
						text: __(
							'Spot and fix cart abandonment issues',
							'burst-statistics'
						)
					},
					{
						icon: 'goals',
						text: __(
							'See which products and channels earn revenue',
							'burst-statistics'
						)
					}
				]
			}
		}
	},
	sources: {
		upgradePlan: {
			header: __( 'See which sources actually bring visitors', 'burst-statistics' ),
			subTitle: __(
				'Free shows your visitor locations. Pro adds source trends, top referrers, and campaign performance, so you can see where traffic and conversions come from.',
				'burst-statistics'
			),
			licenseInsufficient: ''
		},

		// Keeping testID to upsell-copy-v1 for backwards compatibility.
		testID: 'upsell-copy-v1',
		variations: {
			A: {
				utm_medium: 'upsell-variation-a',
				title: __(
					'Are you just guessing with your marketing?',
					'burst-statistics'
				),
				description: __(
					'You spend time and money creating campaigns, but can\'t see what\'s actually working. Are your newsletters driving traffic or just getting opened? Is your social media budget paying off? Without clear tracking, you\'re making decisions in the dark, which is inefficient and frustrating.',
					'burst-statistics'
				),
				bullets: [
					{
						icon: 'goals',
						text: __(
							'Stop guessing: Track UTM campaigns to see which channels deliver real visitors.',
							'burst-statistics'
						)
					},
					{
						icon: 'filter',
						text: __(
							'Optimize with confidence: Refine on-site promotions by analyzing custom URL parameters.',
							'burst-statistics'
						)
					},
					{
						icon: 'world',
						text: __(
							'Go beyond numbers: Visualize exactly where your visitors are with an interactive world map.',
							'burst-statistics'
						)
					}
				]
			},
			B: {
				utm_medium: 'upsell-variation-b',
				title: __(
					'Turn your traffic into targeted growth.',
					'burst-statistics'
				),
				description: __(
					'Effective growth comes from understanding your audience on a deeper level. Burst Pro provides the tools to see not just how many people visit, but who they are and what brought them to you, so you can focus your efforts where they matter most.',
					'burst-statistics'
				),
				bullets: [
					{
						icon: 'goals',
						text: __(
							'Measure the success of your marketing with automatic UTM campaign tracking.',
							'burst-statistics'
						)
					},
					{
						icon: 'filter',
						text: __(
							'Optimize your website by tracking how visitors interact with specific parameters.',
							'burst-statistics'
						)
					},
					{
						icon: 'world',
						text: __(
							'Tailor your content by identifying key visitor locations, from country down to the city.',
							'burst-statistics'
						)
					}
				]
			}
		}
	},
	forms: {
		upgradePlan: {
			header: __( 'Track form submissions and conversion rates', 'burst-statistics' ),
			subTitle: __(
				'Burst Pro shows which forms are being submitted and how well they convert. Upgrade when you need to measure which forms are working.',
				'burst-statistics'
			),
			licenseInsufficient: __(
				'Your current license does not include forms tracking.',
				'burst-statistics'
			)
		},
		testID: 'forms-upsell-copy-v1',
		variations: {
			A: {
				utm_medium: 'forms-upsell-variation-a',
				title: __(
					'Are your forms losing you conversions?',
					'burst-statistics'
				),
				description: __(
					'Your forms are where visitors become leads and customers. But if people start filling them in and never submit, you’re losing conversions without knowing why. Burst Pro shows you exactly how visitors interact with your forms, so you can fix what’s holding them back.',
					'burst-statistics'
				),
				bullets: [
					{
						icon: 'goals',
						text: __(
							'Track submissions: See which forms convert and which get ignored.',
							'burst-statistics'
						)
					},
					{
						icon: 'filter',
						text: __(
							'Spot abandonment: Find out where visitors give up before submitting.',
							'burst-statistics'
						)
					},
					{
						icon: 'goals',
						text: __(
							'Boost conversions: Optimize your forms based on real interaction data.',
							'burst-statistics'
						)
					}
				]
			}
		}
	},
	external_links: {
		upgradePlan: {
			header: __( 'Start tracking outgoing links', 'burst-statistics' ),
			subTitle: 'Outgoing link tracking is available in Burst Pro - Creator',
			licenseInsufficient: __(
				'Your current license does not include outgoing link tracking.',
				'burst-statistics'
			)
		},
		testID: 'external-links-upsell-copy-v1',
		variations: {
			A: {
				utm_medium: 'external-links-upsell-variation-a',
				title: __(
					'Where are your visitors going?',
					'burst-statistics'
				),
				description: '',
				bullets: [
					{
						icon: 'world',
						text: __(
							'Track outgoing clicks: Real-time clicks on all external domain links.',
							'burst-statistics'
						)
					},
					{
						icon: 'goals',
						text: __(
							'Measure affiliate revenue: Identify which partner links convert best.',
							'burst-statistics'
						)
					},
					{
						icon: 'filter',
						text: __(
							'Keep visitors engaged: See which content triggers exit clicks.',
							'burst-statistics'
						)
					}
				]
			}
		}
	}
};

/**
 * UpsellCopy component that displays different upsell messages based on A/B testing.
 * Uses campaign parameters to track conversion rates for each variation.
 * @param root0
 * @param root0.className
 * @param root0.type
 */
// fallow-ignore-next-line complexity
const UpsellCopy: React.FC<UpsellCopyProps> = ({
	className = '',
	type = 'sources',
	compact = false
}) => {
	const { licenseActivated, isPro } = useLicenseData();

	const upsellConfig = upsellConfigs[type] || upsellConfigs.sources;

	const testID = upsellConfig.testID;
	const variations = Object.keys( upsellConfig.variations );

	// Use A/B testing to assign variation.
	const { variation } = useABTest( testID, variations );

	// Get the appropriate copy based on variation
	// Note: Only A and B are used, but keeping C content for potential future use
	const content =
		upsellConfig.variations[variation] || upsellConfig.variations.A;

	// Base campaign parameters for all variations
	// Don't use `utm_campaign` here as it is filled in by the plugin automatically
	const baseParams = {
		utm_source: 'plugin',
		utm_medium: content.utm_medium
	};

	// Unified compact block layout for both Free and Pro configurations
	if ( compact ) {
		return (
			<div className="text-center flex flex-col gap-3 w-full max-w-96 mx-auto items-stretch">
				<h2 className="text-xl font-semibold text-text-gray">
					{upsellConfig.upgradePlan.header}
				</h2>
				<p className="text-base text-text-gray max-w-md mx-auto">
					{upsellConfig.upgradePlan.subTitle}
				</p>

				<div className="flex flex-col gap-2 w-full items-stretch mt-2">
					{isPro && ! licenseActivated && (
						<ButtonInput
							btnVariant="primary"
							size="md"
							link={{ to: '/settings/license' }}
							className="w-full text-center justify-center flex"
						>
							{__( 'Activate License', 'burst-statistics' )}
						</ButtonInput>
					)}

					<ButtonInput
						btnVariant={isPro ? 'secondary' : 'primary'}
						size="md"
						link={! isPro ? { to: burst_get_website_url( 'pricing', baseParams ) } : undefined}
						className="w-full text-center justify-center flex"
						onClick={! isPro ? undefined : () => {
							window.open(
								burst_get_website_url( 'pricing', baseParams ),
								'_blank'
							);
						}}
					>
						{isPro ? __( 'Upgrade Plan', 'burst-statistics' ) : __( 'Upgrade to Pro', 'burst-statistics' )}
					</ButtonInput>
				</div>
			</div>
		);
	}

	// if this is premium, but user has not activated the license, or has a not sufficient tier
	if ( isPro ) {
		return (
			<div className="text-center flex flex-col gap-6">
				<h2 className="text-2xl font-semibold text-text-gray">
					{upsellConfig.upgradePlan.header}
				</h2>

				<p className="text-lg text-text-gray-light max-w-md mx-auto">
					{upsellConfig.upgradePlan.subTitle}
				</p>

				<p className="text-base text-text-gray-light">
					{! licenseActivated &&
						__(
							'Already have a license? Activate it to access these features.',
							'burst-statistics'
						)}

					{licenseActivated &&
						upsellConfig.upgradePlan.licenseInsufficient}
				</p>

				<div className="flex flex-col @sm:flex-row gap-4 justify-center items-center">
					{! licenseActivated && (
						<ButtonInput
							btnVariant="primary"
							size="lg"
							link={{ to: '/settings/license' }}
						>
							{__( 'Activate License', 'burst-statistics' )}
						</ButtonInput>
					)}

					<ButtonInput
						btnVariant="secondary"
						size="lg"
						onClick={() => {
							window.open(
								burst_get_website_url( 'pricing', baseParams ),
								'_blank'
							);
						}}
					>
						{__( 'Upgrade Plan', 'burst-statistics' )}
					</ButtonInput>
				</div>
			</div>
		);
	}

	// if we're here, this is free.
	return (
		<div
			className={`mx-auto flex justify-center max-w-3xl gap-8 flex-wrap${className}`}
		>
			<div className="text-center">
				<h2 className="mb-4 text-2xl font-bold leading-tight text-text-black @md:text-3xl">
					{content.title}
				</h2>

				<p className="text-base leading-relaxed text-text-gray">
					{content.description}
				</p>
			</div>

			<div className="max-w-content mx-auto flex flex-col gap-4">
				{content.bullets.map( ( bullet, index ) => {
					const parts = bullet.text.split( ':' );
					const hasColon = 1 < parts.length;

					return (
						<div
							key={index}
							className="flex max-w-fit items-center space-x-4"
						>
							<div className="mt-0.5 shrink-0">
								<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary-100">
									<Icon
										name={bullet.icon}
										color="black"
										size={14}
										strokeWidth={2}
									/>
								</div>
							</div>

							<div className="pt-1">
								<p className="m-0 whitespace-nowrap text-md leading-relaxed text-text-gray">
									{hasColon ? (
										<>
											<span className="font-semibold text-text-gray">
												{parts[0]}:
											</span>

											<span className="ml-1">
												{parts.slice( 1 ).join( ':' )}
											</span>
										</>
									) : (
										<span className="font-semibold text-text-gray">
											{bullet.text}
										</span>
									)}
								</p>
							</div>
						</div>
					);
				})}
			</div>

			<div className="flex w-full flex-col items-center gap-3 text-center">
				<ButtonInput
					btnVariant="primary"
					size="lg"
					link={{ to: burst_get_website_url( 'pricing', baseParams ) }}
				>
					{__( 'Upgrade to Pro', 'burst-statistics' )}
				</ButtonInput>

				<div>
					<ButtonInput
						btnVariant="tertiary"
						size="md"
						link={{ to: burst_get_website_url( '/', baseParams ) }}
					>
						{__( 'Learn about all features', 'burst-statistics' )}
					</ButtonInput>
				</div>
			</div>

			{'development' === process.env.NODE_ENV && (
				<div className="mt-6 w-full text-center">
					<div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1">
						<Icon
							name="help"
							color="gray"
							size={14}
							className="mr-1"
						/>
						<span className="text-xs text-text-gray">
							{sprintf(
								__( 'Variation: %s', 'burst-statistics' ),
								variation
							)}
						</span>
					</div>
				</div>
			)}
		</div>
	);
};

export default UpsellCopy;