<template>
  <Menu as="div" class="relative inline-block">
    <MenuButton>
      <HeaderWidget :notifications="unreadCount > 0 ? unreadCount : undefined">
        <BellIcon class="h-5" />
      </HeaderWidget>
    </MenuButton>

    <transition
      enter-active-class="transition ease-out duration-100"
      enter-from-class="transform opacity-0 scale-95"
      enter-to-class="transform opacity-100 scale-100"
      leave-active-class="transition ease-in duration-75"
      leave-from-class="transform opacity-100 scale-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <MenuItems
        class="absolute bg-zinc-900 right-0 top-10 z-50 w-96 origin-top-right focus:outline-none shadow-md rounded-md overflow-hidden"
      >
        <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-800">
          <h3 class="text-sm font-semibold text-zinc-100">Notifications</h3>
          <button
            v-if="unreadCount > 0"
            @click="markAllRead()"
            class="text-xs text-blue-500 hover:text-blue-400"
          >
            Mark all read
          </button>
        </div>

        <div class="max-h-96 overflow-y-auto">
          <div v-if="!loaded" class="px-4 py-6 text-center text-sm text-zinc-500">
            Loading&hellip;
          </div>
          <div v-else-if="error" class="px-4 py-4 text-xs text-red-500">
            Couldn't load notifications: {{ error }}
          </div>
          <div
            v-else-if="notifications.length === 0"
            class="px-4 py-6 text-center text-sm text-zinc-500"
          >
            You're all caught up.
          </div>
          <button
            v-else
            v-for="n in notifications"
            :key="n.id"
            @click="() => !n.read && markRead(n.id)"
            class="w-full text-left px-4 py-3 border-b border-zinc-800/60 last:border-0 hover:bg-zinc-800/60 transition"
            :class="!n.read ? 'bg-blue-500/5' : ''"
          >
            <div class="flex items-start gap-x-2">
              <div
                class="mt-1 h-1.5 w-1.5 rounded-full shrink-0"
                :class="n.read ? 'bg-transparent' : 'bg-blue-500'"
              />
              <div class="min-w-0">
                <p class="text-sm font-medium text-zinc-200 truncate">{{ n.title }}</p>
                <p class="text-xs text-zinc-400 mt-0.5 line-clamp-2">{{ n.description }}</p>
                <p class="text-[11px] text-zinc-600 mt-1">{{ formatDate(n.created) }}</p>
              </div>
            </div>
          </button>
        </div>
      </MenuItems>
    </transition>
  </Menu>
</template>

<script setup lang="ts">
import { Menu, MenuButton, MenuItems } from "@headlessui/vue";
import { BellIcon } from "@heroicons/vue/20/solid";
import HeaderWidget from "./HeaderWidget.vue";
import { useNotifications } from "~/composables/notifications";

const { notifications, loaded, error, unreadCount, startPolling, markRead, markAllRead } =
  useNotifications();

startPolling();

function formatDate(iso: string) {
  try {
    const date = new Date(iso);
    const diffMs = Date.now() - date.getTime();
    const diffMin = Math.round(diffMs / 60000);
    if (diffMin < 1) return "just now";
    if (diffMin < 60) return `${diffMin}m ago`;
    const diffHr = Math.round(diffMin / 60);
    if (diffHr < 24) return `${diffHr}h ago`;
    return date.toLocaleDateString();
  } catch {
    return iso;
  }
}
</script>
