<!DOCTYPE html>

<html lang="ar" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>موقعي المحمي</title>

    <script src="https://jsdelivr.net"></script>

    <style>

        body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }

        .box { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; max-width: 400px; width: 90%; }

        input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; text-align: center; font-size: 16px; }

        button { background: #3ecf8e; color: white; border: none; padding: 12px 20px; width: 100%; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; }

        button:hover { background: #34b279; }

        .msg { font-size: 14px; margin-top: 10px; font-weight: bold; }

        .error { color: #ff4d4d; }

        .success { color: #28a745; }

        .hidden { display: none !important; }

        .logout-btn { background: #ff4d4d; width: auto; margin-top: 20px; padding: 8px 15px; font-size: 14px; }

    </style>

</head>

<body>

    <!-- بوابه الحماية -->

    <div id="auth-box" class="box hidden">

        <h2>تسجيل الدخول للموقع</h2>

        <p>أدخل بريدك الإلكتروني المسموح له بالدخول لاستلام رابط الـ OTP</p>

        <input type="email" id="user-email" placeholder="example@domain.com">

        <button onclick="loginWithEmail()">إرسال رابط الدخول الآمن</button>

        <p id="msg" class="msg"></p>

    </div>

    <!-- محتوى موقعك الأصلي (تعدل عليه براحتك) -->

    <div id="main-site" class="box hidden">

        <h1>🎉 أهلاً بك يا صاحبي! 🎉</h1>

        <p>لقد سجلت دخولك بنجاح. هذا هو محتوى موقعك المحمي والمجاني مدى الحياة.</p>

        <button onclick="logout()" class="logout-btn">تسجيل الخروج</button>

    </div>

    <script>

        // ستقوم باستبدال هذه البيانات من مشروع Supabase لاحقاً

        const SUPABASE_URL = "https://qbvvbncfehuifxcttyhk.supabase.co/rest/v1/";

        const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFidnZibmNmZWh1aWZ4Y3R0eWhrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3OTI3OTA3NjYsImV4cCI6MjEwODM2Njc2Nn0.bcLdrrhJrOeImxJ01-svkE8JnMxGrONQUdhQ1XFxRlE";

        const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

        window.onload = function() { checkUser(); };

        async function checkUser() {

            const { data: { session } } = await supabase.auth.getSession();

            if (session && session.user) {

                document.getElementById("main-site").classList.remove("hidden");

                document.getElementById("auth-box").classList.add("hidden");

            } else {

                document.getElementById("auth-box").classList.remove("hidden");

                document.getElementById("main-site").classList.add("hidden");

            }

        }

        async function loginWithEmail() {

            const emailInput = document.getElementById("user-email").value.trim().toLowerCase();

            const msg = document.getElementById("msg");

            if (!emailInput) { msg.className = "msg error"; msg.innerText = "اكتب الإيميل أولاً!"; return; }

            msg.className = "msg success"; msg.innerText = "جاري الإرسال...";

            const { error } = await supabase.auth.signInWithOtp({

                email: emailInput,

                options: { shouldCreateUser: false }

            });

            if (error) {

                msg.className = "msg error";

                msg.innerText = "عذراً، هذا البريد غير مسموح له بالدخول.";

            } else {

                msg.className = "msg success";

                msg.innerText = "تم إرسال رابط الدخول السري لبريدك بنجاح! تفقد الـ Inbox أو الـ Spam واضغط عليه.";

            }

        }

        async function logout() {

            await supabase.auth.signOut();

            window.location.reload();

        }

    </script>

</body>

</html>