import {
	BookOpen,
	GraduationCap,
	HelpCircle,
	MessageCircle,
	Mail,
	Upload,
	ChevronRight,
	PlayCircle
} from 'lucide-react';
import styles from './QuickHelpWidget.module.scss';
import { click } from '@testing-library/user-event/dist/click';
import TawkChat from '../TawkChat/TawkChat';

const QuickHelpWidget = ({
	isOpen,
	setIsOpen
}: {
	isOpen: boolean;
	setIsOpen: any;
}): JSX.Element => {
	console.log('isOpen', isOpen);
	const handleChatClick = () => {
		window.Tawk_API?.maximize?.(); // Safe call
		// const tryAdjustIframe = () => {
		// 	const iframe = document.querySelector<HTMLIFrameElement>('iframe[title="chat widget"]');
		// 	if (iframe) {
		// 		iframe.style.right = '445px'; // Apply directly
		// 	} else {
		// 		// Retry in case it's not mounted yet
		// 		setTimeout(tryAdjustIframe, 300);
		// 	}
		// };

		// Delay slightly to allow iframe injection
		// setTimeout(tryAdjustIframe, 1000);
		// close quick help and display chat
		setIsOpen(false);
	};

	return (
		<div
			className={`max-w-md mx-auto p-4 rounded-2xl shadow-lg bg-white ${styles.quickHelpWidget} ${
				isOpen ? styles['show-quick-help'] : styles['hide-quick-help']
			}`}
		>
			{/* <div
				className={`max-w-md mx-auto p-4 rounded-2xl shadow-lg bg-white ${styles.quickHelpWidget}`}
				> */}

			<div className="flex justify-between items-center mb-4">
				<h2 className="text-xl font-semibold line-height-51">Quick help</h2>
				<button
					className={`text-pink-600 text-xl ${styles['close-btn']}`}
					onClick={() => {
						setIsOpen(false);
					}}
				>
					×
				</button>
			</div>

			<a
				href="https://www.moneyxplier.com/support/onboarding"
				target="_blank"
				rel="noreferrer"
				className="support-link flex mb-4 border-b pb-2"
			>
				<PlayCircle className="text-pink-600" size={40} />
				<div className="ml-4">
					<h3 className="font-semibold text-lg">Watch a short overview</h3>
					<p className="text-gray-500 text-sm">This will take only 1-2 minutes</p>
				</div>
			</a>

			{/* <div className="mb-6">
				<input
					type="text"
					placeholder="Search anything"
					className="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500"
				/>
			</div> */}

			<div className="mb-6">
				<a
					href="https://www.moneyxplier.com/onboarding"
					target="_blank"
					rel="noreferrer"
					className="h3-link"
				>
					<h3 className="text-lg font-semibold mb-2 line-height-51">Suggested articles</h3>
				</a>
				<ul className="space-y-3">
					{/* {[1, 2, 3].map((_, idx) => ( */}
					<li key="ql1" className="border-b p-2 flex justify-between items-center text-sm">
						<a
							href="https://www.moneyxplier.com/support/input-financials"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span>How to input your financials</span>
							<span className="text-pink-600">
								<ChevronRight size={20} />
							</span>
						</a>
					</li>
					<li key="ql2" className="border-b p-2 flex justify-between items-center text-sm">
						<a
							href="https://www.moneyxplier.com/support/system-for-measuring"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span>System for measuring</span>
							<span className="text-pink-600">
								<ChevronRight size={20} />
							</span>
						</a>
					</li>
					<li key="ql3" className="border-b p-2 flex justify-between items-center text-sm">
						<a
							href="https://www.moneyxplier.com/support/improve"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span>Cash flow Improvements</span>
							<span className="text-pink-600">
								<ChevronRight size={20} />
							</span>
						</a>
					</li>
					{/* ))} */}
				</ul>
			</div>

			<div className="mb-6">
				<h3 className="text-lg font-semibold mb-2 line-height-51">Quick links</h3>
				<ul className="space-y-3 text-sm">
					<li className="flex items-center justify-between border-b p-1">
						<a
							href="https://www.moneyxplier.com/support/onboarding"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span className="flex items-center gap-2">
								<GraduationCap className="text-pink-600" size={20} /> Onboarding
							</span>{' '}
						</a>
						<span className="text-pink-600">
							<ChevronRight size={20} />
						</span>
					</li>
					<li className="flex items-center justify-between border-b p-1 pb-2">
						<a
							href="https://www.moneyxplier.com/onboarding"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span className="flex items-center gap-2">
								<BookOpen className="text-pink-600" size={20} /> Knowledge Base
							</span>
						</a>
						<span className="text-pink-600">
							<ChevronRight size={20} />
						</span>
					</li>
					{/* <li className="flex items-center justify-between border-b p-1">
						<a href="#" className="quick-help">
							<span className="flex items-center gap-2">
								<GraduationCap className="text-pink-600" size={20} /> Academy
							</span>{' '}
						</a>
						<span className="text-pink-600">
							<ChevronRight size={20} />
						</span>
					</li> */}
					<li className="flex items-center justify-between border-b p-1">
						<a
							href="https://www.moneyxplier.com/support"
							target="_blank"
							rel="noreferrer"
							className="quick-help"
						>
							<span className="flex items-center gap-2">
								<HelpCircle className="text-pink-600" size={20} /> FAQ
							</span>
						</a>
						<span className="text-pink-600">
							<ChevronRight size={20} />
						</span>
					</li>
				</ul>
			</div>

			<div>
				{/* <h3 className="text-lg font-semibold line-height-51 pt-50">Support</h3>
				<div className="flex justify-around text-sm">
					<TawkChat setIsOpen={setIsOpen} />
					<a
						href="#"
						onClick={(e) => {
							e.preventDefault();
							handleChatClick();
						}}
						className="support-link flex flex-col items-center"
					>
						<MessageCircle className="text-gray-700 mb-1" size={24} />
						<span>Chat with us</span>
					</a>
					<a href="mailto:support@bmim.co.uk" className="support-link flex flex-col items-center">
						<Mail className="text-gray-700 mb-1" size={24} />
						<span>Send email</span>
					</a>
					* <a href="mailto:support@bmim.co.uk" className="support-link flex flex-col items-center">
						<Upload className="text-gray-700 mb-1" size={24} />
						<span>Open ticket</span>
					</a> *
				</div> */}

				<h3 className="text-lg font-semibold line-height-51 pt-50">Support</h3>
				<ul className="space-y-3 text-sm mb-0">
					<TawkChat setIsOpen={setIsOpen} />
					<li className="flex items-center justify-between border-b p-1 pb-2">
						<a
							href="#"
							onClick={(e) => {
								e.preventDefault();
								handleChatClick();
							}}
							className="support-link flex flex-row items-center gap-2 support-link"
						>
							<MessageCircle className="text-pink-600 mb-1" size={20} />
							<span>Chat with us</span>
						</a>
					</li>
					<li className="flex items-center justify-between p-1 pb-2">
						<a
							href="mailto:support@bmim.co.uk"
							className="support-link flex flex-row items-center gap-2 support-link"
						>
							<Mail className="text-pink-600 mb-1" size={20} />
							<span className="pl-2">support@bmim.co.uk</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	);
};

export default QuickHelpWidget;