SweetHome/app/components/NotificationHandler.js

"use client";

import { useEffect, useState, useRef } from "react";
import { requestNotificationPermission, onForegroundMessage } from "../utils/firebase";
import AuthService from "../services/AuthService";

export default function NotificationHandler() {
  const [notification, setNotification] = useState(null);
  const [showPrompt, setShowPrompt] = useState(false);
  const initialized = useRef(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (initialized.current) return;
      initialized.current = true;

      const token = AuthService.getToken();
      if (!token) 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();
        }
        // "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) + "...");
    }
    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);
    });
  }

  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">
              <span className="text-xl">🏠</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="font-bold text-gray-900 text-sm">{notification.title}</p>
              <p className="text-gray-600 text-sm mt-0.5">{notification.body}</p>
            </div>
            <button
              onClick={() => setNotification(null)}
              className="text-gray-400 hover:text-gray-600 flex-shrink-0"
            >
              ✕
            </button>
          </div>
        </div>
      )}
    </>
  );
}