import { useContext, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getDownloadUrl, getIconByExtension } from '../../../utils/common';
import { HiOutlineDotsVertical } from 'react-icons/hi';
import { ThemeContext } from '../../Provider/Context';
import { GoCopy, GoInfo, GoLinkExternal, GoShareAndroid } from 'react-icons/go';
import { FiEye, FiLink } from 'react-icons/fi';
import { BsDownload, BsSignTurnSlightLeft } from 'react-icons/bs';
import { LuPencilLine } from 'react-icons/lu';
import { RiDeleteBin6Line } from 'react-icons/ri';
import { HiArrowLeftOnRectangle } from 'react-icons/hi2';
import { CgLock } from 'react-icons/cg';

const FileList = ({
	files,
	folderSelectOnly = false,
	lightGallery,
	showContexify = false,
	onFileClick = false,
	enableSelected = false,
	// selectedItems = {},
	enableGallery = true,
	handleItemClick,
	shortcodeBuilder,
	showFiles = true,
}) => {
	const {
		gridView,
		openMenu,
		setOpenMenu,
		selectedItem,
		selectedItems,
		setSelectedItem,
		setSelectedItems,
		menuPosition,
		setMenuPosition,
		rightClickMenu,
		setRightClickMenu,
		rightClickPosition,
		setRightClickPosition,
		activeCols,
		selectedCards,
		toggleCard,
		bulkMode,
		setIsFolder,
		isFolder,
	} = useContext(ThemeContext);
	const handleSelectorChange = (e, item) => {
		e.stopPropagation();

		if (!setSelectedItems) {
			return;
		}

		setSelectedItems((prev) => {
			const files = prev?.files || [];
			if (files.some((selectedItem) => selectedItem.id === item.id)) {
				return prev;
			}

			return {
				...prev,
				files: [...files, item],
			};
		});

		if (typeof setSelectedItem === 'function') {
			setSelectedItem(item);
		}
	};

	const toggleMenu = (id, e, item) => {
		if (openMenu === id) {
			setOpenMenu(null);
			setSelectedItem(null);
			return;
		}

		const buttonRect = e.currentTarget.getBoundingClientRect();
		const menuHeight = 350; // approximate menu height
		const menuWidth = 220; // approximate menu width

		let top = buttonRect.bottom;
		let left = buttonRect.right - menuWidth;

		// If not enough space at bottom → open upwards
		if (window.innerHeight - buttonRect.bottom < menuHeight) {
			top = buttonRect.top - menuHeight;
		}

		// If not enough space at right → align left side
		if (window.innerWidth - buttonRect.right < menuWidth) {
			left = buttonRect.left - 380;
		}

		setMenuPosition({ top, left });
		setOpenMenu(id);
		setSelectedItem(item);
		setRightClickMenu(null);
	};

	// Close menu when clicking outside
	useEffect(() => {
		const handleClickOutside = (e) => {
			// Don't close if clicking inside lightgallery
			if (e.target.closest('.lg') || e.target.closest('.lg-backdrop')) {
				return;
			}
			if (!e.target.closest('.edbi-context-menu') &&
				!e.target.closest('.menu-button') &&
				!e.target.closest('.filelist-menu')) {
				setOpenMenu(null);
				setRightClickMenu(null);
			}
		};
		document.addEventListener('click', handleClickOutside);
		return () => document.removeEventListener('click', handleClickOutside);
	}, []);

	const toggleRightClickMenu = (e, item) => {
		setIsFolder(false);
		if (bulkMode) return;
		e.preventDefault(); // stop default browser menu
		const menuHeight = 300;
		const menuWidth = 250;

		let top = e.clientY;
		let left = e.clientX;

		// Prevent overflow bottom
		if (window.innerHeight - e.clientY < menuHeight) {
			top = e.clientY - menuHeight;
		}

		// Prevent overflow right
		if (window.innerWidth - e.clientX < menuWidth) {
			left = e.clientX - menuWidth;
		}

		setRightClickPosition({ top, left });
		setRightClickMenu(item);
		setOpenMenu(null); // close dot menu if open
	};

	const handleAction = (action, e) => {
		if (!selectedItem) return;
		e.preventDefault();
		e.stopPropagation();
		// Close the menu first
		const itemToProcess = selectedItem;
		const itemIndex = files.findIndex((f) => f.id === selectedItem.id);
		setOpenMenu(null);
		setSelectedItem(null);
		// Then handle the action after a small delay to ensure menu is closed
		setTimeout(() => {
			handleItemClick({
				id: action,
				event: e,
				props: {
					data: {
						item: itemToProcess,
						index: itemIndex,
					},
				},
			});
		}, 10);
	};

	const handleRightClickAction = (action, e) => {
		if (!rightClickMenu) return;
		e.preventDefault();
		e.stopPropagation();
		// Close the menu first
		const itemToProcess = rightClickMenu;
		const itemIndex = files.findIndex((f) => f.id === rightClickMenu.id);
		setRightClickMenu(null);
		// Then handle the action after a small delay to ensure menu is closed
		setTimeout(() => {
			handleItemClick({
				id: action,
				event: e,
				props: {
					data: {
						item: itemToProcess,
						index: itemIndex,
					},
				},
			});
		}, 10);
	};

	return (
		showFiles && (
			<div
				className={`${gridView ? 'edbi-file-grid-container' : 'edbi-file-list-container'} ${
					shortcodeBuilder ? 'edbi-grid-4' : ''
				} edbi-grid-${activeCols}`}
			>
				{files.map((item, index) => (
					<div
						className={`${gridView ? 'edbi-file-grid' : 'edbi-file-list'} ${
							bulkMode && 'edbi-bulk__mode'
						} ${enableSelected &&
							selectedItems?.files?.filter((sItem) => {
								return sItem.id == item.id;
							}).length > 0 && 'edbi-selected__item'}`}
						key={index}
						onClick={() => {
							if (false !== onFileClick) {
								onFileClick(item);
							}

							if (bulkMode) {
								toggleCard(item.id, item);
								return;
							}


							if (enableGallery) {
								if (item.can_preview) {

									lightGallery.current.openGallery(index);
								} else {
									// Open download url in a new tab.
									window.open(getDownloadUrl(item), '_blank');
								}
							}
						}}
						onContextMenu={(e) => toggleRightClickMenu(e, item)}
					>
						{item.can_preview && item.thumbnail ? (
							<div className='edbi-thumbnail'>
								<img src={item.thumbnail} className='edbi-image' />
							</div>
						) : (
							<div className='edbi-thumbnail'>
								<img
									style={{ width: '80px', height: '80px' }}
									src={getIconByExtension(item.ext ? item.ext : 'folder')}
								/>
							</div>
						)}

						{bulkMode && (
							<label
								className='chk-label'
								style={{
									position: 'absolute',
									bottom: '10px',
									right: '12px',
									zIndex: '10',
								}}
							>
								<input
									type='checkbox'
									checked={selectedItems?.files?.some(selectedItem => selectedItem.id === item.id)}
									onChange={() => toggleCard(item.id, item)}
								/>
								<span
									className='custom-circle edbi-item-checkbox'
									aria-hidden='true'
								>
									<svg viewBox='0 0 24 24' aria-hidden='true'>
										<path d='M5 12.5l4 4L19 7.5'></path>
									</svg>
								</span>
							</label>
						)}
						<div className='edbi-file-info'>
							{enableSelected && (
							<div className='edbi-file-browser__file-list__item__selector'>
								{/** @TODO: Disable radio when folderSelectOnly */}
								<input
									type='radio'
									checked={selectedItems?.files?.some(selectedItem => selectedItem.id === item.id)}
									onClick={(e) => {
										e.stopPropagation();
									}}
									onChange={(e) => handleSelectorChange(e, item)}
								/>
							</div>
							)}
							<div className='edbi-file-name'>
								<img
									className='edbi-file-icon'
									src={getIconByExtension(item.ext ? item.ext : 'folder', '32')}
								/>
								<span className='edbi-file-text'>
									{__(item.name, 'easy-dropbox-integration')}
								</span>
							</div>
							{!enableSelected && (
								<div
									className='edbi-dot-container'
									onClick={(e) => {
										e.stopPropagation();

										// onFileClick(item);
										if (false !== onFileClick) {
											onFileClick(item);
										}

										if (false === showContexify) {
											return;
										}
										showContexify(e, 'file-browser-file', {
											type: 'file',
											path: item.path,
											item,
										});
									}}
								>
									<HiOutlineDotsVertical
										onClick={(e) => toggleMenu(item.id, e, item)}
										className='edbi-dot-icon'
									/>
								</div>
							)}
						</div>
					</div>
				))}

				{/* Floating Context Menu */}
				{openMenu && !isFolder && (
					<div
						className='absolute z-50 edbi-menu-card edbi-context-menu'
						style={{
							top: `${menuPosition.top}px`,
							left: `${menuPosition.left}px`,
						}}
					>
						<div
							className='edbi-menu-item'
							onClick={(e) => handleAction('preview-in-new-window', e)}
						>
							<GoLinkExternal className='edbi-right-icon' />{' '}
							{__('Open in New Window', 'easy-dropbox-integration')}
						</div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('details', e)}>
							<GoInfo className='edbi-right-icon' />{' '}
							{__('View Details', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('direct-link', e)}>
							<FiLink className='edbi-right-icon' />{' '}
							{__('Direct Link', 'easy-dropbox-integration')}
						</div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('share', e)}>
							<GoShareAndroid className='edbi-right-icon' />{' '}
							{__('Share', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('download', e)}>
							<BsDownload className='edbi-right-icon' />{' '}
							{__('Download', 'easy-dropbox-integration')}
						</div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('move', e)}>
							<BsSignTurnSlightLeft className='edbi-right-icon' />{' '}
							{__('Move', 'easy-dropbox-integration')}
						</div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('rename', e)}>
							<LuPencilLine className='edbi-right-icon' />{' '}
							{__('Rename', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div className='edbi-menu-item' onClick={(e) => handleAction('delete', e)}>
							<RiDeleteBin6Line className='edbi-right-icon' />{' '}
							{__('Delete', 'easy-dropbox-integration')}
						</div>
					</div>
				)}

				{/* Right-Click Context Menu */}
				{rightClickMenu && !isFolder && (
					<div
						className='absolute edbi-filter-dropdown edbi-filter-dropdown-2 filelist-menu'
						style={{
							top: `${rightClickPosition.top - 80}px`,
							left: `${rightClickPosition.left - 200}px`,
						}}
					>
						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('preview', e)}
						>
							<FiEye className='edbi-right-icon' />{' '}
							{__('Preview', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('preview-in-new-window', e)}
						>
							<GoLinkExternal className='edbi-right-icon' />{' '}
							{__('Open in New Window', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('details', e)}
						>
							<GoInfo className='edbi-right-icon' />{' '}
							{__('View Details', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('direct-link', e)}
						>
							<FiLink className='edbi-right-icon' />{' '}
							{__('Direct Link', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('share', e)}
						>
							<GoShareAndroid className='edbi-right-icon' />{' '}
							{__('Share', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('download', e)}
						>
							<BsDownload className='edbi-right-icon' />{' '}
							{__('Download', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item edbi-pro-item'
							onClick={(e) => handleRightClickAction('import', e)}
						>
							<HiArrowLeftOnRectangle className='edbi-right-icon' />
							<span>
								{' '}
								{__('Import to Media Library', 'easy-dropbox-integration')}{' '}
							</span>

							<div className='edbi-pro'>
								<CgLock className='edbi-lock-icon' />{' '}
								{__('Pro', 'easy-dropbox-integration')}
							</div>
						</div>
						<div className='edbi-menu-divider'></div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('move', e)}
						>
							<BsSignTurnSlightLeft className='edbi-right-icon' />{' '}
							{__('Move', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('rename', e)}
						>
							<LuPencilLine className='edbi-right-icon' />{' '}
							{__('Rename', 'easy-dropbox-integration')}
						</div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('duplicate', e)}
						>
							<GoCopy className='edbi-right-icon' />{' '}
							{__('Copy', 'easy-dropbox-integration')}
						</div>
						<div className='edbi-menu-divider'></div>

						<div
							className='edbi-menu-item'
							onClick={(e) => handleRightClickAction('delete', e)}
						>
							<RiDeleteBin6Line className='edbi-right-icon' />
							{__('Delete', 'easy-dropbox-integration')}
						</div>
					</div>
				)}
			</div>
		)
	);
};

export default FileList;