'use client'

import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
import { Button } from '@admin/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@admin/components/ui/dropdown-menu'
import { Spinner } from '@admin/components/ui/spinner'
import { useSendTestWebhook } from '@admin/hooks/use-webhooks'
import { MoreHorizontal } from 'lucide-react'

interface WebhookActionsProps {
  webhook: WebhookEndpointListItem
  onEdit: (webhook: WebhookEndpointListItem) => void
  onDelete: (webhook: WebhookEndpointListItem) => void
}

export function WebhookActions({ webhook, onEdit, onDelete }: WebhookActionsProps) {
  const sendTest = useSendTestWebhook()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            variant="ghost"
            className="size-8 p-0"
            aria-label={`Open webhook actions for ${webhook.name}`}
          >
            <span className="sr-only">Open webhook actions</span>
            {sendTest.isPending ? (
              <Spinner className="size-4" />
            ) : (
              <MoreHorizontal className="size-4" />
            )}
          </Button>
        }
      />
      <DropdownMenuContent align="end">
        <DropdownMenuItem
          closeOnClick={false}
          disabled={sendTest.isPending}
          aria-busy={sendTest.isPending}
          onClick={() => sendTest.mutate(webhook.id)}
        >
          {sendTest.isPending ? 'Testing…' : 'Test'}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => onEdit(webhook)}>Edit</DropdownMenuItem>
        <DropdownMenuItem variant="destructive" onClick={() => onDelete(webhook)}>
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}