import { Button, Text } from '@bsf/force-ui';
import { __ } from '@wordpress/i18n';
import ModalWrapper from '@AdminComponents/modal-wrapper';
import { cn } from '@Functions/utils';
import NotAllowedMessage from '@AdminComponents/not-allowed';
import { getSurerankUtmUrl } from '@/global/utils/utm';

const SearchConsolePopup = ( { isOpen = true } ) => {
	if ( ! isOpen ) {
		return null;
	}

	const auth_url = surerank_admin_common.auth_url || '';
	return (
		<ModalWrapper isOpen={ isOpen } className="top-[40%] z-[1]">
			<div className="bg-background-primary rounded-lg shadow-2xl w-full p-5 pointer-events-auto border-0.5 border-solid border-border-subtle">
				<div className="flex flex-col items-center w-full">
					<img
						src={ `${ surerank_globals.admin_assets_url }/images/search-console.svg` }
						alt={ __( 'Connect to Search Console', 'surerank' ) }
						className="w-48 sm:w-56 md:w-64 h-auto mb-4"
					/>

					<div className="flex flex-col text-start space-y-1">
						<Text size={ 18 } weight={ 600 } lineHeight={ 28 }>
							{ __(
								'Connect to Google Search Console',
								'surerank'
							) }
						</Text>
						<Text
							size={ 14 }
							weight={ 400 }
							lineHeight={ 20 }
							color="secondary"
						>
							{ __(
								'Get detailed search insights, analytics reports, track performance, and smart suggestions to optimize your site.',
								'surerank'
							) }
						</Text>
						<Text
							size={ 14 }
							weight={ 400 }
							as="a"
							href={ getSurerankUtmUrl(
								'https://surerank.com/docs/google-search-console-surerank/',
								'dashboard',
								'learn_more_gsc'
							) }
							target="_blank"
							rel="noopener noreferrer"
							color="link"
							className="no-underline focus:ring-0"
							aria-label={ __(
								'Learn about Google Search Console and how SureRank uses it for optimizing your website.',
								'surerank'
							) }
						>
							{ __(
								'Learn about Google Search Console.',
								'surerank'
							) }
						</Text>
					</div>

					<hr className="w-full border-solid border-border-subtle border-0.5 my-5" />

					<div className="w-full space-y-3 text-center">
						<Button
							variant="primary"
							size="md"
							className={ cn(
								'w-full',
								auth_url === '' && 'cursor-not-allowed'
							) }
							onClick={ () => window.open( auth_url, '_self' ) }
							disabled={ auth_url === '' }
						>
							{ __(
								'Connect to Search Console - It’s Free',
								'surerank'
							) }
						</Button>
						{ auth_url === '' && <NotAllowedMessage /> }
					</div>
				</div>
			</div>
		</ModalWrapper>
	);
};

export default SearchConsolePopup;
