<script setup>
import {formatTimeAgo} from '@vueuse/core'

const { isNotificationsSlideoverOpen } = useDashboard()

watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
  if(newVal === true) {
    await setup()
  }
})

const notifications = ref([])

const setup = async () => {
  try {
    notifications.value = await useNuxtApp().$api("/api/resource/notifications_items")
  } catch (e) {
    notifications.value = []
  }
}

setup()

const setNotificationAsRead = async (notification) => {
  try {
    await useNuxtApp().$api(`/api/resource/notifications_items/${notification.id}`, {
      method: "PUT",
      body: { readAt: new Date() }
    })
  } catch (e) {
    // noop: endpoint optional in older/newer backend variants
  }
  setup()

}
</script>

<template>
  <USlideover v-model:open="isNotificationsSlideoverOpen" title="Benachrichtigungen" side="right">
    <template #body>
      <NuxtLink
          v-for="notification in notifications"
          :key="notification.id"
          :to="notification.link"
          class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
          @click="setNotificationAsRead(notification)"
      >
        <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
          <UAvatar alt="FEDEO" size="md" />
        </UChip>

        <div class="text-sm flex-1">
          <p class="flex items-center justify-between">
            <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>

            <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
          </p>
          <p class="text-gray-500 dark:text-gray-400">
            {{ notification.message }}
          </p>
        </div>
      </NuxtLink>
    </template>
  </USlideover>
</template>
