import { useMessageActions } from '@/hooks'
import { MessageActions, MessageContextMenu } from '@/components/chat'

function ChatMessage({ message }) {
  const { handleAction, getPermissions } = useMessageActions({
    channelId: message.channelId,
  })

  const permissions = getPermissions(message)

  return (
    <MessageContextMenu
      message={message}
      permissions={permissions}
      onAction={(action, data) => handleAction(action, message, data)}
    >
      <div className="group relative">
        <MessageItem message={message} />
        <MessageActions
          message={message}
          permissions={permissions}
          onAction={(action, data) => handleAction(action, message, data)}
        />
      </div>
    </MessageContextMenu>
  )
}

useMessageActions({
  channelId: string              // Required
  onReplyMessage?: (msg) => void
  onOpenThread?: (msg) => void
  onEditMessage?: (msg) => void
  onDeleteMessage?: (id) => Promise<void>
  onForwardMessage?: (msg) => void
  onReportMessage?: (msg) => void
  onViewMessageDetails?: (msg) => void
  enableBulkOperations?: boolean
})

// Default - Hover action bar
<MessageActions variant="default" position="right" />

// Compact - Inline actions
<MessageActions variant="compact" />

// Mobile - Floating sheet
<MessageActions variant="mobile" onClose={() => {}} />

// Full - Complete menu
<MessageContextMenu showAdvanced={true} />

// Simple - Minimal menu
<SimpleMessageContextMenu />

const { handleAction } = useMessageActions({
  channelId,
  onReplyMessage: (msg) => {
    setReplyTo(msg)
    focusInput()
  },
  onDeleteMessage: async (id) => {
    await deleteMessageMutation({ variables: { id } })
  },
})

const { selection, bulkHandlers } = useMessageActions({
  channelId,
  enableBulkOperations: true,
})

// Enter selection mode
selection.enterSelectionMode()

// Select messages
selection.toggleSelection(messageId)
selection.selectAll(messageIds)

// Bulk delete
await bulkHandlers.onBulkDelete(Array.from(selection.selectedMessages))

// Exit selection mode
selection.exitSelectionMode()

const [deleteMessage] = useMutation(DELETE_MESSAGE)

const { handleAction } = useMessageActions({
  channelId,
  onDeleteMessage: async (id) => {
    await deleteMessage({
      variables: { id },
      update(cache) {
        cache.evict({ id: cache.identify({ __typename: 'Message', id }) })
      },
    })
  },
})

function MobileMessage({ message }) {
  const [showActions, setShowActions] = useState(false)

  return (
    <>
      <div onTouchStart={() => setShowActions(true)}>
        <MessageItem message={message} />
      </div>

      {showActions && (
        <MessageActions
          variant="mobile"
          message={message}
          permissions={getPermissions(message)}
          onAction={handleAction}
          onClose={() => setShowActions(false)}
        />
      )}
    </>
  )
}

{selection.isSelectionMode && (
  <BulkMessageActions
    selectedCount={selection.selectedMessages.size}
    onDelete={() => bulkHandlers.onBulkDelete([...])}
    onForward={() => bulkHandlers.onBulkForward([...])}
    onCopy={() => bulkHandlers.onBulkCopy([...])}
    onClearSelection={selection.clearSelection}
  />
)}

// Get all permissions
const permissions = getPermissions(message)

// Check specific permission
if (permissions.canEdit) {
  // Show edit UI
}

// Check action availability
if (canPerformAction('delete', message)) {
  // Allow delete
}

const { isLoading } = useMessageActions({ channelId })

{
  isLoading && <LoadingSpinner />
}

<MessageActions
  className="custom-class"
  message={message}
  permissions={permissions}
  onAction={handleAction}
/>

// Hook
import { useMessageActions } from '@/hooks'

// Components
import {
  MessageActions,
  CompactMessageActions,
  MobileMessageActions,
  BulkMessageActions,
  MessageContextMenu,
  SimpleMessageContextMenu,
} from '@/components/chat'

// Types
import type { Message, MessageAction, MessageActionPermissions } from '@/types/message'