fix: request permission synchronously from user click gesture

app/components/NotificationHandler.js

@@ -1,9 +1,22 @@
 "use client";
 
 import { useEffect, useState, useRef } from "react";
-import { requestNotificationPermission, onForegroundMessage } from "../utils/firebase";
+import { initializeApp, getApps } from "firebase/app";
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import AuthService from "../services/AuthService";
 
+const firebaseConfig = {
+  apiKey: "AIzaSyBZV7KBLRJSTApahfrO8lBesmIM3zNRSaY",
+  authDomain: "sweet-home-b2766.firebaseapp.com",
+  projectId: "sweet-home-b2766",
+  storageBucket: "sweet-home-b2766.firebasestorage.app",
+  messagingSenderId: "602865114600",
+  appId: "1:602865114600:web:ed9b6754940507a6ab585d",
+  measurementId: "G-M2V95NBJLX",
+};
+
+const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+
 export default function NotificationHandler() {
   const [notification, setNotification] = useState(null);
   const [showPrompt, setShowPrompt] = useState(false);
@@ -14,46 +27,73 @@ export default function NotificationHandler() {
       if (initialized.current) return;
       initialized.current = true;
 
-      const token = AuthService.getToken();
-      if (!token) return;
+      if (!AuthService.getToken()) return;
 
-      // 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();
+          setupFCM();
         }
-        // "denied" — do nothing, user must change in browser settings
       }
     }, 1000);
 
     return () => clearTimeout(timer);
   }, []);
 
-  async function initFCM() {
-    const fcmToken = await requestNotificationPermission();
+  async function setupFCM() {
+    try {
+      const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js");
+      const messaging = getMessaging(app);
+
+      const fcmToken = await getToken(messaging, {
+        vapidKey: "BGZ4Fo8rRhoTdStLGlCySDZOnAX4ekCA0e3HDWXL5uEi2kOnXynYjbaDbY15002phUrFqxBpPPFHgfH2VhrmFDU",
+        serviceWorkerRegistration: registration,
+      });
+
       if (fcmToken) {
-      console.log("[Notifications] FCM token obtained:", fcmToken.substring(0, 20) + "...");
+        console.log("[FCM] Token:", fcmToken.substring(0, 20) + "...");
+
+        const authToken = AuthService.getToken();
+        if (authToken) {
+          const apiBase = "https://45.93.137.91.nip.io/api";
+          await fetch(`${apiBase}/User/SetFCMToken`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${authToken}`,
+            },
+            body: JSON.stringify({ token: fcmToken, deviceType: 2 }),
+          });
+          console.log("[FCM] Token sent to backend");
         }
-    onForegroundMessage((payload) => {
+      }
+
+      onMessage(messaging, (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);
       });
+    } catch (err) {
+      console.error("[FCM] Setup error:", err);
+    }
   }
 
-  async function handleEnableNotifications() {
+  async function handleEnable() {
     setShowPrompt(false);
-    await initFCM();
+
+    // This MUST be synchronous from a user gesture
+    const permission = await Notification.requestPermission();
+    console.log("[FCM] Permission result:", permission);
+
+    if (permission === "granted") {
+      await setupFCM();
+    }
   }
 
   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">
@@ -65,7 +105,7 @@ export default function NotificationHandler() {
               <p className="text-gray-600 text-sm mt-0.5">اسمح بالإشعارات للبقاء على اطلاع بحجوزاتك وعروضنا.</p>
               <div className="flex gap-2 mt-3">
                 <button
-                  onClick={handleEnableNotifications}
+                  onClick={handleEnable}
                   className="px-4 py-1.5 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 transition-colors"
                 >
                   تفعيل
@@ -82,7 +122,6 @@ export default function NotificationHandler() {
         </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">