<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Niszro Reels</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
    <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-storage-compat.js"></script>
    <script type="module">
        import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';

        // إعداد Supabase
        const supabaseUrl = 'https://rgmkvnxwizugxnitcwag.supabase.co';
        const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJnbWt2bnh3aXp1Z3huaXRjd2FnIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjc0MDAzNTgsImV4cCI6MjA0Mjk3NjM1OH0.G5ouJGW6s41E8yK6OyKshOfFER1sTB2ZXmXhfqK_6no';
        const supabase = createClient(supabaseUrl, supabaseKey);

        // التحقق من تسجيل الدخول
        async function checkAuth() {
            const { data: { session } } = await supabase.auth.getSession();

            if (!session) {
                // إذا لم يكن المستخدم مسجل دخول، تحويله إلى صفحة تسجيل الدخول
                window.location.href = '/login';
            } else {
                // إذا كان مسجل الدخول، استمر بعرض الفيديوهات
                fetchVideos();
            }
        }

        // إعداد Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyA28HLsfW7P3XKA5x-2JGO3cHFqODQnvUg",
            authDomain: "ns-t-7f6de.firebaseapp.com",
            projectId: "ns-t-7f6de",
            storageBucket: "ns-t-7f6de.appspot.com",
            messagingSenderId: "793792763910",
            appId: "1:793792763910:web:9e7bc66311546336948b87"
        };

        firebase.initializeApp(firebaseConfig);
        const storage = firebase.storage();

        // جلب الفيديوهات من Firebase Storage
        async function fetchVideos() {
            try {
                const reelsFolder = storage.ref().child('reels');
                const videoFiles = await reelsFolder.listAll();
                const gallery = document.getElementById('video-gallery');

                for (const fileRef of videoFiles.items) {
                    const videoUrl = await fileRef.getDownloadURL();
                    const videoCard = createVideoCard(videoUrl);
                    gallery.appendChild(videoCard);
                }
            } catch (error) {
                console.error("Error fetching videos: ", error);
            }
        }

        // إنشاء كارد للفيديو
        function createVideoCard(videoUrl) {
            const card = document.createElement('div');
            card.classList.add('relative', 'video-thumbnail');
            
            const video = document.createElement('video');
            video.src = videoUrl;
            video.setAttribute('muted', '');
            video.setAttribute('loop', '');
            video.setAttribute('playsinline', '');

            // تشغيل الفيديو عند الوقوف عليه
            video.addEventListener('mouseenter', () => {
                video.play();
            });

            // إيقاف الفيديو عند الابتعاد
            video.addEventListener('mouseleave', () => {
                video.pause();
            });

            // عند النقر على الفيديو، الانتقال إلى صفحة الريلز مع تمرير رابط الفيديو
            card.addEventListener('click', () => {
                window.location.href = `v/index.html?video=${encodeURIComponent(videoUrl)}`;
            });

            card.appendChild(video);
            return card;
        }

        // التحقق من المصادقة عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', () => {
            checkAuth();
        });
    </script>
    <style>
        .video-thumbnail {
            cursor: pointer;
            transition: transform 0.3s;
        }
        .video-thumbnail:hover {
            transform: scale(1.05);
        }
        video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        video:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-background text-foreground p-4">
    <h1 class="text-3xl font-bold mb-4">Niszro Reels</h1>

    <!-- قسم الصور أو الفيديوهات الدائرية في الأعلى -->
    <div class="flex space-x-4 mb-6">
    <div class="relative">
        <a href="https://www.niszro.com/collections/Watch" target="_blank">
            <img src="https://files.easy-orders.net/1734352617066637326.jpg" alt="ساعات" class="w-20 h-20 rounded-full shadow-lg" />
        </a>
        <span class="block text-primary-foreground text-sm text-center mt-1">ساعات</span>
    </div>
    <div class="relative">
        <a href="https://www.niszro.com/collections/Beauty" target="_blank">
            <img src="https://files.easy-orders.net/1734353415862921018.jpg" alt="الصحه و الجمال" class="w-20 h-20 rounded-full shadow-lg" />
        </a>
        <span class="block text-secondary-foreground text-sm text-center mt-1">الصحه و الجمال</span>
    </div>
    <div class="relative">
        <a href="https://www.niszro.com/collections/Perfume" target="_blank">
            <img src="https://files.easy-orders.net/1734353727413801124.jpg" alt="ساعات" class="w-20 h-20 rounded-full shadow-lg" />
        </a>
        <span class="block text-secondary-foreground text-sm text-center mt-1">عطور</span>
    </div>
</div>
        <!-- المزيد من الصور حسب الحاجة -->
    </div>

    <h2 class="text-xl font-semibold mb-2">Trending Now</h2>

    <!-- قسم عرض الفيديوهات -->
    <div class="grid grid-cols-2 gap-4" id="video-gallery">
        <!-- سيتم إضافة الفيديوهات هنا ديناميكيًا -->
    </div>
</body>
</html>
