<script setup lang="ts">
  import { ref, onMounted, watch } from "vue";
  import {
    Toast,
    ToastClose,
    ToastDescription,
    ToastProvider,
    ToastTitle,
    ToastViewport,
  } from "@/components/ui/toast";
  import { Bell } from "lucide-vue-next";
  import { useAuthStore } from "@/stores/auth";
  import "@/../styles/tailwind.css";

  // Track notifications
  const notifications = ref<
    Array<{
      id: string;
      title: string;
      description: string;
      type?: "default" | "success" | "info" | "warning" | "error";
      duration?: number;
    }>
  >([]);

  // Auth store
  const authStore = useAuthStore();

  // Handle incoming push messages
  function handlePushMessage(event: MessageEvent) {
    if (event.data && event.data.type === "PUSH_NOTIFICATION") {
      const { title, body, transactionId, type } = event.data;

      // Add to notifications
      notifications.value.push({
        id: transactionId || Date.now().toString(),
        title: title || "New Notification",
        description: body || "You have a new notification",
        type:
          type === "income"
            ? "success"
            : type === "expense"
              ? "warning"
              : "info",
        duration: 5000,
      });
    }
  }

  // Remove a notification
  function removeNotification(id: string) {
    const index = notifications.value.findIndex((n) => n.id === id);
    if (index !== -1) {
      notifications.value.splice(index, 1);
    }
  }

  // Set up message listener when authenticated
  watch(
    () => authStore.isAuthenticated,
    (authenticated) => {
      if (authenticated && navigator.serviceWorker) {
        navigator.serviceWorker.addEventListener("message", handlePushMessage);
      }
    },
  );

  onMounted(() => {
    // Set up service worker message listener
    if (authStore.isAuthenticated && navigator.serviceWorker) {
      navigator.serviceWorker.addEventListener("message", handlePushMessage);
    }

    // Clean up on unmount
    return () => {
      if (navigator.serviceWorker) {
        navigator.serviceWorker.removeEventListener(
          "message",
          handlePushMessage,
        );
      }
    };
  });
</script>

<template>
  <ToastProvider>
    <Toast
      v-for="notification in notifications"
      :key="notification.id"
      :class="notification.type ? `type-${notification.type}` : ''"
      @close="removeNotification(notification.id)">
      <div class="flex items-center gap-2">
        <Bell class="h-5 w-5" />
        <ToastTitle>{{ notification.title }}</ToastTitle>
      </div>
      <ToastDescription>{{ notification.description }}</ToastDescription>
      <ToastClose />
    </Toast>
    <ToastViewport />
  </ToastProvider>
</template>
<!-- 
<style scoped>
  .type-success {
    @apply border-green-500 bg-green-50;
  }
  .type-warning {
    @apply border-amber-500 bg-amber-50;
  }
  .type-error {
    @apply border-red-500 bg-red-50;
  }
  .type-info {
    @apply border-blue-500 bg-blue-50;
  }
</style> -->
