script.js

// NABAD - script.js

// --- GLOBAL STATE ---
let currentLanguage = localStorage.getItem('nabadLanguage') || 'ar';

// --- INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
    console.log("🚀 NABAD Platform Initialized");
    initializeLanguage();
    setupEventListeners();

    if (document.getElementById('year')) {
        document.getElementById('year').textContent = new Date().getFullYear();
    }
    
    // Page specific initializations
    if (window.location.pathname.includes('dashboard.html')) {
        initDashboards();
    } else if (window.location.pathname.includes('video.html')) {
        initVideoLibrary();
    } else {
        initHomePage();
    }
});

// --- EVENT LISTENERS SETUP ---
function setupEventListeners() {
    // Language toggles
    document.querySelectorAll('button[onclick="toggleLanguage()"]').forEach(btn => {
        btn.addEventListener('click', toggleLanguage);
    });

    // Smooth scrolling for homepage links
    if (!window.location.pathname.includes('dashboard.html') && !window.location.pathname.includes('video.html')) {
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    }
}

// --- LANGUAGE MANAGEMENT ---
function initializeLanguage() {
    const htmlEl = document.getElementById('html');
    if (currentLanguage === 'ar') {
        htmlEl.setAttribute('lang', 'ar');
        htmlEl.setAttribute('dir', 'rtl');
        htmlEl.classList.add('rtl');
        htmlEl.classList.remove('ltr');
    } else {
        htmlEl.setAttribute('lang', 'en');
        htmlEl.setAttribute('dir', 'ltr');
        htmlEl.classList.add('ltr');
        htmlEl.classList.remove('rtl');
    }
    updateLanguageUI();
    updateTextContent();
}

function toggleLanguage() {
    currentLanguage = currentLanguage === 'en' ? 'ar' : 'en';
    localStorage.setItem('nabadLanguage', currentLanguage);
    initializeLanguage();
}

function updateLanguageUI() {
    if (document.getElementById('lang-toggle')) {
        document.getElementById('lang-toggle').textContent = currentLanguage === 'en' ? 'ع' : 'En';
    }
    if (document.getElementById('lang-toggle-dash')) {
        document.getElementById('lang-toggle-dash').textContent = currentLanguage === 'en' ? 'ع' : 'En';
    }
    
    // Handle placeholder text for search input
    const searchInput = document.getElementById('video-search');
    if (searchInput) {
        const placeholderText = currentLanguage === 'ar' ? 'ابحث في الفيديوهات...' : 'Search videos...';
        searchInput.setAttribute('placeholder', placeholderText);
    }
}

function updateTextContent() {
    if (!translations) return;
    const trans = translations[currentLanguage];
    document.querySelectorAll('[data-en]').forEach(el => {
        const keyEn = el.getAttribute('data-en');
        const keyAr = el.getAttribute('data-ar');
        if (currentLanguage === 'ar' && keyAr) {
            el.textContent = keyAr;
        } else {
            el.textContent = keyEn;
        }
    });

    // Update dashboard title separately as it's not a static element
    if (window.location.pathname.includes('dashboard.html')) {
        const activeDashboard = document.querySelector('.sidebar-link.active');
        if (activeDashboard) {
            updateDashboardTitle(activeDashboard);
        }
    }
}

// --- HOME PAGE SPECIFIC ---
function initHomePage() {
    // Scroll reveal animation
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.scroll-reveal').forEach(el => {
        observer.observe(el);
    });
}


// --- DASHBOARD PAGE SPECIFIC ---
function initDashboards() {
    const sidebarLinks = document.querySelectorAll('.sidebar-link');
    sidebarLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            
            sidebarLinks.forEach(l => l.classList.remove('active'));
            link.classList.add('active');

            const dashboardId = link.getAttribute('data-dashboard');
            document.querySelectorAll('.dashboard-content').forEach(content => {
                content.classList.add('hidden');
            });
            document.getElementById(`dashboard-${dashboardId}`).classList.remove('hidden');
            updateDashboardTitle(link);
        });
    });
    // Set initial title
    updateDashboardTitle(document.querySelector('.sidebar-link.active'));
}

