"use client"

/**
 * UtilityBarWhatsNew — megaphone trigger for the shared What's new sheet.
 *
 * The sheet itself mounts once in {@link WhatsNewSheetProvider}. This module
 * only supplies bar triggers (icon and More menu row). Always visible even
 * when every note is dismissed or the catalog has no entries (empty sheet).
 */

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import {
  useWhatsNewSheet,
  WhatsNewSheetTrigger,
} from "@/components/whats-new-sheet-context"
import { cn } from "@/lib/utils"

/** Desktop / roomy bar — megaphone icon with unread count. */
export function UtilityBarWhatsNew({ className }: { className?: string }) {
  const { open, openSheet, unseenCount } = useWhatsNewSheet()

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <WhatsNewSheetTrigger
          className={cn("relative", className)}
          open={open}
          unseenCount={unseenCount}
          onOpen={openSheet}
        />
      </TooltipTrigger>
      <TooltipContent side="bottom">What&apos;s new</TooltipContent>
    </Tooltip>
  )
}

/** Narrow bar — What's new lives under More. */
export function UtilityBarWhatsNewInMore({
  children,
}: {
  children: (args: {
    menuItem: React.ReactNode
    unseenCount: number
  }) => React.ReactNode
}) {
  const { openSheet, unseenCount } = useWhatsNewSheet()

  const menuItem = (
    <DropdownMenuItem
      className="gap-2"
      onSelect={event => {
        event.preventDefault()
        queueMicrotask(() => openSheet())
      }}
    >
      <i className="fa-light fa-megaphone w-4 text-center text-sm" aria-hidden="true" />
      <span className="flex-1">What&apos;s new</span>
      {unseenCount > 0 ? (
        <Badge variant="count" className="h-4 min-w-4 px-1 text-2xs">
          {unseenCount}
        </Badge>
      ) : null}
    </DropdownMenuItem>
  )

  return <>{children({ menuItem, unseenCount })}</>
}