const tabConfig = {
	'featured-products-style2-2-vrrnqE_1': {
		name: 'سلاســـــل',
		url: 'https://rovingsa.com/%D8%B3%D9%84%D8%A7%D8%B3%D9%80%D9%80%D9%80%D9%84/c2090172475',
		buttonText: 'تسوق السلاسل',
	},
	'featured-products-style2-2-vrrnqE_2': {
		name: 'أســـاور نسائيــة',
		url: 'https://rovingsa.com/%D8%A3%D8%B3%D9%80%D9%80%D9%80%D8%A7%D9%88%D8%B1/c1461052100',
		buttonText: 'تسوق الأساور',
	},
	'featured-products-style2-2-vrrnqE_3': {
		name: 'خواتـــــم',
		url: 'https://rovingsa.com/%D8%AE%D9%88%D8%A7%D8%AA%D9%80%D9%80%D9%80%D9%85/c126492112',
		buttonText: 'تسوق الخواتم',
	},
	'featured-products-style2-2-vrrnqE_4': {
		name: 'حلـــــق',
		url: 'https://rovingsa.com/%D8%AD%D9%84%D9%80%D9%80%D9%80%D9%82/c1481032764',
		buttonText: 'تسوق حلـق',
	},
};

let processedTabs = new Set();
let observer = null;
let retryCount = 0;
const maxRetries = 50;

function createReadMoreCard(tabId, config) {
	return `
    <div class="s-products-slider-card swiper-slide read-more-card" data-tab-id="${tabId}">
      <div class="modern-read-more-card">
        <h3 class="card-title">عرض المزيد من ${config.name}</h3>
        <p class="card-subtitle">اكتشف مجموعتنا الكاملة</p>
        <a href="${config.url}" class="card-button">
          ${config.buttonText}
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M5 12h14m-7-7l7 7-7 7" stroke="currentColor" stroke-width="2"/>
          </svg>
        </a>
      </div>
    </div>
  `;
}

function updateSlider(tabElement) {
	try {
		const swiperContainer = tabElement.querySelector(
			'.swiper-container, .swiper',
		);
		if (swiperContainer && swiperContainer.swiper) {
			swiperContainer.swiper.update();
			swiperContainer.swiper.updateSlides();
			console.log('Swiper updated successfully');
		} else {
			if (window.Swiper) {
				setTimeout(() => {
					const newSwiper = swiperContainer.querySelector('.swiper');
					if (newSwiper && !newSwiper.swiper) {
						new Swiper(newSwiper, {
							slidesPerView: 'auto',
							spaceBetween: 16,
							freeMode: true,
							watchSlidesProgress: true,
						});
					}
				}, 100);
			}
		}
	} catch (error) {
		console.warn('Slider update failed:', error);
	}
}

function addReadMoreCard(tabId) {
	const tabItem = document.getElementById(tabId);
	if (!tabItem) return false;

	const swiperWrapper = tabItem.querySelector('.swiper-wrapper');
	if (!swiperWrapper) return false;

	if (swiperWrapper.querySelector(`.read-more-card[data-tab-id="${tabId}"]`)) {
		return true;
	}

	try {
		const cardHTML = createReadMoreCard(tabId, tabConfig[tabId]);
		swiperWrapper.insertAdjacentHTML('beforeend', cardHTML);

		processedTabs.add(tabId);

		setTimeout(() => updateSlider(tabItem), 50);

		console.log(`Added read more card to tab: ${tabId}`);
		return true;
	} catch (error) {
		console.error(`Failed to add card to ${tabId}:`, error);
		return false;
	}
}

function processAllTabs() {
	let addedCount = 0;

	Object.keys(tabConfig).forEach(tabId => {
		if (!processedTabs.has(tabId)) {
			if (addReadMoreCard(tabId)) {
				addedCount++;
			}
		}
	});

	return addedCount;
}

function checkTabsReady() {
	const totalTabs = Object.keys(tabConfig).length;
	const processedCount = processedTabs.size;

	if (processedCount === totalTabs) {
		console.log('All tabs processed successfully');
		if (observer) {
			observer.disconnect();
			observer = null;
		}
		return true;
	}

	return false;
}

function scheduleRetry() {
	if (retryCount >= maxRetries) {
		console.warn('Max retry attempts reached');
		return;
	}

	retryCount++;
	const delay = Math.min(1000, 100 * retryCount);

	setTimeout(() => {
		processAllTabs();
		if (!checkTabsReady()) {
			scheduleRetry();
		}
	}, delay);
}

function handleMutations(mutations) {
	let shouldProcess = false;

	mutations.forEach(mutation => {
		if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
			mutation.addedNodes.forEach(node => {
				if (node.nodeType === Node.ELEMENT_NODE) {
					if (node.id && Object.keys(tabConfig).includes(node.id)) {
						shouldProcess = true;
					} else if (node.querySelector) {
						Object.keys(tabConfig).forEach(tabId => {
							if (node.querySelector(`#${tabId}`)) {
								shouldProcess = true;
							}
						});
					}
				}
			});
		}
	});

	if (shouldProcess) {
		setTimeout(() => {
			processAllTabs();
			if (!checkTabsReady()) {
				scheduleRetry();
			}
		}, 100);
	}
}

function initializeObserver() {
	if (observer) return;

	observer = new MutationObserver(handleMutations);

	observer.observe(document.body, {
		childList: true,
		subtree: true,
		attributes: false,
	});

	console.log('MutationObserver initialized');
}

function initialize() {
	console.log('Initializing Read More Cards system...');

	processedTabs.clear();
	retryCount = 0;

	const addedCount = processAllTabs();
	console.log(`Initially processed ${addedCount} tabs`);

	if (!checkTabsReady()) {
		initializeObserver();
		scheduleRetry();
	}
}

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

const styles = `
<style>
.modern-read-more-card {
  background: #faf9f7;
  color:#000;
  padding: 2rem 1.5rem;
  border-radius: 0;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow:none;
  min-height: 300px; /* Ensure consistent height with other cards */
}

.read-more-card .modern-read-more-card {
  width: 100%;
  box-sizing: border-box;
}

.modern-read-more-card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.card-subtitle {
  font-size: 0.875rem;
  opacity: 0.9;
  margin: 0 0 1.5rem 0;
  line-height: 1.4;
}

.card-button {
  background:none;
  color: #000;
  padding: 0.75rem 1rem;
  border-radius: 0;
  border:1px solid #000;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.card-button:hover {
  transform: translateY(-2px);
  color: #000;
  text-decoration: none;
}

.card-button svg {
  transition: transform 0.3s ease;
}

.card-button:hover svg {
  transform: translateX(-3px);
}

/* RTL support */
[dir="rtl"] .card-button:hover svg {
  transform: translateX(3px);
}

/* Ensure proper slide behavior */
.read-more-card.swiper-slide {
  width: auto;
  flex-shrink: 0;
}

/* Match other product cards width if needed */
@media (min-width: 768px) {
  .read-more-card.swiper-slide {
    width: 280px; /* Adjust based on your other cards */
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modern-read-more-card {
    padding: 1.5rem 1rem;
    min-height: 250px;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .read-more-card.swiper-slide {
    width: 240px;
  }
}

@media (max-width: 480px) {
  .read-more-card.swiper-slide {
    width: 200px;
  }
}
</style>
`;

document.head.insertAdjacentHTML('beforeend', styles);

handleDOMState();

window.readMoreCards = {
	processedTabs,
	retryCount,
	reinitialize: initialize,
	processAllTabs,
	tabConfig,
};