fix: show notification permission prompt on user click instead of auto-request

app/components/NotificationHandler.js

@@ -6,44 +6,84 @@ import AuthService from "../services/AuthService";
 
 export default function NotificationHandler() {
   const [notification, setNotification] = useState(null);
+  const [showPrompt, setShowPrompt] = useState(false);
   const initialized = useRef(false);
 
   useEffect(() => {
-    // Wait for hydration to complete
     const timer = setTimeout(() => {
       if (initialized.current) return;
       initialized.current = true;
 
       const token = AuthService.getToken();
-      if (!token) {
-        console.log("[Notifications] Not signed in, skipping");
-        return;
-      }
+      if (!token) return;
 
-      console.log("[Notifications] Signed in, requesting permission...");
-      requestNotificationPermission().then((fcmToken) => {
+      // Check current permission status
+      if ("Notification" in window) {
+        if (Notification.permission === "default") {
+          // Not yet asked — show prompt button
+          setShowPrompt(true);
+        } else if (Notification.permission === "granted") {
+          // Already allowed — get token silently
+          initFCM();
+        }
+        // "denied" — do nothing, user must change in browser settings
+      }
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  async function initFCM() {
+    const fcmToken = await requestNotificationPermission();
     if (fcmToken) {
       console.log("[Notifications] FCM token obtained:", fcmToken.substring(0, 20) + "...");
     }
-      });
-
-      const unsub = onForegroundMessage((payload) => {
+    onForegroundMessage((payload) => {
       const title = payload.notification?.title || payload.data?.title || "Sweet Home";
       const body = payload.notification?.body || payload.data?.body || "";
       setNotification({ title, body });
       setTimeout(() => setNotification(null), 5000);
     });
+  }
 
-      // Cleanup on unmount
-      return () => unsub();
-    }, 1000); // Wait 1s for hydration
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (!notification) return null;
+  async function handleEnableNotifications() {
+    setShowPrompt(false);
+    await initFCM();
+  }
 
   return (
+    <>
+      {/* Permission prompt banner */}
+      {showPrompt && (
+        <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999]">
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
+              <span className="text-xl">🔔</span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-gray-900 text-sm">تفعيل الإشعارات</p>
+              <p className="text-gray-600 text-sm mt-0.5">اسمح بالإشعارات للبقاء على اطلاع بحجوزاتك وعروضنا.</p>
+              <div className="flex gap-2 mt-3">
+                <button
+                  onClick={handleEnableNotifications}
+                  className="px-4 py-1.5 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 transition-colors"
+                >
+                  تفعيل
+                </button>
+                <button
+                  onClick={() => setShowPrompt(false)}
+                  className="px-4 py-1.5 text-gray-500 text-sm hover:text-gray-700 transition-colors"
+                >
+                  لاحقاً
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Foreground notification toast */}
+      {notification && (
         <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999] animate-slide-up">
           <div className="flex items-start gap-3">
             <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
@@ -61,5 +101,7 @@ export default function NotificationHandler() {
             </button>
           </div>
         </div>
+      )}
+    </>
   );
 }