'use client'

import type { WebhookDeliveryEntry } from '@admin/actions/webhooks'
import type { ColumnDef } from '@tanstack/react-table'
import { SortIndicator } from '@admin/components/shared/sort-indicator'
import { Badge } from '@admin/components/ui/badge'
import { Button } from '@admin/components/ui/button'
import { formatDistanceToNow } from 'date-fns'

export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
  {
    accessorKey: 'statusCode',
    size: 110,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by Status, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">Status</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => (
      <Badge
        variant={row.original.success ? 'outline' : 'destructive'}
        title={row.original.error ?? undefined}
      >
        {row.original.statusCode ?? 'error'}
      </Badge>
    )
  },
  {
    accessorKey: 'event',
    size: 260,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by Event, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">Event</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => <span className="truncate font-mono text-xs">{row.original.event}</span>
  },
  {
    accessorKey: 'webhookName',
    size: 220,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by Endpoint, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">Endpoint</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => <span className="truncate">{row.original.webhookName}</span>
  },
  {
    accessorKey: 'attempt',
    size: 100,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by Attempt, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">Attempt</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => <span className="tabular-nums">{row.original.attempt}</span>
  },
  {
    accessorKey: 'durationMs',
    size: 110,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by Duration, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">Duration</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => (
      <span className="text-muted-foreground tabular-nums">{row.original.durationMs} ms</span>
    )
  },
  {
    accessorKey: 'createdAt',
    size: 160,
    header: ({ column }) => {
      const sortDirection = column.getIsSorted()
      const sortLabel =
        sortDirection === 'asc'
          ? 'sorted ascending'
          : sortDirection === 'desc'
            ? 'sorted descending'
            : 'not sorted'

      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
          aria-label={`Sort by When, ${sortLabel}`}
          aria-sort={
            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
          }
        >
          <span className="truncate">When</span>
          <SortIndicator direction={sortDirection} />
        </Button>
      )
    },
    cell: ({ row }) => (
      <span className="truncate text-muted-foreground">
        {formatDistanceToNow(new Date(row.original.createdAt), {
          addSuffix: true
        })}
      </span>
    )
  }
]