import { useEffect, createRoot, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Panel, PanelBody, BaseControl, ToggleControl, TextControl, Button, ButtonGroup, FormTokenField, Flex } from '@wordpress/components';
import { FaUsers, FaDatabase, FaFolderOpen, FaCog, FaEye, FaTag, FaUser, FaShieldAlt, FaCheck, FaTrash } from 'react-icons/fa';
import { ProChecker } from '../../../components/ProChecker';
import { hasPro } from '../../../utils/hasPro';

import './scss/private-folders.scss';

const folderBrowserConfig = {
	showHeader: true,
	showUploader: false,
	showBreadcrumb: true,
	showAccount: true,
	showMoreMenu: false,
	showFiles: false,
	showFolder: true,
	className: 'not-fixed-header',
	shortcodeBuilder: true,
};

const normalizeFolder = (folder) => ({
	id: folder?.id ?? '',
	name: folder?.name ?? '',
	path: folder?.path || folder?.name || '',
	accountId: folder?.account_id ?? '',
});

const openFolderSelectorModal = ({ containerId, modalTitle, currentFolder, onSelect, isSingleFolderSelector }) => {
	Swal.fire({
		customClass: 'edbi-swal-modal',
		html: `<div id="${containerId}"></div>`,
		showConfirmButton: false,
		title: false,
		didOpen: () => {
			const root = document.getElementById(containerId);
			if (!root) {
				return;
			}

			const sanitizedFolder = normalizeFolder(currentFolder);
			let reactRoot = null;

			const RootComponent = () => (
				<window.EDBIFileBrowser
					title={modalTitle}
					onDone={(selectedItems) => {
						const folder = selectedItems?.folders?.[0] || null;
						console.log('folder', folder);
						onSelect(folder ? normalizeFolder(folder) : normalizeFolder(null));
						Swal.close();
					}}
					onClose={() => {
						Swal.close();
					}}
					isSingleFolderSelector={isSingleFolderSelector}
					config={folderBrowserConfig}
					folderSelectOnly={true}
					enableFolderSelect={true}
					enableSelected={true}
					enableGallery={false}
					initialSelectedItems={{
						files: [],
						folders: sanitizedFolder.id ? [sanitizedFolder] : [],
					}}
				/>
			);

			reactRoot = createRoot(root);
			reactRoot.render(<RootComponent />);

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

const PrivateFolders = (props) => {
	const { settings, setSettings, isSaving, setSaving } = props;

	// Initialize private folders settings if not exists
	useEffect(() => {
		if (!settings.privateFolders) {
			setSettings({
				...settings,
				privateFolders: {
					autoCreate: 'yes',
					deleteOnUserDelete: 'no',
					allowedRoles: ['editor', 'author', 'contributor', 'subscriber'],
					nameTemplate: '%user_login%',
					parentFolderType: 'home',
					parentFolder: { id: '', name: '', path: '', accountId: '' },
					templateFolder: { id: '', name: '', path: '', accountId: '' },
					syncScope: 'all',
					mergeFolders: 'yes',
					shareFolder: 'no',
					showInDashboard: 'yes',
				},
			});
		}
	}, []);

	const pfSettings = settings.privateFolders || {};
	const filterOptions = EDBIData?.availableFilters || [];

	const updateSetting = (key, value) => {
		console.log(key, value);
		setSettings({
			...settings,
			privateFolders: {
				...pfSettings,
				[key]: value,
			},
		});
	};

	console.log( 'settings', settings.privateFolders)

	const onFiltersChange = (tokens) => {
		const newFilters = tokens.map((token) => {
			const option = filterOptions.find((o) => o.label === token);
			return option ? option.value : token;
		});
		updateSetting('allowedRoles', newFilters);
	};

	// Parent folder selector
	const openParentFolderSelector = () => {
		const currentFolder = normalizeFolder(pfSettings.parentFolder);

		openFolderSelectorModal({
			containerId: 'edbi-parent-folder-selection',
			modalTitle: __('Select Parent Folder', 'easy-dropbox-integration'),
			currentFolder,
			isSingleFolderSelector: true,
			onSelect: (folder) => {
				updateSetting('parentFolder', folder);
			},
		});
	};

	// Template folder selector
	const openTemplateFolderSelector = () => {
		const currentFolder = normalizeFolder(pfSettings.templateFolder);

		openFolderSelectorModal({
			containerId: 'edbi-template-folder-selection',
			modalTitle: __('Select Template Folder', 'easy-dropbox-integration'),
			currentFolder,
			isSingleFolderSelector: true,
			onSelect: (folder) => {
				updateSetting('templateFolder', folder);
			},
		});
	};

	// Tag insertion logic
	const insertTag = (tag) => {
		const input = document.getElementById('pf-name-template-input');
		if (input) {
			const cursorPos = input.selectionStart || 0;
			const endPos = input.selectionEnd || 0;
			const currentVal = pfSettings.nameTemplate || '';
			const newVal = currentVal.substring(0, cursorPos) + tag + currentVal.substring(endPos);
			
			updateSetting('nameTemplate', newVal);
			
			// Give React time to re-render, then restore focus and cursor
			setTimeout(() => {
				const refreshedInput = document.getElementById('pf-name-template-input');
				if (refreshedInput) {
					refreshedInput.focus();
					const newPos = cursorPos + tag.length;
					refreshedInput.setSelectionRange(newPos, newPos);
				}
			}, 50);
		}
	};

	const renderAvailableTags = () => {
		const groups = [
			{
				title: __('User Tags', 'easy-dropbox-integration'),
				icon: <FaUser />,
				tags: [
					{ tag: '%user_login%', label: 'User username' },
					{ tag: '%user_email%', label: 'User email address' },
					{ tag: '%first_name%', label: 'User first name' },
					{ tag: '%last_name%', label: 'User last name' },
					{ tag: '%display_name%', label: 'User display name' },
					{ tag: '%user_id%', label: 'User ID' },
					{ tag: '%user_role%', label: 'User primary role' },
					{ tag: '%user_meta_{key}%', label: 'Custom user meta field' },
				]
			},
			{
				title: __('Post Tags', 'easy-dropbox-integration'),
				icon: <FaDatabase />,
				tags: [
					{ tag: '%post_id%', label: 'Post ID' },
					{ tag: '%post_title%', label: 'Post title' },
					{ tag: '%post_slug%', label: 'Post slug' },
					{ tag: '%post_author%', label: 'Post author ID' },
					{ tag: '%post_date%', label: 'Post date' },
					{ tag: '%post_modified%', label: 'Post modified date' },
					{ tag: '%post_type%', label: 'Post type' },
					{ tag: '%post_status%', label: 'Post status' },
				]
			},
			{
				title: __('WooCommerce Tags', 'easy-dropbox-integration'),
				icon: <FaCheck />,
				tags: [
					{ tag: '%wc_product_name%', label: 'Product name' },
					{ tag: '%wc_product_id%', label: 'Product ID' },
					{ tag: '%wc_product_sku%', label: 'Product SKU' },
					{ tag: '%wc_product_price%', label: 'Product price' },
					{ tag: '%wc_product_sale_price%', label: 'Product sale price' },
				]
			},
			{
				title: __('System & Form Tags', 'easy-dropbox-integration'),
				icon: <FaTag />,
				tags: [
					{ tag: '%entry_id%', label: 'Form entry ID' },
					{ tag: '%form_id%', label: 'Form ID' },
					{ tag: '%form_title%', label: 'Form title' },
					{ tag: '%date%', label: 'Current date (Y-m-d)' },
					{ tag: '%time%', label: 'Current time (H:i:s)' },
					{ tag: '%unique_id%', label: 'Unique ID (UUID)' },
				]
			}
		];

		return (
			<div className="edbi-pf-tags-modern">
				<label className="edbi-pf-tags-modern__header">
					<FaTag style={{ marginRight: '8px' }} />
					{__('Available Smart Tags', 'easy-dropbox-integration')}
				</label>
				
				<Panel className="edbi-pf-tags-accordion edbi-settings-panel">
					{groups.map((group) => (
						<PanelBody
							key={group.title}
							title={
								<div className="edbi-pf-tags-modern__group-title">
									{group.icon}
									<span>{group.title}</span>
								</div>
							}
							initialOpen={false}
						>
							<div className="edbi-pf-tags-modern__list">
								{group.tags.map(({ tag, label }) => (
									<button
										key={tag}
										type="button"
										className="edbi-pf-tags-modern__tag"
										title={label}
										onClick={() => insertTag(tag)}
									>
										{tag}
									</button>
								))}
							</div>
						</PanelBody>
					))}
				</Panel>

				<div className="edbi-pf-tags-modern__footer">
					{__('Click any tag to insert it into the folder name template above.', 'easy-dropbox-integration')}
				</div>
			</div>
		);
	};

	const upgradeUrl = EDBIData?.upgradeUrl;

	if ( ! hasPro ) {
		return (
			<>
				<div className="edbi-settings-header">
					<div className="edbi-settings-header__title-wrapper">
						<h3>
							<FaUsers style={{ marginRight: '10px' }} />
							{__('Private Folders', 'easy-dropbox-integration')}
						</h3>
						<div className="edbi-settings-description">
							{__(
								'Configure automatic private folder creation for users when they register.',
								'easy-dropbox-integration'
							)}
						</div>
					</div>
				</div>
				<div className="edbi-shortcode-builder__container">
					<div className="edbi-settings-fields__item">
						<p className="edbi-settings-description">
							{__(
								'Private folders are available only in Easy Dropbox Integration Pro. Upgrade to unlock private folders.',
								'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>
						<FaUsers style={{ marginRight: '10px' }} />
						{__('Private Folders', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Configure automatic private folder creation for users when they register.',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>

			{/* General Settings */}
			<div className="edbi-shortcode-builder__container">
				<h3 className="edbi-shortcode-appearance-title">
					<FaCog style={{ marginRight: '8px' }} />
					{__('General Settings', 'easy-dropbox-integration')}
				</h3>

				<ToggleControl
					label={__('Auto Create', 'easy-dropbox-integration')}
					help={__(
						'Automatically create a private folder when a new user registers.',
						'easy-dropbox-integration'
					)}
					checked={pfSettings.autoCreate === 'yes'}
					onChange={(checked) => updateSetting('autoCreate', checked ? 'yes' : 'no')}
				/>

				<ToggleControl
					id="pf-delete-on-user-delete"
					label={__('Delete on User Delete', 'easy-dropbox-integration')}
					help={__(
						'Automatically delete the private folder when a WordPress user is deleted.',
						'easy-dropbox-integration'
					)}
					checked={pfSettings.deleteOnUserDelete === 'yes'}
					onChange={(checked) => updateSetting('deleteOnUserDelete', checked ? 'yes' : 'no')}
				/>

				<ToggleControl
					checked={pfSettings.mergeFolders === 'yes'}
					onChange={(checked) => updateSetting('mergeFolders', checked ? 'yes' : 'no')}
					label={__('Merge Folders', 'easy-dropbox-integration')}
					help={__(
						'If a folder with the same name exists, use it instead of creating a new one.',
						'easy-dropbox-integration'
					)}
				/>

				<ToggleControl
					checked={pfSettings.shareFolder === 'yes'}
					onChange={(checked) => updateSetting('shareFolder', checked ? 'yes' : 'no')}
					label={__('Share Folder with User', 'easy-dropbox-integration')}
					help={__(
						'Automatically share the private folder with the user via Dropbox.',
						'easy-dropbox-integration'
					)}
				/>
			</div>
			<div className="edbi-shortcode-builder__container edbi-filter-roles-container">
				<BaseControl
					id="pf-allowed-roles"
					label={
						<span className="edbi-label-with-icon">
							<FaShieldAlt style={{ marginRight: '8px', color: 'var(--edbi-primary-color)' }} />
							{__('Filter User Roles or Specific Users', 'easy-dropbox-integration')}
						</span>
					}
					help={__(
						'Select which user roles or specific users should get private folders. Search by role name or user email.',
						'easy-dropbox-integration'
					)}
					className="edbi-input-base-control"
				>
					<FormTokenField
						label=""
						value={(pfSettings.allowedRoles || []).map((val) => {
							const normalizedVal = val.includes(':') ? val : `role:${val}`;
							const option = filterOptions.find((o) => o.value === normalizedVal);
							return option ? option.label : val;
						})}
						suggestions={filterOptions.map((o) => o.label)}
						onChange={onFiltersChange}
						__experimentalExpandOnFocus
						__experimentalValidateOnBlur
					/>
				</BaseControl>
			</div>

			{/* Folder Settings */}
			<div className="edbi-shortcode-builder__container">
				<h3 className="edbi-shortcode-appearance-title">
					<FaFolderOpen style={{ marginRight: '8px' }} />
					{__('Folder Settings', 'easy-dropbox-integration')}
				</h3>

				<BaseControl
					id="pf-name-template"
					label={__('Folder Name Template', 'easy-dropbox-integration')}
					help={__(
						'Use tags to create dynamic folder names. Example: %user_login% (%user_email%)',
						'easy-dropbox-integration'
					)}
					className='edbi-extend-wp-core-input'
				>
					<TextControl
						id="pf-name-template-input"
						value={pfSettings.nameTemplate || ''}
						onChange={(value) => updateSetting('nameTemplate', value)}
						placeholder="%user_login%"
					/>
				</BaseControl>

				{renderAvailableTags()}
			</div>

			<div className="edbi-shortcode-builder__container">
				{/* Parent Folder Selection */}
				<BaseControl
					id="pf-parent-folder"
					label={__('Parent Folder', 'easy-dropbox-integration')}
					help={__(
						'Choose where to create private folders. Use home directory or select a specific folder.',
						'easy-dropbox-integration'
					)}
					className='edbi-extend-wp-core-input'
				>
						<ButtonGroup className="edbi-button-group">
							<Button
								isPrimary={pfSettings.parentFolderType === 'home' }
								onClick={() => {
									updateSetting('parentFolderType', 'home');
									// updateSetting('parentFolder', { id: '', name: '', path: '', accountId: '' });
								}}
								className="edbi-button"
							>
								{__('Home Directory', 'easy-dropbox-integration')}
							</Button>
							<Button
								isPrimary={pfSettings.parentFolderType === 'custom'}
								onClick={() => updateSetting('parentFolderType', 'custom')}
								className="edbi-button"
							>
								{__('Select Folder', 'easy-dropbox-integration')}
							</Button>
						</ButtonGroup>
						{pfSettings.parentFolderType === 'custom' && (
							<div class="edbi-setting-select-folder">
								<Button
									// isSecondary
									onClick={openParentFolderSelector}
									className='edbi-button edbi-button--small'
								>
									{__('Browse Folders', 'easy-dropbox-integration')}
								</Button>
								{pfSettings.parentFolder?.id && (
									<div className='edbi-setting-select-folder__selected'>
										
										<div className='edbi-selected-folders'>
											<span className='edbi-badge edbi-badge--small edbi-badge--info' style={{
												padding: '8px 16px'
											}}>
												{pfSettings.parentFolder.name}
											</span>
										</div>
										<div
											onClick={() => updateSetting('parentFolder', { id: '', name: '', path: '', accountId: '' })}
											title={__('Clear', 'easy-dropbox-integration')}
										>
											<FaTrash />
										</div>
									</div>
								)}
							</div>
						)}
				</BaseControl>

				{/* Template Folder Selection */}
				<BaseControl
					id="pf-template-folder"
					label={__('Template Folder', 'easy-dropbox-integration')}
					help={__(
						'Select a template folder to copy its structure when creating new private folders.',
						'easy-dropbox-integration'
					)}
					className='edbi-extend-wp-core-input '
				>
					<Button
						// isSecondary
						onClick={openTemplateFolderSelector}
						className='edbi-button edbi-button--small'
					>
						{__('Select Template Folder', 'easy-dropbox-integration')}
					</Button>
					<div className='edbi-setting-select-folder'>
						{pfSettings.templateFolder?.id && (
							<div className='edbi-setting-select-folder__selected'>
								<div className='edbi-selected-folders'>
									<span className='edbi-badge edbi-badge--small edbi-badge--info' style={{
										padding: '8px 16px'
									}}>
										{pfSettings.templateFolder.name}
									</span>
								</div>
								<div
									onClick={() => updateSetting('templateFolder', { id: '', name: '', path: '', accountId: '' })}
								>
									<FaTrash />
								</div>
							</div>
						)}
					</div>
				</BaseControl>

				{/** Check if parent folder accountId and template Folder accountId is same, if not add warning. */}
				{pfSettings.parentFolder?.accountId !== pfSettings.templateFolder?.accountId && (
					<BaseControl
						id="pf-account-mismatch-warning"
						className='edbi-extend-wp-core-input'
					>
						<div className='edbi-badge edbi-badge--error' style={{ padding: '5px 10px' }}>
							{__('Parent folder and template folder are in different accounts. Please select parent folder and template folder from same account.', 'easy-dropbox-integration')}
						</div>
					</BaseControl>
				)}

				{/* Sync Scope */}
				{/* <BaseControl
					id="pf-sync-scope"
					label={__('Sync Scope', 'easy-dropbox-integration')}
					help={__(
						'Choose what happens when a user logs in. "All Folders" will sync the entire private folder.',
						'easy-dropbox-integration'
					)}
					className='edbi-extend-wp-core-input'
				>
					<ButtonGroup className="edbi-button-group">
						<Button
							isPrimary={pfSettings.syncScope === 'all' || !pfSettings.syncScope}
							onClick={() => updateSetting('syncScope', 'all')}
							className="edbi-button"
						>
							{__('All Folders', 'easy-dropbox-integration')}
						</Button>
						<Button
							isPrimary={pfSettings.syncScope === 'home'}
							onClick={() => updateSetting('syncScope', 'home')}
							className="edbi-button"
						>
							{__('Home Folder Only', 'easy-dropbox-integration')}
						</Button>
					</ButtonGroup>
				</BaseControl> */}
			</div>

			{/* Dashboard Settings */}
			<div className="edbi-shortcode-builder__container">
				<h3 className="edbi-shortcode-appearance-title">
					<FaEye style={{ marginRight: '8px' }} />
					{__('Dashboard Settings', 'easy-dropbox-integration')}
				</h3>

				<ToggleControl
					checked={pfSettings.showInDashboard === 'yes'}
					onChange={(checked) => updateSetting('showInDashboard', checked ? 'yes' : 'no')}
					label={__('Show in Dashboard', 'easy-dropbox-integration')}
					help={__(
						'Show private folders in the WordPress admin dashboard for administrators.',
						'easy-dropbox-integration'
					)}
				/>
			</div>
		</>
	);
};

export default PrivateFolders;