import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { X, Copy, Check, Tag } from 'lucide-react';
import { toast } from 'sonner';

const COUPON_CODE = 'TPTHANKS';
interface Props {
	onClose: () => void;
	onScrollToPricing: () => void;
}

export default function EvergreenExitIntentPopup( { onClose, onScrollToPricing }: Props ) {
	const [ copied, setCopied ] = useState( false );

	const copyCode = ( onDone?: () => void ) => {
		const done = () => {
			onDone?.();
		};
		if ( navigator.clipboard ) {
			navigator.clipboard.writeText( COUPON_CODE ).then( done ).catch( () => fallbackCopy( done ) );
		} else {
			fallbackCopy( done );
		}
	};

	const handleCopy = () => {
		copyCode( () => {
			setCopied( true );
			setTimeout( () => setCopied( false ), 2000 );
		} );
	};

	const fallbackCopy = ( done: () => void ) => {
		const el = document.createElement( 'textarea' );
		el.value = COUPON_CODE;
		el.style.position = 'fixed';
		el.style.opacity = '0';
		document.body.appendChild( el );
		el.focus();
		el.select();
		try {
			document.execCommand( 'copy' );
			done();
		} catch {}
		document.body.removeChild( el );
	};

	const handleGetDiscount = () => {
		copyCode( () => toast.success(
			__( 'Coupon code TPTHANKS copied!', 'image-sizes' ),
			{ description: __( 'Paste it at checkout for 20% off.', 'image-sizes' ) }
		) );
		onScrollToPricing();
	};

	return (
		<div
			className="fixed inset-0 z-[99999] flex items-center justify-center bg-black/50"
			onClick={ onClose }
		>
			<div
				className="relative mx-4 w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-2xl"
				onClick={ ( e ) => e.stopPropagation() }
			>
				<button
					onClick={ onClose }
					className="absolute right-4 top-4 rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
					aria-label={ __( 'Close', 'image-sizes' ) }
				>
					<X size={ 18 } />
				</button>

				<div className="p-8 text-center">
					<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-thumbpress-primary/10">
						<Tag className="text-thumbpress-primary" size={ 26 } />
					</div>

					<h2 className="mb-2 text-2xl font-bold text-thumbpress-title">
						{ __( 'A Special Offer Just for You!', 'image-sizes' ) }
					</h2>

					<p className="mb-4 text-thumbpress-body">
						{ __( 'As an existing user, we\'re giving you an exclusive 20% discount on ThumbPress Pro. Copy the code and use it at checkout!', 'image-sizes' ) }
					</p>

					<div className="mb-6 flex items-center justify-between gap-3 rounded-xl border-2 border-dashed border-thumbpress-primary bg-thumbpress-primary/5 px-5 py-4">
						<span className="text-xl font-extrabold tracking-widest text-thumbpress-primary">
							{ COUPON_CODE }
						</span>
						<button
							onClick={ handleCopy }
							className="flex items-center gap-1.5 rounded-lg bg-thumbpress-primary px-3 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
						>
							{ copied
								? <><Check size={ 14 } />{ __( 'Copied!', 'image-sizes' ) }</>
								: <><Copy size={ 14 } />{ __( 'Copy', 'image-sizes' ) }</>
							}
						</button>
					</div>

					<button
						onClick={ handleGetDiscount }
						className="w-full rounded-md bg-thumbpress-primary py-3 text-base font-medium text-white transition-opacity hover:opacity-90"
					>
						{ __( 'Get 20% Off — View Pricing →', 'image-sizes' ) }
					</button>

					<button
						onClick={ onClose }
						className="mt-3 block w-full text-sm text-gray-400 hover:text-gray-600"
					>
						{ __( 'No thanks, I don\'t want a discount', 'image-sizes' ) }
					</button>
				</div>
			</div>
		</div>
	);
}