"use client"

/**
 * NotificationBell — utility-bar trigger for the shell-global inbox sheet.
 *
 * Profile, sales, and workspace notifications only. Product-local rule builders
 * (for example Learning Activities auto notification) live on their own surfaces.
 */

import * as React from "react"

import { NotificationSheet } from "@/components/notification-sheet"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { railTriggerProps } from "@/lib/floating-sheet-panel"
import { MOCK_NOTIFICATIONS } from "@/lib/mock/notifications"
import {
  applyNotificationReadState,
  visibleNotifications,
} from "@/lib/notifications"
import { usePersistedState } from "@exxatdesignux/ui/lib/persisted-state"
import { cn } from "@/lib/utils"

const READ_STATE_KEY = "notifications:read:v1"

export function NotificationBell({ className }: { className?: string }) {
  const [open, setOpen] = React.useState(false)
  const [readIds, setReadIds] = usePersistedState<string[]>(READ_STATE_KEY, [])

  const items = React.useMemo(() => {
    const visible = visibleNotifications(MOCK_NOTIFICATIONS)
    return applyNotificationReadState(visible, readIds)
  }, [readIds])

  const unreadCount = items.filter(item => !item.read).length

  function markRead(id: string) {
    setReadIds((prev: string[]) => (prev.includes(id) ? prev : [...prev, id]))
  }

  function markAllRead() {
    setReadIds(items.map(item => item.id))
  }

  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label={
              unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"
            }
            aria-expanded={open}
            className={cn("relative", className)}
            onClick={() => setOpen(current => !current)}
            {...railTriggerProps()}
          >
            <i className="fa-light fa-bell text-sm" aria-hidden="true" />
            {unreadCount > 0 ? (
              <Badge
                variant="count"
                className="absolute -top-1 -right-1 h-4 min-w-4 px-1 text-2xs"
              >
                {unreadCount > 9 ? "9+" : unreadCount}
              </Badge>
            ) : null}
          </Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">Notifications</TooltipContent>
      </Tooltip>

      <NotificationSheet
        open={open}
        onOpenChange={setOpen}
        items={items}
        onMarkRead={markRead}
        onMarkAllRead={markAllRead}
      />
    </>
  )
}