'use client'

// ST-1105: Bell-icon in de NavBar met badge van het aantal open Claude-vragen
// voor de ingelogde gebruiker (M11).
//
// Klik opent <NotificationsSheet />. Story-assignee-vragen ("voor jou") worden
// gemarkeerd met een ring-accent op het badge zodat ook bij gelijke totaal-
// count de prioriteit zichtbaar is.

import { Bell } from 'lucide-react'
import { useNotificationsStore } from '@/stores/notifications-store'
import { NotificationsSheet } from '@/components/notifications/notifications-sheet'
import { cn } from '@/lib/utils'

interface NotificationsBellProps {
  currentUserId: string
  isDemo: boolean
}

export function NotificationsBell({ currentUserId, isDemo }: NotificationsBellProps) {
  const total = useNotificationsStore((s) => s.questions.length)
  const forYou = useNotificationsStore((s) =>
    s.questions.filter((q) => q.assignee_id === currentUserId).length,
  )

  return (
    <NotificationsSheet
      currentUserId={currentUserId}
      isDemo={isDemo}
      trigger={
        <button
          type="button"
          aria-label={`Notificaties — ${total} open vragen${forYou > 0 ? `, ${forYou} voor jou` : ''}`}
          className="relative inline-flex h-9 w-9 items-center justify-center rounded-full hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          <Bell className="h-5 w-5 text-foreground" />
          {total > 0 && (
            <span
              role="status"
              className={cn(
                'absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none',
                forYou > 0
                  ? 'bg-error text-error-foreground ring-2 ring-background'
                  : 'bg-primary text-primary-foreground',
              )}
            >
              {total > 9 ? '9+' : total}
            </span>
          )}
        </button>
      }
    />
  )
}