<script setup lang="ts">
import { ref, watch } from "vue";
import { router } from "@inertiajs/vue3";
import { Notification } from "@/Types/types";
import axios from "axios";

const activeToasts = ref<Notification[]>([])
const seenNotificationIds = ref<Set<number>>(new Set())
const achievementSound = new Audio('/sounds/seatBelt.wav')

function handleNewNotifications(notifications: Notification[]) {
    if (!notifications?.length) return

    const newToasts: Notification[] = []
    for (const n of notifications) {
        if (!seenNotificationIds.value.has(n.id)) {
            seenNotificationIds.value.add(n.id)
            newToasts.push(n)
        }
    }

    if (!newToasts.length) return
    activeToasts.value.push(...newToasts)
    achievementSound.play().catch(() => {})
}

async function dismissToast(notification: Notification) {
    activeToasts.value = activeToasts.value.filter(n => n.id !== notification.id)
    await axios.patch(`/notifications/${notification.id}/read`)
}

router.on('success', (event) => {
    handleNewNotifications(event.detail.page.props.achievement_notifications as Notification[] ?? [])
})

// Handle initial page load notifications
import { usePage } from "@inertiajs/vue3";
import { SharedProps } from "@/Types/types";
const page = usePage<SharedProps>().props;
watch(
    () => page.achievement_notifications,
    handleNewNotifications,
    { immediate: true }
)
</script>

<template>
    <div class="toast-stack">
        <TransitionGroup name="toast">
            <v-card
                v-for="notification in activeToasts"
                :key="notification.id"
                class="toast-card glass"
                rounded="lg"
                elevation="4"
                max-width="360"
            >
                <v-card-text class="d-flex align-center ga-3">
                    <v-icon icon="mdi-trophy" color="amber" size="32" />
                    <div>
                        <div class="text-subtitle-2 font-weight-bold">{{ notification.title }}</div>
                        <div class="text-body-2 text-medium-emphasis">{{ notification.body }}</div>
                    </div>
                    <v-btn
                        icon="mdi-close"
                        variant="text"
                        size="small"
                        class="ml-auto"
                        @click="dismissToast(notification)"
                    />
                </v-card-text>
            </v-card>
        </TransitionGroup>
    </div>
</template>

<style scoped>
.toast-stack {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 9999;
    max-height: 50dvh;
    overflow-y: scroll;
    scrollbar-width: none;
}

.toast-stack::-webkit-scrollbar { display: none; }
.toast-card { flex-shrink: 0; }

.toast-enter-from { opacity: 0; transform: translateX(100%); }
.toast-leave-to   { opacity: 0; transform: translateX(100%); }
.toast-enter-active,
.toast-leave-active { transition: all 0.3s ease; }
</style>
