import { socketManager } from '@/lib/realtime'

// Connect (returns existing connection if available)
const socket = socketManager.connect(authToken)

// Emit events
socketManager.emit('message:new', { channelId, content })

// Subscribe to events
const unsubscribe = socketManager.on('message:new', (data) => {
  console.log('New message:', data)
})

// Disconnect
socketManager.disconnect()

import { useSocket } from '@/hooks/use-socket'

function ChatComponent() {
  const { isConnected, emit, subscribe, socketId } = useSocket()

  useEffect(() => {
    if (!isConnected) return

    const unsubscribe = subscribe('message:new', (message) => {
      console.log('New message:', message)
    })

    return unsubscribe
  }, [isConnected, subscribe])

  const sendMessage = () => {
    emit('message:new', { content: 'Hello!' })
  }
}

import { usePresence } from '@/hooks/use-presence'

function PresenceDemo() {
  const {
    presence,
    getPresence,
    setOnline,
    setAway,
    setDnd,
    setOffline,
    setCustomStatus,
    currentStatus,
  } = usePresence(['user-1', 'user-2', 'user-3'])

  // Get presence for specific user
  const user1Presence = getPresence('user-1')
  console.log(user1Presence.status) // 'online' | 'away' | 'dnd' | 'offline'
  console.log(user1Presence.lastSeen) // ISO timestamp

  // Set own status
  return (
    <div>
      <button onClick={setOnline}>Set Online</button>
      <button onClick={setAway}>Set Away</button>
      <button onClick={setDnd}>Set DND</button>
      <button onClick={() => setCustomStatus('In a meeting')}>
        Set Custom Status
      </button>
    </div>
  )
}

const { recordActivity } = usePresence(userIds, {
  autoAwayTimeout: 300000, // 5 minutes
  heartbeatInterval: 30000, // 30 seconds
  trackLastSeen: true,
})

// Manually record activity
recordActivity()

import { useTyping } from '@/hooks/use-typing'

function MessageInput({ channelId }) {
  const {
    typingUsers,
    handleTyping,
    forceStopTyping,
  } = useTyping(channelId)

  const handleChange = (e) => {
    const value = e.target.value
    setValue(value)

    // Trigger typing indicator on every keystroke
    if (value.trim()) {
      handleTyping()
    } else {
      forceStopTyping()
    }
  }

  const handleSend = () => {
    // Stop typing immediately on send
    forceStopTyping()
    sendMessage()
  }

  return (
    <div>
      <input onChange={handleChange} />
      <TypingIndicator users={typingUsers} />
    </div>
  )
}

import { useRealtime } from '@/contexts/realtime-context'

function Component() {
  const {
    connectionState, // 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error'
    isConnected,
    socketId,
    reconnectAttempts,
    lastError,
    reconnect,
    disconnect,
    clearError,
  } = useRealtime()

  return (
    <div>
      <p>Status: {connectionState}</p>
      <p>Attempts: {reconnectAttempts}</p>
      {lastError && <p>Error: {lastError.message}</p>}
      <button onClick={reconnect}>Reconnect</button>
    </div>
  )
}

import { SOCKET_EVENTS } from '@/lib/realtime'

// Message sent acknowledgement
socket.on(SOCKET_EVENTS.MESSAGE_SENT, (data) => {
  console.log('Message sent:', data.messageId)
})

// Message delivered (received by recipient)
socket.on(SOCKET_EVENTS.MESSAGE_DELIVERED, (data) => {
  console.log('Delivered to:', data.deliveredCount, 'users')
})

// Message read
socket.on(SOCKET_EVENTS.MESSAGE_READ, (data) => {
  console.log('Read by:', data.userId)
})

// Message failed
socket.on(SOCKET_EVENTS.MESSAGE_FAILED, (data) => {
  console.error('Failed:', data.errorMessage)
  if (data.retryable) {
    // Retry sending
  }
})

interface MessageSentPayload {
  clientMessageId: string // Client-side ID for optimistic updates
  messageId: string // Server-assigned ID
  sentAt: string // ISO timestamp
}

interface MessageDeliveredPayload {
  messageId: string
  deliveredCount?: number // For group chats
  totalRecipients?: number
  deliveredAt: string
}

interface MessageReadPayload {
  messageId: string
  userId: string // User who read it
  readCount?: number // For group chats
  totalRecipients?: number
  readAt: string
}

interface MessageFailedPayload {
  clientMessageId: string
  errorCode: string
  errorMessage: string
  retryable: boolean
}

export const SOCKET_EVENTS = {
  // Connection
  CONNECT: 'connect',
  DISCONNECT: 'disconnect',
  ERROR: 'error',

  // Messages
  MESSAGE_NEW: 'message:new',
  MESSAGE_UPDATE: 'message:update',
  MESSAGE_DELETE: 'message:delete',
  MESSAGE_TYPING: 'message:typing',

  // Message Delivery
  MESSAGE_SENT: 'message:sent',
  MESSAGE_DELIVERED: 'message:delivered',
  MESSAGE_READ: 'message:read',
  MESSAGE_FAILED: 'message:failed',
  MESSAGE_ACK: 'message:ack',

  // Presence
  PRESENCE_UPDATE: 'presence:update',
  PRESENCE_SUBSCRIBE: 'presence:subscribe',

  // Channels
  CHANNEL_JOIN: 'channel:join',
  CHANNEL_LEAVE: 'channel:leave',
  CHANNEL_UPDATE: 'channel:update',

  // Reactions
  REACTION_ADD: 'reaction:add',
  REACTION_REMOVE: 'reaction:remove',
}

// WebSocket config
export const SOCKET_CONFIG = {
  url: process.env.NEXT_PUBLIC_SOCKET_URL || 'http://localhost:3001',
  options: {
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 1000,
    timeout: 10000,
  },
}

// Typing config
const typingConfig = {
  debounceMs: 300, // Debounce before sending
  timeoutMs: 5000, // Remove indicator after timeout
  throttleMs: 2000, // Min time between events
}

// Presence config
const presenceConfig = {
  autoAwayTimeout: 300000, // 5 minutes
  heartbeatInterval: 30000, // 30 seconds
  trackLastSeen: true,
}