/* ============================================
   info.js - طلباتك بلس - صفحة المعلومات (index2)
   ============================================ */

// --- إعدادات API (تأخذ القيمة من المتغير المُعرّف في index2.html) ---


// --- التحكم بالسلايدر (تبديل الصور) ---
let currentSlide = 1;
let slideInterval;

function startSlider() {
    // تبديل كل 5 ثواني
    slideInterval = setInterval(() => {
        const slide1 = document.getElementById('slide1');
        const slide2 = document.getElementById('slide2');
        if (currentSlide === 1) {
            slide1.style.opacity = '0';
            slide2.style.opacity = '1';
            currentSlide = 2;
        } else {
            slide1.style.opacity = '1';
            slide2.style.opacity = '0';
            currentSlide = 1;
        }
    }, 5000);
}

// --- تحميل وعرض الفيديوهات ---
async function loadVideos() {
    try {
        const res = await fetch('/api/settings');
        if (!res.ok) throw new Error('فشل تحميل الإعدادات');
        const data = await res.json();
        const videos = data.videos || [];
        renderVideos(videos);
    } catch (err) {
        console.error('خطأ في تحميل الفيديوهات:', err);
        document.getElementById('videosContainer').innerHTML = '<p class="text-red-500">تعذر تحميل الفيديوهات</p>';
    }
}

function renderVideos(videoUrls) {
    const container = document.getElementById('videosContainer');
    container.innerHTML = ''; // تفريغ أي محتوى سابق

    if (!videoUrls || videoUrls.length === 0) {
        container.innerHTML = '<p class="text-zinc-500">لا توجد فيديوهات متاحة حالياً</p>';
        return;
    }

    videoUrls.forEach(url => {
        const videoId = extractYouTubeVideoId(url);
        if (!videoId) return; // تجاهل الروابط غير الصالحة

        // إنشاء بطاقة الفيديو باستخدام Tailwind
        const card = document.createElement('div');
        card.className = 'bg-zinc-50 p-4 rounded-2xl shadow-md border border-zinc-200';

        // يمكن عرض الفيديو كصورة مصغرة مع رابط للتشغيل، أو تضمين iframe للمعاينة المباشرة.
        // هنا سنستخدم iframe لتشغيل الفيديو مباشرة (يمكن تغييرها إلى صورة مصغرة حسب الرغبة).
        card.innerHTML = `
            <div class="relative pb-9/16" style="padding-bottom: 56.25%;">
                <iframe class="absolute top-0 left-0 w-full h-full rounded-xl"
                    src="https://www.youtube.com/embed/${videoId}"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
            <a href="${url}" target="_blank" class="mt-3 inline-block text-[#ff661c] hover:underline">
                مشاهدة على يوتيوب
            </a>
        `;
        container.appendChild(card);
    });
}

// استخراج معرف الفيديو من رابط يوتيوب (يدعم عدة صيغ)
function extractYouTubeVideoId(url) {
    const patterns = [
        /youtube\.com\/watch\?v=([^&]+)/,
        /youtu\.be\/([^?]+)/,
        /youtube\.com\/embed\/([^?]+)/,
        /youtube\.com\/v\/([^?]+)/,
        /youtube\.com\/shorts\/([^?]+)/
    ];
    for (let pattern of patterns) {
        const match = url.match(pattern);
        if (match && match[1]) return match[1];
    }
    return null;
}

// --- تهيئة الصفحة ---
document.addEventListener('DOMContentLoaded', () => {
    startSlider();
    loadVideos();
});

// اختياري: إيقاف السلايدر عندما لا تكون الصفحة مرئية لتوفير الموارد
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        clearInterval(slideInterval);
    } else {
        startSlider();
    }
});