/* START OF JS CODE BY NUSSUQ.COM */
const scaSection = document.querySelector('.store-footer__inner .container.grid > div.relative',);
if (scaSection) {
const toSCA = `
<div class="sca-logo">
<img class="logo" src="https://i.ibb.co/n82CgCS/sca.png" width="40">
<p>عضو جمعية القهوة العالمية ( SCA )</p>
</div>
`;

scaSection.insertAdjacentHTML('afterend', toSCA);
}

(function initAnnouncementSlider() {
	'use strict';

	// Configuration
	const announcementsConfig = {
		ar: [
			{
				text: 'توصيل سريع الأن من 1 الى 5 ايام عمل لجميع مدن المملكة والخليج',
				link: '',
				icon: '',
				backgroundColor: '#3f4c60',
				textColor: '#ffffff',
			},
			{
				text: 'كود خصم لأول 100 طلب (KKW)',
				link: '',
				icon: '',
				backgroundColor: '#3f4c60',
				textColor: '#ffffff',
			},
		],
		en: [
			{
				text: 'توصيل سريع الأن من 1 الى 5 ايام عمل لجميع مدن المملكة والخليج',
				link: '',
				icon: '',
				backgroundColor: '#3f4c60',
				textColor: '#ffffff',
			},
			{
				text: 'كود خصم لأول 100 طلب (KKW)',
				link: '',
				icon: '',
				backgroundColor: '#3f4c60',
				textColor: '#ffffff',
			},
		],
	};

	// Settings
	const settings = {
		autoplaySpeed: 3000,
		transitionDuration: 600,
		pauseOnHover: true,
	};

	function getCurrentLanguage() {
		return document.documentElement.dir === 'rtl' ||
			document.documentElement.lang === 'ar' ||
			window.location.href.includes('/ar/')
			? 'ar'
			: 'en';
	}

	function addStyles() {
		if (document.getElementById('announcement-slider-styles')) return;

		const style = document.createElement('style');
		style.id = 'announcement-slider-styles';
		style.textContent = `
			.announcement-slider-container {
				overflow: hidden;
				width: 100%;
				position: relative;
			}

			.announcement-slider-wrapper {
				width: 100%;
				height: 40px;
				position: relative;
				overflow: hidden;
			}

			.announcement-slider-track {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.announcement-slide {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transform: translateY(100%);
				transition: all ${settings.transitionDuration}ms ease-in-out;
			}

			.announcement-slide.active {
				opacity: 1;
				transform: translateY(0);
				z-index: 2;
			}

			.announcement-slide.prev {
				opacity: 0;
				transform: translateY(-100%);
				z-index: 1;
			}

			.announcement-content {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				padding: 0.625rem 1rem;
			}

			.announcement-text {
				flex: 1;
				text-align: center;
				font-weight: 600;
				font-size: 0.875rem;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;
			}

			.announcement-text a {
				color: inherit;
				text-decoration: none;
				transition: opacity 0.2s;
			}

			.announcement-text a:hover {
				opacity: 0.8;
			}

			.announcement-close {
				padding: 0 0.25rem;
				cursor: pointer;
				font-size: 1rem;
				opacity: 0.8;
				transition: opacity 0.2s;
				flex-shrink: 0;
			}

			.announcement-close:hover {
				opacity: 1;
			}

			.announcement-slider-container.paused .announcement-slide {
				transition-duration: 0ms;
			}

			@media (max-width: 768px) {
				.announcement-text {
					font-size: 0.75rem;
				}

				.announcement-slider-wrapper {
					height: 36px;
				}
			}
		`;

		document.head.appendChild(style);
	}

	function createSliderHTML(announcements) {
		const slidesHTML = announcements
			.map(
				(announcement, index) => `
			<div class="announcement-slide ${index === 0 ? 'active' : ''}" 
			     style="background-color: ${announcement.backgroundColor}; color: ${announcement.textColor
					}">
				<div class="announcement-content container center-between">
					<div class="announcement-text">
						${announcement.icon
						? `<i class="inline-block align-middle ${announcement.icon}"></i>`
						: ''
					}
						<a href="${announcement.link}" target="_self">
							${announcement.text}
						</a>
					</div>
					<a href="#" class="announcement-close sicon-cancel" aria-label="close-alert"></a>
				</div>
			</div>
		`,
			)
			.join('');

		return `
			<div class="announcement-slider-container salla-advertisement" role="region" aria-label="Announcements">
				<div class="announcement-slider-wrapper">
					<div class="announcement-slider-track">
						${slidesHTML}
					</div>
				</div>
			</div>
		`;
	}

	function removeOldAnnouncements() {
		const oldAnnouncements = document.querySelectorAll('.salla-advertisement');
		oldAnnouncements.forEach(ad => ad.remove());
	}

	function initSlider(container, announcements) {
		if (announcements.length <= 1) return;

		const slides = container.querySelectorAll('.announcement-slide');
		let currentIndex = 0;
		let autoplayInterval;
		let isPaused = false;

		function goToSlide(index) {
			slides.forEach(slide => {
				slide.classList.remove('active', 'prev');
			});

			slides[currentIndex].classList.add('prev');
			currentIndex = index;
			slides[currentIndex].classList.add('active');
		}

		function nextSlide() {
			const nextIndex = (currentIndex + 1) % slides.length;
			goToSlide(nextIndex);
		}

		function startAutoplay() {
			if (autoplayInterval) clearInterval(autoplayInterval);
			autoplayInterval = setInterval(nextSlide, settings.autoplaySpeed);
		}

		function stopAutoplay() {
			if (autoplayInterval) {
				clearInterval(autoplayInterval);
				autoplayInterval = null;
			}
		}

		if (settings.pauseOnHover) {
			container.addEventListener('mouseenter', () => {
				isPaused = true;
				stopAutoplay();
				container.classList.add('paused');
			});

			container.addEventListener('mouseleave', () => {
				isPaused = false;
				container.classList.remove('paused');
				startAutoplay();
			});
		}

		startAutoplay();

		document.addEventListener('visibilitychange', () => {
			if (document.hidden) {
				stopAutoplay();
			} else if (!isPaused) {
				startAutoplay();
			}
		});
	}

	function handleCloseClick(container) {
		const closeButtons = container.querySelectorAll('.announcement-close');
		closeButtons.forEach(btn => {
			btn.addEventListener('click', e => {
				e.preventDefault();
				e.stopPropagation();

				container.style.transition = 'opacity 0.3s ease, max-height 0.3s ease';
				container.style.opacity = '0';
				container.style.maxHeight = '0';

				setTimeout(() => {
					container.remove();
					localStorage.setItem('announcement_slider_closed', 'true');
				}, 300);
			});
		});
	}

	function init() {
		if (localStorage.getItem('announcement_slider_closed') === 'true') {
			removeOldAnnouncements();
			return;
		}

		const lang = getCurrentLanguage();
		const announcements = announcementsConfig[lang] || announcementsConfig.en;

		if (!announcements || announcements.length === 0) {
			console.warn('No announcements configured');
			return;
		}

		addStyles();
		removeOldAnnouncements();

		const header = document.querySelector(
			'header, .store-header, .main-nav-container',
		);
		const insertionPoint = header || document.body.firstChild;

		const sliderHTML = createSliderHTML(announcements);
		const tempDiv = document.createElement('div');
		tempDiv.innerHTML = sliderHTML;
		const sliderContainer = tempDiv.firstElementChild;

		if (header) {
			header.parentNode.insertBefore(sliderContainer, header);
		} else {
			document.body.insertBefore(sliderContainer, insertionPoint);
		}

		if (announcements.length > 1) {
			initSlider(sliderContainer, announcements);
		}

		handleCloseClick(sliderContainer);

		console.log(
			'✅ Announcement slider initialized with',
			announcements.length,
			'slides',
		);
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}

	window.AnnouncementSliderConfig = {
		refresh: function () {
			localStorage.removeItem('announcement_slider_closed');
			const existing = document.querySelector('.announcement-slider-container');
			if (existing) existing.remove();
			init();
		},
		updateAnnouncements: function (lang, newAnnouncements) {
			announcementsConfig[lang] = newAnnouncements;
			this.refresh();
		},
		getConfig: function () {
			return { announcementsConfig, settings };
		},
	};
})();