'use client'

import React from 'react'
import { PresenceUser } from '@/hooks/use-brainstorm-socket'

function Cursor({ x, y, name, color }: { x: number; y: number; name: string; color: string }) {
  return (
    <div
      className="absolute pointer-events-none z-50 transition-all duration-75"
      style={{ transform: `translate(${x}px, ${y}px)` }}
    >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
        <path d="M0 0L16 6L8 8L6 16L0 0Z" fill={color} />
      </svg>
      <div
        className="mt-3 ml-3 px-2 py-0.5 rounded-full text-[10px] font-bold text-white whitespace-nowrap shadow-lg"
        style={{ backgroundColor: color }}
      >
        {name}
      </div>
    </div>
  )
}

export function LiveCursors({ others }: { others: PresenceUser[] }) {
  return (
    <div className="absolute inset-0 pointer-events-none z-50">
      {others.map((user) => {
        if (!user.cursor) return null
        return (
          <Cursor
            key={user.userId}
            x={user.cursor.x}
            y={user.cursor.y}
            name={user.name}
            color={user.color}
          />
        )
      })}
    </div>
  )
}

export function useCursorTracking(
  containerRef: React.RefObject<HTMLDivElement | null>,
  moveCursor: (cursor: { x: number; y: number } | null) => void
) {
  React.useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const handleMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect()
      moveCursor({ x: e.clientX - rect.left, y: e.clientY - rect.top })
    }

    const handleLeave = () => {
      moveCursor(null)
    }

    container.addEventListener('mousemove', handleMove)
    container.addEventListener('mouseleave', handleLeave)
    return () => {
      container.removeEventListener('mousemove', handleMove)
      container.removeEventListener('mouseleave', handleLeave)
    }
  }, [containerRef, moveCursor])
}

export function PresenceAvatars({ others }: { others: PresenceUser[] }) {
  if (others.length === 0) return null

  return (
    <div className="flex items-center gap-1">
      {others.slice(0, 4).map((user) => {
        const initial = (user.name || '?').charAt(0).toUpperCase()
        return (
          <div
            key={user.userId}
            className="w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold text-white border-2 border-white dark:border-zinc-900 shadow-sm"
            style={{ backgroundColor: user.color, marginLeft: '-6px' }}
            title={user.name}
          >
            {initial}
          </div>
        )
      })}
      {others.length > 4 && (
        <span className="text-[9px] text-muted-foreground ml-1">+{others.length - 4}</span>
      )}
    </div>
  )
}