/**
 * External Dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { Check } from 'lucide-react';

/**
 * Internal Dependencies
 */
import { siteInfo } from '@advancedAds';
import { adminUrl } from '@admin/utils';
import { navigate } from '@admin/router';
import { TextInput } from '@admin/components/TextInput';
import { PrimaryButton } from '@admin/components/PrimaryButton';
import { Card } from '@admin/components/Card';
import { PLACEMENT_SENTENCES, PRO_FEATURES } from '../constants';

export function StepDone( {
	state,
	set,
	errors = {},
	subscribing,
	onSubscribe,
	onEditPlacement,
} ) {
	const sentence =
		PLACEMENT_SENTENCES[ state.placement ] ||
		__( 'in the position you chose', 'advanced-ads' );

	let subscribeLabel = __( 'Subscribe now', 'advanced-ads' );
	if ( state.subscribed ) {
		subscribeLabel = __( 'Subscribed', 'advanced-ads' );
	} else if ( subscribing ) {
		subscribeLabel = __( 'Subscribing…', 'advanced-ads' );
	}

	return (
		<Card className="mb-0 flex flex-col gap-6">
			<div className="flex flex-col gap-5">
				<h1 className="m-0 text-2xl font-light leading-snug">
					{ __(
						'Congratulations, your ad is now published!',
						'advanced-ads'
					) }
				</h1>
				<div className="flex flex-wrap items-start gap-6">
					<p className="m-0 min-w-[280px] flex-1 text-sm leading-relaxed text-gray-600 text-pretty">
						{ sprintf(
							/* translators: %s: where the ad placement will appear, e.g. "in the header of every page". */
							__(
								'We have created a placement for your ad that will display %s. You may edit the placement to change this.',
								'advanced-ads'
							),
							sentence
						) }
					</p>
					{ state.publishResult?.placementEditLink ? (
						<a
							href={ state.publishResult.placementEditLink }
							className="shrink-0 cursor-pointer whitespace-nowrap rounded-md border border-border bg-white px-4 py-2 text-sm font-medium text-gray-700 no-underline hover:text-gray-700"
						>
							{ __( 'Edit the placement', 'advanced-ads' ) }
						</a>
					) : (
						<button
							type="button"
							onClick={ onEditPlacement }
							className="shrink-0 cursor-pointer whitespace-nowrap rounded-md border border-border bg-white px-4 py-2 text-sm font-medium text-gray-700"
						>
							{ __( 'Edit the placement', 'advanced-ads' ) }
						</button>
					) }
				</div>
				<div className="flex flex-wrap items-center gap-6">
					<p className="m-0 min-w-[280px] flex-1 text-sm text-gray-600">
						{ __(
							"See the live ad in your website's frontend.",
							'advanced-ads'
						) }
					</p>
					<div className="shrink-0">
						<PrimaryButton
							href={
								state.publishResult?.postLink ||
								siteInfo.homeUrl
							}
							target="_blank"
						>
							{ __( 'See the live ad', 'advanced-ads' ) }
						</PrimaryButton>
					</div>
				</div>
			</div>

			<div className="flex flex-col gap-4 border-t border-gray-200 pt-7">
				<h2 className="m-0 text-lg font-normal">
					{ __(
						'Subscribe to our newsletter and get 2 add-ons for free',
						'advanced-ads'
					) }
				</h2>
				<div className="flex flex-wrap items-center gap-4">
					<TextInput
						type="email"
						value={ state.email }
						onChange={ ( v ) => set( 'email', v ) }
						placeholder="you@example.com"
						style={ { minWidth: 260, flex: 1 } }
					/>
					<div className="shrink-0">
						<PrimaryButton
							onClick={ onSubscribe }
							disabled={ state.subscribed || subscribing }
						>
							{ subscribeLabel }
						</PrimaryButton>
					</div>
				</div>
				{ errors.subscribe && (
					<p className="m-0 text-sm text-red-700">
						{ errors.subscribe }
					</p>
				) }
			</div>

			<div className="flex flex-col gap-4.5 border-t border-gray-200 pt-7">
				<h2 className="m-0 text-lg font-normal">
					{ __(
						'Upgrade to all features and full support today',
						'advanced-ads'
					) }
				</h2>
				<div className="flex flex-wrap items-start gap-6">
					<p className="m-0 min-w-[300px] flex-1 text-sm leading-relaxed text-gray-600 text-pretty">
						{ __(
							"Our All Access deal offers every drop of ad expertise that we've acquired in more than ten years, distilled into one jam-packed plugin bundle, supported by a dedicated team of real persons eager to help you.",
							'advanced-ads'
						) }
					</p>
					<button
						type="button"
						onClick={ () =>
							navigate( '/plans', { from: 'wizard' } )
						}
						className="shrink-0 cursor-pointer whitespace-nowrap rounded-md border border-secondary-black bg-secondary-black px-4 py-2 text-sm font-medium text-white"
					>
						{ __( 'Upgrade now', 'advanced-ads' ) }
					</button>
				</div>
				<ul className="m-0 flex list-none flex-col gap-3 p-0">
					{ PRO_FEATURES.map( ( f ) => (
						<li
							key={ f.title }
							className="flex items-start gap-2.5 text-sm leading-relaxed text-gray-600"
						>
							<Check
								className="mt-0.5 size-4 shrink-0 text-primary"
								strokeWidth={ 2 }
							/>
							<span>
								<strong className="font-semibold text-gray-900">
									{ f.title }
								</strong>{ ' ' }
								{ f.desc }
							</span>
						</li>
					) ) }
				</ul>
				<p className="m-0 pl-[27px] text-sm text-gray-600">
					{ __( '…and much more!', 'advanced-ads' ) }
				</p>
			</div>

			<div className="flex justify-end border-t border-gray-200 pt-6">
				<a
					href={ adminUrl( 'admin.php?page=advanced-ads' ) }
					className="cursor-pointer whitespace-nowrap rounded-md border border-border bg-white px-4 py-2 text-sm font-medium text-gray-700 no-underline hover:text-gray-700"
				>
					{ __( 'Go to the Dashboard', 'advanced-ads' ) }
				</a>
			</div>
		</Card>
	);
}