document.addEventListener('DOMContentLoaded', () => {
    // Load surahs data
    fetch('https://api.alquran.cloud/v1/surah')
        .then(response => response.json())
        .then(data => {
            const surahsContainer = document.querySelector('#surahs .grid');
            data.data.forEach(surah => {
                const surahCard = document.createElement('div');
                surahCard.className = 'surah-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg cursor-pointer';
                surahCard.innerHTML = `
                    <a href="surah.html?number=${surah.number}">
                        <div class="p-6">
                            <div class="flex justify-between items-center mb-4">
                                <span class="text-secondary font-bold text-xl">${surah.number}</span>
                                <span class="arabic-text text-primary">${surah.englishName}</span>
                            </div>
                            <h3 class="text-lg font-semibold text-primary mb-2">${surah.englishNameTranslation}</h3>
                            <p class="text-gray-600">${surah.revelationType} • ${surah.numberOfAyahs} verses</p>
                        </div>
                    </a>
                `;
                surahsContainer.appendChild(surahCard);
            });
        })
        .catch(error => console.error('Error loading surahs:', error));
});

// Function to load specific surah (to be used in surah.html)
function loadSurah(number) {
    fetch(`https://api.alquran.cloud/v1/surah/${number}/en.asad`)
        .then(response => response.json())
        .then(data => {
            const surahData = data.data;
            document.title = `${surahData.englishName} (${surahData.englishNameTranslation}) | Quranic Insights Explorer`;
            
            // Update header
            const header = document.querySelector('.surah-header');
            if (header) {
                header.innerHTML = `
                    <h1 class="text-3xl font-bold text-primary">${surahData.englishNameTranslation} <span class="text-secondary">(${surahData.englishName})</span></h1>
                    <p class="text-gray-600">${surahData.revelationType} • ${surahData.numberOfAyahs} verses</p>
                    <p class="arabic-text text-xl mt-4">${surahData.name}</p>
                `;
            }
            
            // Load verses
            const versesContainer = document.querySelector('.verses-container');
            if (versesContainer) {
                surahData.ayahs.forEach(ayah => {
                    const verseElement = document.createElement('div');
                    verseElement.className = 'verse-container bg-white p-4 rounded-lg mb-4 shadow-sm';
                    verseElement.innerHTML = `
                        <div class="flex items-start mb-4">
                            <span class="verse-number">${ayah.numberInSurah}</span>
                            <p class="arabic-text flex-1 text-right">${ayah.text}</p>
                        </div>
                        <p class="text-gray-700 pl-8">${ayah.translation}</p>
                    `;
                    versesContainer.appendChild(verseElement);
                });
            }
        })
        .catch(error => console.error('Error loading surah:', error));
}

// Check if we're on surah.html and load the specific surah
if (window.location.pathname.includes('surah.html')) {
    const params = new URLSearchParams(window.location.search);
    const surahNumber = params.get('number');
    if (surahNumber) {
        loadSurah(surahNumber);
    }
}