import { useState, useEffect, useContext } from '@wordpress/element';

import { openAuthPopup } from '../../../utils/common';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';

import { decode } from 'js-base64';
import { ProChecker } from '../../../../src-js/components/ProChecker';
import DropdownPopover from '../../../../src-js/file-browser/components/DropdownPopover';
import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
import { GoCheckCircleFill, GoPlus } from 'react-icons/go';

import { ThemeContext } from '../../Provider/Context';
import { hasPro } from '../../../utils/hasPro';

const Header = (props) => {
	const { config } = props;
	const [isOpen, setIsOpen] = useState(false);
	const {
		showBreadCrumb = true,
		showFilter = true,
		showAccount = true,
		showRefresh = true,
		className,
		showMoreMenu = {
			show: true,
			showNewFolder: true,
			showUploader: true,
		},
	} = config;
	const { setIsLoading, setRefresh } = useContext(ThemeContext);

	let { activeAccount: activeAccountData, accounts: accountsData } = EDBIData;

	let activeAccount;
	let accounts;
	try {
		activeAccount = typeof activeAccountData === 'string' ? JSON.parse(decode(activeAccountData)) : activeAccountData;
		accounts = typeof accountsData === 'string' ? JSON.parse(decode(accountsData)) : accountsData;
	} catch (e) {
		console.error('Error parsing account data:', e);
		activeAccount = null;
		accounts = [];
	}

	const [aAccount, setActiveAccount] = useState(activeAccount);

	// Listen for account switch event to update UI
	useEffect(() => {
		const handleAccountSwitched = (event) => {
			const newAccount = event.detail;
			if (newAccount) {
				setActiveAccount(newAccount);
			}
		};

		window.addEventListener('edbi_account_switched', handleAccountSwitched);

		return () => {
			window.removeEventListener('edbi_account_switched', handleAccountSwitched);
		};
	}, []);

	useEffect(() => {
		const handleActiveAccountUpdated = (event) => {
			if (event?.detail) {
				setActiveAccount(event.detail);
			}
		};

		window.addEventListener('edbi_active_account_updated', handleActiveAccountUpdated);

		return () => {
			window.removeEventListener('edbi_active_account_updated', handleActiveAccountUpdated);
		};
	}, []);

	const switchAccount = (id) => {
		// Find the new account from accounts object
		const newAccount = Object.entries(accounts).find(
			([accountId]) => accountId === id
		)?.[1];

		if (!newAccount) {
			console.error('Account not found:', id);
			return;
		}

		setIsLoading(true);

		wp.ajax.post('edbi_switch_account', {
			account_id: id,
			nonce: EDBIData.ajaxNonce,
		}).then((response) => {
			if ('success' === response.status) {
				// Update global EDBIData
				EDBIData.activeAccount = btoa(JSON.stringify(newAccount));

				// Dispatch custom event for other components
				window.dispatchEvent(new CustomEvent('edbi_account_switched', {
					detail: newAccount
				}));

				// Trigger refresh to fetch new files
				setRefresh((prev) => !prev);

				// Close the dropdown
				setIsOpen(false);
			}
		}).catch((err) => {
			console.error('Failed to switch account:', err);
			setIsLoading(false);
		});
	};

	return (
		<div className={classNames('', className)}>
			<div>
				{showAccount && (
					<DropdownPopover
						isOpen={isOpen}
						setIsOpen={setIsOpen}
						className=''
						btnData={{
							className: '',
						}}
						btnContent={
							<>
								{Object.entries(accounts).length ? (
									<div className='edbi-navbar-top-right-button'>
										<img src={aAccount.photo} alt={aAccount.name} />

										<h6>{aAccount.name}</h6>
										<MdOutlineKeyboardArrowDown
											className={`edbi-profile-dropdown-icon ${
												isOpen ? 'edbi-rotate' : 'edbi-rerotate'
											}`}
										/>
									</div>
								) : (
									<button
										onClick={() => openAuthPopup()}
										className='edbi-upload-btn edbi-add-btn'
									>
										<GoPlus className='edbi-upload-icon' />{' '}
										{__('Add Account', 'easy-dropbox-integration')}
									</button>
								)}
							</>
						}
						content={
							<>
								<div className='edbi-account-dropdown'>
									{accounts && (
										<>
											<h3>
												{__('Switch Account', 'easy-dropbox-integration')}
											</h3>
											{Object.entries(accounts).map((account) => {
												account = account[1];
												return (
													<div className='edbi-profile-dropdown' key={account.id}>
														<div
															onClick={() => switchAccount(account.id)}
															className={`edbi-profile-dropdown-content ${
																account.id !== aAccount.id &&
																'edbi-inactive-account'
															}`}
														>
															<div className='edbi-profile-dropdown-content-left'>
																<img
																	src={account?.photo}
																	alt={__(
																		account?.name,
																		'easy-dropbox-integration'
																	)}
																/>
																<div>
																	<h2>
																		{__(
																			account?.name,
																			'easy-dropbox-integration'
																		)}
																	</h2>
																	<p>
																		{__(
																			account?.email,
																			'easy-dropbox-integration'
																		)}
																	</p>
																</div>
															</div>
															{account.id === aAccount.id && (
																<GoCheckCircleFill className='edbi-checked-icon' />
															)}
														</div>
													</div>
												);
											})}
										</>
									)}

									{Object.keys(accounts).length >= 1 && !hasPro ? (
										<ProChecker>
											<div>
												<button
													onClick={() => {
														if (!hasPro) return;
														openAuthPopup();
													}}
													className='edbi-upload-btn edbi-add-btn'
												>
													<GoPlus className='edbi-upload-icon' />
													{__('Add Account', 'easy-dropbox-integration')}
												</button>
											</div>
										</ProChecker>
									) : (
										<div>
											<button
												onClick={() => openAuthPopup()}
												className='edbi-upload-btn edbi-add-btn'
											>
												<GoPlus className='edbi-upload-icon' />
												{__('Add Account', 'easy-dropbox-integration')}
											</button>
										</div>
									)}
								</div>
							</>
						}
					/>
				)}
			</div>
		</div>
	);
};

export default Header;