import { useState, useEffect, useContext } from '@wordpress/element';
import { TextControl } from '@wordpress/components';
import Sidebar from './Sidebar';
import { __ } from '@wordpress/i18n';
import { showAlert } from '../../utils/alertHelper';
import { decode, encode } from 'js-base64';
import { getShortCodeDefaultConfig, getShortCodeIcon, getFileTypeFilter } from '../../utils/common';
import FileUploader from './contents/filters/FileUploader';
import Gallery from './contents/advanced/Gallery';
import MediaPlayer from './contents/advanced/MediaPlayer';
import AdvancedFileUploader from './contents/advanced/AdvancedFileUploader';
import SliderCarousel from './contents/advanced/SliderCarousel';
import EmbedAdvancedSettings from './controls/EmbedAdvancedSettings';
import PermissionSettings from './controls/PermissionSettings';
import { ThemeContext } from '../../file-browser/Provider/Context';
import { FaCrown } from 'react-icons/fa';
import FileBrowser from '../../common/FileBrowser';

const ShortCodeConfig = (props) => {
	const {
		activeItem,
		setActiveItem,
		save,
		setSave,
		data = false,
		setData = () => {},
		shortCodeConfig,
		setShortCodeConfig,
		shortCodeTitle,
		setShortCodeTitle,
		actionType,
		setCurrentTab,
		isSaving,
		setIsSaving,
		scbType = 'shortcode',
		isFormUploader = '',
		uploadImmediately = false,
	} = props;

	const {
		filter,
		refresh,
		currentPath,
		setCurrentPath,
		selectedItems,
		setSelectedItems,
		setBulkMode,
		selectedContent,
		setSelectedContent,
		setSelectedCards,
		toggleCard,
	} = useContext(ThemeContext);

	const [type, setType] = useState('gallery');
	const [entries, setEntries] = useState([]);
	const [editDataLoaded, setEditDataLoaded] = useState(false);
	const [hasTypeChanged, setHasTypeChanged] = useState(false);

	// get edit params
	const params = new URLSearchParams(window.location.search);
	const id = params.get('edit');

	const { activeAccount, ajaxNonce } = EDBIData;

	const decodedActiveAccount = decode(activeAccount);

	useEffect(() => {
		if (activeItem !== 'source') {
			return;
		}

		// Enable bulk mode for content types to allow multiple file/folder selection
		// Only disable bulk mode for uploader when it's in folder-only mode
		const isContentWithFiles = ['gallery', 'media-player', 'embed-documents', 'view-links', 'slider-carousel', 'download-links'].includes(type);
		if (isContentWithFiles) {
			setBulkMode(true);
		} else if (type === 'uploader') {
			// For uploader, enable bulk mode unless in folder-only mode
			setBulkMode(true);
		}
	}, [activeItem, type, setBulkMode]);

	useEffect(() => {
		if (!id && 'shortcode' === scbType) {
			setEditDataLoaded(true);
			return;
		}

		setShortCodeConfig(shortCodeConfig);
		setType(shortCodeConfig.type || 'gallery');

		setSelectedItems(shortCodeConfig.source.items);
		setSelectedContent(shortCodeConfig.source.items.files || []);
		setSelectedCards(shortCodeConfig.source.items.folders || []);

		if (id && shortCodeConfig.source.items.length === 0) {
			wp.ajax
				.post('edbi_get_shortcode', {
					id,
					nonce: ajaxNonce,
				})
				.then((response) => {
					if (response) {
						setShortCodeTitle(response.title);
						const parsedConfig = JSON.parse(response.config);
						setShortCodeConfig(parsedConfig);
						setType(parsedConfig.type || 'gallery');
						setSelectedItems(parsedConfig.source.items);
						setSelectedContent(parsedConfig.source.items.files || []);
						setSelectedCards(parsedConfig.source.items.folders || []);
						setEditDataLoaded(true);
					}
				});
		} else {
			// Data already loaded from props or not in edit mode
			setEditDataLoaded(true);
		}
	}, [id]);

	useEffect(() => {
		if (selectedItems.length !== 0) {
			setShortCodeConfig({
				...shortCodeConfig,
				source: {
					// ...shortCodeConfig.source,
					items: selectedItems,
				},
			});
		}
	}, [selectedItems]);

	useEffect(() => {
		if (decodedActiveAccount.length !== 0 && entries.length === 0) {
			setEntries([]); // clear before load

			console.log('activeAccount', decodedActiveAccount);
			wp.ajax.post('edbi_get_files', {
				path: currentPath,
				account_id: decodedActiveAccount['id'],
				filter: filter,
				nonce: EDBIData.ajaxNonce,
			})
				.then((response) => {
					// wp.ajax.post automatically unwraps wp_send_json_success() response
					setEntries(response.files || []);
				})
				.catch((error) => {
					console.error(error);
				});
		}
	}, [currentPath, refresh, filter]);

	useEffect(() => {
		// if (data) {
			shortCodeConfig.isFormUploader = isFormUploader;
			shortCodeConfig.uploadImmediately = uploadImmediately;
			shortCodeConfig.accountId = activeAccount?.id || '';

			const jsonString = JSON.stringify(shortCodeConfig);
			const base64String = encode(jsonString);

			setData(base64String);

		// }
	}, [shortCodeConfig]);

	useEffect(() => {
		if (save) {
			setIsSaving(true);
			const jsonString = JSON.stringify({
				...shortCodeConfig,
				isFormUploader: isFormUploader,
				accountId: activeAccount?.id || '',
			});
			const base64String = encode(jsonString);

			if ('edit' === actionType) {
				wp.ajax
					.post('edbi_update_shortcode', {
						id,
						title: shortCodeTitle,
						config: base64String,
						nonce: ajaxNonce,
					})
					.then(() => {
						setSave(!save);

						showAlert({
							title: __('Shortcode Updated', 'easy-dropbox-integration'),
							text: __(
								'Shortcode has been updated successfully',
								'easy-dropbox-integration'
							),
							icon: 'success',
							toast: true,
							timer: 3000,
							position: 'top-end',
						});
					})
					.catch((error) => {
						console.error(error);

						showAlert({
							title: __('Error', 'easy-dropbox-integration'),
							text: __(
								'An error occurred while updating the shortcode',
								'easy-dropbox-integration'
							),
							icon: 'error',
							toast: true,
							timer: 3000,
							position: 'top-end',
						});
					});
			} else {
				wp.ajax
					.post('edbi_create_shortcode', {
						title: shortCodeTitle,
						config: base64String,
						nonce: ajaxNonce,
					})
					.then(() => {
						setSave(!save);

						showAlert({
							title: __('Shortcode Created', 'easy-dropbox-integration'),
							text: __(
								'Shortcode has been created successfully',
								'easy-dropbox-integration'
							),
							icon: 'success',
							toast: true,
							timer: 3000,
							position: 'top-end',
						});
					})
					.catch((error) => {
						console.error(error);

						showAlert({
							title: __('Error', 'easy-dropbox-integration'),
							text:
								error.message ||
								__(
									'An error occurred while creating the shortcode',
									'easy-dropbox-integration'
								),
							icon: 'error',
							toast: true,
							timer: 3000,
							position: 'top-end',
						});
					});
			}

			setIsSaving(false);
		}
	}, [save]);

	const setPath = (path) => {
		setCurrentPath(path);
	};

	const updateShortCodeConfig = (key, value) => {
		setShortCodeConfig({
			...shortCodeConfig,
			[key]: value,
		});
	};

	const types = [
		{
			label: __('File Browser', 'easy-dropbox-integration'),
			value: 'file-browser',
			desc: __(
				'Browse your Dropbox files and folders directly on your website.',
				'easy-dropbox-integration'
			),
			icon: getShortCodeIcon('file-browser'),
			...getShortCodeDefaultConfig('file-browser'),
			accessType: 'pro',
		},
		{
			label: __('Image Gallery', 'easy-dropbox-integration'),
			value: 'gallery',
			desc: __(
				'Showcase images and videos with flexible gallery layouts',
				'easy-dropbox-integration'
			),
			icon: getShortCodeIcon('gallery'),
			...getShortCodeDefaultConfig('gallery'),
			accessType: 'free',
		},
		{
			label: __('File Uploader', 'easy-dropbox-integration'),
			value: 'uploader',
			desc: __('Let visitors drop files that go straight into Dropbox', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('uploader'),
			...getShortCodeDefaultConfig('uploader'),
			accessType: 'pro',
		},
		{
			label: __('Embed Documents', 'easy-dropbox-integration'),
			value: 'embed-documents',
			desc: __('Embed Dropbox documents so they preview right on the page.', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('embed-documents'),
			...getShortCodeDefaultConfig('embed-documents'),
			accessType: 'free',
		},
		{
			label: __('Download Links', 'easy-dropbox-integration'),
			value: 'download-links',
			desc: __('Present download links for your Dropbox files with ease.', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('download-links'),
			...getShortCodeDefaultConfig('download-links'),
			accessType: 'free',
		},
		{
			label: __('View Links', 'easy-dropbox-integration'),
			value: 'view-links',
			desc: __('Share view links for Dropbox files right where visitors browse.', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('view-links'),
			...getShortCodeDefaultConfig('view-links'),
			accessType: 'free',
		},
		{
			label: __('Media Player', 'easy-dropbox-integration'),
			value: 'media-player',
			desc: __('Stream audio or video from Dropbox via an embedded player.', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('media-player'),
			...getShortCodeDefaultConfig('media-player'),
			accessType: 'pro',
		},
		{
			label: __('Slider Carousel', 'easy-dropbox-integration'),
			value: 'slider-carousel',
			desc: __('Highlight curated Dropbox items with a rotating slider carousel.', 'easy-dropbox-integration'),
			icon: getShortCodeIcon('slider-carousel'),
			...getShortCodeDefaultConfig('slider-carousel'),
			accessType: 'pro',
		},
	];

	let folders = [];
	let files = [];

	if (entries.length) {
		folders = entries.filter((item) => item.is_dir);
		files = entries.filter((item) => {
			if ('gallery' === type) {
				return item.is_file && item.ext.match(/(jpg|jpeg|png|gif)$/i);
			}
			return item.is_file;
		});
	}

	useEffect(() => {
		if (type && editDataLoaded) {
			updateShortCodeConfig('type', type);

			// Only clear selections if this is NOT the first type change after edit data loads
			// OR if we're not in edit mode (id is null)
			if (hasTypeChanged || !id) {
				setSelectedItems({ files: [], folders: [] });
				setSelectedContent([]);
				setSelectedCards([]);
			}

			// Mark that type has changed once (after first change)
			if (!hasTypeChanged) {
				setHasTypeChanged(true);
			}
		}
	}, [type]);

	// useEffect(() => {
	// 	if (type) {
	// 		updateShortCodeConfig('type', type);
	// 	}
	// }, [activeItem]);

	function hexToRgba(hex, alpha = 0.5) {
		// Remove hash if present
		hex = hex.replace('#', '');
		// Parse r, g, b
		const bigint = parseInt(hex, 16);
		const r = (bigint >> 16) & 255;
		const g = (bigint >> 8) & 255;
		const b = bigint & 255;
		return `rgba(${r}, ${g}, ${b}, ${alpha})`;
	}

	return (
		<div className='edbi-shortcode-config'>
			<Sidebar activeItem={activeItem} setActiveItem={setActiveItem} type={type} />
			<div className='edbi-page__content '>
				{activeItem === 'types' && (
					<div className='edbi-info-boxes'>
						{types.map((item) => (
							<div
								key={item.value}
								className='edbi-info-box'
								style={{
									outline:
										item.value === type
											? `2px solid ${hexToRgba(item.icon.color, 0.3)}`
											: 'none',
									backgroundImage:
										item.value === type
											? `linear-gradient(180deg, ${hexToRgba(
													item.icon.color,
													0.03
											  )} 0%, ${hexToRgba(item.icon.color, 0.1)} 100%)`
											: 'none',
								}}
								onClick={(e) => {
									e.preventDefault();
									e.stopPropagation();
									if (item.accessType === 'pro' && !EDBIData.isPro) {
										showAlert({
											title: __(
												'Upgrade to Pro',
												'easy-dropbox-integration'
											),
											text: __(
												'This feature is available in the Pro version. Please upgrade to access this feature.',
												'easy-dropbox-integration'
											),
											icon: 'info',
											confirmButtonText: __(
												'Upgrade Now',
												'easy-dropbox-integration'
											),
											confirmButtonUrl: EDBIData.upgradeUrl,
											showCancelButton: true,
										});
										return;
									}
									setType(item.value);
									if (!id) {
										updateShortCodeConfig('settings', item.config);
									}
								}}
							>
								<div className='edbi-info-box__content__wrapper'>
									<div className='ebdi-info-box'>
										<div
											style={{
												backgroundColor: hexToRgba(item.icon.color, 0.1),
											}}
											className='edbi-info-box__icon__wrapper'
										>
											<div className='edbi-info-box__icon__image'>
												{item.icon.icon}
											</div>
										</div>
										<div
											style={{
												backgroundColor: hexToRgba(item.icon.color, 0.1),
											}}
											className='edbi-info-box__icon__bar'
										/>
									</div>
								</div>
								{item.accessType === 'pro' && (
									<div className='edbi-info-box__premium'>
										<div className='edbi-info-box__premium__icon__wrapper'>
											<FaCrown className='edbi-info-box__premium__icon' />
											<span className='edbi-info-box__premium__label'>
												{__('PRO', 'easy-dropbox-integration')}
											</span>
										</div>
										<div className='edbi-info-box__premium__icon__background'>
											<div className='edbi-info-box__premium__icon__background__inner' />
										</div>
									</div>
								)}
								<div className='edbi-info-box__content'>
									<h3>{__(item.label, 'easy-dropbox-integration')}</h3>
									<p>{__(item.desc, 'easy-dropbox-integration')}</p>
								</div>
							</div>
						))}
					</div>
				)}

				{activeItem === 'source' && (
					<>
						{(type === 'gallery' ||
							type === 'media-player' ||
							type === 'embed-documents' ||
							type === 'view-links' ||
							type === 'slider-carousel' ||
							type === 'download-links') && (
							<FileBrowser
								config={{
									showHeader: true,
									showUploader: false,
									showBreadcrumb: true,
									showAccount: true,
									allowBulkMode: true,
									showFiles: true,
									showFolder: true,
									className: 'not-fixed-header',
									shortcodeBuilder: true,
									showMoreMenu: false
								}}
								isSingleFolderSelector={false}
								fileTypeFilter={getFileTypeFilter(type)}
								folderSelectOnly={false}
								enableSelected={true}
								enableGallery={false}
								selectedItems={selectedItems}
								enableFolderSelect={false}
							/>
						)}

						{(type === 'uploader' || type === 'file-browser') && (
							<div className='my-5'>
								<FileBrowser
									config={{
										showHeader: true,
										showUploader: false,
										showBreadcrumb: true,
										showAccount: true,
										showMoreMenu: false,
										showFiles: false,
										showFolder: true,
										className: 'not-fixed-header',
										allowBulkMode: true,
										// allowBulkMode: 'cf7' === isFormUploader ? false : true,
										shortcodeBuilder: true,
									}}
									fileTypeFilter={getFileTypeFilter(type)}
									isFormUploader={isFormUploader}
									isSingleFolderSelector={'file-browser' !== type }
									folderSelectOnly={true}
									enableSelected={true}
									enableGallery={false}
									selectedItems={selectedItems}
									onFolderClick={(item) => {
										if (!item) return;

										if (selectedItems.folders.length > 0) {
											setSelectedItems({ files: [], folders: [] });
										} else {
											setSelectedItems({
												files: [],
												folders: [...selectedItems.folders, item],
											});
										}
									}}
								/>
							</div>
						)}
					</>
				)}

				{activeItem === 'filters' && (
					<FileUploader
						type={type}
						shortCodeConfig={shortCodeConfig}
						updateShortCodeConfig={updateShortCodeConfig}
					/>
				)}

				{activeItem === 'advanced' && (
					<div className='edbi-shortcode-config__advanced'>
						<div className='edbi-shortcode-config__advanced__header'>
							<h3>{__('Advanced', 'easy-dropbox-integration')}</h3>
						</div>
						<div className='edbi-shortcode-config__advanced__input__container'>
							<h3>{__('Module Container', 'easy-dropbox-integration')}</h3>
							<div className='edbi-shortcode-config__advanced__inputs'>
								<div className='edbi-extend-wp-core-input'>
									<TextControl
										label={__('Width', 'easy-dropbox-integration')}
										value={shortCodeConfig?.settings?.container?.width}
										onChange={(value) =>
											updateShortCodeConfig('settings', {
												...shortCodeConfig?.settings,
												container: {
													...shortCodeConfig?.settings?.container,
													width: value,
												},
											})
										}
									/>
								</div>
								<div className='edbi-extend-wp-core-input'>
									<TextControl
										label={__('Height', 'easy-dropbox-integration')}
										value={shortCodeConfig?.settings?.container?.height}
										onChange={(value) =>
											updateShortCodeConfig('settings', {
												...shortCodeConfig?.settings,
												container: {
													...shortCodeConfig?.settings?.container,
													height: value,
												},
											})
										}
									/>
								</div>
							</div>
						</div>

						{type === 'gallery' && (
							<Gallery
								type={type}
								shortCodeConfig={shortCodeConfig}
								updateShortCodeConfig={updateShortCodeConfig}
							/>
						)}

						{type === 'slider-carousel' && (
							<SliderCarousel
								shortCodeConfig={shortCodeConfig}
								updateShortCodeConfig={updateShortCodeConfig}
							/>
						)}

						{type === 'media-player' && (
							<MediaPlayer
								type={type}
								shortCodeConfig={shortCodeConfig}
								updateShortCodeConfig={updateShortCodeConfig}
							/>
						)}

						{type === 'uploader' && (
							<AdvancedFileUploader
								type={type}
								shortCodeConfig={shortCodeConfig}
								updateShortCodeConfig={updateShortCodeConfig}
							/>
						)}

						{type === 'embed-documents' && (
							<EmbedAdvancedSettings
								type={type}
								shortCodeConfig={shortCodeConfig}
								updateShortCodeConfig={updateShortCodeConfig}
							/>
						)}
					</div>
				)}

				{activeItem === 'permission' && (
					<PermissionSettings
						type={type}
						shortCodeConfig={shortCodeConfig}
						updateShortCodeConfig={updateShortCodeConfig}
					/>
				)}
			</div>
		</div>
	);
};

export default ShortCodeConfig;