"use client"

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { senderInitial } from "@/lib/sender-display"
import type { CollabPresenceUser } from "@/lib/drive/use-collab-presence"
import { cn } from "@/lib/utils"

const MAX_VISIBLE = 5

export function CollabPresenceAvatars({
  users,
  className,
}: {
  users: CollabPresenceUser[]
  className?: string
}) {
  const remoteUsers = users.filter((user) => !user.isLocal)
  if (remoteUsers.length === 0) return null

  const visible = remoteUsers.slice(0, MAX_VISIBLE)
  const overflow = remoteUsers.length - visible.length

  return (
    <TooltipProvider delayDuration={200}>
      <div className={cn("flex items-center -space-x-1.5", className)}>
        {visible.map((user) => (
          <Tooltip key={user.clientId}>
            <TooltipTrigger asChild>
              <div
                className="flex size-8 items-center justify-center rounded-full border-2 border-white text-xs font-semibold text-white shadow-sm dark:border-[#202124]"
                style={{ backgroundColor: user.color }}
                aria-label={user.name}
              >
                {senderInitial(user.name)}
              </div>
            </TooltipTrigger>
            <TooltipContent side="bottom">{user.name}</TooltipContent>
          </Tooltip>
        ))}
        {overflow > 0 ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <div
                className="flex size-8 items-center justify-center rounded-full border-2 border-white bg-[#5f6368] text-xs font-semibold text-white shadow-sm dark:border-[#202124]"
                aria-label={`${overflow} autre(s) utilisateur(s)`}
              >
                +{overflow}
              </div>
            </TooltipTrigger>
            <TooltipContent side="bottom">
              {remoteUsers.slice(MAX_VISIBLE).map((u) => u.name).join(", ")}
            </TooltipContent>
          </Tooltip>
        ) : null}
      </div>
    </TooltipProvider>
  )
}