<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Firebase Push Notification Example</title>

  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-messaging.js"></script>

</head>
<body>
  <h1>Firebase Push Notification Example</h1>
  <button id="enable-notifications">Enable Notifications</button>
  
  <p id="token-output"></p> <!-- Will display the token here -->
  <button id="copy-token" style="display: none;">Copy Token</button> <!-- Copy button -->

  <script>
    // Firebase Configuration
    const firebaseConfig = {
        apiKey: "AIzaSyCi_8yjwFA5XWnqG4-DvTP1G-BE-e6pDVs",
        authDomain: "projectnotix.firebaseapp.com",
        projectId: "projectnotix",
        storageBucket: "projectnotix.appspot.com",
        messagingSenderId: "633354009108",
        appId: "1:633354009108:web:6987b56d261a84aae98501",
        measurementId: "G-PWWK25TF8W"
    };

    // Initialize Firebase
    const app = firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging(app);

    // Request Notification Permission
    document.getElementById("enable-notifications").addEventListener("click", () => {
      // Ask for permission to send notifications
      Notification.requestPermission().then(permission => {
        if (permission === "granted") {
          console.log("Notification permission granted.");
          // Get the device token
          getDeviceToken();
        } else {
          console.error("Notification permission denied.");
        }
      });
    });

    // Get the Device Token
    function getDeviceToken() {
      messaging.getToken({
        vapidKey: "BAw5RsMQ2S0cIYYNoftxe3WGLyqcwThJ5DV0Mg5euPvzzgFGHXK1UaFmXseMR9Npe9dvuH4Pnu06FOum5DHSf4M" // Your VAPID key
      }).then((token) => {
        if (token) {
          console.log("Device token:", token);
          // Display the token in the HTML
          document.getElementById("token-output").textContent = `Device Token: ${token}`;
          // Show the "Copy Token" button
          document.getElementById("copy-token").style.display = "inline-block";
        } else {
          console.log("No device token available.");
        }
      }).catch((err) => {
        console.error("Error getting device token:", err);
      });
    }

    // Copy Token to Clipboard
    document.getElementById("copy-token").addEventListener("click", () => {
      const tokenText = document.getElementById("token-output").textContent.replace("Device Token: ", "");
      
      // Create a temporary text area to copy the token
      const textArea = document.createElement("textarea");
      textArea.value = tokenText;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);

      alert("Token copied to clipboard!");
    });

    // Initialize Service Worker for Background Notifications
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then((registration) => {
          console.log("Service Worker registered with scope:", registration.scope);
        })
        .catch((err) => {
          console.error("Service Worker registration failed:", err);
        });
    }

  </script>
</body>
</html>
