import React, { useEffect, useState, useContext, createRoot } from '@wordpress/element';
import {
	Button,
	SelectControl,
	ToggleControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { GoSync, GoClock, GoFileDirectory } from 'react-icons/go';
import ModalHeader from '../../../components/modal/ModalHeader';
import Context, { ThemeContext } from '../../../file-browser/Provider/Context';
import FileBrowser from '../../../common/FileBrowser';
import { showAlert } from '../../../utils/alertHelper';
import { hasPro } from '../../../utils/hasPro';
import { ProChecker } from '../../../components/ProChecker';

const AutoSync = ({ settings, setSettings }) => {
	const defaultAutoSync = {
		enabled: false,
		schedule: 'hourly',
		type: 'all',
		folders: [],
		last_sync: '',
	};

	const isPlanPro = hasPro;
	const upgradeUrl = EDBIData?.upgradeUrl;
	const [isManualSyncing, setManualSyncing] = useState(false);

	useEffect(() => {
		if ( ! isPlanPro ) {
			return;
		}

		const currentAutoSync = settings.auto_sync;

		if ( ! currentAutoSync ) {
			setSettings({
				...settings,
				auto_sync: defaultAutoSync,
			});

			return;
		}

		const normalizedAutoSync = {
			...defaultAutoSync,
			...currentAutoSync,
			folders: Array.isArray( currentAutoSync.folders )
				? currentAutoSync.folders
				: defaultAutoSync.folders,
		};

		let needsUpdate = false;

		if ( ! currentAutoSync.type ) {
			normalizedAutoSync.type = 'all';
			needsUpdate = true;
		}

		if ( ! Array.isArray( currentAutoSync.folders ) ) {
			normalizedAutoSync.folders = defaultAutoSync.folders;
			needsUpdate = true;
		}

		if ( currentAutoSync.last_sync === undefined ) {
			normalizedAutoSync.last_sync = '';
			needsUpdate = true;
		}

		if ( needsUpdate ) {
			setSettings({
				...settings,
				auto_sync: normalizedAutoSync,
			});
		}
	}, [settings, setSettings, isPlanPro]);

	const autoSync = {
		...defaultAutoSync,
		...( settings.auto_sync || {} ),
		folders: Array.isArray( settings.auto_sync?.folders )
			? settings.auto_sync.folders
			: defaultAutoSync.folders,
	};

	const [selectedFolders, setSelectedFolders] = useState( autoSync.folders );

	useEffect(() => {
		setSelectedFolders( autoSync.folders );
	}, [autoSync.folders]);

	const scheduleOptions = [
		{ value: 'every_five_minutes', label: __('Every 5 Minutes', 'easy-dropbox-integration') },
		{ value: 'every_fifteen_minutes', label: __('Every 15 Minutes', 'easy-dropbox-integration') },
		{ value: 'every_thirty_minutes', label: __('Every 30 Minutes', 'easy-dropbox-integration') },
		{ value: 'hourly', label: __('Hourly', 'easy-dropbox-integration') },
		{ value: 'twicedaily', label: __('Twice Daily', 'easy-dropbox-integration') },
		{ value: 'daily', label: __('Daily', 'easy-dropbox-integration') },
	];

	const syncScopeOptions = [
		{ value: 'all', label: __('All Folders', 'easy-dropbox-integration') },
		{ value: 'specific', label: __('Selected Folders', 'easy-dropbox-integration') },
	];

	const formatLastSync = () => {
		if ( ! autoSync.last_sync ) {
			return __('Never', 'easy-dropbox-integration');
		}

		const date = new Date( autoSync.last_sync );
		return date.toLocaleString();
	};

	const openFolderSelection = () => {
		Swal.fire({
			customClass: 'edbi-swal-modal',
			title: __('Select folders to sync', 'easy-dropbox-integration'),
			html: '<div id="edbi-auto-sync-folder-selection"></div>',
			showConfirmButton: false,
			didOpen: () => {
				const root = document.getElementById( 'edbi-auto-sync-folder-selection' );
				let reactRoot = null;

				const FolderSelectionModal = () => {
					const { selectedItems, setSelectedItems, setBulkMode } = useContext( ThemeContext );
					const [hasInitialized, setHasInitialized] = useState( false );

					useEffect(() => {
						if ( ! hasInitialized ) {
							setSelectedItems({
								files: [],
								folders: selectedFolders,
							});
							setHasInitialized( true );
						}
					}, [hasInitialized, setSelectedItems]);

					useEffect(() => {
						setBulkMode( true );
					}, [setBulkMode]);

					const handleSave = () => {
						const newFolders = selectedItems?.folders || [];
						setSelectedFolders( newFolders );
						setSettings({
							...settings,
							auto_sync: {
								...autoSync,
								folders: newFolders,
							},
						});
						Swal.close();
					};

					const handleClose = () => {
						setSelectedItems({
							files: [],
							folders: selectedFolders,
						});
						Swal.close();
					};

					return (
						<>
							<ModalHeader
								title={__('Auto Sync - Select Folders', 'easy-dropbox-integration')}
								onClickDone={handleSave}
								onClickClose={handleClose}
							/>
							<div className='!p-0 bg-[#F0F0F1] edbi-modal-browser'>
								<FileBrowser
									config={{
										showHeader: true,
										showUploader: false,
										showBreadcrumb: true,
										showAccount: true,
										showMoreMenu: false,
										showFiles: false,
										showFolder: true,
										className: 'not-fixed-header',
									}}
									folderSelectOnly={true}
									enableSelected={true}
									enableGallery={false}
									selectedItems={selectedItems}
									setSelectedItems={setSelectedItems}
								/>
							</div>
						</>
					);
				};

				if ( root ) {
					reactRoot = createRoot( root );
					reactRoot.render(
						<Context>
							<FolderSelectionModal />
						</Context>
					);
				}

				const popup = Swal.getPopup();
				if ( popup ) {
					popup.reactRoot = reactRoot;
				}
			},
			willClose: () => {
				const popup = Swal.getPopup();
				if ( popup && popup.reactRoot ) {
					popup.reactRoot.unmount();
				}
			},
		});
	};

	const handleManualSync = () => {
		if ( isManualSyncing ) {
			return;
		}

		setManualSyncing( true );

		const syncRequest = wp.ajax.post( 'edbi_manual_file_sync', {
			nonce: EDBIData.ajaxNonce,
		} );

		syncRequest
			.done( ( response ) => {
				showAlert({
					title: __('Manual sync requested', 'easy-dropbox-integration'),
					text:
						response?.data?.message ||
						__(
							'The Dropbox cache is being refreshed. Check back in a few moments.',
							'easy-dropbox-integration'
						),
					icon: 'success',
					toast: true,
					timer: 4000,
					timerProgressBar: true,
				});
			} )
			.fail( () => {
				showAlert({
					title: __('Sync failed', 'easy-dropbox-integration'),
					text: __('Unable to start manual sync. Please try again.', 'easy-dropbox-integration'),
					icon: 'error',
					toast: true,
					timer: 4000,
					timerProgressBar: true,
				});
			} )
			.always( () => {
				setManualSyncing( false );
			} );
	};

	if ( ! isPlanPro ) {
		return (
			<>
				<div className="edbi-settings-header">
					<div className="edbi-settings-header__title-wrapper">
						<h3>
							<GoSync style={{ marginRight: '10px' }} />
							{__('Synchronization', 'easy-dropbox-integration')}
						</h3>
						<div className="edbi-settings-description">
							{__(
								'Synchronization Settings',
								'easy-dropbox-integration'
							)}
						</div>
					</div>
				</div>
				<div className="edbi-shortcode-builder__container">
					<div className="edbi-settings-fields__item">
						<p className="edbi-settings-description">
							{__(
								'Automatic synchronization is available only in Easy Dropbox Integration Pro. Upgrade to schedule file cache refreshes and unlock manual sync control.',
								'easy-dropbox-integration'
							)}
						</p>
						<Button
							className="edbi-button edbi-button--primary"
							onClick={() => {
								const url = upgradeUrl || 'https://ultradevs.com/easy-dropbox-integration-premium/';
								window.open( url, '_blank' );
							}}
						>
							{__('Upgrade to PRO', 'easy-dropbox-integration')}
						</Button>
					</div>
				</div>
			</>
		);
	}

	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<GoSync style={{ marginRight: '10px' }} />
						{__('Synchronization', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Synchronization Settings',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>

			<div className='edbi-flex'>
				<div className="edbi-shortcode-builder__container edbi-extend-wp-core-input">
					<div className="edbi-settings-fields__item ">
						<h3 className="edbi-settings-tools__title">
							{__('Enable Auto Sync', 'easy-dropbox-integration')}
						</h3>
						<p className="edbi-settings-description">
							{__(
								'Enable local cache synchronization with your Dropbox files and keep the stored file list up to date on a regular schedule.',
								'easy-dropbox-integration'
							)}
							<br />
							{__(
								'For ad-hoc module refreshes append ?module_refresh=1 to your settings page URL.',
								'easy-dropbox-integration'
							)}
						</p>
						<ProChecker tooltipDirection='top'>
							<ToggleControl
								label={
									autoSync.enabled
										? __('Auto Sync Enabled', 'easy-dropbox-integration')
										: __('Auto Sync Disabled', 'easy-dropbox-integration')
								}
								checked={autoSync.enabled}
								onChange={(enabled) =>
									setSettings({
										...settings,
										auto_sync: {
											...autoSync,
											enabled,
										},
									})
								}
							/>
						</ProChecker>
					</div>

					{autoSync.enabled && (
						<>
							<div className="edbi-settings-fields__item">
								<h3 className="edbi-settings-tools__title">
									<GoClock style={{ marginRight: '8px' }} />
									{__('Sync Schedule', 'easy-dropbox-integration')}
								</h3>
								<SelectControl
									label={__('Frequency', 'easy-dropbox-integration')}
									value={autoSync.schedule}
									options={scheduleOptions}
									onChange={(schedule) =>
										setSettings({
											...settings,
											auto_sync: {
												...autoSync,
												schedule,
											},
										})
									}
								/>
								<p className="edbi-settings-description">
									{__('Choose how often to sync your Dropbox files. More frequent syncs may impact server performance.', 'easy-dropbox-integration')}
								</p>
							</div>

							<div className="edbi-settings-fields__item">
								<h3 className="edbi-settings-tools__title">
									{__('Sync Scope', 'easy-dropbox-integration')}
								</h3>
								<SelectControl
									label={__('Scope', 'easy-dropbox-integration')}
									value={autoSync.type}
									options={syncScopeOptions}
									onChange={(type) =>
										setSettings({
											...settings,
											auto_sync: {
												...autoSync,
												type,
											},
										})
									}
								/>
								<p className="edbi-settings-description">
									{__(
										'Choose whether to sync everything or keep a subset of folders cached on your server.',
										'easy-dropbox-integration'
									)}
								</p>

								{autoSync.type === 'specific' && (
									<>
										<Button className="edbi-button edbi-button--primary edbi-settings-tools__btn" onClick={openFolderSelection}>
											<GoFileDirectory style={{ fontSize: '1.2em', marginRight: '8px' }} />
											{__('Select Folders', 'easy-dropbox-integration')}
										</Button>
										<div className="edbi-flex edbi-selected-folders">
											{selectedFolders?.length ? (
												selectedFolders.map((item, index) => (
													<span key={index} className="edbi-badge edbi-badge--info" style={{ padding: '5px 10px' }}>
														{item.name || item.path || '/'}
													</span>
												))
											) : (
												<p className="edbi-settings-description">
													{__('No folders selected yet.', 'easy-dropbox-integration')}
												</p>
											)}
										</div>
									</>
								)}
							</div>

							{autoSync.last_sync && (
								<div className="edbi-settings-fields__item">
									<p className="edbi-settings-description">
										<strong>{__('Last sync:', 'easy-dropbox-integration')}</strong> {formatLastSync()}
									</p>
								</div>
							)}
						</>
					)}
				</div>
				<div className="edbi-shortcode-builder__container">
					<div className="edbi-settings-fields__item">
						<h3 className="edbi-settings-tools__title">
							{__('Manual Sync', 'easy-dropbox-integration')}
						</h3>
						<ProChecker tooltipDirection='top'>
							<Button
								className="edbi-button edbi-button--primary"
								onClick={handleManualSync}
								disabled={isManualSyncing}
							>
								{isManualSyncing
									? __('Syncing...', 'easy-dropbox-integration')
									: __('Sync Now', 'easy-dropbox-integration')}
							</Button>
						</ProChecker>
						<p className="edbi-settings-description">
							{__(
								'Run a manual sync any time to refresh the cached Dropbox files instantly.',
								'easy-dropbox-integration'
							)}
						</p>
					</div>
				</div>
			</div>
		</>
	);
};

export default AutoSync;