function updateDashboardTitle(activeLink) {
    const titleEl = document.getElementById('dashboard-title');
    if (titleEl && activeLink) {
        const titleText = activeLink.querySelector('span').textContent;
        const dashboardText = currentLanguage === 'ar' ? 'لوحة تحكم: ' : 'Dashboard: ';
        titleEl.textContent = dashboardText + titleText;
    }
}


// --- VIDEO LIBRARY SPECIFIC ---
const ALL_VIDEOS = [
    { id: 'dfrPtS4MSlw', title_en: "Vision 2030: A Reality Unfolding", title_ar: "رؤية 2030: واقع يتحقق", category: 'vision2030' },
    { id: 'IzogBJpcEWg', title_en: "Saudi National Anthem", title_ar: "النشيد الوطني السعودي", category: 'pride' },
    { id: '35g7UMVbfPc', title_en: "Rasd Platform Demo", title_ar: "عرض منصة رصد", category: 'technology' },
    { id: 'kDqTPT1SQbU', title_en: "Saudi Tourism Impact", title_ar: "تأثير السياحة السعودية", category: 'vision2030' },
    { id: 'h-KM2Z0YxtQ', title_en: "The Future of AI in KSA", title_ar: "مستقبل الذكاء الاصطناعي بالمملكة", category: 'technology' },
    // You can add more videos here
];

function initVideoLibrary() {
    const grid = document.getElementById('video-grid');
    const searchInput = document.getElementById('video-search');
    const filterBtns = document.querySelectorAll('.filter-btn');

    function renderVideos(videos) {
        if (!grid) return;
        grid.innerHTML = '';
        videos.forEach(video => {
            const title = currentLanguage === 'ar' ? video.title_ar : video.title_en;
            const card = document.createElement('div');
            card.className = 'video-card glass-card rounded-2xl overflow-hidden';
            card.innerHTML = `
                <div class="aspect-video">
                    <iframe class="w-full h-full" src="https://www.youtube.com/embed/${video.id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-white truncate">${title}</h3>
                </div>
            `;
            grid.appendChild(card);
        });
    }

    function filterAndSearch() {
        const searchTerm = searchInput.value.toLowerCase();
        const activeFilter = document.querySelector('.filter-btn.active').dataset.filter;

        const filteredVideos = ALL_VIDEOS.filter(video => {
            const matchesFilter = activeFilter === 'all' || video.category === activeFilter;
            const matchesSearch = video.title_en.toLowerCase().includes(searchTerm) || video.title_ar.toLowerCase().includes(searchTerm);
            return matchesFilter && matchesSearch;
        });
        
        renderVideos(filteredVideos);
    }
    
    searchInput.addEventListener('input', filterAndSearch);

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            filterBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            filterAndSearch();
        });
    });

    renderVideos(ALL_VIDEOS);
}

// --- BACKGROUND MUSIC PLAYER ---

let player;
let musicPlaying = false;

// This function creates an <iframe> (YouTube player) after the API code downloads.
function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-player', {
        height: '0',
        width: '0',
        videoId: 'IzogBJpcEWg', // Saudi National Anthem Video ID
        playerVars: {
            'autoplay': 0,
            'controls': 0,
            'loop': 1,
            'playlist': 'IzogBJpcEWg', // Required for loop to work
            'volume': 30 // Set volume to 30%
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

// The API will call this function when the video player is ready.
function onPlayerReady(event) {
    // Player is ready, you could optionally play on load here, but we'll use a button
    // event.target.playVideo(); 
}

// Function to toggle music play/pause
function toggleBackgroundMusic() {
    const toggleButton = document.getElementById('music-toggle');
    if (musicPlaying) {
        player.pauseVideo();
        toggleButton.innerHTML = '<i class="fas fa-music text-xl"></i>';
        toggleButton.classList.remove('bg-brand-gold'); // Remove active state color
        musicPlaying = false;
    } else {
        player.playVideo();
        toggleButton.innerHTML = '<i class="fas fa-pause text-xl"></i>';
        toggleButton.classList.add('bg-brand-gold'); // Add active state color
        musicPlaying = true;
    }
}

// Add event listener to the button
document.addEventListener('DOMContentLoaded', () => {
    const musicButton = document.getElementById('music-toggle');
    if (musicButton) {
        musicButton.addEventListener('click', toggleBackgroundMusic);
    }
});