import {
	Description,
	DialogTitle,
	Field,
	Input,
	Label,
} from '@headlessui/react';
import { __ } from '@wordpress/i18n';
import { check, chevronRight, external, Icon } from '@wordpress/icons';
import { isEmail } from '@wordpress/url';
import classNames from 'classnames';

export const SetupPlugins = ({
	plugins,
	setPlugins,
	handleCreateAccounts,
	email,
	setEmail,
	handleClose,
	marketingConsent,
	setMarketingConsent,
	termsAgreed,
	setTermsAgreed,
}) => {
	const isCreateAccountsEnabled =
		isEmail(email) && termsAgreed && plugins?.some((plugin) => plugin.selected);

	const togglePlugin = (pluginTitle) => {
		setPlugins(
			plugins?.map((plugin) => {
				if (plugin.title !== pluginTitle) {
					return plugin;
				}

				return {
					...plugin,
					selected: !plugin?.selected,
				};
			}),
		);
	};

	return (
		<div className="py-10 px-16">
			<DialogTitle className="text-2xl font-semibold text-center text-gray-900 mb-10 font-sans">
				{__(
					"Almost done! Let's finish setting up your plugins",
					'extendify-local',
				)}
			</DialogTitle>

			<div className="space-y-3 mb-8">
				{plugins?.map((plugin) => {
					const isSelected = plugin.selected;
					return (
						<div
							key={plugin.title}
							className={classNames(
								'w-full flex items-center gap-4 p-4 rounded-lg border-2 text-left transition-colors',
								isSelected
									? 'border-[#1A5130] bg-[#1A5130]/5'
									: 'border-gray-300 bg-white hover:border-gray-400',
							)}
						>
							<div className="shrink-0 self-baseline">
								<img
									alt=""
									src={plugin.image}
									className="w-8 h-8 rounded-full"
								/>
							</div>
							<div className="flex-1 min-w-0">
								<div className="font-semibold text-gray-900 mb-1">
									{plugin.title}
								</div>
								<div className="text-sm text-gray-700">
									{plugin.description}{' '}
									{plugin.termOfServiceLink && (
										<a
											href={plugin.termOfServiceLink}
											onClick={(e) => e.stopPropagation()}
											target="_blank"
											rel="noopener noreferrer"
											className="text-gray-900 underline hover:underline"
										>
											{__('Term of Service', 'extendify-local')}
											<Icon
												icon={external}
												size={18}
												className="ml-0.5 inline"
											/>
										</a>
									)}
								</div>
							</div>
							<Icon
								icon={check}
								onClick={() => togglePlugin(plugin.title)}
								className={classNames(
									'shrink-0 rounded-full transition-colors cursor-pointer',
									isSelected
										? 'bg-[#1A5130] fill-white'
										: 'bg-gray-200 fill-transparent',
								)}
							/>
						</div>
					);
				})}
			</div>

			<Field className="mb-8">
				<Label className="block text-sm font-medium text-gray-900 mb-2">
					{__('Email address', 'extendify-local')}
				</Label>
				<Input
					required
					type="email"
					value={email}
					onChange={(e) => setEmail(e.target.value)}
					placeholder="admin@example.com"
					className="text-gray-900 w-full px-4 py-3 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-extendify-main focus:border-transparent"
				/>
				<Description className="mt-2 text-xss text-gray-700">
					{__(
						'This email will be used to create accounts with the selected plugin providers. Form protected by reCAPTCHA.',
						'extendify-local',
					)}
				</Description>
			</Field>

			<label className="flex items-start gap-3 mb-4 cursor-pointer">
				<input
					type="checkbox"
					checked={termsAgreed}
					onChange={(e) => setTermsAgreed(e.target.checked)}
					className="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-extendify-main focus:ring-extendify-main"
				/>
				<span className="text-xs/relaxed text-gray-700">
					{__(
						'I agree to create accounts with the selected providers using my email address, and to their applicable Terms of Service.',
						'extendify-local',
					)}
				</span>
			</label>

			<label className="flex items-start gap-3 mb-8 cursor-pointer">
				<input
					type="checkbox"
					checked={marketingConsent}
					onChange={(e) => setMarketingConsent(e.target.checked)}
					className="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-extendify-main focus:ring-extendify-main"
				/>
				<span className="text-xs/relaxed text-gray-700">
					{__(
						'I wish to receive communications about news and/or promotions from selected providers.',
						'extendify-local',
					)}
				</span>
			</label>

			<div className="flex items-center gap-4">
				<button
					type="button"
					onClick={() => handleClose()}
					className="px-6 py-3 text-base font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-extendify-main"
				>
					{__('No thanks', 'extendify-local')}
				</button>
				<button
					type="button"
					onClick={handleCreateAccounts}
					disabled={!isCreateAccountsEnabled}
					className={classNames(
						'ml-auto px-6 py-3 text-base font-medium text-white bg-extendify-main rounded-lg hover:bg-extendify-main-dark focus:outline-none focus:ring-2 focus:ring-extendify-main focus:ring-offset-2 flex items-center gap-2',
						{ 'cursor-not-allowed opacity-50': !isCreateAccountsEnabled },
					)}
				>
					{__('Create accounts', 'extendify-local')}
					<Icon size={22} icon={chevronRight} className="fill-white" />
				</button>
			</div>
		</div>
	);
};