import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Link2, Sparkles, ChevronRight } from 'lucide-react';

import { Card } from '@admin/components/Card';
import { Icon } from '@admin/components/Icon';
import { PrimaryButton } from '@admin/components/PrimaryButton';
import { SubscribeBanner } from './SubscribeBanner';

function ResourceLinks( { links, variant = 'list' } ) {
	const items = [
		{
			href: links.video,
			icon: 'play-circle',
			label: __(
				'How to enable Auto ads in 30 seconds (video tutorial)',
				'advanced-ads'
			),
		},
		{
			href: links.positions,
			icon: 'book-open',
			label: __(
				'How to choose specific positions for AdSense ad units',
				'advanced-ads'
			),
		},
	];

	if ( 'inline' === variant ) {
		return (
			<div className="mt-6 space-y-2 border-t border-border pt-4">
				{ items.map( ( item ) => (
					<a
						key={ item.href }
						href={ item.href }
						target="_blank"
						rel="noreferrer"
						className="flex items-center gap-2 text-sm text-primary hover:underline"
					>
						<Icon name={ item.icon } className="size-4" />
						{ item.label }
					</a>
				) ) }
			</div>
		);
	}

	return (
		<div className="mt-8">
			<div className="mb-3 text-xs font-medium tracking-wide text-gray-500 uppercase">
				{ __( 'Resources', 'advanced-ads' ) }
			</div>
			<div className="divide-y divide-border overflow-hidden rounded border border-border">
				{ items.map( ( item ) => (
					<a
						key={ item.href }
						href={ item.href }
						target="_blank"
						rel="noreferrer"
						className="flex items-center justify-between gap-3 bg-white px-4 py-3 text-sm text-gray-700 no-underline hover:bg-gray-50 hover:text-primary"
					>
						<span className="flex items-center gap-2.5">
							<Icon
								name={ item.icon }
								className="size-4 shrink-0 text-primary"
							/>
							{ item.label }
						</span>
						<ChevronRight className="size-4 shrink-0 text-gray-400" />
					</a>
				) ) }
			</div>
		</div>
	);
}

/**
 * The AdSense tab's account card component.
 *
 * @param {Object} props
 * @param {Object} props.data Connection state from the backend.
 * @param {boolean} props.hasToken Whether the user has a valid AdSense token.
 */
export function AdSenseAccountOverview( { data, hasToken } ) {
	const handleManual = () => {
		const settings = document.querySelector(
			'.adsense-account-settings'
		).classList;
		settings.remove( 'hidden' );
		settings.add( 'm-0!' );
		document
			.querySelector( '.adsense-account-overview-block' )
			.classList.add( 'hidden' );
	};

	return (
		<>
			{ ! hasToken && ! data.adsenseId && (
				<Card className="adsense-account-overview-block">
					<div className="mb-1 text-base font-semibold text-gray-900">
						{ __( 'Connect your AdSense account', 'advanced-ads' ) }
					</div>
					<div className="mb-6 text-sm text-gray-500">
						{ __(
							'Sync your ads and let Advanced Ads manage placements for you.',
							'advanced-ads'
						) }
					</div>
					<div className="grid items-stretch gap-6 md:grid-cols-[1fr_auto_1fr]">
						<div className="flex flex-col rounded-lg border border-border p-6">
							<div className="mb-4 flex size-10 items-center justify-center rounded-full bg-blue-50 text-primary">
								<Link2 className="size-5" />
							</div>
							<div className="mb-1.5 text-base font-semibold text-gray-900">
								{ __(
									'Yes, I have an AdSense account',
									'advanced-ads'
								) }
							</div>
							<div className="mb-5 flex-1 text-sm text-gray-500">
								{ __(
									'Connect it in one click, or enter your details manually.',
									'advanced-ads'
								) }
							</div>
							<div className="flex flex-col gap-2.5">
								<PrimaryButton href={ data.authUrl }>
									{ __(
										'Connect to AdSense',
										'advanced-ads'
									) }
								</PrimaryButton>
								<button
									onClick={ handleManual }
									type="button"
									className="inline-flex items-center gap-2 cursor-pointer rounded bg-white border border-primary px-4 py-2 text-sm font-medium text-primary hover:bg-blue-50"
								>
									{ __(
										'Configure everything manually',
										'advanced-ads'
									) }
								</button>
							</div>
						</div>
						<div className="hidden flex-col items-center justify-center gap-2 text-gray-400 md:flex">
							<div className="w-px flex-1 bg-border"></div>
							<span className="text-xs font-medium tracking-wide uppercase">
								{ __( 'or', 'advanced-ads' ) }
							</span>
							<div className="w-px flex-1 bg-border"></div>
						</div>
						<div className="flex flex-col rounded-lg border border-border p-6">
							<div className="mb-4 flex size-10 items-center justify-center rounded-full bg-blue-50 text-primary">
								<Sparkles className="size-5" />
							</div>
							<div className="mb-1.5 text-base font-semibold text-gray-900">
								{ __(
									'No AdSense account yet?',
									'advanced-ads'
								) }
							</div>
							<div className="mb-5 flex-1 text-sm text-gray-500">
								{ __(
									"We'll help you create one and get approved in a few clicks.",
									'advanced-ads'
								) }
							</div>
							<PrimaryButton
								href={ data.links.signup }
								target="_blank"
							>
								{ __(
									'Get a free AdSense account',
									'advanced-ads'
								) }
							</PrimaryButton>
						</div>
					</div>
					<div className="mt-5 text-sm text-gray-500">
						{ createInterpolateElement(
							__(
								'See all <a>recommended ad networks</a>.',
								'advanced-ads'
							),
							{
								a: (
									// eslint-disable-next-line jsx-a11y/anchor-has-content -- content supplied by createInterpolateElement.
									<a
										href={ data.links.networks }
										target="_blank"
										rel="noreferrer"
										className="text-primary no-underline hover:underline"
									/>
								),
							}
						) }
					</div>
				</Card>
			) }

			<ResourceLinks links={ data.links } />

			{ data.showSubscribe && <SubscribeBanner /> }
		</>
	);
}