import React from '@wordpress/element';
import { TextControl, ToggleControl, TextareaControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { ProChecker } from '../../../components/ProChecker';
import { hasPro } from '../../../utils/hasPro';

const Notifications = ({ shortCodeConfig, updateShortCodeConfig }) => {
	const notifications = shortCodeConfig?.notifications || {};

	const update = (patch) => {
		if (!hasPro) return;
		updateShortCodeConfig('notifications', {
			...notifications,
			...patch,
		});
	};

	return (
		<div className='edbi-shortcode-config__notifications'>
			<div className='edbi-shortcode-builder__settings-head'>
				<h3>{__('Notifications', 'easy-dropbox-integration')}</h3>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div className='edbi-settings-fields__item'>
					<ProChecker>
						<ToggleControl
							label={__('Email me when a file is uploaded', 'easy-dropbox-integration')}
							checked={!!notifications.enabled}
							onChange={(enabled) => update({ enabled })}
							disabled={!hasPro}
						/>
					</ProChecker>

					{notifications.enabled && (
						<>
							<ProChecker>
								<ToggleControl
									label={__('Notify site admin', 'easy-dropbox-integration')}
									help={__('Sends to this site\'s admin email.', 'easy-dropbox-integration')}
									checked={notifications.notifyAdmin ?? true}
									onChange={(notifyAdmin) => update({ notifyAdmin })}
									disabled={!hasPro}
								/>
							</ProChecker>

							<ProChecker>
								<TextControl
									label={__('Additional Recipients', 'easy-dropbox-integration')}
									help={__('Comma-separated email addresses. Use %user_email% for the uploader\'s own address (logged-in users only).', 'easy-dropbox-integration')}
									value={notifications.recipients || ''}
									onChange={(recipients) => update({ recipients })}
								/>
							</ProChecker>

							<ProChecker>
								<TextControl
									label={__('Subject', 'easy-dropbox-integration')}
									placeholder={__('New file uploaded on %site_name%', 'easy-dropbox-integration')}
									value={notifications.subject || ''}
									onChange={(subject) => update({ subject })}
								/>
							</ProChecker>

							<ProChecker>
								<TextareaControl
									label={__('Message', 'easy-dropbox-integration')}
									placeholder={__('%user_name% uploaded "%file_name%" to %folder_path%.', 'easy-dropbox-integration')}
									value={notifications.message || ''}
									onChange={(message) => update({ message })}
								/>
							</ProChecker>

							<div className='edbi-info-box' style={{ marginTop: '15px', padding: '15px', backgroundColor: '#e3f2fd', borderRadius: '4px' }}>
								<p style={{ margin: '0 0 10px 0', fontWeight: 'bold', color: '#1976d2' }}>
									{__('Available merge tags:', 'easy-dropbox-integration')}
								</p>
								<ul style={{ margin: 0, paddingLeft: '20px', color: '#1976d2' }}>
									<li>%file_name% — {__('uploaded file name', 'easy-dropbox-integration')}</li>
									<li>%folder_path% — {__('destination folder', 'easy-dropbox-integration')}</li>
									<li>%user_name% — {__('uploader\'s display name (or "A visitor")', 'easy-dropbox-integration')}</li>
									<li>%user_email% — {__('uploader\'s email (Additional Recipients only, logged-in users only)', 'easy-dropbox-integration')}</li>
									<li>%site_name% — {__('this site\'s name', 'easy-dropbox-integration')}</li>
								</ul>
							</div>
						</>
					)}
				</div>
			</div>
		</div>
	);
};

export default Notifications;